Client - refacto + display fix and improvements

fittrackee_client/src/components/Workout/WorkoutChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="workout-chart">
-    <Card :without-title="false">
+    <Card>
       <template #title>{{ t('workouts.ANALYSIS') }} </template>
       <template #content>
         <div class="chart-radio">

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;
         }
       }

fittrackee_client/src/components/Workout/WorkoutEdition.vue

@@ -1,6 +1,9 @@
 <template>
-  <div id="workout-edition">
-    <Card :without-title="false">
+  <div
+    id="workout-edition"
+    :class="{ 'center-form': workout && workout.with_gpx }"
+  >
+    <Card>
       <template #title>{{
         t(`workouts.${isCreation ? 'ADD' : 'EDIT'}_WORKOUT`)
       }}</template>
@@ -424,10 +427,15 @@
   #workout-edition {
     margin: 100px auto;
     width: 700px;
-    @media screen and (max-width: $small-limit) {
+    @media screen and (max-width: $medium-limit) {
       width: 100%;
       margin: 0 auto 50px auto;
     }
+    @media screen and (max-width: $small-limit) {
+      &.center-form {
+        margin: 50px auto;
+      }
+    }
 
     ::v-deep(.card) {
       .card-title {
@@ -436,7 +444,7 @@
       }
 
       .card-content {
-        @media screen and (max-width: $small-limit) {
+        @media screen and (max-width: $medium-limit) {
           padding: $default-padding 0;
         }
 
@@ -454,7 +462,7 @@
               flex-direction: row;
               justify-content: space-between;
 
-              @media screen and (max-width: $small-limit) {
+              @media screen and (max-width: $medium-limit) {
                 flex-direction: column;
               }
             }
@@ -481,7 +489,7 @@
               justify-content: space-around;
               label {
                 font-weight: normal;
-                @media screen and (max-width: $small-limit) {
+                @media screen and (max-width: $medium-limit) {
                   font-size: 0.9em;
                 }
               }
@@ -513,7 +521,7 @@
             padding: $default-padding;
             div {
               display: flex;
-              @media screen and (max-width: $small-limit) {
+              @media screen and (max-width: $medium-limit) {
                 flex-direction: column;
               }
               ul {

fittrackee_client/src/components/Workout/WorkoutNotes.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="workout-note">
-    <Card :without-title="false">
+    <Card>
       <template #title>{{ t('workouts.NOTES') }}</template>
       <template #content>
         {{ notes && notes !== '' ? notes : t('workouts.NO_NOTES') }}</template

fittrackee_client/src/components/Workout/WorkoutSegments.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="workout-segments">
-    <Card :without-title="false">
+    <Card>
       <template #title>{{ t('workouts.SEGMENT', 2) }}</template>
       <template #content>
         <ul>