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

Client - [PR84/93] display altitude and elevation on workout card

Browse Source
This commit is contained in:
Sam 2021-11-03 19:59:13 +01:00
parent 0a21cec513
commit 121d803f73
3 changed files with 59 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
fittrackee_client/src/components/Workout/WorkoutCard.vue
View File

@ -64,21 +64,34 @@
</div> </div>
<div <div
class="workout-data" class="workout-data"
:class="{ 'without-gpx': workout && !workout.with_gpx }"
@click=" @click="
$router.push({ name: 'Workout', params: { workoutId: workout.id } }) $router.push({ name: 'Workout', params: { workoutId: workout.id } })
" "
> >
<div> <div class="img">
<SportImage v-if="sport" :sport-label="sport.label" /> <SportImage v-if="sport" :sport-label="sport.label" />
</div> </div>
<div> <div class="data">
<i class="fa fa-clock-o" aria-hidden="true" /> <i class="fa fa-clock-o" aria-hidden="true" />
<span v-if="workout">{{ workout.moving }}</span> <span v-if="workout">{{ workout.moving }}</span>
</div> </div>
<div> <div class="data">
<i class="fa fa-road" aria-hidden="true" /> <i class="fa fa-road" aria-hidden="true" />
<span v-if="workout">{{ workout.distance }} km</span> <span v-if="workout">{{ workout.distance }} km</span>
</div> </div>
<div class="data elevation" v-if="workout && workout.with_gpx">
<img
class="mountains"
src="/img/workouts/mountains.svg"
:alt="$t('workouts.ELEVATION')"
/>
<span> {{ workout.min_alt }}/{{ workout.max_alt }} m </span>
</div>
<div class="data altitude" v-if="workout && workout.with_gpx">
<i class="fa fa-location-arrow" aria-hidden="true" />
<span> {{ workout.ascent }}/{{ workout.descent }} m </span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -135,6 +148,10 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '~@/scss/base'; @import '~@/scss/base';
.mountains {
padding-right: $default-padding * 0.5;
}
.timeline-workout { .timeline-workout {
margin-bottom: $default-margin * 2; margin-bottom: $default-margin * 2;
@ -192,11 +209,40 @@
height: 25px; height: 25px;
width: 25px; width: 25px;
} }
div { .img,
.data {
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
width: 33%; }
.img {
justify-content: flex-end;
width: 10%;
}
.data {
justify-content: center;
width: 22%;
}
@media screen and (max-width: $x-small-limit) {
.img {
justify-content: center;
width: 20%;
}
.data {
justify-content: center;
width: 40%;
}
.altitude,
.elevation {
display: none;
}
}
&.without-gpx {
.img,
.data {
justify-content: center;
width: 33%;
}
} }
} }

6
fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
View File

@ -90,11 +90,7 @@
flex-direction: column; flex-direction: column;
padding: $default-padding $default-padding * 2; padding: $default-padding $default-padding * 2;
width: 100%; width: 100%;
.mountains {
margin-bottom: -3px;
height: 16px;
filter: var(--workout-img-color);
}
.workout-data { .workout-data {
text-transform: capitalize; text-transform: capitalize;
padding: $default-padding * 0.5 0; padding: $default-padding * 0.5 0;

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

@ -147,6 +147,12 @@ button {
color: var(--workout-trophy-color) color: var(--workout-trophy-color)
} }
.mountains {
margin-bottom: -3px;
height: 16px;
filter: var(--workout-img-color);
}
.section-title { .section-title {
font-weight: bold; font-weight: bold;
padding-top: $default-padding * 1.5; padding-top: $default-padding * 1.5;