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

Client - display section title for records and timeline

Browse Source
This commit is contained in:
Sam 2021-09-22 10:56:40 +02:00
parent 45438f547e
commit bcc17924ac
5 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
fittrackee_client/src/components/Dashboard/Timeline/index.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div class="timeline"> <div class="timeline">
<div class="section-title">{{ t('workouts.LATEST_WORKOUTS') }}</div>
<WorkoutCard <WorkoutCard
v-for="workout in workouts" v-for="workout in workouts"
:workout="workout" :workout="workout"
@ -7,9 +8,9 @@
:user="user" :user="user"
:key="workout.id" :key="workout.id"
></WorkoutCard> ></WorkoutCard>
<Card v-if="workouts.length === 0" class="no-workouts"> <div v-if="workouts.length === 0" class="no-workouts">
<template #content>{{ t('workouts.NO_WORKOUTS') }}</template> {{ t('workouts.NO_WORKOUTS') }}
</Card> </div>
</div> </div>
</template> </template>
@ -23,7 +24,6 @@
} from 'vue' } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Card from '@/components/Common/Card.vue'
import WorkoutCard from '@/components/Dashboard/Timeline/WorkoutCard.vue' import WorkoutCard from '@/components/Dashboard/Timeline/WorkoutCard.vue'
import { SPORTS_STORE, WORKOUTS_STORE } from '@/store/constants' import { SPORTS_STORE, WORKOUTS_STORE } from '@/store/constants'
import { ISport } from '@/types/sports' import { ISport } from '@/types/sports'
@ -34,7 +34,6 @@
export default defineComponent({ export default defineComponent({
name: 'Timeline', name: 'Timeline',
components: { components: {
Card,
WorkoutCard, WorkoutCard,
}, },
props: { props: {
@ -68,5 +67,6 @@
.no-workouts { .no-workouts {
margin-bottom: $default-margin * 2; margin-bottom: $default-margin * 2;
padding: $default-padding;
} }
</style> </style>

30
fittrackee_client/src/components/Dashboard/UserRecords/index.vue
View File

@ -1,14 +1,20 @@
<template> <template>
<div class="user-records"> <div class="user-records-section">
<Card v-if="Object.keys(recordsBySport).length === 0" class="no-records"> <div class="section-title">
<template #content>{{ t('workouts.NO_RECORDS') }}</template> <i class="fa fa-trophy custom-fa-small" aria-hidden="true" />
</Card> {{ t('workouts.RECORD', 2) }}
<RecordsCard </div>
v-for="sportLabel in Object.keys(recordsBySport).sort()" <div class="user-records">
:sportLabel="sportLabel" <div v-if="Object.keys(recordsBySport).length === 0" class="no-records">
:records="recordsBySport[sportLabel]" {{ t('workouts.NO_RECORDS') }}
:key="sportLabel" </div>
/> <RecordsCard
v-for="sportLabel in Object.keys(recordsBySport).sort()"
:sportLabel="sportLabel"
:records="recordsBySport[sportLabel]"
:key="sportLabel"
/>
</div>
</div> </div>
</template> </template>
@ -16,7 +22,6 @@
import { computed, defineComponent, PropType } from 'vue' import { computed, defineComponent, PropType } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Card from '@/components/Common/Card.vue'
import RecordsCard from '@/components/Dashboard/UserRecords/RecordsCard.vue' import RecordsCard from '@/components/Dashboard/UserRecords/RecordsCard.vue'
import { SPORTS_STORE } from '@/store/constants' import { SPORTS_STORE } from '@/store/constants'
import { IAuthUserProfile } from '@/types/user' import { IAuthUserProfile } from '@/types/user'
@ -27,7 +32,6 @@
export default defineComponent({ export default defineComponent({
name: 'UserRecords', name: 'UserRecords',
components: { components: {
Card,
RecordsCard, RecordsCard,
}, },
props: { props: {
@ -60,7 +64,7 @@
justify-content: space-between; justify-content: space-between;
.no-records { .no-records {
width: 100%; padding: $default-padding;
} }
} }
</style> </style>

2
fittrackee_client/src/locales/en/workouts.json
View File

@ -3,8 +3,10 @@
"DISTANCE": "distance", "DISTANCE": "distance",
"DURATION": "duration", "DURATION": "duration",
"KM": "km", "KM": "km",
"LATEST_WORKOUTS": "Latest workouts",
"NO_RECORDS": "No records.", "NO_RECORDS": "No records.",
"NO_WORKOUTS": "No workouts.", "NO_WORKOUTS": "No workouts.",
"RECORD": "record | records",
"RECORD_AS": "Ave. speed", "RECORD_AS": "Ave. speed",
"RECORD_FD": "Farest distance", "RECORD_FD": "Farest distance",
"RECORD_LD": "Longest duration", "RECORD_LD": "Longest duration",

2
fittrackee_client/src/locales/fr/workouts.json
View File

@ -3,8 +3,10 @@
"DISTANCE": "distance", "DISTANCE": "distance",
"DURATION": "durée", "DURATION": "durée",
"KM": "km", "KM": "km",
"LATEST_WORKOUTS": "Séances récentes",
"NO_RECORDS": "Pas de records.", "NO_RECORDS": "Pas de records.",
"NO_WORKOUTS": "Pas de séances.", "NO_WORKOUTS": "Pas de séances.",
"RECORD": "record | records",
"RECORD_AS": "Vitesse moy.", "RECORD_AS": "Vitesse moy.",
"RECORD_FD": "Distance la + longue", "RECORD_FD": "Distance la + longue",
"RECORD_LD": "Durée la + longue", "RECORD_LD": "Durée la + longue",

7
fittrackee_client/src/scss/base.scss
View File

@ -94,3 +94,10 @@ button {
.fa-trophy { .fa-trophy {
color: var(--workout-trophy-color) color: var(--workout-trophy-color)
} }
.section-title {
font-weight: bold;
padding-top: $default-padding * 1.5;
padding-left: $default-padding;
text-transform: capitalize;
}