problem: layout on mobile kind of sucks

nostrocket · May 1, 2024 · 46c1b4d · 46c1b4d
1 parent 2f665e6
commit 46c1b4d
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"test": "npm run test:integration && npm run test:unit",

diff --git a/src/app.html b/src/app.html
@@ -8,6 +8,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover" class=" bg-zinc-50 dark:bg-zinc-900 overflow-hidden">
-<div class="w-screen h-screen">%sveltekit.body%</div>
+<div class="h-dvh w-screen">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/components/ChatLayout.svelte b/src/lib/components/ChatLayout.svelte
@@ -18,10 +18,10 @@
 	export let hideFaucet = false;
 </script>
 
-<div class="flex h-screen w-screen flex-row">
+<div class="flex flex-row">
 	<!-- Icon Sidebar -->
 	<div class="w-12 flex-shrink-0 block bg-orange-500 dark:bg-cyan-950">
-		<div class="flex h-full flex-col bg-layer-2">
+		<div class="flex flex-col bg-layer-2 relative h-dvh">
 			<div class="flex flex-1 flex-col overflow-hidden place-items-center">
 				<slot name="buttons" />
 				{#if !hideFaucet}
@@ -61,21 +61,35 @@
 				>
 			</div>
 			<div class="mb-2 overflow-hidden place-items-center">
-				<Button onClick={()=>{alert("ghost mode: implement me!")}}><GhostSolid /></Button>
+				<Button
+					onClick={() => {
+						alert('ghost mode: implement me!');
+					}}><GhostSolid /></Button
+				>
 				<Login />
 			</div>
 		</div>
 	</div>
 
 	<div class="flex-1">
-		<div class="h-full flex-col">
-			<div class="h-5/6 bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar"><slot /></div>
-			<div class="h-1/6 contain-content pb-0"><slot name="input" /></div>
+		<div class="h-dvh flex-col">
+			<!-- CONTENT-->
+			<div
+				class="h-full relative z-10 bg-white dark:bg-slate-900 overflow-x-hidden overflow-y-scroll no-scrollbar"
+			>
+				<slot />
+			</div>
+			<!-- MESSAGE BOX-->
+			<div class="relative w-full">
+				<div class="z-20 flex absolute inset-x-0 bottom-0 h-36"><slot name="input" /></div>
+			</div>
 		</div>
 	</div>
 	<div class="hidden flex-1 lg:block">
 		<div class="h-full flex-col">
-			<div class="h-full flex-1 bg-slate-100 dark:bg-cyan-800 overflow-y-scroll"><slot name="right" /></div>
+			<div class="h-full flex-1 bg-slate-100 dark:bg-cyan-800 overflow-y-scroll">
+				<slot name="right" />
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/src/lib/components/MessageInput.svelte b/src/lib/components/MessageInput.svelte
@@ -4,8 +4,8 @@
 
 export let selected = true
 </script>
-<div class="flex items-center float-end w-full h-full px-3 py-2 bg-zinc-300 dark:bg-cyan-900 {selected?"":""}">
-	<div class="{selected?"block":"hidden"}">
+<div class="flex items-center h-16 focus-within:h-full w-full px-3 py-2 bg-zinc-300 dark:bg-cyan-900 ">
+	<div class="">
 		<button
 			type="button"
 			class="inline-flex justify-center p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"

diff --git a/src/lib/views/messages/Messages.svelte b/src/lib/views/messages/Messages.svelte
@@ -202,7 +202,7 @@
 			<Coracle />
 		{/if}
 	</slot>
-	<div slot="input" class="h-full"><MessageInput /></div>
+	<div slot="input"><MessageInput /></div>
 	<div slot="right">
 		<div class=" ml-2">
 			<h3>HUMBLE HORSE</h3>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { FrontendDataStore } from "@/snort_workers/main";
 	import Messages from "@/views/messages/Messages.svelte";
 
 </script>

diff --git a/src/routes/e/+page.svelte b/src/routes/e/+page.svelte
@@ -0,0 +1,27 @@
+<div class="h-dvh flex flex-col">
+    <div class="bg-gray-200 flex-1 overflow-y-scroll">
+        <div class="px-4 py-2">
+            <div class="flex items-center mb-2">
+                <img class="w-8 h-8 rounded-full mr-2" src="https://picsum.photos/50/50" alt="User Avatar">
+                <div class="font-medium">John Doe</div>
+            </div>
+            <div class="bg-white rounded-lg p-2 shadow mb-2 max-w-sm">
+                Hi, how can I help you?
+            </div>
+            <div class="flex items-center justify-end">
+                <div class="bg-blue-500 text-white rounded-lg p-2 shadow mr-2 max-w-sm">
+                    Sure, I can help with that.
+                </div>
+                <img class="w-8 h-8 rounded-full" src="https://picsum.photos/50/50" alt="User Avatar">
+            </div>
+        </div>
+    </div>
+    <div class="bg-gray-100 px-4 py-2">
+        <div class="flex items-center">
+            <input class="w-full border rounded-full py-2 px-4 mr-2" type="text" placeholder="Type your message...">
+            <button class="bg-blue-500 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-full">
+        Send
+      </button>
+        </div>
+    </div>
+</div>