Client - display section title for records and timeline

fittrackee_client/src/components/Dashboard/Timeline/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="timeline">
+    <div class="section-title">{{ t('workouts.LATEST_WORKOUTS') }}</div>
     <WorkoutCard
       v-for="workout in workouts"
       :workout="workout"
@@ -7,9 +8,9 @@
       :user="user"
       :key="workout.id"
     ></WorkoutCard>
-    <Card v-if="workouts.length === 0" class="no-workouts">
-      <template #content>{{ t('workouts.NO_WORKOUTS') }}</template>
-    </Card>
+    <div v-if="workouts.length === 0" class="no-workouts">
+      {{ t('workouts.NO_WORKOUTS') }}
+    </div>
   </div>
 </template>
 
@@ -23,7 +24,6 @@
   } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import Card from '@/components/Common/Card.vue'
   import WorkoutCard from '@/components/Dashboard/Timeline/WorkoutCard.vue'
   import { SPORTS_STORE, WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
@@ -34,7 +34,6 @@
   export default defineComponent({
     name: 'Timeline',
     components: {
-      Card,
       WorkoutCard,
     },
     props: {
@@ -68,5 +67,6 @@
 
   .no-workouts {
     margin-bottom: $default-margin * 2;
+    padding: $default-padding;
   }
 </style>

fittrackee_client/src/components/Dashboard/UserRecords/index.vue

@@ -1,14 +1,20 @@
 <template>
-  <div class="user-records">
-    <Card v-if="Object.keys(recordsBySport).length === 0" class="no-records">
-      <template #content>{{ t('workouts.NO_RECORDS') }}</template>
-    </Card>
-    <RecordsCard
-      v-for="sportLabel in Object.keys(recordsBySport).sort()"
-      :sportLabel="sportLabel"
-      :records="recordsBySport[sportLabel]"
-      :key="sportLabel"
-    />
+  <div class="user-records-section">
+    <div class="section-title">
+      <i class="fa fa-trophy custom-fa-small" aria-hidden="true" />
+      {{ t('workouts.RECORD', 2) }}
+    </div>
+    <div class="user-records">
+      <div v-if="Object.keys(recordsBySport).length === 0" class="no-records">
+        {{ t('workouts.NO_RECORDS') }}
+      </div>
+      <RecordsCard
+        v-for="sportLabel in Object.keys(recordsBySport).sort()"
+        :sportLabel="sportLabel"
+        :records="recordsBySport[sportLabel]"
+        :key="sportLabel"
+      />
+    </div>
   </div>
 </template>
 
@@ -16,7 +22,6 @@
   import { computed, defineComponent, PropType } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  import Card from '@/components/Common/Card.vue'
   import RecordsCard from '@/components/Dashboard/UserRecords/RecordsCard.vue'
   import { SPORTS_STORE } from '@/store/constants'
   import { IAuthUserProfile } from '@/types/user'
@@ -27,7 +32,6 @@
   export default defineComponent({
     name: 'UserRecords',
     components: {
-      Card,
       RecordsCard,
     },
     props: {
@@ -60,7 +64,7 @@
     justify-content: space-between;
 
     .no-records {
-      width: 100%;
+      padding: $default-padding;
     }
   }
 </style>

fittrackee_client/src/locales/en/workouts.json

@@ -3,8 +3,10 @@
   "DISTANCE": "distance",
   "DURATION": "duration",
   "KM": "km",
+  "LATEST_WORKOUTS": "Latest workouts",
   "NO_RECORDS": "No records.",
   "NO_WORKOUTS": "No workouts.",
+  "RECORD": "record | records",
   "RECORD_AS": "Ave. speed",
   "RECORD_FD": "Farest distance",
   "RECORD_LD": "Longest duration",

fittrackee_client/src/locales/fr/workouts.json

@@ -3,8 +3,10 @@
   "DISTANCE": "distance",
   "DURATION": "durée",
   "KM": "km",
+  "LATEST_WORKOUTS": "Séances récentes",
   "NO_RECORDS": "Pas de records.",
   "NO_WORKOUTS": "Pas de séances.",
+  "RECORD": "record | records",
   "RECORD_AS": "Vitesse moy.",
   "RECORD_FD": "Distance la + longue",
   "RECORD_LD": "Durée la + longue",

fittrackee_client/src/scss/base.scss

@@ -93,4 +93,11 @@ button {
 
 .fa-trophy {
   color: var(--workout-trophy-color)
+}
+
+.section-title {
+  font-weight: bold;
+  padding-top: $default-padding * 1.5;
+  padding-left: $default-padding;
+  text-transform: capitalize;
 }