summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ui/app.css6
-rw-r--r--ui/lib/components/Message.svelte40
-rw-r--r--ui/lib/components/MessageRun.svelte15
-rw-r--r--ui/routes/(app)/+layout.svelte54
-rw-r--r--ui/routes/(app)/ch/[channel]/+page.svelte20
-rw-r--r--ui/styles/active-channel.css3
-rw-r--r--ui/styles/app-bar.css1
-rw-r--r--ui/styles/app-layout.css56
-rw-r--r--ui/styles/messages.css83
-rw-r--r--ui/styles/sidebar.css11
-rw-r--r--ui/styles/textarea.css38
-rw-r--r--ui/styles/variables.css28
12 files changed, 228 insertions, 127 deletions
diff --git a/ui/app.css b/ui/app.css
index c4b464b..a945c6a 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -2,11 +2,17 @@
@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");
/* Debugging */
+/* * /
div {
outline: 1px dashed grey;
background-color: var(--colour-background);
box-shadow: 5px 5px 5px var(--colour-border);
}
+/* */
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index cfadbba..6918b5d 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -26,8 +26,8 @@
</script>
<div
- class="message relative"
- class:bg-warning-800={deleteArmed}
+ class="message"
+ class:delete-armed={deleteArmed}
role="article"
data-at={at}
{onmouseleave}
@@ -43,39 +43,3 @@
{@html renderedBody}
</section>
</div>
-
-<style>
- .message .handle {
- display: none;
- }
- .message:hover .handle {
- 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;
- }
- /* Without the global selector, the Svelte CSS compiler will see this as
- * unused, and purge it from the output. However, this is "plausibly used"
- * because it may occur in renderedBody.
- */
- :global(.message-body blockquote) {
- border-left: 0.25rem solid lightgrey;
- margin-left: 0.5rem;
- padding-left: 0.5rem;
- }
- :global(.message-body pre) {
- border: 1px solid #312e81;
- border-radius: 0.25rem;
- background-color: #282555;;
- padding: 0.25rem;
- }
-</style>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 6cad381..09388ac 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -9,6 +9,7 @@
</script>
<div
+ class="message-run"
class:own-message={ownMessage}
class:other-message={!ownMessage}
>
@@ -19,17 +20,3 @@
<Message {...message} editable={ownMessage} />
{/each}
</div>
-
-<style>
- .own-message {
- background-color: rgb(32, 42, 74);
- }
- /* Honestly, I don't love scoping styles per component, and this is a great
- * example of why. MessageRuns know if they're own-message, but Messages in
- * them need to get a style based on that fact. I don't wanna bucket-brigade
- * that fact into the Message, when it's a pure CSS concern.
- */
- .own-message :global(*) {
- color: rgb(198, 198, 198);
- }
-</style>
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 8a70c4b..cacfc2d 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -126,63 +126,19 @@
{#if loading}
<h2>Loading&hellip;</h2>
{:else}
- <div id="interface" class="p-2">
+ <div id="interface">
<nav id="sidebar" data-expanded={pageContext.showMenu}>
- <div class="channel-list">
<ChannelList active={channel} channels={enrichedChannels} />
+ <!--
+ <div class="channel-list">
</div>
+ -->
<div class="create-channel">
<CreateChannelForm />
</div>
</nav>
- <main class="pl-4">
+ <main>
{@render children?.()}
</main>
</div>
{/if}
-
-<style>
- #interface {
- margin: unset;
- display: grid;
- grid-template:
- 'side main' 1fr
- / auto 1fr;
- height: calc(100vh - var(--app-bar-height));
-
- @media (width > 640px) {
- --overlay: static;
- --translate: 0;
- }
- }
- nav {
- grid-area: side;
- background-color: rgb(var(--color-surface-800));
- inset: auto auto 0 0;
- padding: 0.25rem;
- position: var(--overlay, absolute);
- transition: translate 300ms ease-out;
- width: var(--nav-width);
- height: 100vh;
- @media (width > 640px) {
- height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
- }
- z-index: 10;
- border-top-right-radius: 1.4rem;
- border-bottom-right-radius: 1.4rem;
- }
- main {
- grid-area: main;
- height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
- }
- .channel-list {
- height: calc(100vh - var(--input-row-height));
- @media (width > 640px) {
- height: calc(100vh - var(--app-bar-height) - var(--input-row-height) - var(--interface-padding));
- }
- overflow: auto;
- }
- nav[data-expanded='false'] {
- translate: var(--translate, -100% 0);
- }
-</style>
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index d4e04fe..8eba709 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -67,24 +67,6 @@
<div class="active-channel" on:scroll={handleScroll} bind:this={activeChannel}>
<ActiveChannel {messageRuns} />
</div>
-<div class="create-message max-h-full">
+<div class="create-message">
<MessageInput {channel} />
</div>
-
-<style>
- .active-channel {
- height: calc(
- 100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)
- );
- overflow: auto;
- }
- .create-message {
- position: fixed;
- bottom: 0.5rem;
- width: calc(100% - var(--nav-width) - 2rem);
- @media (width <= 640px) {
- width: 100%;
- left: 0;
- }
- }
-</style>
diff --git a/ui/styles/active-channel.css b/ui/styles/active-channel.css
new file mode 100644
index 0000000..6efc3e3
--- /dev/null
+++ b/ui/styles/active-channel.css
@@ -0,0 +1,3 @@
+.active-channel {
+ padding: 1rem;
+}
diff --git a/ui/styles/app-bar.css b/ui/styles/app-bar.css
index 401a278..caa50ed 100644
--- a/ui/styles/app-bar.css
+++ b/ui/styles/app-bar.css
@@ -5,6 +5,7 @@
flex-direction: row;
justify-content: space-between;
align-items: stretch;
+ background-color: var(--colour-background);
}
.app-bar > * {
diff --git a/ui/styles/app-layout.css b/ui/styles/app-layout.css
new file mode 100644
index 0000000..ef1eb10
--- /dev/null
+++ b/ui/styles/app-layout.css
@@ -0,0 +1,56 @@
+/* TODO: generally remove literals from this file. */
+
+#interface {
+ margin: unset;
+ display: grid;
+ grid-template:
+ 'side main' 1fr
+ / auto 1fr;
+ height: calc(100vh - var(--app-bar-height));
+
+ @media (width > 640px) {
+ --overlay: static;
+ --translate: 0;
+ }
+}
+
+nav#sidebar {
+ grid-area: side;
+ inset: auto auto 0 0;
+ padding-right: 0.5rem;
+ position: var(--overlay, absolute);
+ transition: translate 300ms ease-out;
+ width: var(--nav-width);
+ height: 100vh;
+ z-index: 10;
+
+ border-radius: 0 1.4rem 1.4rem 0;
+
+ background-color: var(--colour-background-alt);
+
+ @media (width > 640px) {
+ height: calc(100vh - var(--app-bar-height));
+ }
+}
+
+nav.list-nav {
+ height: calc(100vh - var(--input-row-height) - var(--interface-padding));
+ overflow: auto;
+
+ @media (width > 640px) {
+ height: calc(100vh - var(--app-bar-height) - var(--input-row-height) - var(--interface-padding));
+ }
+}
+
+main {
+ grid-area: main;
+ height: calc(100vh - var(--app-bar-height));
+}
+
+main textarea {
+ resize: none;
+}
+
+nav[data-expanded='false'] {
+ translate: var(--translate, -100% 0);
+}
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
new file mode 100644
index 0000000..bd46baf
--- /dev/null
+++ b/ui/styles/messages.css
@@ -0,0 +1,83 @@
+.message-run {
+ position: relative;
+ border-radius: 0.25rem;
+ border: 1px solid var(--colour-border);
+ padding: 0 0 0.5rem 0;
+ margin-bottom: 1rem;
+ box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.5);
+}
+
+/* TODO: replace these with colour variables. */
+.own-message {
+ background-color: rgb(32, 42, 74);
+}
+
+.own-message * {
+ color: rgb(198, 198, 198);
+}
+
+.message-run > span {
+ /* Username */
+ color: var(--colour-text);
+ background-color: rgb(67, 88, 156);
+}
+
+.message {
+ padding: 0.5rem 0 0 0.5rem;
+}
+
+.message:hover {
+ background-color: rgb(21, 28, 49);
+}
+
+.message .handle {
+ --text-size: 0.5rem;
+ float: right;
+ line-height: var(--text-size);
+ font-size: var(--text-size);
+ top: -0.5rem;
+ position: relative;
+ padding: 0.25rem;
+ border-radius: 0.25rem;
+ display: none;
+ background-color: rgb(67, 88, 156);
+}
+
+.message:hover .handle {
+ display: flex;
+}
+
+.message .handle button {
+ line-height: 0.35rem;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.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;
+}
+
+/* For rendered message bodies: */
+.message-body blockquote {
+ border-left: 0.25rem solid lightgrey;
+ margin-left: 0.5rem;
+ padding-left: 0.5rem;
+}
+.message-body pre {
+ border: 1px solid #312e81;
+ border-radius: 0.25rem;
+ background-color: #282555;;
+ padding: 0.25rem;
+}
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index e512847..e9098f2 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -3,6 +3,10 @@
background-color: var(--colour-background-alt);
}
+.list-nav ul {
+ padding: 0.5rem;
+}
+
.list-nav li {
padding: 0.5rem;
border-radius: 0.5rem;
@@ -32,8 +36,15 @@
border: 1px solid var(--colour-border);
z-index: 1; /* Just to make the focus-active border go over the following button. */
flex-grow: 1;
+ background-color: var(--colour-text);
+ color: var(--colour-background);
}
.create-channel button {
border-radius: 0 0.5rem 0.5rem 0;
+ border: 1px solid var(--colour-border);
+ background-color: var(--colour-text);
+ color: var(--colour-background);
}
+
+/* TODO: media-query stuff. Margin-left at a constant zero? */
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
new file mode 100644
index 0000000..72d727f
--- /dev/null
+++ b/ui/styles/textarea.css
@@ -0,0 +1,38 @@
+/* Message input */
+.create-message form {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: stretch;
+}
+
+.create-message textarea {
+ padding: 0.5rem;
+ border-radius: 0.5rem 0 0 0.5rem;
+ border: 1px solid var(--colour-border);
+ z-index: 1; /* Just to make the focus-active border go over the following button. */
+ flex-grow: 1;
+ background-color: var(--colour-text);
+ color: var(--colour-background);
+}
+
+.create-message button {
+ border-radius: 0 0.5rem 0.5rem 0;
+ border: 1px solid var(--colour-border);
+ background-color: var(--colour-text);
+ color: var(--colour-background);
+}
+
+.active-channel {
+ overflow: auto;
+ flex-grow: 1;
+ /* TODO: make this all-app background */
+ background-color: var(--colour-background);
+}
+
+main {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: stretch;
+}
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index e948c71..5ea4d74 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -8,11 +8,25 @@
--nav-width: 21rem;
/* coloUrs */
- --colour-background: rgba(0, 0, 0, 0.25);
- --colour-background-alt: rgba(0, 0, 0, 0.35);
- --colour-border: rgba(0, 0, 0, 0.45);
- --colour-text: rgb(240, 240, 240);
- --colour-okay: #2a9d8f;
- --colour-warn: #e9c46a;
- --colour-error: #e76f51;
+ /* Really, we need:
+ * - Dark header background
+ * - Medium sidebar background
+ * - Light channel background
+ * - okay/warn/error
+ * - Border colours?
+ * - Text colour
+ * - Hover colour
+ * - Active colour
+ */
+ --colour-background: #253031;
+ --colour-border: #192122;
+
+ --colour-background-alt: #426A5A;
+ --colour-border-alt: #2E4A3E;
+
+ --colour-text: #FFFFEA;
+
+ --colour-okay: #6A994E;
+ --colour-warn: #EBC3BE;
+ --colour-error: #DE5F55;
}
generated by cgit v1.2.3 (git 2.39.1) at 2026-01-02 07:24:19 +0000