commit 526e07783633788394198699a226202a67ebb51e
parent 2c06f57817c2153e62bb0d1db5e4e23cd94e6f8f
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Tue, 8 Oct 2024 10:41:31 +0000
apps-lib: edit layout components, add window conf, edit applayoutkey type, edit style maps,
Diffstat:
10 files changed, 61 insertions(+), 37 deletions(-)
diff --git a/apps-lib/src/lib/components/app_controls.svelte b/apps-lib/src/lib/components/app_controls.svelte
@@ -52,7 +52,7 @@
});
app_win.subscribe(([win_h, win_w]) => {
- if (win_h > 800) app_layout.set("lg");
+ if (win_h > 800) app_layout.set(`mobile_y`);
});
</script>
diff --git a/apps-lib/src/lib/components/layout_view.svelte b/apps-lib/src/lib/components/layout_view.svelte
@@ -12,8 +12,8 @@
import { onDestroy, onMount } from "svelte";
const styles: Record<AppLayoutKey, string> = {
- base: "pt-4",
- lg: "pt-16",
+ mobile_base: "pt-4",
+ mobile_y: "pt-16 pb-10",
};
export let basis:
@@ -39,8 +39,8 @@
}
});
- $: classes_nav = $nav_visible
- ? `pt-h_nav_${$app_layout}`
+ $: classes_layout = $nav_visible
+ ? `pt-h_nav_${$app_layout} ${styles[$app_layout]}`
: styles[$app_layout];
$: classes_tabs = $tabs_visible ? `pb-h_tabs_${$app_layout}` : ``;
$: classes_fade = basis?.fade ? `fade-in` : ``;
@@ -55,7 +55,7 @@
<div
bind:this={el}
- class={`${fmt_cl(basis?.classes)} absolute top-0 left-0 flex flex-col h-[100vh] w-full overflow-y-scroll scroll-hide ${!basis?.hide_padding ? classes_nav : ``} ${classes_tabs} ${classes_fade}`}
+ class={`${fmt_cl(basis?.classes)} absolute top-0 left-0 flex flex-col h-[100vh] w-full overflow-y-scroll scroll-hide ${!basis?.hide_padding ? classes_layout : ``} ${classes_tabs} ${classes_fade}`}
>
<slot />
</div>
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -15,6 +15,7 @@ export { default as Fill } from "./ui/fill.svelte";
export * from "./types/trellis";
export * from "./types/components";
export * from "./types/client";
+export * from "./types/conf";
export * from "./types/ui";
export * from "./types/nostr";
export * from "./stores/ndk";
@@ -24,6 +25,7 @@ export * from "./utils/dom";
export * from "./utils/styles";
export * from "./utils/carousel";
export * from "./utils/client";
+export * from "./utils/conf";
export * from "./utils/time";
export * from "./utils/geo";
export { default as EnvelopeLower } from "./components/envelope_lower.svelte";
diff --git a/apps-lib/src/lib/stores/client.ts b/apps-lib/src/lib/stores/client.ts
@@ -1,7 +1,8 @@
-import { type AppLayoutKey, type IToast, type NavigationPreviousParam } from "$lib";
+import { type AppLayoutKey, type IToast, type NavigationPreviousParam, } from "$lib";
import type { ColorMode, ThemeKey } from "@radroots/theme";
import { writable } from "svelte/store";
import { queryParam, queryParameters } from "sveltekit-search-params";
+
//@ts-ignore
const kv_name = import.meta.env.VITE_PUBLIC_KV_NAME;
if (!kv_name) throw new Error('Error: VITE_PUBLIC_KV_NAME is required');
@@ -16,7 +17,7 @@ export const qp_lng = queryParam<string>("lng");
export let kv: Keyva;
if (typeof window !== 'undefined') kv = new Keyva({ name: kv_name });
-export const app_layout = writable<AppLayoutKey>(`base`);
+export const app_layout = writable<AppLayoutKey>(`mobile_base`);
export const app_config = writable<boolean>(false);
export const app_render = writable<boolean>(false);
export const app_win = writable<[number, number]>([0, 0]);
diff --git a/apps-lib/src/lib/types/client.ts b/apps-lib/src/lib/types/client.ts
@@ -1,7 +1,6 @@
import { type IGlyph, type NavigationRoute } from "$lib";
import type { ThemeLayer } from "@radroots/theme";
-export type AppLayoutKey = 'lg' | 'base';
export type AnchorRoute = `/${string}`;
export type NavigationRouteParamNostrPublicKey = `nostr_pk`;
export type NavigationRouteParamRecordKey = `rkey`;
diff --git a/apps-lib/src/lib/types/conf.ts b/apps-lib/src/lib/types/conf.ts
@@ -0,0 +1,9 @@
+export type AppLayoutKey = 'mobile_base' | 'mobile_y';
+
+export type ClientWindow = {
+ app: {
+ layout: Record<AppLayoutKey, {
+ h: number;
+ }>;
+ }
+};
+\ No newline at end of file
diff --git a/apps-lib/src/lib/ui/toast.svelte b/apps-lib/src/lib/ui/toast.svelte
@@ -4,30 +4,13 @@
fmt_cl,
get_layout,
parse_layer,
- type AppLayoutKey,
+ toast_layout_map,
+ toast_style_map,
type IToast,
type IToastKind,
} from "$lib";
import Glyph from "./glyph.svelte";
- export const layout_toast_map: Map<AppLayoutKey, string> = new Map([
- [`base`, `pt-8`],
- [`lg`, `pt-16`],
- /*[
- `mobile-xl`, `pt-12`
- ]*/
- ]);
-
- const lm: Map<IToastKind, { inner: string; outer: string }> = new Map([
- [
- `simple`,
- {
- inner: `justify-center`,
- outer: `min-h-toast_min w-full px-4 rounded-2xl shadow-sm`,
- },
- ],
- ]);
-
export let basis: IToast;
$: basis = basis;
@@ -38,11 +21,11 @@
</script>
<div
- class={`${fmt_cl(layout_toast_map.get(layout))} z-[1000] h-[100vh] toast w-full ${basis.position || `top-center`} `}
+ class={`${fmt_cl(toast_layout_map.get(layout))} z-[1000] h-[100vh] toast w-full ${basis.position || `top-center`} `}
>
<div class={`flex flex-row w-full h-max justify-center pb-2`}>
<div
- class={`${fmt_cl(basis.classes)} relative grid grid-cols-12 h-max items-center justify-center ${styles.includes(`simple`) ? `bg-layer-${layer}-surface` : ``} ${fmt_cl(styles.map((style) => fmt_cl(lm.get(style)?.outer)).join(` `))}`}
+ class={`${fmt_cl(basis.classes)} relative grid grid-cols-12 h-max items-center justify-center ${styles.includes(`simple`) ? `bg-layer-${layer}-surface` : ``} ${fmt_cl(styles.map((style) => fmt_cl(toast_style_map.get(style)?.outer)).join(` `))}`}
>
<div
class={`absolute top-0 left-4 flex flex-row h-full items-center text-layer-${layer}-glyph`}
@@ -57,7 +40,7 @@
/>
</div>
<div
- class={`col-span-12 flex flex-row pl-1 ${fmt_cl(styles.map((style) => fmt_cl(lm.get(style)?.inner)).join(` `))}`}
+ class={`col-span-12 flex flex-row pl-1 ${fmt_cl(styles.map((style) => fmt_cl(toast_style_map.get(style)?.inner)).join(` `))}`}
>
{#if `value` in basis.label}
<p
diff --git a/apps-lib/src/lib/utils/client.ts b/apps-lib/src/lib/utils/client.ts
@@ -1,6 +1,5 @@
import { goto } from "$app/navigation";
-import type { GlyphKey, NavigationRoute } from "$lib";
-import type { AnchorRoute, AppLayoutKey, CallbackPromiseGeneric, LabelFieldKind, NavigationParamTuple, NavigationRouteParamKey } from "$lib/types/client";
+import type { AnchorRoute, AppLayoutKey, CallbackPromiseGeneric, GlyphKey, LabelFieldKind, NavigationParamTuple, NavigationRoute, NavigationRouteParamKey } from "$lib";
import type { ColorMode, ThemeKey, ThemeLayer } from "@radroots/theme";
export const sleep = async (ms: number): Promise<void> => {
@@ -118,11 +117,11 @@ export const route = async (route: NavigationRoute, params_list?: NavigationPara
export const get_layout = (val: string | false): AppLayoutKey => {
switch (val) {
- case `base`:
- case `lg`:
+ case `mobile_base`:
+ case `mobile_y`:
return val;
default:
- return `base`;
+ return `mobile_base`;
};
};
diff --git a/apps-lib/src/lib/utils/conf.ts b/apps-lib/src/lib/utils/conf.ts
@@ -0,0 +1,14 @@
+import type { ClientWindow } from "$lib/types/conf";
+
+export const wind: ClientWindow = {
+ app: {
+ layout: {
+ mobile_base: {
+ h: 600
+ },
+ mobile_y: {
+ h: 768
+ }
+ }
+ }
+};
+\ No newline at end of file
diff --git a/apps-lib/src/lib/utils/styles.ts b/apps-lib/src/lib/utils/styles.ts
@@ -1,4 +1,4 @@
-import type { GeometryGlyphDimension, ILoadingDimension } from "$lib";
+import type { AppLayoutKey, GeometryGlyphDimension, ILoadingDimension, IToastKind } from "$lib";
export const glyph_style_map: Map<GeometryGlyphDimension, { gl_1: number; dim_1?: number; }> = new Map([
["xs--", { gl_1: 12 }],
@@ -22,4 +22,19 @@ export const loading_style_map: Map<ILoadingDimension, { dim_1: number; gl_2: nu
["md", { dim_1: 20, gl_2: 20 }],
["lg", { dim_1: 28, gl_2: 28 }],
["xl", { dim_1: 36, gl_2: 36 }],
+]);
+
+export const toast_layout_map: Map<AppLayoutKey, string> = new Map([
+ [`mobile_base`, `pt-8`],
+ [`mobile_y`, `pt-16`],
+]);
+
+export const toast_style_map: Map<IToastKind, { inner: string; outer: string }> = new Map([
+ [
+ `simple`,
+ {
+ inner: `justify-center`,
+ outer: `min-h-toast_min w-full px-4 rounded-2xl shadow-sm`,
+ },
+ ],
]);
\ No newline at end of file
