Improve UI for smaller screens

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

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

software/src/pages/bands/bandDetailPage/gallerySection.vue

@@ -22,7 +22,7 @@ const bandStore = useBandStore()
           show-arrows
           hide-delimiter-background
           hide-delimiters
-          height="900"
+          max-height="900"
         >
           <template #prev="{ props }">
             <v-btn

software/src/pages/locations/locationsPage/index.vue

@@ -24,7 +24,7 @@ locationStore.getLocations()
           </v-row>
 
           <v-row>
-            <v-col class="text-center" v-for="i in 4" cols="3">
+            <v-col class="text-center" v-for="i in 4" cols="6" md="3">
               <card-with-top-image :loading="true" />
             </v-col>
           </v-row>
@@ -48,7 +48,8 @@ locationStore.getLocations()
               <v-row>
                 <v-col
                   v-for="location in locationStore.getLocationsByCity(city.name)"
-                  cols="3"
+                  cols="6"
+                  md="3"
                 >
                   <location-list-item
                     :location="location"

software/src/pages/misc/helpPage/index.vue

@@ -1,14 +1,24 @@
 <script setup lang="ts">
-import scoreCard from './scoreCard.vue';
 import { useExerciseStore } from '@/stores/exercise.store';
 import outlinedButton from '@/components/basics/outlinedButton.vue';
 import { generateResultsPdf } from '@/scripts/pdfScripts';
 import { usePreferencesStore } from '@/stores/preferences.store';
+import cardView from '@/components/basics/cardView.vue';
+import { LanguageEnum } from '@/data/enums/languageEnum';
 
 const exerciseStore = useExerciseStore()
 const preferencesStore = usePreferencesStore()
 
 exerciseStore.getAllExercises()
+
+function getDotColor(exerciseGroupNr: number) {
+  switch(exerciseGroupNr) {
+    case 0: return "purple"
+    case 1: return "orange"
+    case 2: return "blue"
+    case 3: return "pink"
+  }
+}
 </script>
 
 <template>
@@ -26,18 +36,50 @@ exerciseStore.getAllExercises()
         </outlined-button>
       </v-col>
     </v-row>
-    <v-row v-if="exerciseStore.fetchInProgress" v-for="i in 3">
-      <v-col>
-        <score-card :loading="true"
-      />
-      </v-col>
-    </v-row>
 
-    <v-row v-for="exerciseGroup in exerciseStore.exerciseGroups">
+    <v-row>
       <v-col>
-        <score-card
-          :exercise-group="exerciseGroup"
-        />
+        <card-view
+          :title="$t('misc.firstStartup.exercises')"
+          icon="mdi-checkbox-marked-circle-auto-outline"
+        >
+          <template #borderless>
+            <v-timeline
+              side="end"
+              class="px-5"
+              align="start"
+            >
+              <v-timeline-item
+                v-for="exercise of exerciseStore.exercises"
+                :dot-color="getDotColor(exercise.exerciseGroup.groupNr)"
+                :icon="exercise.solved ? 'mdi-check' : 'mdi-pencil'"
+              >
+                <!-- Left side -->
+                <template #opposite>
+                  <div
+                    v-if="exercise.exerciseNr == 1"
+                    :class="`pt-1 font-weight-bold text-${getDotColor(exercise.exerciseGroup.groupNr)}`"
+                  >
+                    {{
+                      (preferencesStore.language == LanguageEnum.GERMAN 
+                      ? exercise.exerciseGroup.nameDe 
+                      : exercise.exerciseGroup.nameEn) 
+                    }}
+                  </div>
+                </template>
+
+                <!-- Right side -->
+                <card-view
+                  :title="$t('help.scoreBoard.exerciseNr', [exercise.exerciseGroup.groupNr, exercise.exerciseNr]) + 
+                    (preferencesStore.language == LanguageEnum.GERMAN ? exercise.nameDe : exercise.nameEn)"
+                  :color="exercise.solved ? 'green' : 'primary'"
+                >
+                  {{ preferencesStore.language == LanguageEnum.GERMAN ? exercise.descriptionDe : exercise.descriptionEn }}
+                </card-view>
+              </v-timeline-item>
+            </v-timeline>
+          </template>
+        </card-view>
       </v-col>
     </v-row>
   </v-container>

software/src/pages/misc/helpPage/scoreCard.vue

@@ -1,92 +0,0 @@
-<script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
-import { LanguageEnum } from '@/data/enums/languageEnum';
-import { ExerciseGroupApiModel } from '@/data/models/exercises/exerciseGroupApiModel';
-import { usePreferencesStore } from '@/stores/preferences.store';
-
-defineProps({
-  exerciseGroup: ExerciseGroupApiModel,
-  loading: Boolean
-})
-
-const preferencesStore = usePreferencesStore()
-</script>
-
-<template>
-  <card-view v-if="loading" :loading="loading" >
-    <v-timeline
-      direction="horizontal"
-      side="start"
-      class="pb-3"
-    >
-      <v-timeline-item
-        v-for="i in 3"
-        dot-color="grey"
-        icon="mdi-pencil"
-      >
-        <v-skeleton-loader
-          type="list-item"
-          :loading="loading"
-          width="200"
-        />
-
-      <template #opposite>
-        <v-skeleton-loader
-          type="sentences"
-          :loading="loading"
-          width="200"
-        />
-        </template>
-      </v-timeline-item>
-    </v-timeline>
-  </card-view>
-
-  <card-view
-    v-else
-    :title="$t('help.scoreBoard.exerciseGroupNr', [exerciseGroup.groupNr]) + 
-      (preferencesStore.language == LanguageEnum.GERMAN ? exerciseGroup.nameDe : exerciseGroup.nameEn)"
-    :loading="loading"
-  >
-    <template #borderless>
-      <v-timeline
-        direction="horizontal"
-        side="start"
-        class="pt-3"
-      >
-        <v-timeline-item
-          v-for="exercise in exerciseGroup.exercises"
-          :dot-color="exercise.solved ? 'green' : 'grey'"
-          :icon="exercise.solved ? 'mdi-check' : 'mdi-pencil'"
-        >
-          <v-skeleton-loader
-            type="text"
-            :loading="loading"
-          >
-            <div class="text-h6">
-              {{ $t('help.scoreBoard.exerciseNr', [exercise.exerciseNr]) }}
-            </div>
-          </v-skeleton-loader>
-          
-
-          <template #opposite>
-            <v-skeleton-loader
-            type="text"
-            :loading="loading"
-          >
-            <div class="text-center pb-3">
-              <div class="text-h6">
-                {{ (preferencesStore.language == LanguageEnum.GERMAN ? exercise.nameDe : exercise.nameEn) }}
-              </div>
-
-              <div>
-                {{ (preferencesStore.language == LanguageEnum.GERMAN ? 
-                  exercise.descriptionDe : exercise.descriptionEn) }}
-              </div>
-            </div>
-          </v-skeleton-loader>
-          </template>
-        </v-timeline-item>
-      </v-timeline>
-    </template>
-  </card-view>
-</template>

software/src/pages/misc/homePage/topLocationsSection.vue

@@ -17,11 +17,21 @@ const locationStore = useLocationStore()
   </v-row>
 
   <v-row>
-    <v-col v-if="locationStore.fetchInProgress" v-for="n in 8" cols="3">
+    <v-col
+      v-if="locationStore.fetchInProgress"
+      v-for="n in 8"
+      cols="6"
+      md="3"
+    >
       <card-view-top-image :loading="true" />
     </v-col>
 
-    <v-col v-else v-for="location in locationStore.topLocations" cols="3">
+    <v-col
+      v-else
+      v-for="location in locationStore.topLocations"
+      cols="6"
+      md="3"
+    >
       <card-view-top-image
         :image="location.imageOutdoor"
         :title="location.name"

software/src/pages/misc/homePage/upcomingConcertsSection.vue

@@ -18,17 +18,23 @@ const router = useRouter()
   </v-row>
 
   <v-row>
-    <v-col v-if="concertStore.fetchInProgress" v-for="n in 4" cols="3">
+    <v-col v-if="concertStore.fetchInProgress" v-for="n in 4" cols="6" md="3">
       <card-view-top-image :loading="true" />
     </v-col>
 
-    <v-col v-else v-for="concert in concertStore.upcomingConcerts" cols="3">
+    <v-col
+      v-else
+      v-for="concert in concertStore.upcomingConcerts"
+      cols="6"
+      md="3"
+    >
       <card-view-top-image
         :image="concert.image"
         :title="moment(concert.date).format('DD.MM.YYYY')"
         smaller-title
         @click="router.push('/bands/details/' + concert.band.name.replaceAll(' ', '-').toLowerCase())"
         :loading="concertStore.fetchInProgress"
+        class="h-100"
       >
         <div>
           {{ concert.name }}

software/src/pages/misc/searchPage/index.vue

@@ -122,7 +122,8 @@ const searchStore = useSearchStore()
             v-else-if="searchStore.locations.length > 0"
           >
             <v-col
-              cols="3"
+              cols="6"
+              md="3"
               v-for="location in searchStore.locations"
             >
               <location-list-item