From 7b8587e85e1e16904018d1f0cf57d09e6307c8cf Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Thu, 9 Jan 2025 11:29:27 -0500 Subject: Rectilinear sidebar, rather than rounded. The rounded corners were leaving some visually-displeasing shapes and gaps near the bottom of the app. --- ui/styles/app-layout.css | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui/styles') diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css index f5b24ab..50fa704 100644 --- a/ui/styles/app-layout.css +++ b/ui/styles/app-layout.css @@ -24,8 +24,6 @@ nav#sidebar { height: 100vh; z-index: 10; - border-radius: 0 0.8rem 0.8rem 0; - background-color: var(--colour-navbar-bg); @media (width > 640px) { -- cgit v1.2.3 From 4fc3fffb8de27d27928f488e58e81739a3021e10 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Thu, 9 Jan 2025 11:36:09 -0500 Subject: Reinstate delete-armed message colouring --- ui/styles/messages.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/styles') diff --git a/ui/styles/messages.css b/ui/styles/messages.css index 16333af..404b14c 100644 --- a/ui/styles/messages.css +++ b/ui/styles/messages.css @@ -43,6 +43,11 @@ position: relative; } +.message.delete-armed, +.message.delete-armed:hover { + background-color: var(--colour-warn); +} + .message:hover { background-color: var(--colour-message-hover-bg); } -- cgit v1.2.3 From 25c066d7bd59a921e04504656b3c94ef89f36419 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Sat, 11 Jan 2025 13:20:18 -0500 Subject: Use margins, rather than alternating float/non-float elements, to lay out own/other messages. --- ui/lib/components/ActiveChannel.svelte | 4 +--- ui/styles/active-channel.css | 3 ++- ui/styles/messages.css | 6 +++--- 3 files changed, 6 insertions(+), 7 deletions(-) (limited to 'ui/styles') diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte index ba62d6c..9c181e4 100644 --- a/ui/lib/components/ActiveChannel.svelte +++ b/ui/lib/components/ActiveChannel.svelte @@ -5,7 +5,5 @@ {#each messageRuns as { sender, messages }} -
- -
+ {/each} diff --git a/ui/styles/active-channel.css b/ui/styles/active-channel.css index 96e8354..d6a9b42 100644 --- a/ui/styles/active-channel.css +++ b/ui/styles/active-channel.css @@ -1,5 +1,6 @@ .active-channel { - padding: 1rem; + padding-left: 1rem; + padding-right: 1rem; overflow: auto; flex-grow: 1; } diff --git a/ui/styles/messages.css b/ui/styles/messages.css index 404b14c..a07c5d9 100644 --- a/ui/styles/messages.css +++ b/ui/styles/messages.css @@ -2,17 +2,16 @@ position: relative; border-radius: 0.25rem; padding: 0 0 0.5rem 0; + margin-top: 1rem; margin-bottom: 1rem; box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5); - width: 95%; - clear: both; overflow: hidden; } .own-message { background-color: var(--colour-message-run-self-bg); border: 1px solid var(--colour-message-run-self-border); - float: right; + margin-left: 2rem; } .own-message * { @@ -22,6 +21,7 @@ .other-message { background-color: var(--colour-message-run-other-bg); border: 1px solid var(--colour-message-run-other-border); + margin-right: 2rem; } .other-message * { -- cgit v1.2.3 From d858fc8105cfe6333671426fe0e43302bceace92 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Sat, 11 Jan 2025 13:33:59 -0500 Subject: Remove padding around the app-bar logo button, to stop safari from laying it out overlapping with the main area --- ui/styles/app-bar.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/styles') diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css index 238e248..dcc447a 100644 --- a/ui/styles/app-bar.css +++ b/ui/styles/app-bar.css @@ -16,6 +16,11 @@ flex-basis: 60px; } +.app-bar .lead button { + padding: 0; + border: 0; +} + .app-bar .trail { flex-basis: 60px; line-height: var(--app-bar-height); -- cgit v1.2.3 From 6d51f8568e337e768505ccfdef916b84dd6eb1b3 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Sat, 11 Jan 2025 13:34:13 -0500 Subject: npm run format --- ui/app.css | 22 ++--- ui/lib/components/ChangePassword.svelte | 7 +- ui/lib/components/Channel.svelte | 2 +- ui/lib/components/CreateChannelForm.svelte | 7 +- ui/lib/components/LogIn.svelte | 8 +- ui/lib/components/Message.svelte | 8 +- ui/lib/components/MessageInput.svelte | 11 +-- ui/lib/components/MessageRun.svelte | 6 +- ui/lib/store/channels.svelte.js | 9 +- ui/lib/store/messages.svelte.js | 2 +- ui/routes/(app)/+layout.svelte | 6 +- ui/routes/(app)/+page.svelte | 4 +- ui/routes/(app)/ch/[channel]/+page.svelte | 14 +-- ui/styles/app-layout.css | 4 +- ui/styles/reset.css | 147 ++++++++++++++++++++++------- ui/styles/sidebar.css | 2 +- ui/styles/textarea.css | 2 +- ui/styles/variables.css | 18 +++- 18 files changed, 167 insertions(+), 112 deletions(-) (limited to 'ui/styles') diff --git a/ui/app.css b/ui/app.css index 2df588e..a02106d 100644 --- a/ui/app.css +++ b/ui/app.css @@ -1,14 +1,14 @@ -@import url("styles/reset.css"); -@import url("styles/variables.css"); -@import url("styles/overscroll.css"); -@import url("styles/app-bar.css"); -@import url("styles/app-layout.css"); -@import url("styles/sidebar.css"); -@import url("styles/active-channel.css"); -@import url("styles/messages.css"); -@import url("styles/textarea.css"); -@import url("styles/forms.css"); -@import url("styles/invites.css"); +@import url('styles/reset.css'); +@import url('styles/variables.css'); +@import url('styles/overscroll.css'); +@import url('styles/app-bar.css'); +@import url('styles/app-layout.css'); +@import url('styles/sidebar.css'); +@import url('styles/active-channel.css'); +@import url('styles/messages.css'); +@import url('styles/textarea.css'); +@import url('styles/forms.css'); +@import url('styles/invites.css'); body { background-color: var(--colour-active-channel-bg); diff --git a/ui/lib/components/ChangePassword.svelte b/ui/lib/components/ChangePassword.svelte index 51ebccd..bf94ea7 100644 --- a/ui/lib/components/ChangePassword.svelte +++ b/ui/lib/components/ChangePassword.svelte @@ -35,12 +35,7 @@