From 7157f5329870c825137d9c7006947855d612f12e Mon Sep 17 00:00:00 2001 From: Sam Date: Fri, 1 Oct 2021 17:40:58 +0200 Subject: [PATCH] Client - improve calendar display on mobile + fix --- .../Dashboard/Timeline/WorkoutCard.vue | 2 +- .../Dashboard/UserCalendar/CalendarCells.vue | 17 +++++++++++++++++ .../Dashboard/UserCalendar/CalendarWorkout.vue | 5 +++-- .../UserCalendar/CalendarWorkoutsChart.vue | 2 +- .../Dashboard/UserRecords/RecordsCard.vue | 14 ++++++++++++-- fittrackee_client/src/components/NavBar.vue | 2 +- fittrackee_client/src/locales/en/user.json | 1 + fittrackee_client/src/locales/fr/user.json | 1 + .../src/store/modules/workouts/actions.ts | 1 + .../src/store/modules/workouts/enums.ts | 1 + .../src/store/modules/workouts/mutations.ts | 3 +++ .../src/store/modules/workouts/types.ts | 1 + fittrackee_client/src/utils/dates.ts | 2 +- fittrackee_client/src/views/DashBoard.vue | 1 + .../tests/unit/utils/dates.spec.ts | 16 ++++++++++++++-- 15 files changed, 59 insertions(+), 10 deletions(-) diff --git a/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue b/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue index 1b3d3047..28c1606e 100644 --- a/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue +++ b/fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue @@ -7,7 +7,7 @@ User picture
diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarCells.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarCells.vue index 6f6e29cc..86eabeb0 100644 --- a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarCells.vue +++ b/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; + } + } + } + } } diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue index cc670149..6e00bb4f 100644 --- a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue +++ b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue @@ -73,8 +73,9 @@ @media screen and (max-width: $small-limit) { .sport-img { - width: 14px; - height: 14px; + padding: 3px; + width: 20px; + height: 20px; } sup { .custom-fa-small { diff --git a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue b/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue index 15783a8b..eb1f70c1 100644 --- a/fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue +++ b/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; diff --git a/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue b/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue index 6f31b45a..23f9d9e6 100644 --- a/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue +++ b/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue @@ -71,8 +71,8 @@ font-size: 0.9em; .sport-img { padding-right: $default-padding; - height: 18px; - width: 18px; + height: 20px; + 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; + } + } + } } } diff --git a/fittrackee_client/src/components/NavBar.vue b/fittrackee_client/src/components/NavBar.vue index 43437075..ca8c6ccd 100644 --- a/fittrackee_client/src/components/NavBar.vue +++ b/fittrackee_client/src/components/NavBar.vue @@ -40,7 +40,7 @@ User picture
diff --git a/fittrackee_client/src/locales/en/user.json b/fittrackee_client/src/locales/en/user.json index df647f62..3b2ffb87 100644 --- a/fittrackee_client/src/locales/en/user.json +++ b/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" } diff --git a/fittrackee_client/src/locales/fr/user.json b/fittrackee_client/src/locales/fr/user.json index c0643e7e..d3c31c98 100644 --- a/fittrackee_client/src/locales/fr/user.json +++ b/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" } \ No newline at end of file diff --git a/fittrackee_client/src/store/modules/workouts/actions.ts b/fittrackee_client/src/store/modules/workouts/actions.ts index a49299a6..0126ef43 100644 --- a/fittrackee_client/src/store/modules/workouts/actions.ts +++ b/fittrackee_client/src/store/modules/workouts/actions.ts @@ -47,6 +47,7 @@ export const actions: ActionTree & context: ActionContext, payload: IWorkoutsPayload ): void { + context.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_CALENDAR_WORKOUTS) getWorkouts(context, payload, 'CALENDAR_WORKOUTS') }, [WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS]( diff --git a/fittrackee_client/src/store/modules/workouts/enums.ts b/fittrackee_client/src/store/modules/workouts/enums.ts index 5e3f2d91..c838a3f0 100644 --- a/fittrackee_client/src/store/modules/workouts/enums.ts +++ b/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', diff --git a/fittrackee_client/src/store/modules/workouts/mutations.ts b/fittrackee_client/src/store/modules/workouts/mutations.ts index f695bd9d..ff2325e6 100644 --- a/fittrackee_client/src/store/modules/workouts/mutations.ts +++ b/fittrackee_client/src/store/modules/workouts/mutations.ts @@ -44,6 +44,9 @@ export const mutations: MutationTree & 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 = [] diff --git a/fittrackee_client/src/store/modules/workouts/types.ts b/fittrackee_client/src/store/modules/workouts/types.ts index fa10cd16..625c46ff 100644 --- a/fittrackee_client/src/store/modules/workouts/types.ts +++ b/fittrackee_client/src/store/modules/workouts/types.ts @@ -78,6 +78,7 @@ export type TWorkoutsMutations = { 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 } diff --git a/fittrackee_client/src/utils/dates.ts b/fittrackee_client/src/utils/dates.ts index a474c0b3..63165c02 100644 --- a/fittrackee_client/src/utils/dates.ts +++ b/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 }), } } diff --git a/fittrackee_client/src/views/DashBoard.vue b/fittrackee_client/src/views/DashBoard.vue index 4b38b9d5..43fda099 100644 --- a/fittrackee_client/src/views/DashBoard.vue +++ b/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; diff --git a/fittrackee_client/tests/unit/utils/dates.spec.ts b/fittrackee_client/tests/unit/utils/dates.spec.ts index 706c091d..255a061f 100644 --- a/fittrackee_client/tests/unit/utils/dates.spec.ts +++ b/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)) })