restore chronology on sm devices

components/About/Chronologie.vue

@@ -29,7 +29,7 @@
           <Carousel
             v-model="activeSlide"
             ref="carousel"
-            :items-to-show="2"
+            :items-to-show="lgAndUp ? 2 : 1"
             :items-to-scroll="1"
           >
             <Slide
@@ -37,46 +37,42 @@
               :key="slide.title"
               :class="{'active': index === activeSlide}"
             >
-              <v-row justify="center">
-                <v-col cols="4">
-                  <div class="image-container">
-                    <v-img :src="slide.imageUrl" cover />
-                  </div>
-                </v-col>
+              <div class="card">
+                <div class="image-container">
+                  <v-img :src="slide.imageUrl" cover />
+                </div>
 
-                <v-col cols="4">
-                  <div class="description-container">
-                    <span class="year">
-                      {{ slide.year }}
-                    </span>
+                <div class="description-container">
+                  <span class="year">
+                    {{ slide.year }}
+                  </span>
 
-                    <h4 v-html="slide.title" />
+                  <h4 v-html="slide.title" />
 
-                    <p
-                      v-html="slide.description"
-                      class="mb-6"
-                    />
-                  </div>
-                </v-col>
+                  <p
+                    v-html="slide.description"
+                    class="mb-6"
+                  />
+                </div>
+              </div>
 
-                <div class="timeline-container">
+              <div class="timeline-container">
+                <div
+                  v-if="slide.year"
+                  class="timeline"
+                >
                   <div
-                    v-if="slide.year"
-                    class="timeline"
+                    class="timeline-point"
+                    :style="{
+                      left: computePositionOnTimeline(slide.year) + '%',
+                    }"
                   >
-                    <div
-                      class="timeline-point"
-                      :style="{
-                        left: computePositionOnTimeline(slide.year) + '%',
-                      }"
-                    >
-                      <p class="timeline-year">
-                        {{ slide.year }}
-                      </p>
-                    </div>
+                    <p class="timeline-year">
+                      {{ slide.year }}
+                    </p>
                   </div>
                 </div>
-              </v-row>
+              </div>
             </Slide>
           </Carousel>
         </v-col>
@@ -94,7 +90,7 @@ import type { ChronologyItem } from "~/types/interface";
 
 const activeSlide: Ref<number> = ref(0);
 
-const { mdAndDown } = useDisplay();
+const { smAndDown, lgAndUp } = useDisplay();
 
 const carousel: Ref<typeof Carousel | null> = ref(null);
 
@@ -213,9 +209,17 @@ const slides: Array<ChronologyItem> = [
 }
 
 .carousel {
+  padding-bottom: 72px;
+
+  :deep(.carousel__viewport) {
+    overflow: visible;
+  }
+
   .carousel__slide {
     opacity: 0.5;
     transition: opacity 0.3s ease-in-out;
+    display: flex;
+    flex-direction: column;
   }
   .carousel__slide.active {
     opacity: 1;
@@ -223,8 +227,14 @@ const slides: Array<ChronologyItem> = [
     transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
   }
 
-  .v-row {
-    height: 32rem;
+  .card {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 18px;
+
+    @media (max-width: 600px) {
+      flex-direction: column;
+    }
   }
 
   .v-col {
@@ -238,7 +248,16 @@ const slides: Array<ChronologyItem> = [
   .description-container {
     height: 300px;
     width: 300px;
-    max-width: 100%;
+
+    @media (max-width: 1480px) {
+      height: 320px;
+      width: 260px;
+    }
+
+    @media (max-width: 600px) {
+      width: 80%;
+      height: auto;
+    }
   }
 
   .image-container {
@@ -248,13 +267,22 @@ const slides: Array<ChronologyItem> = [
       border-top-left-radius: 20%;
       border-bottom-left-radius: 20%;
     }
+
+    @media (max-width: 600px) {
+      margin: auto;
+
+      .v-img {
+        border-top-left-radius: 20%;
+        border-top-right-radius: 20%;
+        border-bottom-left-radius: 0;
+      }
+    }
   }
 
   .description-container {
     padding: 1rem;
     text-align: center;
-    margin-left: 1rem;
-    background-color: var(--primary-color);
+    background-color: rgba(0, 0, 0, 0.3);
     color: var(--on-primary-color);
     border-top-right-radius: 20%;
     border-bottom-right-radius: 20%;
@@ -275,6 +303,17 @@ const slides: Array<ChronologyItem> = [
       font-size: 0.8rem;
       color: var(--secondary-color);
     }
+
+    @media (max-width: 700px) {
+      padding: 1rem 0;
+    }
+
+    @media (max-width: 600px) {
+      margin: auto;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 20%;
+      border-bottom-right-radius: 20%;
+    }
   }
 }
 

components/Formation/Certification.vue

@@ -34,7 +34,7 @@
           </div>
         </v-col>
 
-        <v-col cols="12" md="7">
+        <v-col cols="12" md="7" class="image-container">
           <v-img
             src="/images/logos/qualiopi/Logo-Qualiopi_Processus_Certifié-Republique_Française.png"
             alt="Deux personnes en train d’échanger sur un projet devant deux ordinateurs dans un open space"
@@ -71,4 +71,16 @@ ul {
   color: var(--primary-color);
   margin-top: 1rem;
 }
+
+.image-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .v-img {
+    width: 80%;
+    max-width: 500px;
+    margin: auto;
+  }
+}
 </style>

pages/qui-sommes-nous.vue

@@ -32,7 +32,7 @@
     <HomeEventAgenda/>
   </AnchoredSection>
 
-  <AboutChronologie v-if="lgAndUp"/>
+  <AboutChronologie />
 
   <AboutEquipe />