feat: Add mobile support for booking snippets

Author: MoritzWeber0

assets/sass/booking.scss

@@ -4,6 +4,13 @@
     gap: 2rem;
     width: 100%;
     align-content: center;
+
+    @media (max-width: #{$breakpoint-md}) {
+        display: flex;
+        flex-direction: column;;
+        gap: 1rem;
+        align-content: start;
+    }
 }
 
 .o-booking__header {
@@ -21,9 +28,17 @@
 }
 
 .o-booking__classes {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
     > p {
         margin-bottom: 0rem;
     }
+
+    @media (max-width: #{$breakpoint-md}) {
+        align-items: start;
+    }
 }
 
 .o-booking__title-wrapper {
@@ -45,17 +60,14 @@
     font-size: 1.4rem;
 }
 
-.o-booking__header-last-column {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-}
-
 .o-booking__meta{
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+
+    @media (max-width: #{$breakpoint-md}) {
+        align-items: start;
+    }
 }

layouts/shortcodes/booking.html

@@ -18,18 +18,16 @@
 </div>
 </div>
 <div class="o-booking__meta">
-{{ if ne $reservations "nil" }}{{ T "booking.reservation" }} {{ if $reservations }}✅{{ else }}⛔{{ end }}{{ end }}
-{{ if ne $fip_50 "nil" }}{{ T "booking.fip-50" }} {{ if $fip_50 }}✅{{ else }}⛔{{ end }}{{ end }}
-{{ if ne $fip_global_fare "nil" }}{{ T "booking.fip-global-fare" }} {{ if $fip_global_fare }}✅{{ else }}⛔{{ end }}{{ end }}
+{{ if ne $reservations "nil" }}<div>{{ T "booking.reservation" }} {{ if $reservations }}✅{{ else }}⛔{{ end }}</div>{{ end }}
+{{ if ne $fip_50 "nil" }}<div>{{ T "booking.fip-50" }} {{ if $fip_50 }}✅{{ else }}⛔{{ end }}</div>{{ end }}
+{{ if ne $fip_global_fare "nil" }}<div>{{ T "booking.fip-global-fare" }} {{ if $fip_global_fare }}✅{{ else }}⛔{{ end }}</div>{{ end }}
 </div>
-<div class="o-booking__header-last-column">
 <div class="o-booking__classes">
 {{ range $k, $v := .Params.classes }}
 <strong>{{ T (print "booking.classes." $k) }}:</strong> {{ $v }}
 {{ end }}
 </div>
 </div>
-</div>
 <div class="o-booking__header-actions">
     {{ partial "icon" "arrow_drop_down" }}
 </div>