Improve UI for smaller screens

software/src/components/basics/cardView.vue

@@ -12,6 +12,10 @@ defineProps({
   tonal: {
     type: Boolean,
     default: true
+  },
+  color: {
+    type: String,
+    default: "primary"
   }
 })
 </script>
@@ -20,15 +24,18 @@ defineProps({
   <v-card
     :variant="tonal ? 'tonal' : 'elevated'"
   >
-    <v-card-title v-if="title || loading" color="primary" class="pa-0">
-      <v-sheet color="primary">
+    <v-card-title
+      v-if="title || loading"
+      class="pa-0"
+    >
+      <v-sheet :color="color">
         <v-skeleton-loader
           type="heading"
           :loading="loading"
           style="background-color: transparent"
         >
           <div>
-            <div class="pl-2 py-1 d-flex justify-center">
+            <div class="px-2 py-1 d-flex justify-center">
               <v-icon :icon="icon" v-if="icon" />&nbsp;{{ title }}
             </div>
             <div>

software/src/components/basics/sectionDivider.vue

@@ -7,7 +7,7 @@ defineProps({
 </script>
 
 <template>
-  <v-row class="pt-3">
+  <v-row class="pt-3 d-none d-md-flex">
     <v-col class="d-flex justify-center align-center">
       <v-sheet height="12" width="100%" color="primary" class="rounded-s-lg" />
     </v-col>
@@ -26,4 +26,22 @@ defineProps({
       <v-sheet height="12" width="100%" color="primary" class="rounded-e-lg" />
     </v-col>
   </v-row>
+
+  <v-row class="d-md-none">
+    <v-col>
+      <v-skeleton-loader
+        type="heading"
+        :loading="loading"
+        class="d-flex justify-center align-center"
+      >
+        <span class="text-h4 text-center">{{ title }}</span>
+      </v-skeleton-loader>
+    </v-col>
+  </v-row>
+
+  <v-row class="d-md-none">
+    <v-col class="d-flex justify-center align-center">
+      <v-sheet height="12" width="80%" color="primary" class="rounded-pill" />
+    </v-col>
+  </v-row>
 </template>

software/src/components/navigation/companyFooter.vue

@@ -24,17 +24,17 @@ watch(() => route.path, () => {
     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">
+    <v-container>
+      <!-- Current location -->
+      <v-row class="w-100">
+        <v-col class="d-flex justify-center">
+          <v-breadcrumbs
+            :items="routeItems"
+            v-if="routeItems.length != 0 && routeItems[0] != ''"
+          >
             <template v-slot:title="{ item }">
               <v-card variant="outlined" class="pa-2" rounded="0">
-              {{ item.title.charAt(0).toUpperCase() + item.title.slice(1) }}
-
+                {{ item.title.charAt(0).toUpperCase() + item.title.slice(1) }}
               </v-card>
             </template>
 
@@ -43,9 +43,11 @@ watch(() => route.path, () => {
             </template>
           </v-breadcrumbs>
         </v-col>
+      </v-row>
 
-        <v-col>
-          Filter:
+      <!-- Attributes -->
+      <v-row>
+        <v-col class="d-flex justify-center">
           <div v-for="query in route.query" v-html="query" />
 
           <!-- Logic to check, if exercise 3.1 is solved -->
@@ -55,14 +57,6 @@ watch(() => route.path, () => {
             </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>

software/src/components/navigation/navigationBar.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import navigationPrependItems from './navigationPrependItems.vue';
+import navigationAppendItems from './navigationAppendItems.vue';
+</script>
+
+<template>
+  <v-app-bar
+    height="80"
+    color="primary" 
+    class="px-5"
+    elevation="0"
+  >
+    <template #prepend>
+      <navigation-prepend-items />
+    </template>
+
+    <template #append>
+      <navigation-append-items />
+    </template>
+  </v-app-bar>
+</template>

software/src/components/navigation/navigationPrependItems.vue

@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-
-const router = useRouter()
 </script>
 
 <template>
@@ -14,30 +11,69 @@ const router = useRouter()
   >
     <v-img src="logo.png" width="80" />
   </v-card>
+  
+  <div class="d-md-none">
 
-  <v-divider vertical />
+  <v-menu>
+    <template #activator="{ props }">
+      <v-btn
+        icon="mdi-menu"
+        v-bind="props"
+      />
+    </template>
+
+    <v-list>
+      <v-list-item
+        to="/bands"
+        prepend-icon="mdi-guitar-electric"
+      >
+        {{ $t('band.allBands', 2) }}
+      </v-list-item>
+
+      <v-list-item
+        to="/concerts"
+        prepend-icon="mdi-ticket"
+      >
+        {{ $t('concert.allConcerts', 2) }}
+      </v-list-item>
+
+      <v-list-item
+        to="/locations"
+        prepend-icon="mdi-city"
+      >
+        {{ $t('location.allLocations', 2) }}
+      </v-list-item>
+    </v-list>
+  </v-menu>
+  </div>
+
+  
+
+  <v-divider vertical class="d-none d-md-flex" />
 
   <v-btn
     to="/bands"
     prepend-icon="mdi-guitar-electric"
     height="100%"
     :rounded="false"
+    class="d-none d-md-flex"
   >
     {{ $t('band.allBands', 2) }}
   </v-btn>
 
-  <v-divider vertical />
+  <v-divider vertical class="d-none d-md-flex" />
 
   <v-btn
     to="/concerts"
     prepend-icon="mdi-ticket"
     height="100%"
     :rounded="false"
+    class="d-none d-md-flex"
   >
     {{ $t('concert.allConcerts', 2) }}
   </v-btn>
 
-  <v-divider vertical />
+  <v-divider vertical class="d-none d-lg-flex" />
 
 
   <v-btn
@@ -45,9 +81,10 @@ const router = useRouter()
     prepend-icon="mdi-city"
     height="100%"
     :rounded="false"
+    class="d-none d-md-flex"
   >
     {{ $t('location.allLocations', 2) }}
   </v-btn>
 
-  <v-divider vertical />
+  <v-divider vertical class="d-none d-md-flex" />
 </template>

software/src/components/navigation/urlBar.vue

@@ -19,9 +19,12 @@ watch(() => router.currentRoute.value.fullPath, () => {
     elevation="0"
     height="50"
   >
-    <v-row>
-      <v-col></v-col>
-      <v-col cols="auto" class="d-flex justify-start align-center">
+    <v-row no-gutters>
+      <v-spacer />
+      <v-col
+        cols="2"
+        class="d-flex justify-end align-center pr-1"
+      >
         <v-btn
           density="comfortable"
           icon="mdi-arrow-left"
@@ -32,11 +35,7 @@ watch(() => router.currentRoute.value.fullPath, () => {
           icon="mdi-arrow-right"
           @click="router.go(1)"
         />
-        <v-btn
-          density="comfortable"
-          icon="mdi-refresh"
-          @click="router.replace({ path: router.currentRoute.value.fullPath })"
-        />
+        
       </v-col>
 
       <v-col cols="8">
@@ -49,12 +48,20 @@ watch(() => router.currentRoute.value.fullPath, () => {
         />
       </v-col>
 
-      <v-col cols="2" class="d-flex justify-start align-center">
+      <v-col
+        cols="2"
+        class="d-flex justify-start align-center pl-1"
+      >
         <v-btn
           density="comfortable"
           icon="mdi-arrow-right"
           @click="navigate"
         />
+        <v-btn
+          density="comfortable"
+          icon="mdi-refresh"
+          @click="router.replace({ path: router.currentRoute.value.fullPath })"
+        />
       </v-col>
 
     </v-row>

software/src/components/pageParts/heroImage.vue

@@ -30,7 +30,7 @@ defineProps({
     <div class="position-absolute bottom-0 pa-5" style="width: 100%;">
       <v-row>
         <!-- Logo -->
-        <v-col cols="2">
+        <v-col cols="2 d-none d-md-block">
           <v-skeleton-loader
             type="image"
             :loading="loading"