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,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 : ''"
--- a/fittrackee_client/src/components/Administration/AdminUsers.vue
+++ b/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">
--- 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,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>
--- 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,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>
--- a/fittrackee_client/src/components/User/UserApps/UserAppsList.vue
+++ b/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>
--- 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,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">