Client - refacto + display fix and improvements

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue

@@ -84,7 +84,7 @@
   import { PropType, defineComponent } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import SportImage from '@/components/Common/Sports/SportImage.vue'
+  import SportImage from '@/components/Common/SportImage/index.vue'
   import { ISport } from '@/types/sports'
   import { IWorkoutObject } from '@/types/workouts'
 

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue

@@ -28,7 +28,11 @@
       class="workout-data"
       v-if="workoutObject.maxAlt !== null && workoutObject.minAlt !== null"
     >
-      <img class="mountains" src="/img/workouts/mountains.svg" />
+      <img
+        class="mountains"
+        src="/img/workouts/mountains.svg"
+        :alt="t('workouts.ELEVATION')"
+      />
       {{ t('workouts.MIN_ALTITUDE') }}: <span>{{ workoutObject.minAlt }} m</span
       ><br />
       {{ t('workouts.MAX_ALTITUDE') }}:

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue

@@ -5,7 +5,7 @@
       <div class="leaflet-container" v-if="workoutData.workout.with_gpx">
         <LMap
           v-if="geoJson.jsonData && center && bounds.length === 2"
-          :zoom="options.zoom"
+          :zoom="13"
           :center="center"
           :bounds="bounds"
           ref="workoutMap"
@@ -108,17 +108,18 @@
       const appConfig: ComputedRef<IAppConfig> = computed(
         () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
       )
+      const center = computed(() => getCenter(bounds))
+      const geoJson = computed(() =>
+        props.workoutData && props.workoutData.gpx
+          ? getGeoJson(props.workoutData.gpx)
+          : {}
+      )
 
       return {
         appConfig,
-        bounds: bounds,
-        center: computed(() => getCenter(bounds)),
-        geoJson: computed(() =>
-          props.workoutData && props.workoutData.gpx
-            ? getGeoJson(props.workoutData.gpx)
-            : {}
-        ),
-        options: { zoom: 13 },
+        bounds,
+        center,
+        geoJson,
         t,
         workoutMap,
         fitBounds,

fittrackee_client/src/components/Workout/WorkoutDetail/index.vue

@@ -7,7 +7,7 @@
       @confirmAction="deleteWorkout(workoutObject.workoutId)"
       @cancelAction="updateDisplayModal(false)"
     />
-    <Card :without-title="false">
+    <Card>
       <template #title>
         <WorkoutCardTitle
           :sport="sport"
@@ -213,7 +213,7 @@
       .card-content {
         display: flex;
         flex-direction: row;
-        @media screen and (max-width: $small-limit) {
+        @media screen and (max-width: $medium-limit) {
           flex-direction: column;
         }
       }