Client - improve semantic

fittrackee_client/src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="top" />
   <NavBar @menuInteraction="updateHideScrollBar" />
+  <main>
     <div v-if="appLoading" class="app-container">
       <div class="app-loading">
         <Loader />
@@ -19,6 +20,7 @@
         <i class="fa fa-chevron-up" aria-hidden="true"></i>
       </div>
     </div>
+  </main>
   <Footer
     v-if="appConfig"
     :version="appConfig ? appConfig.version : ''"

fittrackee_client/src/components/Administration/AdminUsers.vue

@@ -61,6 +61,7 @@
                   <span class="cell-heading">
                     {{ $t('user.PROFILE.REGISTRATION_DATE') }}
                   </span>
+                  <time>
                     {{
                       formatDate(
                         user.created_at,
@@ -68,6 +69,7 @@
                         authUser.date_format
                       )
                     }}
+                  </time>
                 </td>
                 <td class="text-center">
                   <span class="cell-heading">

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

@@ -22,7 +22,7 @@
                 params: { workoutId: record.workout_id },
               }"
             >
-              {{ record.workout_date }}
+              <time>{{ record.workout_date }}</time>
             </router-link>
           </span>
         </div>

fittrackee_client/src/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="footer">
+  <footer id="footer">
     <div class="footer-items">
       <div class="footer-item">
         <strong>FitTrackee</strong>
@@ -22,7 +22,7 @@
         </router-link>
       </div>
     </div>
-  </div>
+  </footer>
 </template>
 
 <script setup lang="ts">

fittrackee_client/src/components/NavBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="nav">
+  <header id="nav">
     <Modal
       v-show="displayModal"
       :title="$t('common.CONFIRMATION')"
@@ -89,7 +89,7 @@
         </div>
       </div>
     </div>
-  </div>
+  </header>
 </template>
 
 <script setup lang="ts">

fittrackee_client/src/components/PrivacyPolicy.vue

@@ -4,19 +4,20 @@
       {{ capitalize($t('privacy_policy.TITLE')) }}
     </h1>
     <p class="last-update">
-      {{ $t('privacy_policy.LAST_UPDATE')}}: {{ private_policy_date }}
+      {{ $t('privacy_policy.LAST_UPDATE') }}:
+      <time>{{ privatePolicyDate }}</time>
     </p>
     <template v-if="appConfig.privacy_policy">
-      <div
-        v-html="snarkdown(linkifyAndClean(appConfig.privacy_policy))"
-      />
+      <div v-html="snarkdown(linkifyAndClean(appConfig.privacy_policy))" />
     </template>
     <template v-else>
       <template v-for="paragraph in paragraphs" :key="paragraph">
         <h2>
           {{ $t(`privacy_policy.CONTENT.${paragraph}.TITLE`) }}
         </h2>
-        <p v-html="snarkdown($t(`privacy_policy.CONTENT.${paragraph}.CONTENT`))" />
+        <p
+          v-html="snarkdown($t(`privacy_policy.CONTENT.${paragraph}.CONTENT`))"
+        />
       </template>
     </template>
   </div>
@@ -34,7 +35,7 @@
   import { linkifyAndClean } from '@/utils/inputs'
 
   const store = useStore()
-  const fittrackee_private_policy_date = 'Sun, 26 Feb 2023 17:00:00 GMT'
+  const fittrackeePrivatePolicyDate = 'Sun, 26 Feb 2023 17:00:00 GMT'
   const appConfig: ComputedRef<TAppConfig> = computed(
     () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
   )
@@ -46,11 +47,16 @@
   )
   const dateFormat = computed(() => getDateFormat())
   const timezone = computed(() => getTimezone())
-  const private_policy_date = computed(() => getPolicyDate())
+  const privatePolicyDate = computed(() => getPolicyDate())
   const paragraphs = [
-      'DATA_COLLECTED', 'INFORMATION_USAGE', 'INFORMATION_PROTECTION',
-      'INFORMATION_DISCLOSURE', 'SITE_USAGE_BY_CHILDREN', 'YOUR_CONSENT',
-      'ACCOUNT_DELETION', 'CHANGES_TO_OUR_PRIVACY_POLICY'
+    'DATA_COLLECTED',
+    'INFORMATION_USAGE',
+    'INFORMATION_PROTECTION',
+    'INFORMATION_DISCLOSURE',
+    'SITE_USAGE_BY_CHILDREN',
+    'YOUR_CONSENT',
+    'ACCOUNT_DELETION',
+    'CHANGES_TO_OUR_PRIVACY_POLICY',
   ]
 
   function getTimezone() {
@@ -67,13 +73,12 @@
     return formatDate(
       appConfig.value.privacy_policy && appConfig.value.privacy_policy_date
         ? `${appConfig.value.privacy_policy_date}`
-          : fittrackee_private_policy_date,
+        : fittrackeePrivatePolicyDate,
       timezone.value,
       dateFormat.value,
-      false,
+      false
     )
   }
-
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue

@@ -58,13 +58,17 @@
     <div v-else>
       <dl>
         <dt>{{ $t('user.PROFILE.REGISTRATION_DATE') }}:</dt>
-        <dd>{{ registrationDate }}</dd>
+        <dd>
+          <time>{{ registrationDate }}</time>
+        </dd>
         <dt>{{ $t('user.PROFILE.FIRST_NAME') }}:</dt>
         <dd>{{ user.first_name }}</dd>
         <dt>{{ $t('user.PROFILE.LAST_NAME') }}:</dt>
         <dd>{{ user.last_name }}</dd>
         <dt>{{ $t('user.PROFILE.BIRTH_DATE') }}:</dt>
-        <dd>{{ birthDate }}</dd>
+        <dd>
+          <time v-if="birthDate">{{ birthDate }}</time>
+        </dd>
         <dt>{{ $t('user.PROFILE.LOCATION') }}:</dt>
         <dd>{{ user.location }}</dd>
         <dt>{{ $t('user.PROFILE.BIO') }}:</dt>

fittrackee_client/src/components/User/UserApps/UserApp.vue

@@ -49,6 +49,7 @@
         </dd>
         <dt>{{ capitalize($t('oauth2.APP.ISSUE_AT')) }}:</dt>
         <dd>
+          <time>
             {{
               formatDate(
                 client.issued_at,
@@ -56,6 +57,7 @@
                 authUser.date_format
               )
             }}
+          </time>
         </dd>
         <dt>{{ $t('oauth2.APP.NAME') }}:</dt>
         <dd>{{ client.name }}</dd>

fittrackee_client/src/components/User/UserApps/UserAppsList.vue

@@ -8,6 +8,7 @@
         </router-link>
         <span class="app-issued-at">
           {{ $t('oauth2.APP.ISSUE_AT') }}
+          <time>
             {{
               formatDate(
                 client.issued_at,
@@ -15,6 +16,7 @@
                 authUser.date_format
               )
             }}
+          </time>
         </span>
       </li>
     </ul>

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

@@ -61,8 +61,9 @@
           </span>
         </div>
         <div class="workout-date">
-          {{ workoutObject.workoutDate }} -
-          {{ workoutObject.workoutTime }}
+          <time>
+            {{ workoutObject.workoutDate }} - {{ workoutObject.workoutTime }}
+          </time>
           <span class="workout-link">
             <router-link
               v-if="workoutObject.type === 'SEGMENT'"

fittrackee_client/src/components/Workouts/WorkoutsList.vue

@@ -83,6 +83,7 @@
                 <span class="cell-heading">
                   {{ $t('workouts.DATE') }}
                 </span>
+                <time>
                   {{
                     formatDate(
                       workout.workout_date,
@@ -90,6 +91,7 @@
                       user.date_format
                     )
                   }}
+                </time>
               </td>
               <td class="text-right">
                 <span class="cell-heading">