finalize responsive for each page for sm screens

components/Contact/Form.vue

@@ -311,6 +311,11 @@ const submit = async (): Promise<void> => {
     align-items: center;
     font-weight: 100;
 
+    @media (max-width: 600px) {
+      font-size: 24px;
+      line-height: 48px;
+    }
+
     .line {
       display: block;
       height: 1px;
@@ -349,6 +354,12 @@ const submit = async (): Promise<void> => {
 
   .legal {
     opacity: 0.7;
+
+    @media (max-width: 600px) {
+      max-width: 80%;
+      margin-left: auto;
+      margin-right: auto;
+    }
   }
 }
 

components/Contact/Map.vue

@@ -5,7 +5,7 @@
     </h4>
 
     <v-row>
-      <v-col cols="6">
+      <v-col cols="12" md="6">
         <div class="map-container">
           <l-map
             ref="map"
@@ -46,7 +46,7 @@
         </div>
       </v-col>
 
-      <v-col class="infos">
+      <v-col cols="12" md="6" class="infos">
         <div class="name mb-8">
           Opentalent
         </div>
@@ -101,6 +101,11 @@ h4 {
   margin: 0 auto 1rem auto;
   max-width: 1400px;
 
+  @media (max-width: 600px) {
+    font-size: 24px;
+    line-height: 48px;
+  }
+
   .line {
     display: block;
     height: 1px;

components/JoinUs/MissionDetail.vue

@@ -35,7 +35,7 @@
           </LayoutUITitlePage>
 
           <v-row class="details blue-content my-6">
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <v-row>
                 <div>
                   Type de contrat :
@@ -51,7 +51,7 @@
               </v-row>
             </v-col>
 
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <v-row>
                 <div>
                   Secteur d'activité : <b>{{ job.sector.join(', ') }}</b>
@@ -87,7 +87,7 @@
             <p>
               MOTS CLÉS
             </p>
-            <div>
+            <div v-if="mdAndUp">
               <p>PARTAGER</p>
             </div>
           </v-row>
@@ -98,9 +98,13 @@
                 {{ tag.name }}
               </span>
             </p>
+            <CommonShare v-if="mdAndUp" />
+          </v-row>
 
+          <div v-if="smAndDown">
+            <p>PARTAGER</p>
             <CommonShare />
-          </v-row>
+          </div>
         </div>
       </div>
     </div>
@@ -113,6 +117,9 @@ import "vue3-carousel/dist/carousel.css";
 import { useEntityFetch } from "~/composables/data/useEntityFetch";
 import JobPosting from "~/models/Maestro/JobPosting";
 import DateUtils from "~/services/utils/dateUtils";
+import { useDisplay } from "vuetify";
+
+const { mdAndUp, smAndDown } = useDisplay()
 
 const route = useRoute();
 const { fetch } = useEntityFetch()
@@ -146,6 +153,10 @@ const formatDate = (date: string) => {
     color: var(--on-secondary-color);
     height: 10rem;
 
+    @media (max-width: 600px) {
+      height: auto;
+    }
+
     .v-row {
       width: 90%;
       margin-left: auto;
@@ -157,6 +168,10 @@ const formatDate = (date: string) => {
       font-weight: 500;
       font-size: 25px;
       line-height: 18px;
+
+      @media (max-width: 600px) {
+        font-size: 16px;
+      }
     }
   }
 

components/JoinUs/Missions.vue

@@ -15,7 +15,7 @@
       :key="index"
       class="mission-container"
     >
-      <v-row class="title-container">
+      <div class="title-container">
         <NuxtLink
           :to="`/nous-rejoindre/${job.id}`"
           class="title"
@@ -34,7 +34,7 @@
         >
           En savoir plus
         </v-btn>
-      </v-row>
+      </div>
 
       <v-row class="location-container">
         <v-icon icon="fas fa-map-marker" />
@@ -56,7 +56,7 @@
       </v-col>
     </v-row>
 
-    <v-row class="ml-6 mb-6">
+    <v-row class="mb-6">
       <v-col cols="12">
         <p class="apply-now">
           Nous sommes toujours à la recherche de nouveaux talents. N'hésitez pas
@@ -182,6 +182,11 @@ const onFormSubmit = () => {
     height: 80px;
     padding: 10px 10px 10px 1px;
 
+    @media (max-width: 600px) {
+      flex-direction: column;
+      height: auto;
+    }
+
     .title {
       font-weight: 600;
       font-size: 1.5rem;
@@ -189,6 +194,13 @@ const onFormSubmit = () => {
       color: var(--on-primary-color);
       text-decoration: none;
       margin-left: 36px;
+
+      @media (max-width: 600px) {
+        font-size: 1.2rem;
+        margin-left: auto;
+        margin-right: auto;
+        width: 90%;
+      }
     }
 
     .star {
@@ -202,6 +214,10 @@ const onFormSubmit = () => {
       margin-right: 8px;
       display: flex;
       align-items: center;
+
+      @media (max-width: 600px) {
+        margin: 12px auto;
+      }
     }
   }
 
@@ -221,6 +237,10 @@ const onFormSubmit = () => {
       margin-left: 10px;
       font-size: 1.3rem;
     }
+
+    @media (max-width: 600px) {
+      margin: 0 auto 12px auto;
+    }
   }
 }
 
@@ -238,6 +258,11 @@ const onFormSubmit = () => {
   margin-left: auto;
   margin-right: auto;
   font-weight: 700;
+
+  @media (max-width: 600px) {
+    width: 80%;
+    margin: 12px auto;
+  }
 }
 
 .apply-now {
@@ -248,6 +273,12 @@ const onFormSubmit = () => {
   line-height: 40px;
   color: var(--primary-color);
   margin-bottom: 2rem;
+  margin-left: 24px;
+
+  @media (max-width: 600px) {
+    max-width: 90%;
+    margin: 12px auto;
+  }
 }
 
 .v-dialog {

components/News/Details.vue

@@ -40,11 +40,11 @@
           />
 
           <v-row class="center-90">
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <v-img :src="getImageUrl(newsItem.attachment)"/>
             </v-col>
 
-            <v-col cols="6">
+            <v-col cols="12" md="6">
               <h1>
                 {{ newsItem.title }}
               </h1>
@@ -68,7 +68,7 @@
             <p>
               MOTS CLÉS
             </p>
-            <div>
+            <div v-if="mdAndUp">
               <p>PARTAGER</p>
             </div>
           </v-row>
@@ -80,8 +80,13 @@
               </span>
             </p>
 
-            <CommonShare />
+            <CommonShare v-if="mdAndUp" />
           </v-row>
+
+          <div v-if="smAndDown" class="center-90">
+            <p>PARTAGER</p>
+            <CommonShare />
+          </div>
         </div>
       </div>
     </div>
@@ -93,6 +98,9 @@
 <script setup lang="ts">
 import { useEntityFetch } from "~/composables/data/useEntityFetch";
 import News from "~/models/Maestro/News";
+import { useDisplay } from "vuetify";
+
+const { mdAndUp, smAndDown } = useDisplay()
 
 const route = useRoute();
 const { fetch } = useEntityFetch()
@@ -127,6 +135,10 @@ const getImageUrl = (attachment: string): string | null => {
     text-transform: uppercase;
     font-size: 36px;
     font-weight: 600;
+
+    @media (max-width: 600px) {
+      margin-top: 3rem;
+    }
   }
 
   .description {

components/News/List.vue

@@ -28,7 +28,7 @@
         <v-card-item>
           <v-container fluid>
             <v-row align="center">
-              <v-col cols="3">
+              <v-col cols="12" md="3">
                 <v-img
                   v-if="newsItem.attachment"
                   :src="getImageUrl(newsItem.attachment)"
@@ -38,7 +38,7 @@
                 />
               </v-col>
 
-              <v-col cols="9">
+              <v-col cols="12" md="9">
                 <div class="details">
                   <NuxtLink
                     :to="`/actualites/${newsItem.id}`"
@@ -151,6 +151,10 @@ h1 {
   font-size: 4rem;
   font-weight: 600;
   line-height: 42px;
+
+  @media (max-width: 600px) {
+    font-size: 2.5rem;
+  }
 }
 
 .news {
@@ -186,6 +190,11 @@ h1 {
     border-radius: 20px;
     width: 99%;
 
+    @media (max-width: 600px) {
+      width: 94%;
+      margin: 12px 3%;
+    }
+
     .v-card-title {
       color: var(--neutral-color);
       font-size: 36px;

pages/CGV.vue

@@ -766,7 +766,6 @@
       </v-col>
     </v-row>
   </v-container>
-  <LayoutFooter />
 </template>
 
 <style scoped lang="scss">