refactor: Simplify expander print view styling (#455)

1. removed arrow-icon from print view (was shown in booking-expanders)
2. refactored open-status with pseudo-selector ::details-content
3. some general code refactoring

---------

Co-authored-by: MoritzWeber0 <kontakt@moritz-weber.net>

Author: therobrob

assets/sass/booking.scss

@@ -53,7 +53,7 @@
 .o-booking__title {
   display: flex;
   gap: 0.4rem;
-  align-items: flex-start;
+  align-items: center;
   font-weight: 600;
 }
 

assets/sass/contentNavigation.scss

@@ -25,6 +25,10 @@
   li {
     margin-bottom: 0.3rem;
   }
+
+  @media print {
+    display: none;
+  }
 }
 
 .o-aside__header {

assets/sass/expander.scss

@@ -38,9 +38,23 @@
       }
     }
   }
+
+  > .material-symbols-rounded {
+    transition: transform 0.2s;
+
+    @media print {
+      display: none;
+    }
+  }
+
+  > div {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
 }
 
-.details-screen[open] > .o-expander__summary {
+details[open] > .o-expander__summary {
   &:hover,
   &:focus {
     border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
@@ -62,10 +76,6 @@
   }
 }
 
-.details-print {
-  display: none;
-}
-
 details {
   position: relative;
   background-color: var(--bg-neutral);
@@ -76,46 +86,35 @@ details {
     width: 100%;
     margin-left: 0;
   }
-}
 
-details > summary {
-  list-style-type: none;
-}
+  > summary {
+    list-style-type: none;
+  }
 
-details > div {
-  overflow-x: auto;
-}
+  > div {
+    overflow-x: auto;
+  }
 
-details > summary::-webkit-details-marker {
-  display: none;
-}
+  > summary::-webkit-details-marker {
+    display: none;
+  }
 
-.o-expander__summary > span {
-  transition: transform 0.2s;
-}
+  @media print {
+    border: 0.2rem solid #bbb;
+    page-break-inside: avoid;
+    display: block;
 
-.o-expander__summary > div {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+    &::details-content {
+      content-visibility: visible;
+      height: auto !important;
+    }
+  }
 }
 
-.details-screen[open] > .o-expander__summary > span {
+details[open] > .o-expander__summary > .material-symbols-rounded {
   transform: rotate(180deg);
 }
 
 details[open] > .o-expander__summary:not(.o-expander__summary--booking) {
   font-weight: 700;
 }
-
-@media print {
-  .details-screen {
-    display: none;
-  }
-
-  .details-print {
-    border: 0.2rem solid #bbb;
-    page-break-inside: avoid;
-    display: block;
-  }
-}

layouts/shortcodes/booking.html

@@ -19,10 +19,6 @@
 -}}
 
 
-<details class="details-screen o-expander o-expander--booking">
-  {{- partial "booking" $params -}}
-</details>
-
-<details open class="details-print o-expander o-expander--booking">
+<details class="o-expander o-expander--booking">
   {{- partial "booking" $params -}}
 </details>

layouts/shortcodes/expander.html

@@ -2,7 +2,7 @@
 {{ $iconMapping := dict "border" "share_location" "traincategory" "train" "info" "info" }}
 
 
-<details name="{{ (.Get 2) }}" class="details-screen o-expander">
+<details name="{{ (.Get 2) }}" class="o-expander">
   <summary class="o-expander__summary">
     <div>
       {{- partial "icon" (index $iconMapping $param) -}}
@@ -15,18 +15,3 @@
     {{ .Inner }}
   </div>
 </details>
-
-<!--
-    Workaround for print version, otherwise the expanders would be closed.
-    The workaround can be removed when the following issue is implemented:
-    https://github.com/w3c/csswg-drafts/issues/2084
--->
-<details open class="details-print o-expander">
-  <summary class="o-expander__summary">
-    <span class="o-expander__summary-text">{{ (.Get 0) }}</span>
-  </summary>
-  <hr aria-hidden="true" />
-  <div class="o-expander__content">
-    {{ .Inner }}
-  </div>
-</details>