commit 27864823fbfd740eabf4345d6d5d28dd4a54a581 parent 621bbc1dc432104d93d83d4000e71a4603ed87d7 Author: triesap <137732411+triesap@users.noreply.github.com> Date: Sun, 10 Nov 2024 06:52:32 +0000 apps-lib: add/edit component styles. add select element temporary placeholder style. add/edit locales Diffstat:
7 files changed, 20 insertions(+), 13 deletions(-)
diff --git a/apps-lib/src/lib/components/envelope_lower.svelte b/apps-lib/src/lib/components/envelope_lower.svelte @@ -9,6 +9,7 @@ export let basis: { close: CallbackPromise; + full_cover?: boolean; label_close?: string | true; }; $: basis = basis; @@ -43,7 +44,7 @@ <Fill /> </button> <div - class={`relative flex flex-col h-[calc(100vh-12%)] w-full justify-start justify-start items-start bg-layer-1-surface rounded-t-2xl overflow-hidden`} + class={`relative flex flex-col h-[calc(100vh-12%)] w-full justify-start justify-start items-start bg-layer-1-surface rounded-t-3xl overflow-hidden`} > <div class={`absolute z-10 top-0 left-0 grid grid-cols-12 flex flex-row h-12 w-full px-4 pb-2 justify-center items-center ${el_c_scrolled ? `bg-layer-1-surface/30 backdrop-blur-lg` : ``} el-re`} @@ -77,7 +78,7 @@ }} > <div - class={`flex flex-row justify-start items-center h-1 w-10 rounded-full bg-layer-2-surface-edge`} + class={`flex flex-row justify-start items-center h-1 w-10 rounded-full ${basis.full_cover ? `bg-layer-1-surface shadow-md` : `bg-layer-2-surface-edge`}`} /> </button> <div @@ -89,7 +90,7 @@ <div bind:this={el_c} on:scroll={handle_scroll} - class={`flex flex-col w-full pt-12 justify-start items-center overflow-y-scroll overflow-x-hidden scroll-hide`} + class={`flex flex-col w-full ${basis.full_cover ? `h-full` : `pt-12`} justify-start items-center overflow-y-scroll overflow-x-hidden scroll-hide`} > <slot /> </div> diff --git a/apps-lib/src/lib/components/layout_trellis_line.svelte b/apps-lib/src/lib/components/layout_trellis_line.svelte @@ -16,7 +16,7 @@ ICb & ILabelOpt & IGlOpt & { - glyph_last?: boolean; + glyph_first?: boolean; }; }) | undefined = undefined; @@ -28,11 +28,11 @@ > {#if (basis?.label && `value` in basis?.label) || basis?.notify} <div - class={`flex flex-row h-5 w-full px-2 gap-2 justify-start items-center`} + class={`flex flex-row h-5 w-full px-2 gap-[6px] justify-start items-center`} > {#if `value` in basis?.label} <p - class={`${fmt_cl(basis?.label.classes)} font-sans font-[400] uppercase text-layer-2-glyph text-sm`} + class={`${fmt_cl(basis?.label.classes)} font-sans font-[400] uppercase text-layer-0-glyph text-sm`} > {basis?.label.value} </p> @@ -44,9 +44,9 @@ on:click={async () => { await basis?.notify?.callback(); }} - class={`${fmt_cl(basis?.notify.classes || `w-full`)} flex flex-row gap-1 justify-end items-center text-layer-1-glyph_d el-re`} + class={`${fmt_cl(basis?.notify.classes)} flex flex-row gap-1 justify-end items-center text-layer-0-glyph/80 el-re`} > - {#if `glyph` in basis?.notify && basis?.notify?.glyph && !basis.notify.glyph_last} + {#if `glyph` in basis?.notify && basis?.notify?.glyph && basis.notify.glyph_first} <Glyph basis={basis.notify.glyph} /> {/if} {#if `label` in basis?.notify && basis?.notify?.label && `value` in basis?.notify?.label} @@ -56,7 +56,7 @@ {basis?.notify.label.value} </p> {/if} - {#if `glyph` in basis?.notify && basis?.notify?.glyph && basis.notify.glyph_last} + {#if `glyph` in basis?.notify && basis?.notify?.glyph && !basis.notify.glyph_first} <Glyph basis={basis.notify.glyph} /> {/if} </button> diff --git a/apps-lib/src/lib/components/layout_window.svelte b/apps-lib/src/lib/components/layout_window.svelte @@ -3,7 +3,7 @@ </script> <div - class={`relative flex flex-col h-[100vh] w-full overflow-x-hidden overflow-y-hidden bg-layer-0-surface ${$app_tilt ? `scale-[96%] translate-y-4 rounded-t-[3.5rem]` : ``} delay-75 duration-200 el-re`} + class={`relative flex flex-col h-[100vh] w-full overflow-x-hidden overflow-y-hidden bg-layer-0-surface ${$app_tilt ? `scale-y-[96%] translate-y-4 rounded-t-[3rem]` : ``} delay-75 duration-200 el-re`} > <div class={`flex flex-col h-full w-full`}> <slot /> diff --git a/apps-lib/src/lib/components/trellis_row_display_value.svelte b/apps-lib/src/lib/components/trellis_row_display_value.svelte @@ -33,7 +33,7 @@ {:else if basis.label} {#if `value` in basis.label} <p - class={`${fmt_cl(basis.label.classes)} font-circ text-line_display line-clamp-1 ${get_label_classes(layer, basis.label.kind, hide_active)} transition-all`} + class={`${fmt_cl(basis.label.classes)} font-sans text-line_display line-clamp-1 ${get_label_classes(layer, basis.label.kind, hide_active)} transition-all`} > {basis.label.value} </p> diff --git a/apps-lib/src/lib/el/select_element.svelte b/apps-lib/src/lib/el/select_element.svelte @@ -14,7 +14,11 @@ ? parse_layer(0) : parse_layer(basis.layer); $: classes_layer = - typeof basis?.layer === `boolean` ? `` : `text-layer-${layer}-glyph_d`; + typeof basis?.layer === `boolean` + ? `` + : !value + ? `text-layer-${layer}-glyph_pl opacity-40` + : `text-layer-${layer}-glyph_d`; onMount(async () => { try { diff --git a/apps-lib/src/lib/locales/en/common.json b/apps-lib/src/lib/locales/en/common.json @@ -1,4 +1,6 @@ { + "current_location": "Current location", + "close": "Close", "make_primary": "Make primary", "accept": "Accept", "activation": "Activation", diff --git a/apps-lib/src/lib/stores/client.ts b/apps-lib/src/lib/stores/client.ts @@ -30,7 +30,7 @@ export const app_submit_route = writable<NavigationPreviousParam | undefined>(un export const app_blur = writable<boolean>(false); export const app_db = writable<boolean>(false); export const app_geoc = writable<boolean>(false); -export const app_thc = writable<ColorMode>(`dark`); +export const app_thc = writable<ColorMode>(`light`); export const app_th = writable<ThemeKey>(`os`); export const app_nostr_key = writable<string>(``); export const app_nostr_profiles = writable<string[]>([]);