Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - improve calendar display on mobile + fix

Browse Source
This commit is contained in:
Sam 2021-10-01 17:40:58 +02:00
parent 5856599377
commit 7157f53298
15 changed files with 59 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
fittrackee_client/src/components/Dashboard/Timeline/WorkoutCard.vue
View File

@ -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">

17
fittrackee_client/src/components/Dashboard/UserCalendar/CalendarCells.vue
View File

@ -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>

5
fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkout.vue
View File

@ -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 {

2
fittrackee_client/src/components/Dashboard/UserCalendar/CalendarWorkoutsChart.vue
View File

@ -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;

14
fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue
View File

@ -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;
}
}
}
}
}
</style>

2
fittrackee_client/src/components/NavBar.vue
View File

@ -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">

1
fittrackee_client/src/locales/en/user.json
View File

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

1
fittrackee_client/src/locales/fr/user.json
View File

@ -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"
}

1
fittrackee_client/src/store/modules/workouts/actions.ts
View File

@ -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](

1
fittrackee_client/src/store/modules/workouts/enums.ts
View File

@ -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',

3
fittrackee_client/src/store/modules/workouts/mutations.ts
View File

@ -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 = []

1
fittrackee_client/src/store/modules/workouts/types.ts
View File

@ -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
}

2
fittrackee_client/src/utils/dates.ts
View File

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

1
fittrackee_client/src/views/DashBoard.vue
View File

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

16
fittrackee_client/tests/unit/utils/dates.spec.ts
View File

@ -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))
})