From 8f360dd9cc45bb14431238ccc5e3d137c020fa7b Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Wed, 23 Oct 2024 21:52:24 -0400
Subject: Do a big mobile app design thing

Mobile-friendly anyway. Thanks to
[Miriam](https://www.miriamsuzanne.com/) for the CSS that enables a
sliding menu on mobile size, constant menu on larger.
---
 ui/routes/(app)/+layout.svelte | 108 +++++++++++++++++++++++++++++------------
 1 file changed, 78 insertions(+), 30 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 9abaaf4..b63a607 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -4,7 +4,7 @@
 	import { onMount, onDestroy } from 'svelte';
 
 	import { boot, subscribeToEvents } from '$lib/apiServer';
-	import { currentUser, logins, channelsList, messages } from '$lib/store';
+	import { showMenu, currentUser, logins, channelsList, messages } from '$lib/store';
 
     import ChannelList from '$lib/components/ChannelList.svelte';
     import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
@@ -12,6 +12,15 @@
 
     let loading = true;
     let events = null;
+    let showMenuValue;
+    showMenu.subscribe((value) => {
+        showMenuValue = value;
+    });
+
+
+    function toggleMenu() {
+        showMenu.update((value) => !value);
+    }
 
     $: channel = $page?.params?.channel;
 
@@ -57,37 +66,76 @@
 {#if loading}
     <h2>Loading&hellip;</h2>
 {:else}
-    <div id="interface">
-        <div class="channel-list">
-            <ChannelList active={channel} />
-        </div>
-        <div class="active-channel">
-            <slot />
-        </div>
-        <div class="create-channel">
-            <CreateChannelForm />
-        </div>
-        <div class="create-message">
-            <MessageInput {channel} />
-        </div>
+    <div id="interface" class="h-full pt-20 p-2">
+        <main>
+            <div class="active-channel border border-solid border-gray-400 rounded-[1.25rem]">
+                <slot />
+            </div>
+            <div class="create-message overflow-scroll max-h-full">
+                <MessageInput {channel} />
+            </div>
+        </main>
+
+        <nav id="sidebar" data-expanded={showMenuValue}>
+            <button class="h-4 w-4" aria-controls="sidebar" aria-expanded={showMenuValue} on:click={toggleMenu}>&#10006;</button>
+            <div class="channel-list">
+                <ChannelList active={channel} />
+            </div>
+            <div class="create-channel">
+                <CreateChannelForm />
+            </div>
+        </nav>
     </div>
 {/if}
 
 <style>
-    #interface {
-        height: 88vh;
-        margin: 1rem;
-        display: grid;
-        grid-template-columns: 18rem auto;
-        grid-template-rows: auto 2rem;
-        grid-gap: 0.25rem;
-    }
-    #interface div {
-        max-height: 100%;
-        overflow: scroll;
-    }
-    #interface .active-channel {
-        border: 1px solid grey;
-        border-radius: 1.25rem;
-    }
+#interface {
+  margin: unset;
+  min-block-size: 100%;
+  display: grid;
+  grid-template: 
+    'side main' 1fr
+    / auto 1fr
+  ;
+  
+  @media (width > 50em) {
+    --toggle-display: none;
+    --overlay: static;
+    --translate: 0;
+  }
+}
+nav {
+    grid-area: side;
+    background-color: rgb(var(--color-surface-600));
+    inset: 0 auto 0 0;
+    padding: 0.25rem;
+    position: var(--overlay, absolute);
+    transition: translate 300ms ease-out;
+    height: 100vh;
+    width: 21rem;
+}
+nav button {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+.active-channel {
+    height: 87vh;
+    overflow: scroll;
+}
+.channel-list {
+    height: 94vh;
+    overflow: scroll;
+}
+main {
+    grid-area: main;
+    max-height: 88vh;  /* How do we ensure that this is 100vh - header size? */
+}
+nav[data-expanded=false] {
+  translate: var(--translate, -100% 0);
+}
+[aria-controls="sidebar"] {
+  display: var(--toggle-display, revert);
+}
+
 </style>
-- 
cgit v1.2.3


From 0b4e900c35d540f6047fc29863c174e96ff20d0b Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Wed, 30 Oct 2024 15:00:44 -0400
Subject: Calculate layout height more betterly

---
 ui/routes/(app)/+layout.svelte | 25 +++++++++++++++----------
 ui/routes/+layout.svelte       |  2 +-
 2 files changed, 16 insertions(+), 11 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index b63a607..c337b3f 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -66,7 +66,7 @@
 {#if loading}
     <h2>Loading&hellip;</h2>
 {:else}
-    <div id="interface" class="h-full pt-20 p-2">
+    <div id="interface" class="p-2">
         <main>
             <div class="active-channel border border-solid border-gray-400 rounded-[1.25rem]">
                 <slot />
@@ -89,9 +89,14 @@
 {/if}
 
 <style>
+:root {
+    --app-bar-height: 5rem;
+    --input-row-height: 2rem;
+}
+
 #interface {
   margin: unset;
-  min-block-size: 100%;
+  /* min-block-size: 100%;*/
   display: grid;
   grid-template: 
     'side main' 1fr
@@ -107,11 +112,11 @@
 nav {
     grid-area: side;
     background-color: rgb(var(--color-surface-600));
-    inset: 0 auto 0 0;
+    inset: auto auto 0 0;
     padding: 0.25rem;
     position: var(--overlay, absolute);
     transition: translate 300ms ease-out;
-    height: 100vh;
+    height: calc(100vh - var(--app-bar-height));
     width: 21rem;
 }
 nav button {
@@ -119,18 +124,18 @@ nav button {
     top: 0;
     right: 0;
 }
+main {
+    grid-area: main;
+    height: calc(100vh - var(--app-bar-height));
+}
 .active-channel {
-    height: 87vh;
+    height: calc(100vh - var(--app-bar-height) - var(--input-row-height));
     overflow: scroll;
 }
 .channel-list {
-    height: 94vh;
+    height: calc(100vh - var(--app-bar-height) - var(--input-row-height));
     overflow: scroll;
 }
-main {
-    grid-area: main;
-    max-height: 88vh;  /* How do we ensure that this is 100vh - header size? */
-}
 nav[data-expanded=false] {
   translate: var(--translate, -100% 0);
 }
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 6e6a8d6..b7ed746 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -15,7 +15,7 @@
 
 <div id="app" class="m-0 p-0 h-vh w-full">
     <div class="w-full">
-        <AppBar>
+        <AppBar class="app-bar">
             <svelte:fragment slot="lead">
                 <a on:click|preventDefault={toggleMenu} class="cursor-pointer">
                 <img class="w-8 h-8" alt="logo" src={logo} />
-- 
cgit v1.2.3


From 610f6839d2e449d172aa6ac35e6c1de0677a0754 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Wed, 30 Oct 2024 16:47:19 -0400
Subject: Add more mobile styling

---
 ui/lib/components/Message.svelte | 11 ++++++++++-
 ui/routes/(app)/+layout.svelte   | 14 ++++++--------
 2 files changed, 16 insertions(+), 9 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index d040433..2705e4b 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -10,9 +10,10 @@
     let timestamp = new Date(at).toTimeString();
     let name;
     $: name = $logins.get(sender);
+    $: ownMessage = $currentUser.id == sender;
 </script>
 
-<div class="card card-hover m-4 relative">
+<div class="card card-hover m-4 relative" class:own-message={ownMessage} class:other-message={!ownMessage}>
     <span class="chip variant-soft sticky top-o left-0">
         <!-- TODO: should this show up for only the first of a run? -->
         @{name}:
@@ -30,4 +31,12 @@
     .card:hover .timestamp {
         display: flex;
     }
+    .own-message {
+        width: 80%;
+        margin-right: auto;
+    }
+    .other-message {
+        width: 80%;
+        margin-left: auto;
+    }
 </style>
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index c337b3f..9fcdf41 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -63,6 +63,10 @@
     });
 </script>
 
+<svelte:head>
+    <title>understory</title>
+</svelte:head>
+
 {#if loading}
     <h2>Loading&hellip;</h2>
 {:else}
@@ -90,21 +94,19 @@
 
 <style>
 :root {
-    --app-bar-height: 5rem;
+    --app-bar-height: 68px;
     --input-row-height: 2rem;
 }
 
 #interface {
   margin: unset;
-  /* min-block-size: 100%;*/
   display: grid;
   grid-template: 
     'side main' 1fr
     / auto 1fr
   ;
   
-  @media (width > 50em) {
-    --toggle-display: none;
+  @media (width > 640px) {
     --overlay: static;
     --translate: 0;
   }
@@ -139,8 +141,4 @@ main {
 nav[data-expanded=false] {
   translate: var(--translate, -100% 0);
 }
-[aria-controls="sidebar"] {
-  display: var(--toggle-display, revert);
-}
-
 </style>
-- 
cgit v1.2.3


From 239bd4436be93cec7b8c3b1a7357146431f9048a Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Thu, 31 Oct 2024 00:11:32 -0400
Subject: Futz with layout a bit

---
 ui/routes/(app)/+layout.svelte | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 9fcdf41..c57b747 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -96,6 +96,7 @@
 :root {
     --app-bar-height: 68px;
     --input-row-height: 2rem;
+    --interface-padding: 16px;
 }
 
 #interface {
@@ -105,6 +106,7 @@
     'side main' 1fr
     / auto 1fr
   ;
+  height: calc(100vh - var(--app-bar-height));
   
   @media (width > 640px) {
     --overlay: static;
@@ -118,8 +120,8 @@ nav {
     padding: 0.25rem;
     position: var(--overlay, absolute);
     transition: translate 300ms ease-out;
-    height: calc(100vh - var(--app-bar-height));
     width: 21rem;
+    height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
 }
 nav button {
     position: absolute;
@@ -128,14 +130,14 @@ nav button {
 }
 main {
     grid-area: main;
-    height: calc(100vh - var(--app-bar-height));
+    height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
 }
 .active-channel {
-    height: calc(100vh - var(--app-bar-height) - var(--input-row-height));
+    height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height));
     overflow: scroll;
 }
 .channel-list {
-    height: calc(100vh - var(--app-bar-height) - var(--input-row-height));
+    height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height));
     overflow: scroll;
 }
 nav[data-expanded=false] {
-- 
cgit v1.2.3


From 6d523b4247f750e2bbd8e16fb3ce206323982e8e Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Thu, 31 Oct 2024 00:26:11 -0400
Subject: Rearrange DOM because Owen asked me to

---
 ui/routes/(app)/+layout.svelte | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index c57b747..cf5d5f1 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -71,15 +71,6 @@
     <h2>Loading&hellip;</h2>
 {:else}
     <div id="interface" class="p-2">
-        <main>
-            <div class="active-channel border border-solid border-gray-400 rounded-[1.25rem]">
-                <slot />
-            </div>
-            <div class="create-message overflow-scroll max-h-full">
-                <MessageInput {channel} />
-            </div>
-        </main>
-
         <nav id="sidebar" data-expanded={showMenuValue}>
             <button class="h-4 w-4" aria-controls="sidebar" aria-expanded={showMenuValue} on:click={toggleMenu}>&#10006;</button>
             <div class="channel-list">
@@ -89,6 +80,14 @@
                 <CreateChannelForm />
             </div>
         </nav>
+        <main>
+            <div class="active-channel border border-solid border-gray-400 rounded-[1.25rem]">
+                <slot />
+            </div>
+            <div class="create-message overflow-scroll max-h-full">
+                <MessageInput {channel} />
+            </div>
+        </main>
     </div>
 {/if}
 
@@ -122,6 +121,7 @@ nav {
     transition: translate 300ms ease-out;
     width: 21rem;
     height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
+    z-index: 10;
 }
 nav button {
     position: absolute;
-- 
cgit v1.2.3