Redesign Band highlight section on HomePage, fix Footer spacing bug

software/src/App.vue

@@ -6,7 +6,7 @@ import navigationAppendItems from './components/navigation/navigationAppendItems
 import navigationPrependItems from './components/navigation/navigationPrependItems.vue';
 import { usePreferencesStore } from './stores/preferences.store';
 import { useFeedbackStore } from './stores/feedback.store';
-import footerItems from './components/navigation/footerItems.vue';
+import companyFooter from './components/navigation/companyFooter.vue';
 import urlBar from './components/navigation/urlBar.vue';
 
 const preferencesStore = usePreferencesStore()
@@ -24,8 +24,10 @@ watch(() => preferencesStore.language, () => {
 
 <template>
   <v-app>
+    <!-- Browser Navigation bar replica -->
     <url-bar />
     
+    <!-- Navigaion bar of page -->
     <v-app-bar
       height="80"
       color="primary" 
@@ -64,21 +66,13 @@ watch(() => preferencesStore.language, () => {
       </v-snackbar>
 
       <!-- Here changes the router the content -->
-      <v-container max-width="1400" class="py-0" height="100%">
+      <v-container max-width="1400" min-height="1000" class="py-0" height="100%">
         <v-sheet color="sheet" height="100%">
-          <v-sheet color="primary" >
-            <v-breadcrumbs class="position-absolute">
-              <v-breadcrumbs-item />
-            </v-breadcrumbs>
-          </v-sheet>
-
           <router-view></router-view>
         </v-sheet>
       </v-container>
 
-      <v-footer color="primary">
-        <footer-items />
-      </v-footer>
+      <company-footer />
     </v-main>
   </v-app>
 </template>

software/src/components/navigation/companyFooter.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { useExerciseStore } from '@/stores/exercise.store';
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute()
+const routeItems = ref(route.path.split('/'))
+const exerciseStore = useExerciseStore()
+
+watch(() => route.path, () => {
+  routeItems.value = route.path.split("/")
+  routeItems.value = routeItems.value.filter(value => value != "")
+  
+  for (let item in routeItems.value) {
+    item.charAt(0).toUpperCase() + item.slice(1)
+  }
+})
+</script>
+
+<template>
+  <v-footer
+    color="primary"
+    absolute
+    inset
+    app
+  >
+    <v-container class="pa-0 ma-0">
+      <v-row class="mb-0 pa-0">
+        <v-spacer />
+
+        <v-col>
+          <!-- todo: Make more beautiful -->
+          <v-breadcrumbs :items="routeItems">
+            <template v-slot:title="{ item }">
+              <v-card variant="outlined" class="pa-2" rounded="0">
+              {{ item.title.charAt(0).toUpperCase() + item.title.slice(1) }}
+
+              </v-card>
+            </template>
+
+            <template v-slot:divider>
+              <v-icon icon="mdi-forward"></v-icon>
+            </template>
+          </v-breadcrumbs>
+        </v-col>
+
+        <v-col>
+          Filter:
+          <div v-for="query in route.query" v-html="query" />
+
+          <!-- Logic to check, if exercise 3.1 is solved -->
+          <div v-for="query in route.query">
+            <span v-if="String(query).startsWith('<iframe')">
+              {{ exerciseStore.solveExercise(3, 1) }}
+            </span>
+          </div>
+        </v-col>
+
+        <v-spacer />      
+      </v-row>
+
+      <v-row class="pa-0 ma-0">
+        <v-col class="text-center">
+          {{ new Date().getFullYear() }} — <strong>Tobias Zoghaib</strong>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-footer>
+</template>

software/src/components/navigation/footerItems.vue

@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { useExerciseStore } from '@/stores/exercise.store';
-import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
-
-const route = useRoute()
-const routeItems = ref(route.path.split('/'))
-const exerciseStore = useExerciseStore()
-
-watch(() => route.path, () => {
-  routeItems.value = route.path.split("/")
-  routeItems.value = routeItems.value.filter(value => value != "")
-  
-  for (let item in routeItems.value) {
-    item.charAt(0).toUpperCase() + item.slice(1)
-  }
-})
-</script>
-
-<template>
-    <v-row>
-      <v-spacer />
-
-      <v-col>
-        {{ $t('misc.youAreHere') }}
-        <v-breadcrumbs :items="routeItems">
-          <template v-slot:title="{ item }">
-            {{ item.title.charAt(0).toUpperCase() + item.title.slice(1) }}
-          </template>
-
-          <template v-slot:divider>
-            <v-icon icon="mdi-forward"></v-icon>
-          </template>
-        </v-breadcrumbs>
-      </v-col>
-
-      <v-col>
-        Filter:
-        <div v-for="query in route.query" v-html="query" />
-
-        <!-- Logic to check, if exercise 3.1 is solved -->
-        <div v-for="query in route.query">
-          <span v-if="String(query).startsWith('<iframe')">
-            {{ exerciseStore.solveExercise(3, 1) }}
-          </span>
-        </div>
-      </v-col>
-
-      <v-spacer />
-    </v-row>
-</template>

software/src/locales/de.json

@@ -57,7 +57,8 @@
     "logo": "Band Logo",
     "imageMember": "Bilder Mitglieder",
     "addNewGenre": "Neues Genre hinzufügen",
-    "editGenre": "Genre bearbeiten"
+    "editGenre": "Genre bearbeiten",
+    "bandDetails": "Band Details"
   },
   "ticket": {
     "tickets": "Ticket | Tickets"

software/src/locales/en.json

@@ -57,7 +57,8 @@
     "logo": "Band logo",
     "imageMember": "Images Members",
     "addNewGenre": "Add new Genre",
-    "editGenre": "Edit Genre"
+    "editGenre": "Edit Genre",
+    "bandDetails": "Band Details"
   },
   "ticket": {
     "tickets": "Ticket | Tickets"

software/src/pages/homePage/bandsSection.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useBandStore } from '@/stores/band.store';
+import { useRouter } from 'vue-router';
+
+const bandStore = useBandStore()
+const router = useRouter()
+
+bandStore.getBands()
+</script>
+
+<template>
+  <v-slide-group
+    show-arrows
+    center-active
+  >
+    <v-slide-group-item
+      v-for="band of bandStore.bands"
+      v-slot="{ isSelected, toggle }"
+    >
+      <v-hover
+        v-slot="{ isHovering, props }"
+      >
+        <v-card
+          :class="{ 'on-hover': isHovering }"
+          :elevation="isHovering ? 12 : 2"
+          v-bind="props"
+          class="mx-2"
+          @click="router.push('bands/details/' + band.name.replaceAll(' ', '-').toLowerCase())"
+        >
+          <v-img
+            class="d-flex align-center text-center"
+            :src="'http://localhost:3000/static/' + band.imageMembers"
+            height="250px"
+            width="350"
+            cover
+          >
+            <v-card-title class="text-white text-h5">
+              <p class="mt-4">
+                {{ band.name }}
+              </p>
+
+              <p class="ma-0 text-body-1 font-weight-bold">
+                {{ band.genres[0].name }}
+              </p>
+            </v-card-title>
+          </v-img>
+        </v-card>
+      </v-hover>
+    </v-slide-group-item>
+  </v-slide-group>
+</template>
+
+<style scoped>
+  .v-card {
+    transition: opacity .4s ease-in-out;
+  }
+
+  .v-card:not(.on-hover) {
+    opacity: 0.6;
+  }
+
+  .show-btns {
+    color: rgba(255, 255, 255, 1) !important;
+  }
+</style>

software/src/pages/homePage/highlightCarousel.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { useBandStore } from '@/stores/band.store';
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-
-const router = useRouter()
-const bandStore = useBandStore()
-
-bandStore.getBands()
-</script>
-
-<template>
-  <v-carousel
-    v-if="bandStore.bands.length > 0"
-    hide-delimiters
-    hide-delimiter-background
-    height="700"
-    show-arrows
-  >
-    <template #prev="{ props }">
-      <v-btn
-        variant="text"
-        @click="props.onClick"
-        icon="mdi-chevron-left"
-      />
-    </template>
-
-    <template #next="{ props }">
-      <v-btn
-        variant="text"
-        @click="props.onClick"
-        icon="mdi-chevron-right"
-      />
-    </template>
-
-    <v-carousel-item
-      
-      v-for="band in bandStore.bands"
-      :src="'http://localhost:3000/static/' + band.imageMembers" 
-      cover
-    >
-      <v-card
-        class="position-absolute bottom-0"
-        :title="band.name"
-        width="100%"
-        :rounded="false"
-        background-opacity="50%"
-      >
-        <v-card-text>
-          <div>
-            {{ band.descriptionDe }}
-          </div>
-
-          <outlined-button
-            append-icon="mdi-arrow-right"
-            class="mt-2"
-            color="primary"
-            @click="router.push('bands/details/' + band.name.replaceAll(' ', '-').toLowerCase())"
-          >
-            {{ $t('ticket.tickets', 2) }}
-          </outlined-button>
-        </v-card-text>
-      </v-card>
-    </v-carousel-item>
-  </v-carousel>
-</template>
-
-<style scoped>
-.v-card {
-  background: rgba(255, 255, 255, .7);
-  color: black;
-}
-
-.v-card-text {
-  font-weight: bold;
-}
-</style>

software/src/pages/homePage/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import highlightCarousel from './highlightCarousel.vue';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
 import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
 import OutlinedButton from '@/components/basics/outlinedButton.vue';
 import { useRouter } from 'vue-router';
 import { useConcertStore } from '@/stores/concert.store';
 import { useLocationStore } from '@/stores/location.store';
+import bandSection from './bandsSection.vue';
 
 const router = useRouter()
 const concertStore = useConcertStore()
@@ -16,9 +16,12 @@ locationStore.getTopLocations()
 </script>
 
 <template>
-  <highlight-carousel />
+  <div class="pt-4">
+    <band-section />
+  </div>
 
   <v-container>
+
     <v-row>
       <v-spacer />
 
@@ -91,8 +94,5 @@ locationStore.getTopLocations()
 
       <v-spacer />
     </v-row>
-    
-
-    
   </v-container>
-</template>
+</template>