Client - toggle workouts filters on small resolutions

This commit is contained in:
Sam 2021-10-05 19:41:16 +02:00
parent 816dff6fd9
commit 60eefaec2d
3 changed files with 58 additions and 2 deletions

View File

@ -7,6 +7,7 @@
"BACK_TO_WORKOUT": "back to workout",
"DATE": "date",
"DESCENT": "descent",
"DISPLAY_FILTERS": "display filters",
"DISTANCE": "distance",
"DURATION": "duration",
"EDIT_WORKOUT": "Edit the workout",
@ -14,6 +15,7 @@
"END": "end",
"FROM": "from",
"GPX_FILE": ".gpx file",
"HIDE_FILTERS": "hide filters",
"KM": "km",
"LATEST_WORKOUTS": "Latest workouts",
"LOAD_MORE_WORKOUT": "Load more workouts",

View File

@ -7,6 +7,7 @@
"BACK_TO_WORKOUT": "revenir à la séance",
"DATE": "date",
"DESCENT": "dénivelé négatif",
"DISPLAY_FILTERS": "afficher les filtres",
"DISTANCE": "distance",
"DURATION": "durée",
"EDIT_WORKOUT": "Modifier la séance",
@ -14,6 +15,7 @@
"END": "fin",
"FROM": "à partir de",
"GPX_FILE": "fichier .gpx",
"HIDE_FILTERS": "masquer les filtres",
"KM": "km",
"LATEST_WORKOUTS": "Séances récentes",
"LOAD_MORE_WORKOUT": "Charger les séances suivantes",

View File

@ -1,9 +1,20 @@
<template>
<div id="workouts" v-if="authUser.username">
<div class="container workouts-container">
<div class="filters-container">
<div class="filters-container" :class="{ hidden: hiddenFilters }">
<WorkoutsFilters :sports="translatedSports" @filter="updateParams" />
</div>
<div class="display-filters">
<div @click="toggleFilters">
<i
:class="`fa fa-caret-${hiddenFilters ? 'down' : 'up'}`"
aria-hidden="true"
/>
<span>
{{ t(`workouts.${hiddenFilters ? 'DISPLAY' : 'HIDE'}_FILTERS`) }}
</span>
</div>
</div>
<div class="list-container">
<WorkoutsList
:user="authUser"
@ -46,11 +57,25 @@
translateSports(sports.value, t)
)
const params: Ref<Record<string, string>> = ref({})
const hiddenFilters = ref(true)
function updateParams(filters: Record<string, string>) {
params.value = filters
hiddenFilters.value = true
}
function toggleFilters() {
hiddenFilters.value = !hiddenFilters.value
}
return {
authUser,
hiddenFilters,
params,
t,
translatedSports,
toggleFilters,
updateParams,
}
return { authUser, params, translatedSports, updateParams }
},
})
</script>
@ -77,6 +102,33 @@
width: 25%;
@media screen and (max-width: $medium-limit) {
width: 100%;
@media screen and (max-width: $small-limit) {
&.hidden {
display: none;
}
}
}
}
.display-filters {
display: none;
font-size: 0.8em;
padding: 0 $default-padding * 2;
span {
cursor: pointer;
font-weight: bold;
padding-left: $default-padding * 0.5;
}
.fa {
cursor: pointer;
}
@media screen and (max-width: $small-limit) {
display: flex;
justify-content: flex-end;
align-items: center;
}
}