feat(layout): HeaderFooterView now centering like mobile

BeatBuzzer · Nov 29, 2024 · 373980b · 373980b
1 parent 3f10687
commit 373980b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 19 deletions.
diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
@@ -3,25 +3,30 @@
 </script>
 
 <template>
-  <div class="flex flex-col h-screen max-h-screen">
-
-    <div class="basis-24 content-center border rounded-b-3xl">
-      <div class="flex justify-around">
-        <slot name="header"/>
+  <div class="flex flex-col h-screen max-h-screen items-center">
+    <!-- Wrapper div für die Breiten-Kontrolle -->
+    <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
+
+      <!-- Header -->
+      <div class="basis-24 border rounded-b-3xl">
+        <div class="flex justify-around items-center h-full">
+          <slot name="header"/>
+        </div>
       </div>
-    </div>
-
-    <div class="flex-1">
-      <slot name="content"/>
-    </div>
 
-    <div class="basis-24 content-center border rounded-t-3xl">
-      <div class="flex justify-around">
-        <slot name="footer"/>
+      <!-- Content -->
+      <div class="flex-1">
+        <slot name="content"/>
       </div>
-    </div>
 
+      <!-- Footer -->
+      <div class="basis-24 border rounded-t-3xl">
+        <div class="flex justify-around items-center h-full">
+          <slot name="footer"/>
+        </div>
+      </div>
 
+    </div>
   </div>
 </template>
 

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,24 +1,22 @@
 <script setup lang="ts">
 
-import DashboardView from "~/layouts/HeaderFooterView.vue";
+import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
 
 useSeoMeta({
   title: "BeatBuzzer",
   description: "A fun music quiz game",
   viewport: "width=device-width, initial-scale=1.0",
 })
 
-//const session = useSupabaseSession()
 </script>
 
 <template>
   <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
-    <DashboardView>
+    <HeaderFooterView>
       <template #header>
         <div>
           1A
         </div>
-
         <div>
           2B
         </div>
@@ -31,6 +29,6 @@ useSeoMeta({
         <div class="text-4xl">B</div>
         <div class="text-4xl">C</div>
       </template>
-    </DashboardView>
+    </HeaderFooterView>
   </div>
 </template>