commit e0a0ceea758349488bacc9d4811b64f0bd973256
parent 0f95bbcdc92f510e92b994d21efe9b3c75146d34
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sun, 22 Sep 2024 08:09:47 +0000
Edit (conf) `/init`, edit models routes, add envelope lower component
Diffstat:
6 files changed, 110 insertions(+), 87 deletions(-)
diff --git a/src/app.css b/src/app.css
@@ -1,5 +1,5 @@
-@import "/static/stylesheets/tailwindcss-app.css";
@import "/static/stylesheets/tailwindcss-app-form.css";
+@import "/static/stylesheets/tailwindcss-app.css";
@import "/static/stylesheets/tailwindcss-spinner.css";
@import "/static/webfonts/apercu-mono-pro/styles.css";
diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte
@@ -2,13 +2,13 @@
import { goto } from "$app/navigation";
import { app_nostr_key } from "$lib/stores";
import {
- Envelope,
+ app_tab_active,
+ app_tabs_visible,
+ EnvelopeLower,
Glyph,
type GlyphKey,
type GlyphWeight,
LayoutView,
- app_tab_active,
- app_tabs_visible,
} from "@radroots/svelte-lib";
import { onMount } from "svelte";
@@ -117,19 +117,12 @@
</div>
</div>
</LayoutView>
-<Envelope
+<EnvelopeLower
basis={{
visible: tmp_show_envelope,
close: async () => {
tmp_show_envelope = !tmp_show_envelope;
},
- titled: {
- previous: {
- label: {
- value: `Go Back`,
- },
- },
- },
}}
>
<div class={`flex flex-col w-full justify-center items-center px-2`}>
@@ -137,4 +130,4 @@
{`Your nostr key is ${$app_nostr_key}`}
</p>
</div>
-</Envelope>
+</EnvelopeLower>
diff --git a/src/routes/(app)/models/trade-product/+page.svelte b/src/routes/(app)/models/trade-product/+page.svelte
@@ -25,12 +25,17 @@
}
});
+ $: {
+ console.log(`models_list `, models_list);
+ }
+
const fetch_models = async (): Promise<void> => {
try {
loading_models = true;
const res = await lc.db.trade_product_get({
list: [`all`],
});
+ console.log(`res `, res);
if (typeof res !== `string`) models_list = res;
} catch (e) {
console.log(`(error) fetch_models `, e);
diff --git a/src/routes/(app)/models/trade-product/add/preview/+page.svelte b/src/routes/(app)/models/trade-product/add/preview/+page.svelte
@@ -84,7 +84,14 @@
kv_pref,
no_validation: [`year`, `price_qty_amt`],
});
+ if (typeof vals === `string`) {
+ alert(`Error: ${vals}`);
+ return;
+ }
console.log(JSON.stringify(vals, null, 4), `vals`);
+
+ const res = await lc.db.trade_product_add(vals);
+ console.log(`res `, res);
} catch (e) {
console.log(`(error) submit `, e);
}
diff --git a/src/routes/(conf)/init/+page.svelte b/src/routes/(conf)/init/+page.svelte
@@ -30,12 +30,15 @@
let slide_index = 0;
const get_slide_container = (view: View): Element | undefined => {
- const el = document.querySelector(`[data-slide-container="${view}"]`);
+ const el = document.querySelector(
+ `[data-carousel-container="${view}"]`,
+ );
+ console.log(`el get_slide_container`, el);
return el ? el : undefined;
};
const get_slide_item = (view: View): Element | undefined => {
- const el = document.querySelector(`[data-carousel-li="${view}"]`);
+ const el = document.querySelector(`[data-carousel-item="${view}"]`);
return el ? el : undefined;
};
@@ -98,70 +101,12 @@
class={`relative flex flex-col h-full w-full justify-start items-center`}
>
<ul
- data-slide-container={`start`}
+ data-carousel-container={`start`}
class={`carousel-container flex flex-grow h-full w-full bg-layer-1-surface rounded-2xl scrollbar-hide`}
>
<li
- data-carousel-li={`start`}
- class={`carousel-li flex flex-col flex-fill w-full gap-12 justify-center items-center`}
- >
- <div
- class={`flex flex-col w-54 gap-4 justify-start items-center`}
- >
- <p
- class={`font-mono font-[400] text-layer-0-glyph text-3xl`}
- >
- {`we`}
- </p>
- <p
- class={`font-mono font-[400] text-layer-0-glyph text-3xl`}
- >
- {`hope you`}
- </p>
- <p
- class={`font-mono font-[400] text-layer-0-glyph text-3xl`}
- >
- {`find it`}
- </p>
- <p
- class={`font-mono font-[400] text-layer-0-glyph text-3xl`}
- >
- {`useful :)`}
- </p>
- </div>
- <button
- class={`group flex flex-row gap-4 justify-center items-center active:opacity-80`}
- on:click={async () => {
- view = `configure`;
- }}
- >
- <p
- class={`font-mono font-[500] text-layer-1-glyph-hl text-3xl`}
- >
- {`*`}
- </p>
- <div class={`flex flex-col justify-start items-center`}>
- <p
- class={`font-mono font-[500] text-layer-1-glyph-hl text-2xl`}
- >
- {`configure`}
- </p>
- <p
- class={`font-mono font-[500] text-layer-1-glyph-hl text-2xl`}
- >
- {`device`}
- </p>
- </div>
- <p
- class={`font-mono font-[500] text-layer-1-glyph-hl text-3xl`}
- >
- {`*`}
- </p>
- </button>
- </li>
- <li
- data-carousel-li={`start`}
- class={`carousel-li flex flex-col flex-fill w-full py-40 justify-between items-center`}
+ data-carousel-item={`start`}
+ class={`carousel-item flex flex-col flex-fluid w-full py-32 justify-between items-center`}
>
<div
class={`flex flex-col w-40 gap-2 justify-start items-center`}
@@ -196,11 +141,11 @@
</div>
</li>
<li
- data-carousel-li={`start`}
- class={`carousel-li flex flex-col flex-fill w-full justify-center items-center`}
+ data-carousel-item={`start`}
+ class={`carousel-item flex flex-col w-full justify-center items-center`}
>
<div
- class={`flex flex-col w-40 gap-4 justify-start items-center`}
+ class={`flex flex-col gap-4 justify-start items-center`}
>
<p
class={`font-mono font-[400] text-layer-0-glyph text-3xl`}
@@ -230,8 +175,8 @@
</div>
</li>
<li
- data-carousel-li={`start`}
- class={`carousel-li flex flex-col flex-fill w-full justify-center items-center`}
+ data-carousel-item={`start`}
+ class={`carousel-item flex flex-col w-full justify-center items-center`}
>
<div
class={`flex flex-col w-54 gap-4 justify-start items-center`}
@@ -264,8 +209,8 @@
</div>
</li>
<li
- data-carousel-li={`start`}
- class={`carousel-li flex flex-col flex-fill w-full justify-center items-center`}
+ data-carousel-item={`start`}
+ class={`carousel-item flex flex-col w-full justify-center items-center`}
>
<div
class={`flex flex-col w-54 gap-4 justify-start items-center`}
@@ -297,6 +242,64 @@
</p>
</div>
</li>
+ <li
+ data-carousel-item={`start`}
+ class={`carousel-item flex flex-col flex-fluid w-full gap-12 justify-center items-center`}
+ >
+ <div
+ class={`flex flex-col w-54 gap-4 justify-start items-center`}
+ >
+ <p
+ class={`font-mono font-[400] text-layer-0-glyph text-3xl`}
+ >
+ {`we`}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-0-glyph text-3xl`}
+ >
+ {`hope you`}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-0-glyph text-3xl`}
+ >
+ {`find it`}
+ </p>
+ <p
+ class={`font-mono font-[400] text-layer-0-glyph text-3xl`}
+ >
+ {`useful :)`}
+ </p>
+ </div>
+ <button
+ class={`group flex flex-row gap-4 justify-center items-center active:opacity-80`}
+ on:click={async () => {
+ view = `configure`;
+ }}
+ >
+ <p
+ class={`font-mono font-[500] text-layer-1-glyph-hl text-3xl`}
+ >
+ {`*`}
+ </p>
+ <div class={`flex flex-col justify-start items-center`}>
+ <p
+ class={`font-mono font-[500] text-layer-1-glyph-hl text-2xl`}
+ >
+ {`configure`}
+ </p>
+ <p
+ class={`font-mono font-[500] text-layer-1-glyph-hl text-2xl`}
+ >
+ {`device`}
+ </p>
+ </div>
+ <p
+ class={`font-mono font-[500] text-layer-1-glyph-hl text-3xl`}
+ >
+ {`*`}
+ </p>
+ </button>
+ </li>
</ul>
<div
class={`absolute bottom-0 left-0 flex flex-row h-12 w-full justify-center items-center`}
@@ -343,12 +346,12 @@
class={`relative flex flex-col h-full w-full justify-start items-center`}
>
<ul
- data-slide-container={`configure`}
+ data-carousel-container={`configure`}
class={`carousel-container flex flex-grow h-full w-full scrollbar-hide`}
>
<li
- data-carousel-li={`configure`}
- class={`carousel-li flex flex-col flex-fill w-full gap-12 justify-center items-center`}
+ data-carousel-item={`configure`}
+ class={`carousel-item flex flex-col flex-fluid w-full gap-12 justify-center items-center`}
>
<div
class={`flex flex-col w-54 gap-4 justify-start items-center`}
@@ -429,3 +432,18 @@
</div>
</div>
</LayoutView>
+
+<style>
+ .carousel-container {
+ display: flex;
+ overflow-x: hidden;
+ scroll-snap-type: x mandatory;
+ list-style: none;
+ scroll-behavior: smooth;
+ -webkit-overflow-scrolling: touch;
+ }
+
+ .carousel-item {
+ scroll-snap-align: start;
+ }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -95,7 +95,7 @@
console.log(`app_render `, app_render);
if (!app_render) return;
let init_route = `/`;
- init_route = `/models/trade-product/add`;
+ //init_route = `/models/trade-product/add`;
const app_init_route = await kv.get(`*-init-route`);
if (app_init_route) {
init_route = app_init_route;
