Client - improve semantic

fittrackee_client/src/App.vue

@@ -1,24 +1,26 @@
 <template>
   <div id="top" />
   <NavBar @menuInteraction="updateHideScrollBar" />
-  <div v-if="appLoading" class="app-container">
+  <main>
-    <div class="app-loading">
+    <div v-if="appLoading" class="app-container">
-      <Loader />
+      <div class="app-loading">
+        <Loader />
+      </div>
     </div>
-  </div>
+    <div v-else class="app-container" :class="{ 'hide-scroll': hideScrollBar }">
-  <div v-else class="app-container" :class="{ 'hide-scroll': hideScrollBar }">
+      <router-view v-if="appConfig" />
-    <router-view v-if="appConfig" />
+      <NoConfig v-else />
-    <NoConfig v-else />
-  </div>
-  <div class="container scroll">
-    <div
-      class="scroll-button"
-      :class="{ 'display-button': displayScrollButton }"
-      @click="scrollToTop"
-    >
-      <i class="fa fa-chevron-up" aria-hidden="true"></i>
     </div>
-  </div>
+    <div class="container scroll">
+      <div
+        class="scroll-button"
+        :class="{ 'display-button': displayScrollButton }"
+        @click="scrollToTop"
+      >
+        <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,13 +61,15 @@
                   <span class="cell-heading">
                     {{ $t('user.PROFILE.REGISTRATION_DATE') }}
                   </span>
-                  {{
+                  <time>
-                    formatDate(
+                    {{
-                      user.created_at,
+                      formatDate(
-                      authUser.timezone,
+                        user.created_at,
-                      authUser.date_format
+                        authUser.timezone,
-                    )
+                        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
+      <div v-html="snarkdown(linkifyAndClean(appConfig.privacy_policy))" />
-        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`)}}
+          {{ $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,19 +47,24 @@
   )
   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',
+    'DATA_COLLECTED',
-      'INFORMATION_DISCLOSURE', 'SITE_USAGE_BY_CHILDREN', 'YOUR_CONSENT',
+    'INFORMATION_USAGE',
-      'ACCOUNT_DELETION', 'CHANGES_TO_OUR_PRIVACY_POLICY'
+    'INFORMATION_PROTECTION',
+    'INFORMATION_DISCLOSURE',
+    'SITE_USAGE_BY_CHILDREN',
+    'YOUR_CONSENT',
+    'ACCOUNT_DELETION',
+    'CHANGES_TO_OUR_PRIVACY_POLICY',
   ]
 
   function getTimezone() {
     return authUser.value.timezone
-        ? authUser.value.timezone
+      ? authUser.value.timezone
-        : Intl.DateTimeFormat().resolvedOptions().timeZone
+      : Intl.DateTimeFormat().resolvedOptions().timeZone
-          ? Intl.DateTimeFormat().resolvedOptions().timeZone
+      ? Intl.DateTimeFormat().resolvedOptions().timeZone
-          : 'Europe/Paris'
+      : 'Europe/Paris'
   }
   function getDateFormat() {
     return dateStringFormats[language.value]
@@ -66,14 +72,13 @@
   function getPolicyDate() {
     return formatDate(
       appConfig.value.privacy_policy && appConfig.value.privacy_policy_date
-          ? `${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,13 +49,15 @@
         </dd>
         <dt>{{ capitalize($t('oauth2.APP.ISSUE_AT')) }}:</dt>
         <dd>
-          {{
+          <time>
-            formatDate(
+            {{
-              client.issued_at,
+              formatDate(
-              authUser.timezone,
+                client.issued_at,
-              authUser.date_format
+                authUser.timezone,
-            )
+                authUser.date_format
-          }}
+              )
+            }}
+          </time>
         </dd>
         <dt>{{ $t('oauth2.APP.NAME') }}:</dt>
         <dd>{{ client.name }}</dd>

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

@@ -8,13 +8,15 @@
         </router-link>
         <span class="app-issued-at">
           {{ $t('oauth2.APP.ISSUE_AT') }}
-          {{
+          <time>
-            formatDate(
+            {{
-              client.issued_at,
+              formatDate(
-              authUser.timezone,
+                client.issued_at,
-              authUser.date_format
+                authUser.timezone,
-            )
+                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 }} -
+          <time>
-          {{ workoutObject.workoutTime }}
+            {{ workoutObject.workoutDate }} - {{ workoutObject.workoutTime }}
+          </time>
           <span class="workout-link">
             <router-link
               v-if="workoutObject.type === 'SEGMENT'"

fittrackee_client/src/components/Workouts/WorkoutsList.vue

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