Client - toggle workouts filters on small resolutions
This commit is contained in:
parent
816dff6fd9
commit
60eefaec2d
@ -7,6 +7,7 @@
|
|||||||
"BACK_TO_WORKOUT": "back to workout",
|
"BACK_TO_WORKOUT": "back to workout",
|
||||||
"DATE": "date",
|
"DATE": "date",
|
||||||
"DESCENT": "descent",
|
"DESCENT": "descent",
|
||||||
|
"DISPLAY_FILTERS": "display filters",
|
||||||
"DISTANCE": "distance",
|
"DISTANCE": "distance",
|
||||||
"DURATION": "duration",
|
"DURATION": "duration",
|
||||||
"EDIT_WORKOUT": "Edit the workout",
|
"EDIT_WORKOUT": "Edit the workout",
|
||||||
@ -14,6 +15,7 @@
|
|||||||
"END": "end",
|
"END": "end",
|
||||||
"FROM": "from",
|
"FROM": "from",
|
||||||
"GPX_FILE": ".gpx file",
|
"GPX_FILE": ".gpx file",
|
||||||
|
"HIDE_FILTERS": "hide filters",
|
||||||
"KM": "km",
|
"KM": "km",
|
||||||
"LATEST_WORKOUTS": "Latest workouts",
|
"LATEST_WORKOUTS": "Latest workouts",
|
||||||
"LOAD_MORE_WORKOUT": "Load more workouts",
|
"LOAD_MORE_WORKOUT": "Load more workouts",
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
"BACK_TO_WORKOUT": "revenir à la séance",
|
"BACK_TO_WORKOUT": "revenir à la séance",
|
||||||
"DATE": "date",
|
"DATE": "date",
|
||||||
"DESCENT": "dénivelé négatif",
|
"DESCENT": "dénivelé négatif",
|
||||||
|
"DISPLAY_FILTERS": "afficher les filtres",
|
||||||
"DISTANCE": "distance",
|
"DISTANCE": "distance",
|
||||||
"DURATION": "durée",
|
"DURATION": "durée",
|
||||||
"EDIT_WORKOUT": "Modifier la séance",
|
"EDIT_WORKOUT": "Modifier la séance",
|
||||||
@ -14,6 +15,7 @@
|
|||||||
"END": "fin",
|
"END": "fin",
|
||||||
"FROM": "à partir de",
|
"FROM": "à partir de",
|
||||||
"GPX_FILE": "fichier .gpx",
|
"GPX_FILE": "fichier .gpx",
|
||||||
|
"HIDE_FILTERS": "masquer les filtres",
|
||||||
"KM": "km",
|
"KM": "km",
|
||||||
"LATEST_WORKOUTS": "Séances récentes",
|
"LATEST_WORKOUTS": "Séances récentes",
|
||||||
"LOAD_MORE_WORKOUT": "Charger les séances suivantes",
|
"LOAD_MORE_WORKOUT": "Charger les séances suivantes",
|
||||||
|
@ -1,9 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="workouts" v-if="authUser.username">
|
<div id="workouts" v-if="authUser.username">
|
||||||
<div class="container workouts-container">
|
<div class="container workouts-container">
|
||||||
<div class="filters-container">
|
<div class="filters-container" :class="{ hidden: hiddenFilters }">
|
||||||
<WorkoutsFilters :sports="translatedSports" @filter="updateParams" />
|
<WorkoutsFilters :sports="translatedSports" @filter="updateParams" />
|
||||||
</div>
|
</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">
|
<div class="list-container">
|
||||||
<WorkoutsList
|
<WorkoutsList
|
||||||
:user="authUser"
|
:user="authUser"
|
||||||
@ -46,11 +57,25 @@
|
|||||||
translateSports(sports.value, t)
|
translateSports(sports.value, t)
|
||||||
)
|
)
|
||||||
const params: Ref<Record<string, string>> = ref({})
|
const params: Ref<Record<string, string>> = ref({})
|
||||||
|
const hiddenFilters = ref(true)
|
||||||
|
|
||||||
function updateParams(filters: Record<string, string>) {
|
function updateParams(filters: Record<string, string>) {
|
||||||
params.value = filters
|
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>
|
</script>
|
||||||
@ -77,6 +102,33 @@
|
|||||||
width: 25%;
|
width: 25%;
|
||||||
@media screen and (max-width: $medium-limit) {
|
@media screen and (max-width: $medium-limit) {
|
||||||
width: 100%;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user