Client - display records on Calendar

This commit is contained in:
Sam 2021-09-08 18:35:32 +02:00
parent 07f192c12e
commit 262f01a055
5 changed files with 44 additions and 1 deletions

View File

@ -1,11 +1,24 @@
<template>
<div class="calendar-workout">
<img alt="workout sport logo" :src="sportImg" :title="workout.title" />
<sup>
<i
v-if="workout.records.length > 0"
class="fa fa-trophy custom-fa-small"
aria-hidden="true"
:title="
workout.records.map(
(record) => ` ${t(`workouts.RECORD_${record.record_type}`)}`
)
"
/>
</sup>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { useI18n } from 'vue-i18n'
import { IWorkout } from '@/types/workouts'
@ -21,6 +34,10 @@
required: true,
},
},
setup() {
const { t } = useI18n()
return { t }
},
})
</script>
@ -28,17 +45,30 @@
@import '~@/scss/base';
.calendar-workout {
padding: 2px;
padding: 2px 0;
img {
max-width: 18px;
max-height: 18px;
}
sup {
position: relative;
top: -0.6em;
left: -0.4em;
.custom-fa-small {
font-size: 0.7em;
}
}
@media screen and (max-width: $small-limit) {
img {
max-width: 14px;
max-height: 14px;
}
sup {
.custom-fa-small {
font-size: 0.6em;
}
}
}
}
</style>

View File

@ -3,6 +3,10 @@
"DISTANCE": "distance",
"DURATION": "duration",
"KM": "km",
"RECORD_AS": "Ave. speed",
"RECORD_FD": "Farest distance",
"RECORD_LD": "Longest duration",
"RECORD_MS": "Max. speed",
"SPORT": "sport | sports",
"WORKOUT": "workout | workouts"
}

View File

@ -3,6 +3,10 @@
"DISTANCE": "distance",
"DURATION": "durée",
"KM": "km",
"RECORD_AS": "Vitesse moy.",
"RECORD_FD": "Distance la + longue",
"RECORD_LD": "Durée la + longue",
"RECORD_MS": "Vitesse max.",
"SPORT": "sport | sports",
"WORKOUT": "séance | séances"
}

View File

@ -86,3 +86,7 @@ button {
.upper {
text-transform: uppercase;
}
.fa-trophy {
color: var(--workout-trophy-color)
}

View File

@ -31,4 +31,5 @@
--disabled-background-color: #e0e0e0;
--disabled-color: #a3a3a3;
--workout-trophy-color: #daa520;
}