diff options
| -rw-r--r-- | ui/app.html | 2 | ||||
| -rw-r--r-- | ui/lib/components/Message.svelte | 12 | ||||
| -rw-r--r-- | ui/lib/store.js | 1 | ||||
| -rw-r--r-- | ui/routes/(app)/+layout.svelte | 7 | ||||
| -rw-r--r-- | ui/routes/+layout.svelte | 54 |
5 files changed, 35 insertions, 41 deletions
diff --git a/ui/app.html b/ui/app.html index 51a6780..10525fe 100644 --- a/ui/app.html +++ b/ui/app.html @@ -7,6 +7,6 @@ %sveltekit.head% </head> <body data-sveltekit-preload-data="hover" data-theme="skeleton"> - <div style="display: contents">%sveltekit.body%</div> + <div class="m-0 p-0 h-vh w-full">%sveltekit.body%</div> </body> </html> diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte index ea6e304..68c5c91 100644 --- a/ui/lib/components/Message.svelte +++ b/ui/lib/components/Message.svelte @@ -26,12 +26,12 @@ display: flex; } .message-body { - overflow: auto; - max-width: 80vw; - @media (width > 640px) { - /* 21rem is width of the nav bar in full-screen mode. */ - max-width: calc(90vw - 21rem); - } + overflow: auto; + max-width: 80vw; + @media (width > 640px) { + /* 21rem is width of the nav bar in full-screen mode. */ + max-width: calc(90vw - 21rem); + } } .message-body:empty:after { content: '.'; diff --git a/ui/lib/store.js b/ui/lib/store.js index bdd3e3b..ae17ffa 100644 --- a/ui/lib/store.js +++ b/ui/lib/store.js @@ -3,7 +3,6 @@ import { Channels } from '$lib/store/channels'; import { Messages } from '$lib/store/messages'; import { Logins } from '$lib/store/logins'; -export const showMenu = writable(false); export const currentUser = writable(null); export const logins = writable(new Logins()); export const channelsList = writable(new Channels()); diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte index ae3dc6a..0a8c58d 100644 --- a/ui/routes/(app)/+layout.svelte +++ b/ui/routes/(app)/+layout.svelte @@ -1,16 +1,17 @@ <script> import { page } from '$app/stores'; import { goto } from '$app/navigation'; - import { onMount, onDestroy } from 'svelte'; + import { onMount, onDestroy, getContext } from 'svelte'; import { boot, subscribeToEvents } from '$lib/apiServer'; - import { showMenu, currentUser, logins, channelsList, messages } from '$lib/store'; + import { currentUser, logins, channelsList, messages } from '$lib/store'; import ChannelList from '$lib/components/ChannelList.svelte'; import CreateChannelForm from '$lib/components/CreateChannelForm.svelte'; let events = null; + let pageContext = getContext('page'); let { children } = $props(); let loading = $state(true); let channel = $derived($page.params.channel); @@ -62,7 +63,7 @@ <h2>Loading…</h2> {:else} <div id="interface" class="p-2"> - <nav id="sidebar" data-expanded={$showMenu}> + <nav id="sidebar" data-expanded={pageContext.showMenu}> <div class="channel-list"> <ChannelList active={channel} channels={$channelsList.channels} /> </div> diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte index d786389..094cacb 100644 --- a/ui/routes/+layout.svelte +++ b/ui/routes/+layout.svelte @@ -1,49 +1,43 @@ <script> + import { setContext } from 'svelte'; import { onNavigate } from '$app/navigation'; import '../app.css'; import logo from '$lib/assets/logo.png'; import { AppBar } from '@skeletonlabs/skeleton'; - import { showMenu, currentUser } from '$lib/store'; + import { currentUser } from '$lib/store'; import CurrentUser from '$lib/components/CurrentUser.svelte'; + let pageContext = $state({ + showMenu: false + }); + setContext('page', pageContext); + function toggleMenu(event) { event.preventDefault(); - showMenu.update((value) => !value); + pageContext.showMenu = !pageContext.showMenu; } onNavigate(() => { - showMenu.update(() => false); + pageContext.showMenu = false; }); let { children } = $props(); </script> -<div id="app" class="m-0 p-0 h-vh w-full"> - <div class="w-full"> - <AppBar class="app-bar"> - <svelte:fragment slot="lead"> - <button onclick={toggleMenu} class="cursor-pointer"> - <img class="w-8 h-8" alt="logo" src={logo} /> - </button> - </svelte:fragment> - <a href="/">understory</a> - <svelte:fragment slot="trail"> - {#if $currentUser} - <CurrentUser /> - {/if} - </svelte:fragment> - </AppBar> - </div> - - {@render children?.()} -</div> - -<style> - #app { - margin: 0; - height: 100vh; - width: 100%; - } -</style> +<AppBar class="app-bar"> + <svelte:fragment slot="lead"> + <button onclick={toggleMenu} class="cursor-pointer"> + <img class="w-8 h-8" alt="logo" src={logo} /> + </button> + </svelte:fragment> + <a href="/">understory</a> + <svelte:fragment slot="trail"> + {#if $currentUser} + <CurrentUser /> + {/if} + </svelte:fragment> +</AppBar> + +{@render children?.()} |