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;
+    }
 }

assets/sass/expander.scss

@@ -1,4 +1,4 @@
-summary {
+.o-expander__summary {
   display: flex;
 
   &:hover,
@@ -20,7 +20,7 @@ details {
   margin-bottom: 1.2rem;
 }
 
-details[open] > summary {
+details[open] > .o-expander__summary {
   margin-bottom: 0.5rem;
 }
 
@@ -29,7 +29,7 @@ details > summary {
 }
 
 .details-screen > div,
-.details-screen > summary {
+.details-screen > .o-expander__summary {
   margin-left: 3.2rem;
 }
 
@@ -59,7 +59,7 @@ details > summary::-webkit-details-marker {
   @extend .material-symbols-rounded
 }
 
-details[open] > summary {
+details[open] > .o-expander__summary {
   font-weight: 700;
 }
 

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>

layouts/shortcodes/expander.html

@@ -1,5 +1,5 @@
 <details name="{{ (.Get 1) }}" class="details-screen">
-<summary>
+<summary class="o-expander__summary">
     <span>{{ (.Get 0) }}</span>
 </summary>
 <div>
@@ -13,7 +13,7 @@
     https://github.com/w3c/csswg-drafts/issues/2084
 -->
 <details open class="details-print">
-<summary>
+<summary class="o-expander__summary">
     <span>{{ (.Get 0) }}</span>
 </summary>
 <div>