Improve band page for smaller screens

src/App.vue

@@ -1,50 +1,63 @@
 <script setup lang="ts">
-import { useTheme } from 'vuetify/lib/framework.mjs';
+import { useTheme } from "vuetify/lib/framework.mjs";
-import { i18n } from './plugins/i18n';
+import { i18n } from "./plugins/i18n";
-import { ref, watch } from 'vue';
+import { ref, watch } from "vue";
-import { usePreferencesStore } from './stores/preferences.store';
+import { usePreferencesStore } from "./stores/preferences.store";
-import { useFeedbackStore } from './stores/feedback.store';
+import { useFeedbackStore } from "./stores/feedback.store";
-import companyFooter from './components/navigation/companyFooter.vue';
+import companyFooter from "./components/navigation/companyFooter.vue";
-import urlBar from './components/navigation/urlBar.vue';
+import urlBar from "./components/navigation/urlBar.vue";
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router";
-import NavigationBar from './components/navigation/navigationBar.vue';
+import NavigationBar from "./components/navigation/navigationBar.vue";
-import { BannerStateEnum } from './data/enums/bannerStateEnum';
+import { BannerStateEnum } from "./data/enums/bannerStateEnum";
 
-const preferencesStore = usePreferencesStore()
+const preferencesStore = usePreferencesStore();
-const feedbackStore = useFeedbackStore()
+const feedbackStore = useFeedbackStore();
-const theme = useTheme()
+const theme = useTheme();
-const router = useRouter()
+const router = useRouter();
 
-theme.global.name.value = preferencesStore.theme
+theme.global.name.value = preferencesStore.theme;
 
 // Global watcher
 // Watch for language change
-watch(() => preferencesStore.language, () => {
+watch(
-  i18n.global.locale = preferencesStore.language
+  () => preferencesStore.language,
-}, { immediate: true })
+  () => {
+    i18n.global.locale = preferencesStore.language;
+  },
+  { immediate: true }
+);
 
 // Watch for theme change
-watch(() => preferencesStore.theme, () => {
+watch(
-  theme.global.name.value = preferencesStore.theme
+  () => preferencesStore.theme,
-})
+  () => {
+    theme.global.name.value = preferencesStore.theme;
+  }
+);
 
 // Watch for 404 page directions
-watch(() => feedbackStore.notFound, () => {
+watch(
-  if (feedbackStore.notFound) {
+  () => feedbackStore.notFound,
-    feedbackStore.notFound = false
+  () => {
-    router.push("/404")
+    if (feedbackStore.notFound) {
+      feedbackStore.notFound = false;
+      router.push("/404");
+    }
   }
-})
+);
 
 // Watch for snackbar disappear
-watch(() => feedbackStore.showSnackbar, () => {
+watch(
-  if (!feedbackStore.showSnackbar) {
+  () => feedbackStore.showSnackbar,
-    feedbackStore.snackbars = []
+  () => {
+    if (!feedbackStore.showSnackbar) {
+      feedbackStore.snackbars = [];
+    }
   }
-})
+);
 
 function calcMargin(i) {
-  return (i * 60) + 10 + 'px'
+  return i * 60 + 10 + "px";
 }
 </script>
 
@@ -52,11 +65,10 @@ function calcMargin(i) {
   <v-app>
     <!-- Browser Navigation bar replica -->
     <url-bar />
-    
+
     <!-- Navigaion bar of page -->
     <navigation-bar />
 
-
     <v-main>
       <!-- Snackbar in the top right corner for user feedback -->
       <v-snackbar
@@ -75,21 +87,18 @@ function calcMargin(i) {
       </v-snackbar>
 
       <!-- Here changes the router the content -->
-      <v-container max-width="1400" min-height="1000" class="py-0" height="100%">
+      <v-container
+        max-width="1400"
+        min-height="1000"
+        class="py-0 px-0"
+        height="100%"
+      >
         <v-sheet color="sheet" height="100%">
           <router-view></router-view>
         </v-sheet>
-
       </v-container>
 
-      <v-btn
+      <v-btn fab dark fixed bottom right color="primary">
-        fab
-        dark
-        fixed
-        bottom
-        right
-        color="primary"
-      >
         <v-icon>keyboard_arrow_up</v-icon>
       </v-btn>
 
@@ -100,12 +109,12 @@ function calcMargin(i) {
   <!-- Test Environment sticker in bottom right corner -->
   <v-sheet
     color="error"
-    position="fixed" 
+    position="fixed"
-    location="bottom right" 
+    location="bottom right"
     class="pa-3 mb-12 mr-n16 text-center text-h5"
     width="300"
-    style="rotate: 315deg; z-index: 1008;"
+    style="rotate: 315deg; z-index: 1008"
   >
-    {{ $t('misc.testEnvironment') }}
+    {{ $t("misc.testEnvironment") }}
   </v-sheet>
-</template>
+</template>

src/components/pageParts/heroImage.vue

@@ -50,7 +50,7 @@ defineProps({
         </v-col>
 
 
-        <v-col cols="8">
+        <v-col cols="12" md="10">
           <!-- Title -->
           <v-skeleton-loader
             type="heading"

src/pages/bands/bandDetailPage/components/bandMemberSection.vue

@@ -22,7 +22,7 @@ const bandStore = useBandStore()
   <v-row>
     <v-spacer />
 
-    <v-col v-for="member of bandStore.band.members" cols="6" md="3">
+    <v-col v-for="member of bandStore.band.members" cols="12" md="3">
       <card-with-top-image
         :title="member.name"
         :image=" member.image"

src/pages/bands/bandDetailPage/components/ratingSection.vue

@@ -26,7 +26,7 @@ defineProps({
   </v-row>
 
   <v-row>
-    <v-col>
+    <v-col cols="12" md="6">
       <div class="d-flex align-center justify-center flex-column" style="height: 100%;">
         <div class="text-h2 mt-5">
           {{ rating.toFixed(1) }}
@@ -45,7 +45,7 @@ defineProps({
       </div>
     </v-col>
 
-    <v-col>
+    <v-col cols="12" md="6">
       <v-list style="background-color: transparent;">
         <v-list-item
           v-for="ratingValue in ratings"

src/pages/bands/bandDetailPage/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import ratingSection from './ratingSection.vue';
+import ratingSection from './components/ratingSection.vue';
-import bandMemberSection from './bandMemberSection.vue';
+import bandMemberSection from './components/bandMemberSection.vue';
-import gallerySection from './gallerySection.vue';
+import gallerySection from './components/gallerySection.vue';
-import concertSection from './concertSection.vue';
+import concertSection from './components/concertSection.vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import { useBandStore } from '@/stores/band.store';
 import { onMounted, watch } from 'vue';
@@ -38,7 +38,7 @@ watch(() => router.currentRoute.value.params.name, () => {
     <v-row>
       <v-spacer />
 
-      <v-col cols="10">
+      <v-col cols="12" md="10">
         <concert-section />
 
         <band-member-section />

src/pages/misc/helpPage/index.vue

@@ -104,7 +104,7 @@ function generateExerciseKey() {
                 <!-- Exercise item -->
                 <v-timeline-item
                   v-if="exercise.available"
-                  :dot-color="exercise.solved ? 'green' : 'primary'"
+                  :dot-color="exercise.solved ? 'green-darken-4' : 'primary'"
                   :icon="exercise.solved ? 'mdi-check' : 'mdi-pencil'"
                 >
                   <!-- Right side -->
@@ -115,7 +115,7 @@ function generateExerciseKey() {
                         exercise.exerciseNr,
                       ]) + getExerciseNameLanguage(exercise)
                     "
-                    :color="exercise.solved ? 'green' : 'primary'"
+                    :color="exercise.solved ? 'green-darken-4' : 'primary'"
                   >
                     {{ getExerciseDescriptionLanguage(exercise) }}
                   </card-view>