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

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,13 +209,42 @@
           height: 25px;
           width: 25px;
         }
-        div {
+        .img,
+        .data {
           display: flex;
-          justify-content: center;
           align-items: center;
+        }
+        .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%;
           }
         }
+      }
 
       .workout-map,
       .workout-data {

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;

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;