Use all available width for training cards in mobile schedule

ajuvonen · May 28, 2024 · e8cc7dc · e8cc7dc
1 parent f7152c5
commit e8cc7dc
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 100 deletions.
diff --git a/src/components/TrainingCard.vue b/src/components/TrainingCard.vue
@@ -15,9 +15,11 @@ const props = withDefaults(
   defineProps<{
     training: Training;
     simple?: boolean;
+    tag?: keyof HTMLElementTagNameMap;
   }>(),
   {
     simple: false,
+    tag: 'div',
   },
 );
 
@@ -31,14 +33,14 @@ const isDescriptionOpen = computed(() => visibleInstructions.value.includes(prop
 const {isSmallScreen} = useScreen();
 </script>
 <template>
-  <div
+  <component :is="tag"
     class="training-card__container"
-    :class="{'training-card__container--plain': !settings.decoratedCards}"
+    :class="{'training-card__container--plain': !settings.decoratedCards, 'training-card__container--small': isSmallScreen}"
     :style="settings.decoratedCards ? `background: url('/getfit/${training.activity}.jpg')` : ''"
   >
     <v-card
       class="training-card"
-      :width="isSmallScreen ? '280px' : '350px'"
+      :min-width="isSmallScreen ? 280 : 350"
       :color="getIntensityColor(training.intensity, settings.decoratedCards ? 0.8 : 1)"
       :style="{
         color: training.completed ? COLORS.lightGrey : COLORS.darkGrey,
@@ -88,18 +90,21 @@ const {isSmallScreen} = useScreen();
       <TrainingCardActions :training="training" :disabled="isDescriptionOpen" :simple="simple" />
       <TrainingCardInstructions :training="training" :show="isDescriptionOpen" />
     </v-card>
-  </div>
+  </component>
 </template>
 <style lang="scss" scoped>
 .training-card__container {
   background-size: cover !important;
   border-radius: 4px;
-  width: fit-content;
-  height: fit-content;
+  max-width: 350px;
+  &.training-card__container--small {
+    flex: 1;
+  }
 }
 
 .training-card {
   backdrop-filter: grayscale(1);
+  //max-width: 350px;
 }
 
 .training-card__title {

diff --git a/src/components/WeekCalendar.vue b/src/components/WeekCalendar.vue
@@ -101,7 +101,7 @@ const getDayChipTitle = (intensity: Intensity, count: number) =>
           >
         </v-tab>
       </v-tabs>
-      <v-window v-model="activeDay" :disabled="true">
+      <v-window :model-value="activeDay" :disabled="true">
         <v-window-item
           v-for="({trainings}, dayIndex) in tabContent"
           :key="dayIndex"
@@ -119,17 +119,15 @@ const getDayChipTitle = (intensity: Intensity, count: number) =>
             "
           >
             <template #item="{element}">
-              <li>
-                <training-card :training="element" />
-              </li>
+              <training-card :training="element" tag="li" />
             </template>
           </draggable-list>
         </v-window-item>
       </v-window>
       <week-calendar-actions
         :weekId="week.id"
         :weekIndex="weekIndex"
-        :dayIndex="activeDay || 0"
+        :dayIndex="activeDay"
       ></week-calendar-actions>
     </v-expansion-panel-text>
   </v-expansion-panel>

diff --git a/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap b/src/components/__tests__/__snapshots__/HomeView.spec.ts.snap
@@ -27,7 +27,7 @@ exports[`HomeView > mounts with agenda 1`] = `
   <h1 data-v-c4ee72cd="" class="mt-10 text-h3 text-center">Today:</h1>
   <div data-v-c4ee72cd="" class="daily-agenda has-scroll mt-10 d-flex">
     <div data-v-24c3dbf4="" data-v-c4ee72cd="" class="training-card__container" style="background: url(/getfit/running.jpg);">
-      <div data-v-24c3dbf4="" class="v-card v-theme--customLight v-card--density-default v-card--variant-elevated training-card" style="background-color: rgba(255, 217, 140, 0.8); width: 350px; color: rgb(33, 33, 33);">
+      <div data-v-24c3dbf4="" class="v-card v-theme--customLight v-card--density-default v-card--variant-elevated training-card" style="background-color: rgba(255, 217, 140, 0.8); min-width: 350px; color: rgb(33, 33, 33);">
         <!---->
         <div class="v-card__loader">
           <div class="v-progress-linear v-theme--customLight v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">