From 121d803f736390d08e6cf19ff66cf5304c3ec85a Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Wed, 3 Nov 2021 19:59:13 +0100
Subject: [PATCH] Client - [PR84/93] display altitude and elevation on workout
 card

---
 .../src/components/Workout/WorkoutCard.vue    | 58 +++++++++++++++++--
 .../Workout/WorkoutDetail/WorkoutData.vue     |  6 +-
 fittrackee_client/src/scss/base.scss          |  6 ++
 3 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/fittrackee_client/src/components/Workout/WorkoutCard.vue b/fittrackee_client/src/components/Workout/WorkoutCard.vue
index 9aca2a2e..ab23663e 100644
--- a/fittrackee_client/src/components/Workout/WorkoutCard.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutCard.vue
@@ -64,21 +64,34 @@
       </div>
       <div
         class="workout-data"
+        :class="{ 'without-gpx': workout && !workout.with_gpx }"
         @click="
           $router.push({ name: 'Workout', params: { workoutId: workout.id } })
         "
       >
-        <div>
+        <div class="img">
           <SportImage v-if="sport" :sport-label="sport.label" />
         </div>
-        <div>
+        <div class="data">
           <i class="fa fa-clock-o" aria-hidden="true" />
           <span v-if="workout">{{ workout.moving }}</span>
         </div>
-        <div>
+        <div class="data">
           <i class="fa fa-road" aria-hidden="true" />
           <span v-if="workout">{{ workout.distance }} km</span>
         </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>
@@ -135,6 +148,10 @@
 <style lang="scss" scoped>
   @import '~@/scss/base';
 
+  .mountains {
+    padding-right: $default-padding * 0.5;
+  }
+
   .timeline-workout {
     margin-bottom: $default-margin * 2;
 
@@ -192,11 +209,40 @@
           height: 25px;
           width: 25px;
         }
-        div {
+        .img,
+        .data {
           display: flex;
-          justify-content: 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%;
+          }
         }
       }
 
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
index 7f265e41..0c6551c2 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
@@ -90,11 +90,7 @@
     flex-direction: column;
     padding: $default-padding $default-padding * 2;
     width: 100%;
-    .mountains {
-      margin-bottom: -3px;
-      height: 16px;
-      filter: var(--workout-img-color);
-    }
+
     .workout-data {
       text-transform: capitalize;
       padding: $default-padding * 0.5 0;
diff --git a/fittrackee_client/src/scss/base.scss b/fittrackee_client/src/scss/base.scss
index 8a3a9147..06cf8cf6 100644
--- a/fittrackee_client/src/scss/base.scss
+++ b/fittrackee_client/src/scss/base.scss
@@ -147,6 +147,12 @@ button {
   color: var(--workout-trophy-color)
 }
 
+.mountains {
+  margin-bottom: -3px;
+  height: 16px;
+  filter: var(--workout-img-color);
+}
+
 .section-title {
   font-weight: bold;
   padding-top: $default-padding * 1.5;