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/lib/components/Channel.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'ui/lib/components')

diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index e62f0f3..bbe9ff7 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -1,14 +1,20 @@
 <script>
+    import { showMenu } from '$lib/store';
+
     export let id;
     export let name;
     export let active = false;
+
+    function hideMenu() {
+        showMenu.update(() => false);
+    }
 </script>
 
 <li
     class="rounded-full"
     class:bg-slate-400={active}
 >
-<a href="/ch/{id}">
+<a href="/ch/{id}" on:click={hideMenu}>
     <span class="badge bg-primary-500">#</span>
     <span class="flex-auto">{name}</span>
 </a>
-- 
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/lib/components')

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