Client - improve calendar display on mobile + fix

fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue

@@ -7,7 +7,7 @@
             <img
               class="profile-img"
               v-if="userPictureUrl !== ''"
-              alt="User picture"
+              :alt="t('user.USER_PICTURE')"
               :src="userPictureUrl"
             />
             <div v-else class="no-picture">

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

@@ -157,6 +157,13 @@
       }
       .calendar-cell:last-child {
         border-right: 0;
+        @media screen and (max-width: $small-limit) {
+          .calendar-workouts {
+            .more-workouts {
+              left: -45px;
+            }
+          }
+        }
       }
       .disabled-cell {
         color: var(--app-color-light);
@@ -168,5 +175,15 @@
         background: var(--calendar-today-color);
       }
     }
+    @media screen and (max-width: $small-limit) {
+      .calendar-row:last-child {
+        .calendar-workouts {
+          .more-workouts {
+            top: inherit;
+            bottom: 20px;
+          }
+        }
+      }
+    }
   }
 </style>

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

@@ -73,8 +73,9 @@
 
     @media screen and (max-width: $small-limit) {
       .sport-img {
-        width: 14px;
+        padding: 3px;
-        height: 14px;
+        width: 20px;
+        height: 20px;
       }
       sup {
         .custom-fa-small {

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

@@ -112,7 +112,7 @@
         left: 0;
         min-width: 60px;
         @media screen and (max-width: $small-limit) {
-          min-width: 40px;
+          min-width: 70px;
         }
 
         margin-bottom: 20px;

fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue

@@ -71,8 +71,8 @@
         font-size: 0.9em;
         .sport-img {
           padding-right: $default-padding;
-          height: 18px;
+          height: 20px;
-          width: 18px;
+          width: 20px;
         }
       }
       .card-content {
@@ -93,6 +93,16 @@
           }
         }
       }
+      @media screen and (max-width: $small-limit) {
+        font-size: 1em;
+        .card-title {
+          font-size: 1em;
+          .sport-img {
+            height: 22px;
+            width: 22px;
+          }
+        }
+      }
     }
   }
 </style>

fittrackee_client/src/components/NavBar.vue

@@ -40,7 +40,7 @@
               <img
                 v-if="authUserPictureUrl !== ''"
                 class="nav-profile-user-img"
-                alt="User picture"
+                :alt="t('user.USER_PICTURE')"
                 :src="authUserPictureUrl"
               />
               <div v-else class="no-picture">

fittrackee_client/src/locales/en/user.json

@@ -7,5 +7,6 @@
   "PASSWORD-CONFIRM": "Confirm Password",
   "REGISTER": "Register",
   "REGISTER_DISABLED": "Sorry, registration is disabled.",
+  "USER_PICTURE": "user picture",
   "USERNAME": "Username"
 }

fittrackee_client/src/locales/fr/user.json

@@ -8,5 +8,6 @@
   "PASSWORD-CONFIRM": "Confirmation du mot de passe",
   "REGISTER": "S'inscrire",
   "REGISTER_DISABLED": "Désolé, les inscriptions sont désactivées.",
+  "USER_PICTURE": "photo de l'utilisateur",
   "USERNAME": "Nom d'utilisateur"
 }

fittrackee_client/src/store/modules/workouts/actions.ts

@@ -47,6 +47,7 @@ export const actions: ActionTree<IWorkoutsState, IRootState> &
     context: ActionContext<IWorkoutsState, IRootState>,
     payload: IWorkoutsPayload
   ): void {
+    context.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_CALENDAR_WORKOUTS)
     getWorkouts(context, payload, 'CALENDAR_WORKOUTS')
   },
   [WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS](

fittrackee_client/src/store/modules/workouts/enums.ts

@@ -16,6 +16,7 @@ export enum WorkoutsGetters {
 
 export enum WorkoutsMutations {
   EMPTY_WORKOUTS = 'EMPTY_WORKOUTS',
+  EMPTY_CALENDAR_WORKOUTS = 'EMPTY_CALENDAR_WORKOUTS',
   EMPTY_WORKOUT = 'EMPTY_WORKOUT',
   SET_CALENDAR_WORKOUTS = 'SET_CALENDAR_WORKOUTS',
   SET_USER_WORKOUTS = 'SET_USER_WORKOUTS',

fittrackee_client/src/store/modules/workouts/mutations.ts

@@ -44,6 +44,9 @@ export const mutations: MutationTree<IWorkoutsState> & TWorkoutsMutations = {
   ) {
     state.workoutData.loading = loading
   },
+  [WORKOUTS_STORE.MUTATIONS.EMPTY_CALENDAR_WORKOUTS](state: IWorkoutsState) {
+    state.calendar_workouts = []
+  },
   [WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUTS](state: IWorkoutsState) {
     state.calendar_workouts = []
     state.user_workouts = []

fittrackee_client/src/store/modules/workouts/types.ts

@@ -78,6 +78,7 @@ export type TWorkoutsMutations<S = IWorkoutsState> = {
     state: S,
     loading: boolean
   ): void
+  [WORKOUTS_STORE.MUTATIONS.EMPTY_CALENDAR_WORKOUTS](state: S): void
   [WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUTS](state: S): void
   [WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT](state: S): void
 }

fittrackee_client/src/utils/dates.ts

@@ -58,7 +58,7 @@ export const getCalendarStartAndEnd = (
   const weekStartsOn = weekStartingMonday ? 1 : 0
   return {
     start: startOfWeek(monthStart, { weekStartsOn }),
-    end: endOfWeek(monthEnd),
+    end: endOfWeek(monthEnd, { weekStartsOn }),
   }
 }
 

fittrackee_client/src/views/DashBoard.vue

@@ -146,6 +146,7 @@
     }
 
     @media screen and (max-width: $small-limit) {
+      padding-bottom: 60px;
       .dashboard-container {
         display: flex;
         flex-direction: column;

fittrackee_client/tests/unit/utils/dates.spec.ts

@@ -144,17 +144,29 @@ describe('dateIncrement', () => {
 describe('getCalendarStartAndEnd', () => {
   const testsParams = [
     {
-      description: 'returns empty string if no date provided',
+      description: 'returns start and end dates for calendar',
       inputDate: 'September 5, 2021 20:00:00',
+      inputWeekStartingMonday: false,
       expectedStartDate: 'August 29, 2021 00:00:00',
       expectedEndDate: 'October 2, 2021 23:59:59.999',
     },
+    {
+      description:
+        'returns start and end dates for calendar when week starts on Monday',
+      inputDate: 'April 1, 2021 20:00:00',
+      inputWeekStartingMonday: true,
+      expectedStartDate: 'March 29, 2021 00:00:00',
+      expectedEndDate: 'May 2, 2021 23:59:59.999',
+    },
   ]
 
   testsParams.map((testParams) =>
     it(testParams.description, () => {
       const date: Date = new Date(testParams.inputDate)
-      const results = getCalendarStartAndEnd(date, false)
+      const results = getCalendarStartAndEnd(
+        date,
+        testParams.inputWeekStartingMonday
+      )
       assert.deepEqual(results.start, new Date(testParams.expectedStartDate))
       assert.deepEqual(results.end, new Date(testParams.expectedEndDate))
     })