📱 Responsive timeline

angular.json

@@ -32,8 +32,9 @@
             ],
             "styles": [
               "src/styles.css",
-              "node_modules/leaflet/dist/leaflet.css"
-            , "node_modules/intro.js/introjs.css"],
+              "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/intro.js/introjs.css"
+            ],
             "scripts": [
               "node_modules/flowbite/dist/flowbite.min.js",
               "node_modules/leaflet/dist/leaflet.js",

src/app/components/timeline/timeline.component.html

@@ -37,13 +37,16 @@
         <!-- Espace vide -->
         <div
           class="w-full sm:w-5/12"
-          [ngClass]="{ 'order-1': i % 2 === 0, 'order-2': i % 2 !== 0 }"
+          [ngClass]="{ 'sm:order-1': i % 2 === 0, 'sm:order-2': i % 2 !== 0 }"
         ></div>
 
         <!-- Bulle centrale avec la date -->
         <div
           class="z-20 flex items-center justify-center bg-white border-[6px] border-blue-600 text-blue-700 font-bold text-lg shadow-2xl w-32 h-32 rounded-full text-center px-4 leading-tight"
-          [ngClass]="{ 'order-2': i % 2 === 0, 'order-1': i % 2 !== 0 }"
+          [ngClass]="{
+            'sm:order-2': i % 2 === 0,
+            'sm:order-1': i % 2 !== 0
+          }"
         >
           <span>{{ pin.date | date : "dd/MM/yyyy" }}</span>
         </div>
@@ -52,8 +55,8 @@
         <div
           class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl px-10 py-8 w-full sm:w-5/12 transition-all duration-300 hover:scale-[1.02]"
           [ngClass]="{
-            'order-3 text-center sm:text-left': i % 2 === 0,
-            'order-0 text-center sm:text-right': i % 2 !== 0
+            'sm:order-3 sm:text-left text-center': i % 2 === 0,
+            'sm:order-0 sm:text-right text-left': i % 2 !== 0
           }"
         >
           <!-- Titre centré -->
@@ -134,7 +137,7 @@
             </div>
           </ng-container>
 
-          <!-- Fallback s’il n’y a pas d’image -->
+          <!-- Fallback s'il n'y a pas d'image -->
           <ng-container
             *ngIf="
               !imageUrls[pins.indexOf(pin)] ||