chore: update layout

fastrodev · Oct 29, 2024 · d37a767 · d37a767
1 parent b433ce0
commit d37a767
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 25 deletions.
diff --git a/modules/index/index.input.tsx b/modules/index/index.input.tsx
@@ -66,7 +66,7 @@ export default function MessageInput(
                     onKeyPress={handleKeyPress}
                     type="text"
                     placeholder="Message"
-                    class="w-full bg-gray-700 text-white placeholder-gray-400 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    class="w-full bg-gray-700 text-white placeholder-gray-400 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                     required
                 />
                 <button

diff --git a/modules/index/index.layout.tsx b/modules/index/index.layout.tsx
@@ -9,7 +9,16 @@ export default function index(
     <html lang={`en`}>
       <head>
         <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, viewport-fit=cover"
+        />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta
+          name="apple-mobile-web-app-status-bar-style"
+          content="black-translucent"
+        />
         <title>
           {data.title} | Fastro
         </title>

diff --git a/modules/index/index.main.tsx b/modules/index/index.main.tsx
@@ -59,10 +59,10 @@ function Background() {
     );
 }
 
-function Loading(props: { children: any }) {
+function Loading(props: { text: string }) {
     return (
-        <div class="bg-center bg-no-repeat relative grow h-screen max-w-8/12 flex flex-col justify-center bg-gray-950 border-t border-l border-r border-gray-700 p-4 text-center">
-            {props.children}
+        <div class="relative grow h-screen max-w-8/12 flex flex-col justify-center bg-gray-950 border-t border-l border-r border-gray-700 p-4 text-center">
+            {props.text}
             <Background />
         </div>
     );
@@ -154,22 +154,22 @@ export function Main(
 
     return (
         <>
-            {error && <Loading>{error}</Loading>}
-            {loading && <Loading>Loading</Loading>}
+            {error && <Loading text={error} />}
+            {loading && <Loading text="Loading" />}
             {!loading && (
-                <div class={`grow`}>
-                    <div class="relative grow bg-center bg-no-repeat h-screen flex flex-col justify-end bg-gray-950 border-t border-l border-r border-gray-700 pb-16">
-                        <Background />
+                <div class={`grow static md:relative`}>
+                    <Background />
+                    <div class="h-screen flex flex-col justify-end bg-gray-950 pb-20 md:border-l-[1px] md:border-r-[1px] border-gray-800">
                         <ListMessage data={data} />
-                        <div class="absolute bottom-0 left-0 right-0 p-3 z-10">
-                            <MessageInput
-                                avatar_url={props.avatar_url}
-                                ws_url={props.ws_url}
-                                username={props.username}
-                                room={room}
-                                sendMessage={sendMessage}
-                            />
-                        </div>
+                    </div>
+                    <div class="fixed md:absolute bottom-0 left-0 right-0 md:flex md:flex-col p-3 z-10 bg-gray-900 border-t-[1px] border-gray-800">
+                        <MessageInput
+                            avatar_url={props.avatar_url}
+                            ws_url={props.ws_url}
+                            username={props.username}
+                            room={room}
+                            sendMessage={sendMessage}
+                        />
                     </div>
                 </div>
             )}

diff --git a/modules/index/index.navigation.tsx b/modules/index/index.navigation.tsx
@@ -44,7 +44,7 @@ function Expiration() {
                     <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                         <div class="flex items-center h-5">
                             <input
-                                id="helper-radio-4"
+                                id="helper-radio-3"
                                 name="helper-radio"
                                 type="radio"
                                 value=""
@@ -53,7 +53,7 @@ function Expiration() {
                         </div>
                         <div class="ms-2 text-sm">
                             <label
-                                for="helper-radio-4"
+                                for="helper-radio-3"
                                 class="font-medium text-gray-900 dark:text-gray-300"
                             >
                                 <div>1 Day</div>
@@ -63,7 +63,7 @@ function Expiration() {
                     <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                         <div class="flex items-center h-5">
                             <input
-                                id="helper-radio-5"
+                                id="helper-radio-4"
                                 name="helper-radio"
                                 type="radio"
                                 value=""
@@ -72,7 +72,7 @@ function Expiration() {
                         </div>
                         <div class="ms-2 text-sm">
                             <label
-                                for="helper-radio-5"
+                                for="helper-radio-4"
                                 class="font-medium text-gray-900 dark:text-gray-300"
                             >
                                 <div>1 Week</div>
@@ -82,7 +82,7 @@ function Expiration() {
                     <div class="flex p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-600">
                         <div class="flex items-center h-5">
                             <input
-                                id="helper-radio-6"
+                                id="helper-radio-5"
                                 name="helper-radio"
                                 type="radio"
                                 value=""
@@ -91,7 +91,7 @@ function Expiration() {
                         </div>
                         <div class="ms-2 text-sm">
                             <label
-                                for="helper-radio-6"
+                                for="helper-radio-5"
                                 class="font-medium text-gray-900 dark:text-gray-300"
                             >
                                 <div>1 Month</div>