refactoring titles styles

dnum-mi · Sep 4, 2023 · efca365 · efca365
1 parent 8772cfe
commit efca365
Show file tree

Hide file tree

Showing 17 changed files with 422 additions and 424 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,10 +17,10 @@
   },
   "dependencies": {
     "@gouvfr/dsfr": "~1.10.0",
-    "@gouvminint/vue-dsfr": "4.5.1",
+    "@gouvminint/vue-dsfr": "4.6.0",
     "@vue/compat": "^3.3.4",
-    "@vueuse/core": "^10.3.0",
-    "axios": "^1.4.0",
+    "@vueuse/core": "^10.4.1",
+    "axios": "^1.5.0",
     "pinia": "^2.1.6",
     "stylelint-config-recommended-vue": "^1.5.0",
     "swiper": "^10.2.0",
@@ -30,11 +30,11 @@
   },
   "devDependencies": {
     "@testing-library/cypress": "^9.0.0",
-    "@unocss/transformer-directives": "^0.55.2",
-    "@unocss/transformer-variant-group": "^0.55.2",
-    "@vitejs/plugin-vue": "^4.3.3",
-    "cypress": "^12.17.4",
-    "eslint": "^8.47.0",
+    "@unocss/transformer-directives": "^0.55.7",
+    "@unocss/transformer-variant-group": "^0.55.7",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "cypress": "^13.1.0",
+    "eslint": "^8.48.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-cypress": "^2.14.0",
     "eslint-plugin-import": "^2.28.1",
@@ -44,7 +44,7 @@
     "start-server-and-test": "^2.0.0",
     "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0",
-    "unocss": "^0.55.2",
+    "unocss": "^0.55.7",
     "vite-plugin-pwa": "^0.16.4",
     "workbox-window": "^7.0.0"
   },

diff --git a/...cation/photos/pistolet_semi_auto_moderne/pistolet_sa_moderne_chargeur_bille.jpg b/...cation/photos/pistolet_semi_auto_moderne/pistolet_sa_moderne_chargeur_bille.jpg
diff --git a/.../semi_auto_militaire_autre/semi_automatique_militaire_autre_chargeur_billes.jpg b/.../semi_auto_militaire_autre/semi_automatique_militaire_autre_chargeur_billes.jpg
diff --git a/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-nok.png b/frontend/src/assets/guide-mise-en-securite/icones/fin-mise-en-securite-nok.png
diff --git a/...-securite/icones/fin-mise-en-securite.jpg → ...curite/icones/fin-mise-en-securite-ok.jpg b/...-securite/icones/fin-mise-en-securite.jpg → ...curite/icones/fin-mise-en-securite-ok.jpg
diff --git a/frontend/src/components/ResultPage.vue b/frontend/src/components/ResultPage.vue
@@ -75,24 +75,24 @@ function sendFeedback (isCorrect) {
 <template>
   <div class="result-frame -mx-8 py-5 px-8">
     <div class="result">
-      <h4
+      <h2
         v-if="route.name === 'IdentificationTypologyResult' && isDummyTypology === true"
         class="typology-title bg-white py-4"
       >
         Typologie de l'arme
-      </h4>
-      <h4
+      </h2>
+      <h2
         v-else
         class="typology-title bg-white py-4"
       >
         Résultat Final
-      </h4>
+      </h2>
       <div
         class="result-image"
         :style="{backgroundImage:`url(${img})`}"
       />
       <div class="fr-tile fr-enlarge-link mb-3">
-        <h4 class="fr-tile__title px-2">
+        <h2 class="fr-tile__title px-2">
           <div v-if="confidenceLevel === 'low'">
             <div class="fr-tile__body">
               <DsfrTag
@@ -180,7 +180,8 @@ function sendFeedback (isCorrect) {
               </div>
             </div>
           </div>
-        </h4>
+        </h2>
+        </h2>
       </div>
       <div
         v-if="route.name === 'IdentificationTypologyResult' && confidenceLevel !== 'low' && resultTree[typology]?.isDummyTypology"
@@ -231,6 +232,8 @@ function sendFeedback (isCorrect) {
           </div>
         </div>
       </div>
+      </h2>
+      </h2>
     </div>
     <div
       v-if="isFeedbackDone"

diff --git a/frontend/src/main.css b/frontend/src/main.css
@@ -2,6 +2,19 @@ html {
   --select-option-image-width: 13rem;
 }
 
+h1 {
+  font-size: 1.75rem
+}
+
+h2 {
+  font-size: 1.3rem 
+}
+
+h3 {
+  font-size: 1.1rem;
+  color: var(--blue-france-sun-113-625)
+}
+
 #app {
   position: absolute;
   inset: 0;

diff --git a/frontend/src/views/AboutPage.vue b/frontend/src/views/AboutPage.vue
@@ -33,7 +33,7 @@ const imgs = ref([
 <template>
   <div>
     <div class="fr-container mt-4">
-      <h2>À propos</h2>
+      <h1>À propos</h1>
       <div>
         <p class="title-space">
           Basegun est un projet d'application par apprentissage automatique capable
@@ -83,52 +83,52 @@ const imgs = ref([
 </template>
 
 <style scoped>
-    .content {
-      margin: min(5vw, 10rem);
-    }
+.content {
+  margin: min(5vw, 10rem);
+}
 
-    .contact-list {
-      margin-left: 2rem;
-    }
+.contact-list {
+  margin-left: 2rem;
+}
 
-    .small-text {
-      font-size: 10pt;
-      margin-bottom: 0;
-    }
+.small-text {
+  font-size: 10pt;
+  margin-bottom: 0;
+}
 
-    .small-link {
-      color: var(--blue-france-sun-113-625);
-    }
+.small-link {
+  color: var(--blue-france-sun-113-625);
+}
 
-    .small-link:hover {
-      color: #1212ff
-    }
+.small-link:hover {
+  color: #1212ff
+}
 
-     .title-space {
-    margin-top: 20px;
-  }
+  .title-space {
+margin-top: 20px;
+}
 
-  .container-img {
-    display: flex;
-    justify-content: center;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-  }
+.container-img {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
 
-  .img {
-    margin: 2em;
-    width: 6em;
-    height: auto;
-  }
+.img {
+  margin: 2em;
+  width: 6em;
+  height: auto;
+}
 
-  .list {
-    margin-left: 2em;
-    list-style: square;
-  }
+.list {
+  margin-left: 2em;
+  list-style: square;
+}
 
-  :deep(.fr-icon-alert-fill) {
-    padding-right: .1em;
-  }
+:deep(.fr-icon-alert-fill) {
+  padding-right: .1em;
+}
 
 </style>
diff --git a/frontend/src/views/ContactPage.vue b/frontend/src/views/ContactPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="fr-container mt-4">
-      <h2>ContactPage</h2>
+      <h1>Contact</h1>
       <div>
         <p class="title-space">
           Toute question, remarque ou contribution concernant le projet Basegun est à adresser par email à <a

diff --git a/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue b/frontend/src/views/GuideSecuringFirearm/GuideSecuringFirearm.vue
@@ -40,9 +40,9 @@ const goToNextStep = () => (
           :steps="steps"
           :current-step="currentStep"
         />
-        <h4 class="m-2.5">
+        <h2 class="m-2.5">
           Mettre en sécurité mon arme
-        </h4>
+        </h2>
         <RouterView />
       </div>
     </div>

diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue b/frontend/src/views/GuideSecuringFirearm/SecuringAchievement.vue
@@ -12,9 +12,9 @@ const typology = computed(() => resultStore.typology)
   <div class="fr-container">
     <div class="result fr-col-11 fr-col-lg-6 m-auto">
       <div v-if="!resultTree[typology]?.isSecuringOptions">
-        <h4 class="mt-5 text-center">
+        <h2 class="mt-5 text-center">
           Pas de guide de mise en sécurité pour votre arme
-        </h4>
+        </h2>
         <div
 
           class="text-center"
@@ -24,25 +24,32 @@ const typology = computed(() => resultStore.typology)
           </p>
           <p>Souhaitez-vous l'identifier quand même ? <br> Sinon vous pouvez retourner au menu.</p>
         </div>
+        <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
+          <img
+            src="@/assets/guide-mise-en-securite/icones/fin-mise-en-securite-nok.jpg"
+            alt="alt"
+            class="img-deco"
+          >
+        </div>
       </div>
       <div v-else>
-        <h4 class="mt-5 text-center">
+        <h2 class="mt-5 text-center">
           Fin de la mise en sécurité de l’arme
-        </h4>
+        </h2>
         <p class="ending font-600 text-center">
           Vous venez de sécuriser votre arme !
         </p>
         <p>
           La manipulation étant terminée, vous pouvez identifier votre arme ou retourner au menu.
         </p>
       </div>
-    </div>
-    <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
-      <img
-        src="@/assets/guide-mise-en-securite/icones/fin-mise-en-securite.jpg"
-        alt="alt"
-        class="img-deco"
-      >
+      <div class="fr-col-sm-6 fr-col-lg-8 mx-auto text-center">
+        <img
+          src="@/assets/guide-mise-en-securite/icones/fin-mise-en-securite-ok.jpg"
+          alt="alt"
+          class="img-deco"
+        >
+      </div>
     </div>
   </div>
   <div class="footer">

diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionStep1.vue b/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionStep1.vue
@@ -39,12 +39,12 @@ function updateTypology () {
 <template>
   <div class="fr-container">
     <div class="result fr-col-11 fr-col-lg-6 mx-auto">
-      <h4 class="mt-3 text-center">
+      <h2 class="mt-3 mb-1 text-center">
         Mettre en sécurité mon arme
-      </h4>
-      <h5 class="text-center my-auto">
+      </h2>
+      <h3 class="text-center my-auto">
         Choix du type d'arme
-      </h5>
+      </h3>
       <div class="instructions">
         <p
           class="leading-7 mt-3"

diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionStep2.vue b/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionStep2.vue
@@ -37,12 +37,12 @@ const zoomOn = (imgValue) => {
       v-if="typology !== 'revolver'"
       class="result fr-col-11 fr-col-lg-6 mx-auto"
     >
-      <h4 class="mt-3 text-center">
+      <h2 class="mt-3 mb-1 text-center">
         Mettre en sécurité mon arme
-      </h4>
-      <h5 class="text-center my-auto">
+      </h2>
+      <h3 class="text-center my-auto">
         Choix du type d'arme
-      </h5>
+      </h3>
       <div class="instructions">
         <p
           class="leading-7 mt-3"
@@ -93,12 +93,12 @@ const zoomOn = (imgValue) => {
       v-else
       class="result fr-col-11 fr-col-lg-6 mx-auto"
     >
-      <h4 class="mt-3 text-center">
+      <h2 class="mt-3 mb-1 text-center">
         Mettre en sécurité mon arme
-      </h4>
-      <h5 class="text-center my-auto">
+      </h2>
+      <h3 class="text-center my-auto">
         Choix du type d'arme
-      </h5>
+      </h3>
       <div class="instructions">
         <p
           class="leading-7 mt-3"

diff --git a/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionStep3.vue b/frontend/src/views/GuideSecuringFirearm/SecuringSelectOptionStep3.vue
@@ -13,8 +13,6 @@ const stepsStore = useStepsStore()
 
 const typology = computed(() => resultStore.typology)
 
-const selectedOptionStep1 = computed(() => stepsStore.selectedOptionStep1)
-const selectedOptionStep2 = computed(() => stepsStore.selectedOptionStep2)
 const selectedOptionStep3 = computed({
   get () {
     return stepsStore.selectedOptionStep3
@@ -38,12 +36,12 @@ const zoomOn = (imgValue) => {
     <div
       class="result fr-col-11 fr-col-lg-6 mx-auto"
     >
-      <h4 class="mt-3 text-center">
+      <h2 class="mt-3 mb-1 text-center">
         Mettre en sécurité mon arme
-      </h4>
-      <h5 class="text-center my-auto">
+      </h2>
+      <h3 class="text-center my-auto">
         Choix du type d'arme
-      </h5>
+      </h3>
       <div class="instructions">
         <p
           class="leading-7 mt-3"