Fill fundamentals drawer and add mobile detail page flow

patterns/card-listen-seite.html

@@ -693,15 +693,113 @@
   </section>
 
   <aside class="sg-card-list-page-drawer" aria-label="Fundamentalanalyse" aria-hidden="true" data-open="false">
-    <header class="sg-card-list-page-drawer__header">
-      <h2 class="sg-heading-h2 sg-card-list-page-drawer__title">Fundamentalanalyse</h2>
-      <button class="sg-interaction-element sg-button" type="button" data-drawer-close>Schließen</button>
-    </header>
     <div class="sg-card-list-page-drawer__content">
-      <p class="sg-body">Detailinhalte zur Fundamentalanalyse werden hier angezeigt.</p>
+      <div class="sg-navigation-card-layout">
+        <div class="sg-navigation-card-block">
+          <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Schliessen oben">
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+              <div class="sg-navigation-card-center">
+                <button class="sg-interaction-element sg-hyperlink" type="button" data-drawer-close>schliessen</button>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+
+      <article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 1">
+        <header class="sg-card-segment sg-card-segment--header">
+          <h2 class="sg-heading-h2">Box 1</h2>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+        </div>
+      </article>
+
+      <article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 2">
+        <header class="sg-card-segment sg-card-segment--header">
+          <h2 class="sg-heading-h2">Box 2</h2>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+        </div>
+      </article>
+
+      <article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 3">
+        <header class="sg-card-segment sg-card-segment--header">
+          <h2 class="sg-heading-h2">Box 3</h2>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body">
+          <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+        </div>
+      </article>
+
+      <div class="sg-navigation-card-layout">
+        <div class="sg-navigation-card-block">
+          <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Schliessen unten">
+            <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+              <div class="sg-navigation-card-center">
+                <button class="sg-interaction-element sg-hyperlink" type="button" data-drawer-close>schliessen</button>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
     </div>
   </aside>
 
+  <section class="sg-card-list-page-mobile-detail" aria-label="Fundamentalanalyse mobil" aria-hidden="true" hidden>
+    <div class="sg-navigation-card-layout">
+      <div class="sg-navigation-card-block">
+        <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste oben">
+          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+            <div class="sg-navigation-card-center">
+              <button class="sg-interaction-element sg-hyperlink" type="button" data-mobile-back>zurück zur Liste</button>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+
+    <article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 1 mobil">
+      <header class="sg-card-segment sg-card-segment--header">
+        <h2 class="sg-heading-h2">Box 1</h2>
+      </header>
+      <div class="sg-card-segment sg-card-segment--body">
+        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+      </div>
+    </article>
+
+    <article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 2 mobil">
+      <header class="sg-card-segment sg-card-segment--header">
+        <h2 class="sg-heading-h2">Box 2</h2>
+      </header>
+      <div class="sg-card-segment sg-card-segment--body">
+        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+      </div>
+    </article>
+
+    <article class="sg-card sg-card-list-page-drawer__info-card" aria-label="Fundamentalanalyse Box 3 mobil">
+      <header class="sg-card-segment sg-card-segment--header">
+        <h2 class="sg-heading-h2">Box 3</h2>
+      </header>
+      <div class="sg-card-segment sg-card-segment--body">
+        <p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum sapien ut nibh egestas, sed ultrices quam vestibulum. Integer feugiat, sem a iaculis lacinia, augue libero pretium orci, in dictum eros nibh et risus. Fusce sagittis, dolor ut facilisis tincidunt, lorem nisi sodales sem.</p>
+      </div>
+    </article>
+
+    <div class="sg-navigation-card-layout">
+      <div class="sg-navigation-card-block">
+        <article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigation Zurück zur Liste unten">
+          <div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
+            <div class="sg-navigation-card-center">
+              <button class="sg-interaction-element sg-hyperlink" type="button" data-mobile-back>zurück zur Liste</button>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+  </section>
+
   <script>
     const updateObjectCardGridRowState = () => {
       document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
@@ -960,8 +1058,12 @@
       updateState();
     });
 
+    const cardListPage = document.querySelector('.sg-card-list-page');
+    const mobileFundamentalPage = document.querySelector('.sg-card-list-page-mobile-detail');
     const fundamentalDrawer = document.querySelector('.sg-card-list-page-drawer');
-    const fundamentalDrawerCloseButton = fundamentalDrawer?.querySelector('[data-drawer-close]');
+    const fundamentalDrawerCloseButtons = document.querySelectorAll('[data-drawer-close]');
+    const mobileBackButtons = document.querySelectorAll('[data-mobile-back]');
+    const mobileBreakpoint = window.matchMedia('(max-width: 767px)');
 
     const setFundamentalDrawerState = (open) => {
       if (!fundamentalDrawer) {
@@ -972,25 +1074,54 @@
       fundamentalDrawer.setAttribute('aria-hidden', String(!open));
     };
 
+    const setMobileFundamentalPageState = (open) => {
+      if (!cardListPage || !mobileFundamentalPage) {
+        return;
+      }
+
+      cardListPage.hidden = open;
+      cardListPage.setAttribute('aria-hidden', String(open));
+      mobileFundamentalPage.hidden = !open;
+      mobileFundamentalPage.setAttribute('aria-hidden', String(!open));
+    };
+
     document.querySelectorAll('.sg-object-card__action').forEach((button) => {
       if (button.textContent?.trim() !== 'Fundamentalanalyse') {
         return;
       }
 
       button.addEventListener('click', () => {
+        if (mobileBreakpoint.matches) {
+          setMobileFundamentalPageState(true);
+          return;
+        }
+
         setFundamentalDrawerState(true);
       });
     });
 
-    if (fundamentalDrawerCloseButton) {
+    fundamentalDrawerCloseButtons.forEach((closeButton) => {
-      fundamentalDrawerCloseButton.addEventListener('click', () => {
+      closeButton.addEventListener('click', () => {
         setFundamentalDrawerState(false);
       });
-    }
+    });
+
+    mobileBackButtons.forEach((backButton) => {
+      backButton.addEventListener('click', () => {
+        setMobileFundamentalPageState(false);
+      });
+    });
 
     document.addEventListener('keydown', (event) => {
       if (event.key === 'Escape') {
         setFundamentalDrawerState(false);
+        setMobileFundamentalPageState(false);
+      }
+    });
+
+    window.addEventListener('resize', () => {
+      if (!mobileBreakpoint.matches) {
+        setMobileFundamentalPageState(false);
       }
     });
 

styleguide.css

@@ -1685,6 +1685,7 @@ section + section {
   color: var(--text-card-list-drawer);
   box-shadow: var(--shadow-overlay);
   z-index: 1000;
+  overflow-y: auto;
 }
 
 .sg-card-list-page-drawer[data-open="true"] {
@@ -1707,13 +1708,31 @@ section + section {
 }
 
 .sg-card-list-page-drawer__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
   padding:
-    0
+    var(--card-segment-padding-vertical)
     var(--card-segment-padding-horizontal)
     var(--card-segment-padding-vertical)
     var(--card-segment-padding-horizontal);
 }
 
+.sg-card-list-page-drawer__info-card.sg-card {
+  --surface-card-header-primary: var(--color-light-grey);
+  --text-card-header: var(--color-font-dark);
+}
+
+.sg-card-list-page-mobile-detail {
+  display: none;
+  flex-direction: column;
+  gap: var(--spacing-large);
+}
+
+.sg-card-list-page-mobile-detail[hidden] {
+  display: none;
+}
+
 .sg-card-list-page > * + * {
   margin-top: var(--spacing-large);
 }
@@ -1746,6 +1765,14 @@ section + section {
 }
 
 @media (max-width: 767px) {
+  .sg-card-list-page-drawer {
+    display: none;
+  }
+
+  .sg-card-list-page-mobile-detail {
+    display: flex;
+  }
+
   .sg-card-list-page__intro-card.sg-card {
     align-self: stretch;
     width: 100%;