commit eae7baa954de19a407d7ce649d0bc2675b8fb7ab parent 8f1b7683473c03d3ba08138afc05819046386be8 Author: triesap <137732411+triesap@users.noreply.github.com> Date: Sat, 7 Sep 2024 08:58:15 +0000 Edit (map) layout and add testing map controls, edit models routes, edit nostr routes, edit app css removing font-face styles, edit tailwind config, add maplibre gl css, edit lib components Diffstat:
29 files changed, 453 insertions(+), 241 deletions(-)
diff --git a/ios/App/App.xcodeproj/project.pbxproj b/ios/App/App.xcodeproj/project.pbxproj @@ -352,7 +352,7 @@ buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 26; + CURRENT_PROJECT_VERSION = 28; DEVELOPMENT_TEAM = AR84X5Z9HU; INFOPLIST_FILE = App/Info.plist; INFOPLIST_KEY_CFBundleDisplayName = Radroots; @@ -374,7 +374,7 @@ buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CODE_SIGN_STYLE = Automatic; - CURRENT_PROJECT_VERSION = 26; + CURRENT_PROJECT_VERSION = 28; DEVELOPMENT_TEAM = AR84X5Z9HU; INFOPLIST_FILE = App/Info.plist; INFOPLIST_KEY_CFBundleDisplayName = Radroots; diff --git a/package.json b/package.json @@ -61,6 +61,9 @@ "@radroots/svelte-maplibre": "workspace:*", "@radroots/theme": "workspace:*", "@radroots/utils": "workspace:*", + "maplibre-gl": "^4.0.0", + "pmtiles": "^3.0.3", + "protomaps-themes-base": "^3.1.0", "sql.js": "^1.11.0" } } \ No newline at end of file diff --git a/src/app.css b/src/app.css @@ -1,18 +1,19 @@ @import "./lib/css/spinner.css"; @import "./lib/css/spinner-6.css"; @import "./lib/css/spinner-12.css"; +@import "./lib/css/fonts.css"; @tailwind base; @tailwind components; @tailwind utilities; @layer components { - .form-select-e { - @apply border-0 focus:border-0 outline-0 focus:outline-0; + .map-marker-popup-simple-open { + @apply h-40 w-72; } - select:focus { - outline: none; + .form-select-e { + @apply border-0 focus:border-0 outline-0 focus:outline-0; } .form-line-e { @@ -95,6 +96,26 @@ opacity: 0; animation: fade-in 250ms ease-in-out forwards; } + + .active-ring-blue { + @apply active:ring-4 active:ring-slate-300/70; + } + + .active-ring-gray { + @apply active:ring-4 active:ring-slate-300/20; + } + + .tap-active-op { + @apply active:opacity-60; + } + + .tap-rise { + @apply active:scale-[101%] group-active:scale-[101%] delay-[150ms] duration-[400ms] ease-in-out transition-all; + } + + .tap-in { + @apply active:scale-[97%] group-active:scale-[97%] delay-[150ms] duration-[300ms] ease-in-out transition-all; + } } @layer base { @@ -102,92 +123,15 @@ background-color: hsl(var(--layer-0-surface)); } - p { + html { @apply select-none cursor-none; } - pre { - @apply select-none cursor-none; + select:focus { + outline: none; } - @font-face { - font-family: 'SFProDisplay'; - src: url('/webfonts/sf-pro-display/SFProDisplay-BlackItalic.woff2') format('woff2'), - url('/webfonts/sf-pro-display/SFProDisplay-BlackItalic.woff') format('woff'); - font-weight: 900; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: 'SFProDisplay'; - src: url('/webfonts/sf-pro-display/SFProDisplay-Black.woff2') format('woff2'), - url('/webfonts/sf-pro-display/SFProDisplay-Black.woff') format('woff'); - font-weight: 900; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: 'SFProDisplay'; - src: url('/webfonts/sf-pro-display/SFProDisplay-Bold.woff2') format('woff2'), - url('/webfonts/sf-pro-display/SFProDisplay-Bold.woff') format('woff'); - font-weight: bold; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: 'SFProDisplay'; - src: url('/webfonts/sf-pro-display/SFProDisplay-BoldItalic.woff2') format('woff2'), - url('/webfonts/sf-pro-display/SFProDisplay-BoldItalic.woff') format('woff'); - font-weight: bold; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: 'SFProDisplay'; - src: url('/webfonts/sf-pro-display/SFProDisplay-Heavy.woff2') format('woff2'), - url('/webfonts/sf-pro-display/SFProDisplay-Heavy.woff') format('woff'); - font-weight: 900; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: 'SFProDisplay'; - src: url('/webfonts/sf-pro-display/SFProDisplay-HeavyItalic.woff2') format('woff2'), - url('/webfonts/sf-pro-display/SFProDisplay-HeavyItalic.woff') format('woff'); - font-weight: 900; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: 'SFProDisplay'; - src: url('/webfonts/sf-pro-display/SFProDisplay-Light.woff2') format('woff2'), - url('/webfonts/sf-pro-display/SFProDisplay-Light.woff') format('woff'); - font-weight: 300; - font-style: normal; - font-display: swap; - } - - @font-face { - font-family: 'SFProDisplay'; - src: url('/webfonts/sf-pro-display/SFProDisplay-LightItalic.woff2') format('woff2'), - url('/webfonts/sf-pro-display/SFProDisplay-LightItalic.woff') format('woff'); - font-weight: 300; - font-style: italic; - font-display: swap; - } - - @font-face { - font-family: 'SFProDisplay'; - src: url('/webfonts/sf-pro-display/SFProDisplay-Medium.woff2') format('woff2'), - url('/webfonts/sf-pro-display/SFProDisplay-Medium.woff') format('woff'); - font-weight: 500; - font-style: normal; - font-display: swap; + button:focus { + outline: none; } } \ No newline at end of file diff --git a/src/app.html b/src/app.html @@ -8,7 +8,8 @@ <link rel="stylesheet" type="text/css" href="/phosphor-icons/fill.css" /> <link rel="stylesheet" type="text/css" href="/phosphor-icons/light.css" /> <link rel="stylesheet" type="text/css" href="/phosphor-icons/regular.css" /> - + <link rel="stylesheet" type="text/css" href="/styles/maplibre_gl.css" /> + <script src="/assets/keyva.min.js"></script> <meta name="viewport" diff --git a/src/lib/components/button-submit.svelte b/src/lib/components/button-submit.svelte @@ -1,6 +1,6 @@ <script lang="ts"> import type { CallbackPromise } from "@radroots/svelte-lib"; - import { loading as Loading, t } from "@radroots/svelte-lib"; + import { Loading, t } from "@radroots/svelte-lib"; export let basis: { callback: CallbackPromise; diff --git a/src/lib/components/map-marker-dot.svelte b/src/lib/components/map-marker-dot.svelte @@ -0,0 +1,29 @@ +<script lang="ts"> + import { Fill } from "@radroots/svelte-lib"; + + type MapMarkerDotStyleKey = `blue`; + export let basis: + | { + style?: MapMarkerDotStyleKey; + } + | undefined = undefined; + + $: classes_styles = basis?.style ? styles[basis.style] : styles[`blue`]; + + let styles: Record<MapMarkerDotStyleKey, string> = { + blue: `text-blue-400`, + }; +</script> + +<div class="flex flex-row p-1"> + <div + class={`flex flex-row h-map_circle w-map_circle justify-center items-center bg-white rounded-full shadow-lg`} + > + <div + class={`flex flex-row h-map_circle_inner w-map_circle_inner justify-center items-center rounded-full ${classes_styles}`} + > + <Fill /> + </div> + </div> +</div> +<div class="hidden text-blue-400" /> diff --git a/src/lib/components/map-marker.svelte b/src/lib/components/map-marker.svelte @@ -0,0 +1,9 @@ +<script lang="ts"> + import MapMarkerDot from "./map-marker-dot.svelte"; + + export let kind = "current"; +</script> + +{#if kind === `current`} + <MapMarkerDot /> +{/if} diff --git a/src/lib/components/map_control_full.svelte b/src/lib/components/map_control_full.svelte @@ -1,31 +1,14 @@ <script lang="ts"> import { goto } from "$app/navigation"; - import { glyph as Glyph } from "@radroots/svelte-lib"; + import { app_layout } from "$lib/stores"; + import { Glyph } from "@radroots/svelte-lib"; let el_zoom: HTMLElement | null; - /* -<button - class={`surface-1 flex flex-row h-8 w-8 justify-center items-center rounded-2xl`} - on:click={async () => { - const zoom_to = zoom_step($map_full_zoom, `dec`); - console.log(`zoom_to `, zoom_to); - map_full_zoom.set(zoom_to); - }} - > - <Glyph - basis={{ - key: `minus`, - dim: `sm-`, - classes: `text-layer-2-glyph`, - }} - /> - </button> - */ </script> <div bind:this={el_zoom} - class={`z-10 absolute top-16 left-6 flex flex-col w-full gap-8 justify-start items-start`} + class={`z-10 absolute top-dim_map_offset_top_${$app_layout} left-6 flex flex-col w-full gap-8 justify-start items-start`} > <button class={`surface-1 flex flex-row h-8 w-8 justify-center items-center rounded-2xl`} diff --git a/src/lib/components/map_full_envelope.svelte b/src/lib/components/map_full_envelope.svelte @@ -0,0 +1,28 @@ +<script lang="ts"> + import { goto } from "$app/navigation"; + import { app_layout } from "$lib/stores"; + import { Glyph } from "@radroots/svelte-lib"; + + let el: HTMLElement | null; +</script> + +<div + bind:this={el} + class={`z-10 absolute top-dim_map_offset_top_${$app_layout} left-6 flex flex-col w-full gap-8 justify-start items-start`} +> + <button + class={`surface-1 flex flex-row h-8 w-8 justify-center items-center rounded-2xl`} + on:click={async () => { + await goto(`/`); + }} + > + <Glyph + basis={{ + key: `caret-left`, + dim: `sm-`, + weight: `bold`, + classes: `text-layer-2-glyph`, + }} + /> + </button> +</div> diff --git a/src/lib/components/nav.svelte b/src/lib/components/nav.svelte @@ -3,7 +3,7 @@ import { app_layout, app_nav_blur, app_nav_visible } from "$lib/stores"; import type { INavBasis } from "$lib/types"; import { restart } from "$lib/utils"; - import { fill as Fill, fmt_cl, glyph as Glyph } from "@radroots/svelte-lib"; + import { Fill, fmt_cl, Glyph } from "@radroots/svelte-lib"; import { onDestroy, onMount } from "svelte"; export let basis: INavBasis; diff --git a/src/lib/components/tabs.svelte b/src/lib/components/tabs.svelte @@ -1,6 +1,6 @@ <script lang="ts"> import { app_layout, app_tab_active, app_tabs_blur } from "$lib/stores"; - import { glyph as Glyph, type ITabsBasis } from "@radroots/svelte-lib"; + import { Glyph, type ITabsBasis } from "@radroots/svelte-lib"; export let basis: ITabsBasis; $: basis = basis; diff --git a/src/lib/conf.ts b/src/lib/conf.ts @@ -1,4 +1,22 @@ -export const _cf = { +import type { ColorMode } from "@radroots/theme"; +import { type NumberTuple } from "@radroots/utils"; + +type Conf = { + app: Record<string, string>; + pref: Record<string, string>; + map: { + styles: { + base: Record<ColorMode, string>; + }, + popup: { + dot: { + offset: NumberTuple; + } + } + } +} + +export const _cf: Conf = { app: { root_symbol: "ยป--`--,---", title: `Radroots`, @@ -7,4 +25,17 @@ export const _cf = { pref: { key_active: `nostr:key:active` }, + map: { + styles: { + base: { + light: `https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json`, + dark: `https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json` + } + }, + popup: { + dot: { + offset: [0, -10] as const + } + } + } }; \ No newline at end of file diff --git a/src/lib/stores.ts b/src/lib/stores.ts @@ -1,5 +1,6 @@ import type { AppLayoutKey } from "@radroots/svelte-lib"; import { type ColorMode, type ThemeKey } from "@radroots/theme"; +import { type NumberTuple } from "@radroots/utils"; import { writable } from "svelte/store"; export const app_thc = writable<ColorMode>(`light`); @@ -8,7 +9,7 @@ export const app_thm = writable<ThemeKey>(`os`); export const app_config = writable<boolean>(false); export const app_render = writable<boolean>(false); export const app_layout = writable<AppLayoutKey>(`base`); -export const app_win = writable<[number, number]>([0, 0]); +export const app_win = writable<NumberTuple>([0, 0]); export const app_nav_blur = writable<boolean>(false); @@ -26,5 +27,5 @@ export const app_nav_visible = writable<boolean>(false); export const app_init_route = writable<string>(``); -export const map_full_center = writable<[number, number]>([0, 0]); +export const map_full_center = writable<NumberTuple>([0, 0]); export const map_full_zoom = writable<number>(4); diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte @@ -1,8 +1,8 @@ <script lang="ts"> import { goto } from "$app/navigation"; + import LayoutWindow from "$lib/components/layout-window.svelte"; import Tabs from "$lib/components/tabs.svelte"; import { app_layout, app_tab_active, app_tabs_visible } from "$lib/stores"; - import LayoutWindow from "$lib/components/layout-window.svelte"; </script> <LayoutWindow> @@ -24,7 +24,7 @@ { icon: `compass`, callback: async (tab_i) => { - await goto(`/map`) + await goto(`/map/test`); }, }, { diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte @@ -1,10 +1,21 @@ <script lang="ts"> import { goto } from "$app/navigation"; import LayoutView from "$lib/components/layout-view.svelte"; - import { app_tab_active, app_tabs_visible } from "$lib/stores"; - import { glyph as Glyph, type GlyphKey } from "@radroots/svelte-lib"; + import { + app_nostr_key, + app_tab_active, + app_tabs_visible, + } from "$lib/stores"; + import { + Envelope, + Glyph, + type GlyphKey, + type GlyphWeight, + } from "@radroots/svelte-lib"; import { onMount } from "svelte"; + let tmp_show_envelope = false; + onMount(async () => { try { app_tabs_visible.set(true); @@ -14,7 +25,12 @@ } }); - let buttons: { route: string; label: string; key: GlyphKey }[] = [ + let buttons: { + route: string; + label: string; + key: GlyphKey; + weight?: GlyphWeight; + }[] = [ { route: `/models/location-gcs`, label: `Locations`, @@ -24,6 +40,7 @@ route: `/models/trade-product`, label: `Post Goods`, key: `handbag-simple`, + weight: `fill`, }, ]; </script> @@ -34,13 +51,16 @@ > <div class={`flex flex-row w-full px-1 justify-start items-center`}> <p - class={`font-mono font-[600] text-layer-2-glyph text-xl tracking-wide`} + class={`font-mono font-[600] text-layer-2-glyph max-sm:text-lg text-xl tracking-wide`} > {`radroots app (beta-1.0.0)`} </p> </div> <button - class={`flex flex-row w-full h-8 px-4 gap-2 justify-start items-center surface-1 rounded-xl active:bg-layer-1-surface_a transition-all`} + class={`flex flex-row w-full h-[34px] px-4 gap-2 justify-start items-center surface-1 rounded-xl active:bg-layer-1-surface_a transition-all`} + on:click={async () => { + tmp_show_envelope = !tmp_show_envelope; + }} > <Glyph basis={{ @@ -58,7 +78,7 @@ > {#each buttons as btn} <button - class={`surface-1 col-span-6 flex flex-col h-20 py-2 px-3 justify-between rounded-2xl font-[500] text-lg font-mono active:bg-layer-1-surface_a transition-all`} + class={`surface-1 col-span-6 flex flex-col h-20 py-2 px-3 justify-between rounded-2xl font-[500] text-lg font-mono tap-active-op transition-all`} on:click={async () => { await goto(btn.route); }} @@ -71,7 +91,7 @@ basis={{ key: btn.key, dim: `md`, - weight: `bold`, + weight: btn.weight || `bold`, }} /> </div> @@ -98,3 +118,24 @@ </div> </div> </LayoutView> +<Envelope + 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`}> + <p class={`font-sans font-[400] text-layer-2-glyph break-all`}> + {`Your nostr key is ${$app_nostr_key}`} + </p> + </div> +</Envelope> diff --git a/src/routes/(app)/models/location-gcs/+page.svelte b/src/routes/(app)/models/location-gcs/+page.svelte @@ -3,10 +3,12 @@ import LayoutTrellis from "$lib/components/layout-trellis.svelte"; import LayoutView from "$lib/components/layout-view.svelte"; import Nav from "$lib/components/nav.svelte"; - import { app_tabs_visible } from "$lib/stores"; + import { _cf } from "$lib/conf"; + import { app_tabs_visible, app_thc } from "$lib/stores"; import { location_gcs_add } from "$lib/utils/models"; import { type LocationGcs } from "@radroots/client"; - import { trellis as Trellis } from "@radroots/svelte-lib"; + import { Fill, fmt_geo_direction } from "@radroots/svelte-lib"; + import { MapLibre, Marker } from "@radroots/svelte-maplibre"; import { onMount } from "svelte"; let models_list: LocationGcs[] = []; @@ -40,56 +42,123 @@ <LayoutTrellis> {#if models_list.length} {#each models_list as li} - <Trellis - basis={{ - args: { - layer: 1, - title: { - value: `Your Locations`, - }, - list: [ - { - hide_active: true, - touch: { - label: { - left: [ - { - value: `Location:`, - classes: `capitalize`, - }, - ], - right: [ - { - value: li.label, - }, - ], - }, - callback: async () => {}, - }, - }, - { - hide_active: true, - touch: { - label: { - left: [ - { - value: `Coordinates:`, - classes: `capitalize`, - }, - ], - right: [ - { - value: `${li.lat.toFixed(3)} ${li.lng.toFixed(3)}`, - }, - ], - }, - callback: async () => {}, - }, - }, - ], - }, - }} - /> + <button + class={`surface-1 flex flex-row w-full justify-between items-center rounded-xl overflow-hidden tap-active-op active-ring-blue`} + > + <div + class={`flex flex-row h-full flex-grow justify-start items-start`} + > + <div + class={`flex flex-col h-full w-8 justify-start items-center`} + > + <Fill /> + </div> + <div + class={`flex flex-col w-full gap-[6px] justify-start items-center`} + > + <div + class={`flex flex-row h-10 w-full pr-2 justify-between items-center border-b-line border-b-layer-1-surface-edge`} + > + <p + class={`font-sans font-[300] text-layer-1-glyph text-sm`} + > + {`${li.label}`} + </p> + </div> + <div + class={`flex flex-col w-full pr-2 gap-1 justify-between items-center`} + > + <div + class={`flex flex-row w-full justify-between items-center`} + > + <p + class={`font-sans font-[300] text-layer-1-glyph text-sm max-w-[90px] truncate`} + > + {`lat: `} + </p> + <div + class={`flex flex-row gap-1 justify-end items-center`} + > + <div + class={`flex flex-row w-[86px] justify-end items-center`} + > + <p + class={`font-sans font-[300] text-layer-1-glyph text-sm max-w-[90px] truncate`} + > + {`${Math.abs(li.lat)}`} + </p> + </div> + <div + class={`flex flex-row w-6 justify-start items-center`} + > + <p + class={`font-sans font-[300] text-layer-1-glyph text-sm max-w-[90px] truncate`} + > + {fmt_geo_direction({ + lat: li.lat, + })} + </p> + </div> + </div> + </div> + <div + class={`flex flex-row w-full justify-between items-center`} + > + <p + class={`font-sans font-[300] text-layer-1-glyph text-sm max-w-[90px] truncate`} + > + {`lng:`} + </p> + <div + class={`flex flex-row gap-1 justify-end items-center`} + > + <div + class={`flex flex-row w-[86px] justify-end items-center`} + > + <p + class={`font-sans font-[300] text-layer-1-glyph text-sm truncate`} + > + {`${Math.abs(li.lng)}`} + </p> + </div> + <div + class={`flex flex-row w-6 justify-start items-center`} + > + <p + class={`font-sans font-[300] text-layer-1-glyph text-sm truncate`} + > + {fmt_geo_direction({ + lng: li.lng, + })} + </p> + </div> + </div> + </div> + </div> + </div> + </div> + <MapLibre + center={[li.lng, li.lat]} + zoom={10} + class={`map-card`} + style={_cf.map.styles.base[$app_thc]} + interactive={false} + > + <Marker lngLat={[li.lng, li.lat]}> + <div class="flex flex-row p-1"> + <div + class={`flex flex-row h-map_circle w-map_circle justify-center items-center bg-white rounded-full shadow-lg`} + > + <div + class={`flex flex-row h-map_circle_inner w-map_circle_inner justify-center items-center bg-blue-400 rounded-full`} + > + <Fill /> + </div> + </div> + </div> + </Marker> + </MapLibre> + </button> {/each} {:else if !loading_models} <div @@ -139,3 +208,10 @@ : undefined, }} /> + +<style> + :global(.map-card) { + height: 100px; + width: 160px; + } +</style> diff --git a/src/routes/(app)/models/location-gcs/view-map/+page.svelte b/src/routes/(app)/models/location-gcs/view-map/+page.svelte @@ -0,0 +1,4 @@ +<script lang="ts"> +</script> + +<div></div> diff --git a/src/routes/(app)/models/trade-product/+page.svelte b/src/routes/(app)/models/trade-product/+page.svelte @@ -6,11 +6,7 @@ import Nav from "$lib/components/nav.svelte"; import { app_tabs_visible } from "$lib/stores"; import { type TradeProduct } from "@radroots/client"; - import { - locale, - time_fmt_db_iso, - trellis as Trellis, - } from "@radroots/svelte-lib"; + import { locale, time_fmt_iso, Trellis } from "@radroots/svelte-lib"; import { onMount } from "svelte"; let models_list: TradeProduct[] = []; @@ -43,14 +39,17 @@ <LayoutView> <LayoutTrellis> {#if models_list.length} - {#each models_list as li} + {#each models_list as li, li_i} <Trellis basis={{ args: { layer: 1, - title: { - value: `Trade Products`, - }, + title: + li_i === 0 + ? { + value: `Trade Products`, + } + : undefined, list: [ { hide_active: true, @@ -58,7 +57,7 @@ label: { left: [ { - value: `Kind:`, + value: `Product:`, classes: `capitalize`, }, ], @@ -78,13 +77,16 @@ label: { left: [ { - value: `Lot:`, + value: `Date Created:`, classes: `capitalize`, }, ], right: [ { - value: li.lot, + value: time_fmt_iso( + $locale, + li.created_at, + ), }, ], }, @@ -97,13 +99,13 @@ label: { left: [ { - value: `Varietal:`, + value: `Lot:`, classes: `capitalize`, }, ], right: [ { - value: li.varietal, + value: li.lot, }, ], }, @@ -116,16 +118,13 @@ label: { left: [ { - value: `Date Created:`, + value: `Varietal:`, classes: `capitalize`, }, ], right: [ { - value: time_fmt_db_iso( - $locale, - li.created_at, - ), + value: li.varietal, }, ], }, diff --git a/src/routes/(app)/models/trade-product/add/+page.svelte b/src/routes/(app)/models/trade-product/add/+page.svelte @@ -15,9 +15,9 @@ import { fmt_capitalize, fmt_id, - input_form as InputForm, + InputForm, kv, - loading as Loading, + Loading, } from "@radroots/svelte-lib"; import { trade_keys } from "@radroots/utils"; diff --git a/src/routes/(app)/nostr/+page.svelte b/src/routes/(app)/nostr/+page.svelte @@ -3,7 +3,7 @@ import LayoutTrellis from "$lib/components/layout-trellis.svelte"; import LayoutView from "$lib/components/layout-view.svelte"; import Nav from "$lib/components/nav.svelte"; - import { trellis as Trellis } from "@radroots/svelte-lib"; + import { Trellis } from "@radroots/svelte-lib"; </script> <LayoutView> diff --git a/src/routes/(app)/nostr/keys/+page.svelte b/src/routes/(app)/nostr/keys/+page.svelte @@ -4,7 +4,7 @@ import LayoutView from "$lib/components/layout-view.svelte"; import Nav from "$lib/components/nav.svelte"; import { _cf } from "$lib/conf"; - import { trellis as Trellis } from "@radroots/svelte-lib"; + import { Trellis } from "@radroots/svelte-lib"; import { onMount } from "svelte"; let nostr_public_key = ``; diff --git a/src/routes/(app)/nostr/notes/+page.svelte b/src/routes/(app)/nostr/notes/+page.svelte @@ -12,8 +12,8 @@ import { locale, ndk, - time_fmt_nostr_event, - trellis as Trellis, + time_fmt_epoch_s, + Trellis, type ITrellisKindTouch, } from "@radroots/svelte-lib"; import { onDestroy } from "svelte"; @@ -80,7 +80,7 @@ ], right: [ { - value: time_fmt_nostr_event($locale, ev.created_at), + value: time_fmt_epoch_s($locale, ev.created_at), }, ], }, diff --git a/src/routes/(app)/nostr/profile/+page.svelte b/src/routes/(app)/nostr/profile/+page.svelte @@ -9,13 +9,7 @@ ExtendedBaseType, NDKEventStore, } from "@nostr-dev-kit/ndk-svelte"; - import { - ndk, - ndk_event, - ndk_user, - t, - trellis as Trellis, - } from "@radroots/svelte-lib"; + import { ndk, ndk_event, ndk_user, t, Trellis } from "@radroots/svelte-lib"; import { onDestroy } from "svelte"; let events_store: NDKEventStore<ExtendedBaseType<NDKEvent>>; diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte @@ -6,10 +6,7 @@ import { _cf } from "$lib/conf"; import { app_tabs_visible, app_thc } from "$lib/stores"; import { restart } from "$lib/utils"; - import { - toggle_color_mode, - trellis as Trellis, - } from "@radroots/svelte-lib"; + import { toggle_color_mode, Trellis } from "@radroots/svelte-lib"; import { onMount } from "svelte"; onMount(async () => { diff --git a/src/routes/(map)/map/+layout.svelte b/src/routes/(map)/map/+layout.svelte @@ -1,6 +0,0 @@ -<script lang="ts"> - import MapControlFull from "$lib/components/map_control_full.svelte"; -</script> - -<MapControlFull /> -<slot /> diff --git a/src/routes/(map)/map/+page.svelte b/src/routes/(map)/map/+page.svelte @@ -1,36 +1,88 @@ <script lang="ts"> - import { map_full_center } from "$lib/stores"; - import { MapLibre } from "@radroots/svelte-maplibre"; + import { lc } from "$lib/client"; + import MapControlFull from "$lib/components/map_control_full.svelte"; + import { _cf } from "$lib/conf"; + import { app_thc } from "$lib/stores"; + import { Fill, LoadingView, sleep } from "@radroots/svelte-lib"; + import { MapLibre, Marker, Popup } from "@radroots/svelte-maplibre"; + import { type NumberTuple } from "@radroots/utils"; import { onMount } from "svelte"; - let el: any; + let loading_layout = true; + let map_coords: NumberTuple | undefined = undefined; onMount(async () => { try { - /* const loc = await lc.geo.current(); if (loc && typeof loc !== `string`) { - const tup: [number, number] = [loc.lng, loc.lat]; - console.log(`tup `, tup); - map_full_center.set(tup); + map_coords = [loc.lng, loc.lat]; } - */ + await sleep(321); } catch (e) { console.log(`e `, e); } finally { + loading_layout = false; } }); </script> -<MapLibre - bind:this={el} - center={$map_full_center} - class="map-full" - style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json" -/> +{#if map_coords} + <MapLibre + center={map_coords} + zoom={10} + class={`map-full ${loading_layout ? `hidden` : ``}`} + style={_cf.map.styles.base[$app_thc]} + > + <Marker lngLat={map_coords}> + <div class="flex flex-row p-1"> + <div + class={`flex flex-row h-map_circle w-map_circle justify-center items-center bg-white rounded-full shadow-lg`} + > + <div + class={`flex flex-row h-map_circle_inner w-map_circle_inner justify-center items-center bg-blue-400 rounded-full`} + > + <Fill /> + </div> + </div> + </div> + <Popup offset={_cf.map.popup.dot.offset}> + <button + class={`flex flex-row justify-center items-center transition-all`} + on:click={async () => {}} + > + <div + class={`flex flex-col w-fit px-2 py-1 gap-2 justify-start items-start`} + > + <div class={`flex flex-row w-full justify-start items-center`}> + <p class={`font-mono font-[400] text-layer-2-glyph`}> + {`Marker location:`} + </p> + </div> + <div + class={`flex flex-row w-full gap-2 justify-start items-center`} + > + <p class={`font-mono font-[400] text-layer-2-glyph`}> + {map_coords[0]} + </p> + <p class={`font-mono font-[400] text-layer-2-glyph`}> + {map_coords[1]} + </p> + </div> + </div> + </button> + </Popup> + </Marker> + </MapLibre> +{/if} +{#if loading_layout} + <LoadingView /> +{:else} + <MapControlFull /> +{/if} <style> :global(.map-full) { height: 100vh; + width: 100vh; } </style> diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte @@ -18,10 +18,9 @@ app_thc, app_thm, app_win, - map_full_center, } from "$lib/stores"; import { - css_static as CssStatic, + CssStatic, ndk, ndk_setup_privkey, ndk_user, @@ -136,10 +135,6 @@ await lc.preferences.remove(_cf.pref.key_active); await goto(`/conf/nostr`); } - - const pos = await lc.geo.current(); - if (pos && typeof pos !== `string`) - map_full_center.set([pos.lng, pos.lat]); } catch (e) { console.log(`(app_config) error `, e); } finally { @@ -168,7 +163,6 @@ </script> <svelte:head> - <title>{_cf.app.title}</title> <meta name="description" content={_cf.app.description} /> <meta property="og:title" content={_cf.app.title} /> <meta property="og:description" content={_cf.app.description} /> @@ -178,5 +172,5 @@ {/if} <CssStatic /> <div - class="hidden h-nav_base pt-h_nav_base pb-h_nav_base h-nav_lg pt-h_nav_lg pb-h_nav_lg h-tabs_base pt-h_tabs_base pb-h_tabs_base h-tabs_lg pt-h_tabs_lg pb-h_tabs_lg" + class="hidden h-nav_base pt-h_nav_base pb-h_nav_base h-nav_lg pt-h_nav_lg pb-h_nav_lg h-tabs_base pt-h_tabs_base pb-h_tabs_base h-tabs_lg pt-h_tabs_lg pb-h_tabs_lg top-dim_map_offset_top_base top-dim_map_offset_top_lg" ></div> diff --git a/static/styles/maplibre_gl.css b/static/styles/maplibre_gl.css @@ -0,0 +1,13 @@ +.maplibregl-popup-tip { + display: none !important; +} + +.maplibregl-popup-content { + background: hsl(var(--layer-1-surface)) !important; + border-radius: 16px !important; + box-shadow: 0 4px 8px rgba(0,0,0,.2) !important; + padding: 0px !important; + transition: background-color 250ms ease-in-out !important; +} + + diff --git a/tailwind.config.ts b/tailwind.config.ts @@ -14,12 +14,20 @@ const heights = { tabs_lg: `86px`, nav_base: `71px`, nav_lg: `100px`, + "envTop": "56px", }; const widths = { line: `320px` }; +const dimensions = { + map_circle: `16px`, + map_circle_inner: `10px`, + map_offset_top_base: `32px`, + map_offset_top_lg: `64px`, +} + const config: Config = { content: [ `src/**/*.{ts,svelte}`, @@ -34,6 +42,7 @@ const config: Config = { sans: ['"SF Pro Display"', ...tw_font.sans], serif: [...tw_font.serif], mono: [...tw_font.mono], + apercu: ['Apercu Mono Pro'], }, fontSize: { line: ["1.05rem", { lineHeight: "1.33rem", fontWeight: 300 }], @@ -42,13 +51,18 @@ const config: Config = { trellisLabel: ["0.8rem", { lineHeight: "1rem", fontWeight: 200 }], navPrevious: ["1.09rem", { lineHeight: "1.33rem", fontWeight: 400 }], navCurrent: ["1.09rem", { lineHeight: "1.33rem", fontWeight: 500 }], + envelopeTitle: ["1.05rem", { lineHeight: "1.75rem", fontWeight: 600 }], + envelopeTitlePrevious: ["1.02rem", { lineHeight: "1.75rem", fontWeight: 400 }], + envelopeTitleAction: ["1.02rem", { lineHeight: "1.75rem", fontWeight: 500 }], }, height: { ...heights, + ...dimensions, ...Object.fromEntries(Object.entries(heights_form).map(([k, v]) => [`form_${k}`, v])), }, width: { ...widths, + ...dimensions, }, minHeight: { ...heights @@ -65,11 +79,15 @@ const config: Config = { padding: { ...Object.fromEntries(Object.entries(heights).map(([k, v]) => [`h_${k}`, v])), ...Object.fromEntries(Object.entries(widths).map(([k, v]) => [`w_${k}`, v])), + ...Object.fromEntries(Object.entries(dimensions).map(([k, v]) => [`dim_${k}`, v])), }, translate: { ...Object.fromEntries(Object.entries(heights).map(([k, v]) => [`h_${k}`, v])), ...Object.fromEntries(Object.entries(widths).map(([k, v]) => [`w_${k}`, v])), }, + spacing: { + ...Object.fromEntries(Object.entries(dimensions).map(([k, v]) => [`dim_${k}`, v])), + }, borderWidth: { "line": "1px" }, @@ -83,6 +101,7 @@ const config: Config = { ], daisyui: { themes: [ + themes.theme_earth_light, themes.theme_os_dark, themes.theme_os_light, ],