Merge pull request #3 from BeatBuzzer/feat/home-view

Feat/home view
BeatBuzzer · Nov 30, 2024 · 09e5ca2 · 09e5ca2
2 parents 1ae7ba9 + 373980b
commit 09e5ca2
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 20 deletions.
diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <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>
+
+      <!-- Content -->
+      <div class="flex-1">
+        <slot name="content"/>
+      </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>
+
+<style scoped>
+
+</style>
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">
 
     <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="w-screen">
+      <slot/>
+    </div>
   </div>
 </template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -17,5 +17,6 @@ export default defineNuxtConfig({
     },
     devServer: {
         host: '0.0.0.0'
-    }
+    },
+    ssr: false
 })
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,15 +1,34 @@
 <script setup lang="ts">
 
+import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
+
 useSeoMeta({
   title: "BeatBuzzer",
-  description: "A fun music quiz game"
+  description: "A fun music quiz game",
+  viewport: "width=device-width, initial-scale=1.0",
 })
 
-const session = useSupabaseSession()
 </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">
+    <HeaderFooterView>
+      <template #header>
+        <div>
+          1A
+        </div>
+        <div>
+          2B
+        </div>
+        <div>
+          3C
+        </div>
+      </template>
+      <template #footer>
+        <div class="text-4xl">A</div>
+        <div class="text-4xl">B</div>
+        <div class="text-4xl">C</div>
+      </template>
+    </HeaderFooterView>
   </div>
 </template>
diff --git a/pages/login.vue b/pages/login.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import SplitView from "~/layouts/SplitView.vue";
+
+useSeoMeta({
+  title: "BeatBuzzer",
+  description: "A fun music quiz game",
+  viewport: "width=device-width, initial-scale=1.0",
+})
 </script>
 
 <template>
@@ -9,11 +15,13 @@ import SplitView from "~/layouts/SplitView.vue";
     <SplitView>
       <template #header/>
       <template #content>
-        <NuxtImg src="icons/logo-alpha.png" alt="BeatBuzzer"/>
+        <div class="flex justify-center overflow-hidden">
+          <NuxtImg src="icons/logo-alpha.png" alt="BeatBuzzer" sizes="100vw md:70vw lg:60vw xl:50vw 2xl:25vw"/>
+        </div>
       </template>
 
       <template #bottom>
-        <div class="w-3/4">
+        <div class="w-3/4 xl:w-1/2 2xl:w-1/4">
           <div class="mb-4">
             <LoginProviderButton provider="spotify" name="Spotify" class="w-full animate-bounce"/> <!-- class="mb-2" for consecutive providers -->
           </div>