Client - improve semantic

2023-07-13 16:18:03 +02:00 · 2023-07-13 16:18:03 +02:00 · 14e66aee04
commit 14e66aee04
parent e260a1a408
11 changed files with 93 additions and 73 deletions
--- a/fittrackee_client/src/App.vue
+++ b/fittrackee_client/src/App.vue
@ -1,24 +1,26 @@
 <template>
  <div id="top" />
  <NavBar @menuInteraction="updateHideScrollBar" />
-  <div v-if="appLoading" class="app-container">
-    <div class="app-loading">
-      <Loader />
+  <main>
+    <div v-if="appLoading" class="app-container">
+      <div class="app-loading">
+        <Loader />
+      </div>
    </div>
-  </div>
-  <div v-else class="app-container" :class="{ 'hide-scroll': hideScrollBar }">
-    <router-view v-if="appConfig" />
-    <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 v-else class="app-container" :class="{ 'hide-scroll': hideScrollBar }">
+      <router-view v-if="appConfig" />
+      <NoConfig v-else />
    </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 : ''"
--- a/fittrackee_client/src/components/Administration/AdminUsers.vue
+++ b/fittrackee_client/src/components/Administration/AdminUsers.vue
@ -61,13 +61,15 @@
                  <span class="cell-heading">
                    {{ $t('user.PROFILE.REGISTRATION_DATE') }}
                  </span>
-                  {{
-                    formatDate(
-                      user.created_at,
-                      authUser.timezone,
-                      authUser.date_format
-                    )
-                  }}
+                  <time>
+                    {{
+                      formatDate(
+                        user.created_at,
+                        authUser.timezone,
+                        authUser.date_format
+                      )
+                    }}
+                  </time>
                </td>
                <td class="text-center">
                  <span class="cell-heading">
--- a/fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue
+++ b/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>
--- a/fittrackee_client/src/components/Footer.vue
+++ b/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">
--- a/fittrackee_client/src/components/NavBar.vue
+++ b/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">
--- a/fittrackee_client/src/components/PrivacyPolicy.vue
+++ b/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`)}}
+          {{ $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',
-      '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() {
    return authUser.value.timezone
-        ? authUser.value.timezone
-        : Intl.DateTimeFormat().resolvedOptions().timeZone
-          ? Intl.DateTimeFormat().resolvedOptions().timeZone
-          : 'Europe/Paris'
+      ? authUser.value.timezone
+      : Intl.DateTimeFormat().resolvedOptions().timeZone
+      ? Intl.DateTimeFormat().resolvedOptions().timeZone
+      : '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}`
-          : fittrackee_private_policy_date,
+        ? `${appConfig.value.privacy_policy_date}`
+        : fittrackeePrivatePolicyDate,
      timezone.value,
      dateFormat.value,
-      false,
-  )
+      false
+    )
  }
-
 </script>

 <style lang="scss" scoped>
--- a/fittrackee_client/src/components/User/ProfileDisplay/UserInfos.vue
+++ b/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>
--- a/fittrackee_client/src/components/User/UserApps/UserApp.vue
+++ b/fittrackee_client/src/components/User/UserApps/UserApp.vue
@ -49,13 +49,15 @@
        </dd>
        <dt>{{ capitalize($t('oauth2.APP.ISSUE_AT')) }}:</dt>
        <dd>
-          {{
-            formatDate(
-              client.issued_at,
-              authUser.timezone,
-              authUser.date_format
-            )
-          }}
+          <time>
+            {{
+              formatDate(
+                client.issued_at,
+                authUser.timezone,
+                authUser.date_format
+              )
+            }}
+          </time>
        </dd>
        <dt>{{ $t('oauth2.APP.NAME') }}:</dt>
        <dd>{{ client.name }}</dd>
--- a/fittrackee_client/src/components/User/UserApps/UserAppsList.vue
+++ b/fittrackee_client/src/components/User/UserApps/UserAppsList.vue
@ -8,13 +8,15 @@
        </router-link>
        <span class="app-issued-at">
          {{ $t('oauth2.APP.ISSUE_AT') }}
-          {{
-            formatDate(
-              client.issued_at,
-              authUser.timezone,
-              authUser.date_format
-            )
-          }}
+          <time>
+            {{
+              formatDate(
+                client.issued_at,
+                authUser.timezone,
+                authUser.date_format
+              )
+            }}
+          </time>
        </span>
      </li>
    </ul>
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue
+++ b/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'"
--- a/fittrackee_client/src/components/Workouts/WorkoutsList.vue
+++ b/fittrackee_client/src/components/Workouts/WorkoutsList.vue
@ -83,13 +83,15 @@
                <span class="cell-heading">
                  {{ $t('workouts.DATE') }}
                </span>
-                {{
-                  formatDate(
-                    workout.workout_date,
-                    user.timezone,
-                    user.date_format
-                  )
-                }}
+                <time>
+                  {{
+                    formatDate(
+                      workout.workout_date,
+                      user.timezone,
+                      user.date_format
+                    )
+                  }}
+                </time>
              </td>
              <td class="text-right">
                <span class="cell-heading">