web_lib

commit bb50ecf4919003b22f3748f3d5ccf7d94a5a7260
parent c08c7bbdd7a1062ab21ccb15751cfe0b664fff01
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Sun,  8 Dec 2024 17:04:18 +0000

apps-lib: edit page header styles, edit layout view scroll handler. add page header blur store. add catch err util

Diffstat:
M
apps-lib/src/lib/components/layout_view.svelte
 | 
3
+++
M
apps-lib/src/lib/components/nav_toolbar.svelte
 | 
2
+-
M
apps-lib/src/lib/components/page_header.svelte
 | 
17
++++++++++++++++-
M
apps-lib/src/lib/stores/client.ts
 | 
2
++
M
apps-lib/src/lib/utils/client.ts
 | 
14
++++++++++++--

5 files changed, 34 insertions(+), 4 deletions(-)
diff --git a/apps-lib/src/lib/components/layout_view.svelte b/apps-lib/src/lib/components/layout_view.svelte
@@ -7,6 +7,7 @@
         layout_view_cover,
         nav_blur,
         nav_visible,
+        ph_blur,
         tabs_blur,
         tabs_visible,
     } from "$lib";
@@ -48,6 +49,8 @@
         else nav_blur.set(false);
         if (Math.max(el?.scrollTop || 0, 0) > 10) tabs_blur.set(true);
         else tabs_blur.set(false);
+        if (Math.max(el?.scrollTop || 0, 0) > 50) ph_blur.set(true);
+        else ph_blur.set(false);
     };
 </script>
 
diff --git a/apps-lib/src/lib/components/nav_toolbar.svelte b/apps-lib/src/lib/components/nav_toolbar.svelte
@@ -2,7 +2,7 @@
     import { Glyph, LogoCircleSm, ls, route } from "$lib";
 </script>
 
-<div class={`flex flex-row h-12 w-full px-6 justify-between items-center`}>
+<div class={`flex flex-row h-12 w-full px-6 pb-4 justify-between items-center`}>
     <button
         class={`flex flex-row gap-2 justify-start items-center`}
         on:click={async () => {
diff --git a/apps-lib/src/lib/components/page_header.svelte b/apps-lib/src/lib/components/page_header.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
     import {
+        app_layout,
+        Fill,
+        ph_blur,
         route,
         type NavigationParamTuple,
         type NavigationRoute,
     } from "$lib";
+    import { fade } from "svelte/transition";
 
     export let basis: {
         label:
@@ -18,7 +22,18 @@
     };
 </script>
 
-<div class={`flex flex-row w-full py-4 px-6 justify-between items-center`}>
+{#if $ph_blur}
+    <div
+        in:fade={{ duration: 200 }}
+        out:fade={{ delay: 50, duration: 200 }}
+        class={`z-20 fixed top-0 left-0 flex flex-row h-nav_${$app_layout} w-full justify-center items-center bg-layer-0-surface-blur/40 backdrop-blur-lg border-b-line border-layer-0-surface-edge/30`}
+    >
+        <Fill />
+    </div>
+{/if}
+<div
+    class={`z-20 sticky top-0 flex flex-row w-full pb-4 px-6 justify-between items-center`}
+>
     <div class={`flex flex-row justify-start items-center`}>
         {#if typeof basis.label === `string`}
             <p
diff --git a/apps-lib/src/lib/stores/client.ts b/apps-lib/src/lib/stores/client.ts
@@ -47,6 +47,8 @@ export const tabs_visible = writable<boolean>(false);
 export const tabs_blur = writable<boolean>(false);
 export const tabs_active = writable<number>(0);
 
+export const ph_blur = writable<boolean>(false);
+
 export const carousel_active = writable<boolean>(false);
 export const carousel_index = writable<number>(0);
 export const carousel_index_max = writable<number>(0);
diff --git a/apps-lib/src/lib/utils/client.ts b/apps-lib/src/lib/utils/client.ts
@@ -1,4 +1,5 @@
 import { goto } from "$app/navigation";
+import { page } from "$app/stores";
 import { app_toast, locale, ls, nav_prev, TOAST_MS, type AnchorRoute, type AppConfigType, type AppLayoutKey, type CallbackPromise, type CallbackPromiseGeneric, type GeolocationLatitudeFmtOption, type GlyphKey, type IToast, type LabelFieldKind, type LayerGlyphBasisKind, type NavigationParamTuple, type NavigationRoute, type NavigationRouteParamKey } from "$lib";
 import type { ColorMode, ThemeKey, ThemeLayer } from "@radroots/theme";
 import { get } from "svelte/store";
@@ -296,4 +297,14 @@ export const fmt_list_oxford = (list: string[], loc_key?: string): string => {
     if (list.length > 1 && loc_key) return `${list.slice(0, -1).map(i => `${loc_key}${i}`).join(', ')} ${`${get_store(ls)(`common.and`)}`} ${`${loc_key}${list[list.length - 1]}`}`;
     else if (list.length > 1) return `${list.slice(0, -1).join(', ')} ${`${get_store(ls)(`common.and`)}`} ${list[list.length - 1]}`;
     return list[0];
-};
-\ No newline at end of file
+};
+
+export const catch_err = async (e: unknown, fn_name: string): Promise<void> => {
+    const $page = get_store(page) as any;
+    if (e instanceof Error) {
+        const { name, message, stack, cause } = e
+        console.log(`(catch_err) ${$page.url.pathname} ${name} ${message} ${stack} ${cause}`)
+    } else {
+        console.log(`(catch_err) `, e)
+    }
+};