Client - display more workouts in calendar popup (wip)

todo: display on mobile

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarCells.vue

@@ -120,9 +120,10 @@
         border-right: solid 1px var(--calendar-border-color);
         height: 3em;
         flex-grow: 1;
-        flex-basis: 10%;
-        padding: $default-padding * 0.5;
-        width: 10%;
+        flex-basis: 8%;
+        padding: $default-padding * 0.5 $default-padding $default-padding * 0.5
+          $default-padding * 0.5;
+        width: 8%;
         position: relative;
 
         .calendar-cell-day {

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue

@@ -25,10 +25,20 @@
 </script>
 
 <style lang="scss">
+  @import '~@/scss/base';
+
   .calendar-workout {
+    padding: 2px;
     img {
       max-width: 18px;
       max-height: 18px;
     }
+
+    @media screen and (max-width: $small-limit) {
+      img {
+        max-width: 14px;
+        max-height: 14px;
+      }
+    }
   }
 </style>

fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkouts.vue

@@ -1,16 +1,36 @@
 <template>
   <div class="calendar-workouts">
-    <div v-for="(workout, index) in workouts" :key="index">
+    <div v-for="(workout, index) in workouts.slice(0, 6)" :key="index">
       <CalendarWorkout
         :workout="workout"
         :sportImg="getSportImg(workout, sports)"
       />
     </div>
+    <div v-if="workouts.length > 6">
+      <i
+        class="fa calendar-more"
+        :class="`fa-${isHidden ? 'plus' : 'times'}`"
+        aria-hidden="true"
+        title="show more workouts"
+        @click="displayMore"
+      />
+      <div v-if="!isHidden" class="more-workouts">
+        <div
+          v-for="(workout, index) in workouts.slice(6 - workouts.length)"
+          :key="index"
+        >
+          <CalendarWorkout
+            :workout="workout"
+            :sportImg="getSportImg(workout, sports)"
+          />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-  import { defineComponent, PropType } from 'vue'
+  import { PropType, defineComponent, ref } from 'vue'
 
   import CalendarWorkout from '@/components/Dashboard/UserCalendar/CalendarWorkout.vue'
   import { ISport } from '@/types/sports'
@@ -32,14 +52,49 @@
       },
     },
     setup() {
+      const isHidden = ref(true)
       function getSportImg(workout: IWorkout, sports: ISport[]): string {
         return sports
           .filter((sport) => sport.id === workout.sport_id)
           .map((sport) => sport.img)[0]
       }
-      return { getSportImg }
+      function displayMore() {
+        isHidden.value = !isHidden.value
+      }
+      return { isHidden, getSportImg, displayMore }
     },
   })
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+  @import '~@/scss/base';
+  .calendar-workouts {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+
+    .calendar-more {
+      position: absolute;
+      top: 30px;
+      right: -3px;
+    }
+    .more-workouts {
+      background: whitesmoke;
+
+      border-radius: 4px;
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
+        0 6px 20px 0 rgba(0, 0, 0, 0.19);
+      position: absolute;
+      top: 52px;
+      left: 0;
+      min-width: 53px;
+
+      margin-bottom: 20px;
+      padding: 10px 15px;
+
+      display: flex;
+      flex-wrap: wrap;
+      z-index: 1000;
+    }
+  }
+</style>