From 23c84c81be796a741da5d61d41760b1efdd13840 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Mon, 4 Nov 2024 14:08:01 -0500 Subject: Fix width and scrolling This is some jinbodger CSS. I really need to do a unified-CSS sweep. I start to see why per-component CSS is bad, too; there are so many long-distance interactions needed! --- ui/lib/components/Message.svelte | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'ui') diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte index f0e7045..ea6e304 100644 --- a/ui/lib/components/Message.svelte +++ b/ui/lib/components/Message.svelte @@ -25,6 +25,14 @@ .message:hover .timestamp { 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); + } + } .message-body:empty:after { content: '.'; visibility: hidden; -- cgit v1.2.3 From 0f9a21934bfee61345894a38e89d7228cf1c07f1 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Tue, 5 Nov 2024 19:02:23 -0500 Subject: File off some rough spots in the DOM. * We had an unused layer of divs in the main UI. * The
div was superfluous with the body-level div in app.html. * Some formatting changes in one component?? Weird. --- ui/app.html | 2 +- ui/lib/components/Message.svelte | 12 ++++++------ ui/routes/+layout.svelte | 42 ++++++++++++++-------------------------- 3 files changed, 22 insertions(+), 34 deletions(-) (limited to 'ui') 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% -
%sveltekit.body%
+
%sveltekit.body%
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/routes/+layout.svelte b/ui/routes/+layout.svelte index d786389..30634e9 100644 --- a/ui/routes/+layout.svelte +++ b/ui/routes/+layout.svelte @@ -20,30 +20,18 @@ let { children } = $props(); -
-
- - - - - understory - - {#if $currentUser} - - {/if} - - -
- - {@render children?.()} -
- - + + + + + understory + + {#if $currentUser} + + {/if} + + + +{@render children?.()} -- cgit v1.2.3 From fc73108b07e61ab0159ada120f2fb60c430b1d4c Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Tue, 5 Nov 2024 19:25:20 -0500 Subject: Move `showMenu` out of globals and into page state. I generally don't love globals, and the scope of this global is pretty narrow. Let's use the context hierarchy for this, instead. (Kit mentioned that it might be possible to use CSS variables for this.) --- ui/lib/store.js | 1 - ui/routes/(app)/+layout.svelte | 7 ++++--- ui/routes/+layout.svelte | 12 +++++++++--- 3 files changed, 13 insertions(+), 7 deletions(-) (limited to 'ui') 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 @@ - -
- {#if $currentUser} - @{$currentUser.username} - {/if} - -
- - diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte index 30da6f0..8d24a61 100644 --- a/ui/routes/(app)/me/+page.svelte +++ b/ui/routes/(app)/me/+page.svelte @@ -1,5 +1,7 @@ +
+ +
+