feat(ui): Introduce Mobile Layout default for every page

BeatBuzzer · Oct 18, 2024 · 67fcde9 · 67fcde9
1 parent 3204853
commit 67fcde9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/layouts/SplitView.vue b/layouts/SplitView.vue
@@ -1,24 +1,23 @@
 <template>
-  <div class="flex flex-col h-screen max-h-screen max-w-full">
+  <div class="flex basis-1/3 flex-col h-screen max-h-screen max-w-screen-sm">
 
     <div class="h-1/6">
       <!-- possible Title and nav -->
       <slot name="header"/>
     </div>
 
-    <div class="flex-1 flex flex-col">
-      <div class="flex-1">
-        <!-- CONTENT WITH NO ACTION! -->
-        <slot name="content"/>
-      </div>
+    <div class="flex-1">
+      <!-- CONTENT WITH NO ACTION! -->
+      <slot name="content"/>
+    </div>
 
-      <div class="flex-1 content-end">
-        <div class="flex flex-row justify-center">
-          <!-- Action buttons like 80% width, stackable until 50% of height -->
-          <slot name="bottom"/>
-        </div>
+    <div class="basis-1/2 content-end">
+      <div class="flex flex-row justify-center">
+        <!-- Action buttons like 80% width, stackable until 50% of height -->
+        <slot name="bottom"/>
       </div>
 
+
     </div>
   </div>
 </template>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,5 +1,7 @@
 <template>
-  <div>
-    <slot/>
+  <div class="flex justify-center">
+    <div class="max-w-screen-sm w-screen">
+      <slot/>
+    </div>
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
@@ -11,7 +11,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <div class="h-screen bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
     <DashboardView>
       <template #header>
         <div>