Merge pull request #165 from nasa-petal/mobile-safe-area

Fix safe area mobile, Fix cuttoff of safearea mobile, Set sidebar to …
nasa-petal · Aug 13, 2024 · 8a4d03a · 8a4d03a
2 parents cd0d5ef + 7e5635b
commit 8a4d03a
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 80 deletions.
diff --git a/public/global.css b/public/global.css
@@ -69,7 +69,7 @@
 html {
   background: var(--chat-background-color);
   text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
-  height: 100%;
+  height: 100dvh;
   overscroll-behavior-y: none;
   -webkit-overscroll-behavior-y: none;
 }

diff --git a/src/App.svelte b/src/App.svelte
@@ -157,7 +157,6 @@
   function onLoadComplete() {
     loading = false;
   }
-
 </script>
 
 <main class="flex w-full h-full">
@@ -176,8 +175,9 @@
         changeAssistant={changeAssistants}
         />   
 
-      <div id="content-container" class="flex justify-between w-full h-full flex-1">
-        <div class="sidebar-container">
+      <div class="content-container flex justify-between w-full h-full" class:open>
+
+        <div class="sidebar-container w-0 h-full">
           <Sidebar 
             bind:threads
             bind:open
@@ -188,8 +188,8 @@
             />
         </div>
 
-        <div id="chat-container" class="w-full" class:loading class:open>
-          {#key activeThread.id}
+        {#key activeThread.id}
+        <div class="chat-container w-full" class:loading>
           <AssistantDeepChat
             key={activeKey}
             asst={activeAsst}
@@ -201,8 +201,8 @@
             width="100%"
             height="100%"
             />
-          {/key}
         </div>
+        {/key}
       </div>
     {/if}
     {/await}
@@ -211,51 +211,47 @@
 
 
 <style>
-  #content-container {
+  main {
+    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    width: 100%;
+    height: calc(100% + env(safe-area-inset-top));
+    padding-top: env(safe-area-inset-top);
+  }
+
+  .content-container {
     height: calc(100% - 3rem);
-    overflow: hidden;
+    width: 100%;
+    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
   }
 
-  .sidebar-container {
-    overflow: hidden;
+  .loading {
+    filter: blur(2px);
+    pointer-events: none;
   }
 
-  #chat-container {
-    transition: width 0.3s ease, filter 0.3s ease-out;
+  .chat-container {
+    transition: width 0.3s ease;
   }
-  
-  .open {
-    width: 80%;
+  .sidebar-container {
+    transition: width 0.3s ease;
   }
 
-  @media only screen and (max-width: 1400px) {
-    .open {
-      width: 70%;
-    }
+  .open > .sidebar-container {
+    width: 300px;
   }
 
-  @media only screen and (max-width: 1000px) {
-    .open {
-      width: 60%;
-    }
+  .open > .chat-container {
+    width: calc(100% - 300px);
   }
 
   @media only screen and (max-width: 700px) {
-    .open {
-      width: 100%;
+    .open > .sidebar-container {
+      width: 0;
     }
-  }
-
-  main {
-    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-    width: 100%;
-    height: calc(100% + env(safe-area-inset-top));
-    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
-  }
 
-  .loading {
-    filter: blur(2px);
-    pointer-events: none;
+    .open > .chat-container {
+      width: 100%;
+    }
   }
 </style>
 
diff --git a/src/components/Hamburger.svelte b/src/components/Hamburger.svelte
@@ -3,8 +3,8 @@
 </script>
 
 <div class="container flex items-center">
-    <button tabindex="0" class="focus:outline-none menu" class:open on:click={() => open = !open}>
-        <img class="menu-image" src="chevron-right-blue.svg" alt="menu"/>
+    <button tabindex="0" class="focus:outline-none menu w-full h-full" class:open on:click={() => open = !open}>
+        <img class="menu-image m-auto" src="chevron-right-blue.svg" alt="menu"/>
     </button>
 </div>
 

diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
@@ -9,9 +9,9 @@
 	}
 </script>
 
-<div class="container p-2">
-	<button tabindex="0" class="focus:outline-none menu-button" class:open on:click={() => {open = !open;}}>
-		<img class="menu-image" src="ellipsis-vertical-blue.svg" alt="menu"/>
+<div class="container">
+	<button tabindex="0" class="focus:outline-none menu-button w-full h-full" class:open on:click={() => {open = !open;}}>
+		<img class="menu-image m-auto" src="ellipsis-vertical-blue.svg" alt="menu"/>
 	</button>
 	<div class="menu-container bg-gray-600 focus:no-outline" class:open>
 		<menu class="p-1"><slot /></menu>
@@ -52,8 +52,8 @@
 		box-shadow: 0 0 1rem 0 var(--box-shadow-color);
 
 		position: absolute;
+		right: calc(1% + env(safe-area-inset-left));
 		visibility: hidden;
-		right: 1%;
 		overflow: hidden;
 
 		z-index: 39;

diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
@@ -70,7 +70,7 @@
 </script>
 
 <header class="flex py-2 justify-between items-center text-gray-600">
-  <nav class="flex mx-2">
+  <nav class="sidebar-toggle flex">
     <Hamburger bind:open={sidebar}/>
   </nav>
 
@@ -79,7 +79,10 @@
   {:else}
     <button tabindex="0" class="focus:no-outline px-3 py-1 rounded-full" on:click={handleButtonClick}>{chatName}</button>
   {/if}
-  <NavMenu bind:chatName={chatName} bind:open={navMenuOpen} handleModalOpen={handleModalOpen}/>
+  <div class="menu-toggle">
+    <NavMenu bind:chatName={chatName} bind:open={navMenuOpen} handleModalOpen={handleModalOpen}/>
+  </div>
+
 </header>
 
 <AssistantSelectModal bind:open={assistantModalOpen} handleClose={handleModalClose} handleAssistantChange={handleAssistantChange} bind:currAsst options={assistantOptions} />
@@ -106,4 +109,13 @@
   input {
     background-color: var(--nav-off-color);
   }
+
+  .sidebar-toggle {
+    margin-left: env(safe-area-inset-left);
+  }
+
+  .menu-toggle {
+    margin-right: env(safe-area-inset-left);
+  }
+
 </style>
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
@@ -11,6 +11,7 @@
   import Chat from './Chat.svelte'
 
   function isSmallScreen() {
+    //console.log("screen size:", window.innerWidth)
     return window.innerWidth < 700;
   }
 
@@ -50,20 +51,20 @@
 
 </script>
 
-<div>
-  <aside class="absolute flex flex-col" class:open>
-    <button tabindex="0" class="focus:outline-none new-thread rounded-full m-2 text-base font-sans p-2" disabled={!open} on:click={handleButtonClick}>New Thread</button>
-    <nav class="w-full">
-      <div class="w-full h-full">
-        {#if threads !== null}
-          {#each threads as thread}
-            <Chat handleSelect={handleChatClick} handleDelete={handleChatSwipe} selected={thread.id === selectedThreadId} bind:thread/>
-          {/each}
-        {/if}
-      </div>
-    </nav>
-  </aside>
-</div>
+<aside class:open>
+  <div class="side-container w-full h-full flex flex-col">
+  <button tabindex="0" class="focus:outline-none new-thread rounded-full text-base font-sans p-2" disabled={!open} on:click={handleButtonClick}>New Thread</button>
+  <nav class="w-full">
+    <div class="w-full h-full">
+      {#if threads !== null}
+        {#each threads as thread}
+          <Chat handleSelect={handleChatClick} handleDelete={handleChatSwipe} selected={thread.id === selectedThreadId} bind:thread/>
+        {/each}
+      {/if}
+    </div>
+  </nav>
+  </div>
+</aside>
 
 <style>
   button:focus-visible {
@@ -74,24 +75,32 @@
     padding-bottom: calc(2 * env(safe-area-inset-bottom));
   }
 
+  button {
+    margin: 0.5em;
+    margin-left: calc(0.5em + env(safe-area-inset-left));
+  }
+
+  .side-container {
+    border-right: 1px solid var(--border-color);
+  }
+
   aside {
+    position: absolute;
     z-index: 20;
-    width: 20%;
-    height: calc(100% - 3em);
-    left: -20%;
+    width: calc(300px + env(safe-area-inset-left));
+    height: calc(100dvh - 3em);
     background-color: var(--nav-color);
-    transition: left ease 0.3s, width ease 0.3s, visibility 0.3s 0s;
-    overflow-y: scroll;
-    visibility: hidden;
+    transition: left 0.3s ease, visibility 0.3s ease, width 0.3s ease;
+    left: calc(-300px - env(safe-area-inset-left));
   }
 
   button {
     transition: background-color 0.3s ease;
   }
 	
   .open {
+    visibility: visible;
     left: 0;
-    visibility: visible
   }
 
   .new-thread {
@@ -102,25 +111,19 @@
     font-weight: bold;
   }
 
-  @media only screen and (max-width: 1400px) {
-    aside {
-      width: 30%;
-      left: -30%;
-    }
-  }
-
-  @media only screen and (max-width: 1000px) {
-    aside {
-      width: 40%;
-      left: -40%;
-    }
-  }
-
   @media only screen and (max-width: 700px) {
     aside {
       width: 100%;
       left: -100%;
+    }
+    button {
+      margin-left: env(safe-area-inset-left);
+    }
+    .side-container {
       border-right: none;
     }
+    ::-webkit-scrollbar-track {
+      background-color: var(--nav-color);
+    }
   }
 </style>
diff --git a/src/components/SlideButtonReveal.svelte b/src/components/SlideButtonReveal.svelte
@@ -179,6 +179,7 @@
         position: relative;
         cursor: pointer;
         transition: margin-right 0.3s ease;
+        padding-left: env(safe-area-inset-left);
     }
 
     .slider-button {
@@ -200,6 +201,7 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         cursor: pointer;
+        padding-left: env(safe-area-inset-left);
     }
 
     .reveal {