diff --git a/patterns/vsf-meldungen.html b/patterns/vsf-meldungen.html index 9d05dae..b631d66 100644 --- a/patterns/vsf-meldungen.html +++ b/patterns/vsf-meldungen.html @@ -199,6 +199,16 @@ + +
+
+
+
+ Mehr laden +
+
+
+
@@ -259,6 +269,16 @@
+ +
+
+
+
+ Mehr laden +
+
+
+
@@ -319,6 +339,178 @@
+ +
+
+
+
+ Mehr laden +
+
+
+
+ + + +
+
+
+ + + +
+ +
+
+
+
+
+

Update Signal Eins

+
+
+

Aktualisierung mit hoher Priorität zur Illustration.

+
+
+ +
+
+ +
+
+

Update Signal Zwei

+
+
+

Positive Meldung zur Illustration.

+
+
+ +
+
+ +
+
+

Update Signal Drei

+
+
+

Weitere Meldung zur Illustration.

+
+
+ +
+
+
+ +
+ +
+
+ + + + +
@@ -591,6 +783,35 @@ window.addEventListener('load', updateNotificationsPatternRowState); window.addEventListener('resize', updateNotificationsPatternRowState); + const mobileVsfMeldungen = document.querySelector('.sg-vsf-meldungen-mobile'); + + if (mobileVsfMeldungen) { + const mobileTabs = Array.from(mobileVsfMeldungen.querySelectorAll('[role="tab"]')); + const mobilePanels = Array.from(mobileVsfMeldungen.querySelectorAll('[role="tabpanel"]')); + + const activateMobileTab = (targetTab) => { + mobileTabs.forEach((tab) => { + tab.setAttribute('aria-selected', String(tab === targetTab)); + tab.dataset.componentState = tab === targetTab ? 'active' : 'inactive'; + }); + + mobilePanels.forEach((panel) => { + panel.hidden = panel.id !== targetTab.getAttribute('aria-controls'); + }); + }; + + mobileTabs.forEach((tab) => { + tab.addEventListener('click', () => { + activateMobileTab(tab); + }); + }); + + const initialTab = mobileTabs.find((tab) => tab.getAttribute('aria-selected') === 'true') || mobileTabs[0]; + if (initialTab) { + activateMobileTab(initialTab); + } + } + diff --git a/styles/28-patterns-notifications.css b/styles/28-patterns-notifications.css index 5997573..50ed93f 100644 --- a/styles/28-patterns-notifications.css +++ b/styles/28-patterns-notifications.css @@ -54,7 +54,31 @@ min-width: 0; } +.sg-vsf-meldungen-mobile { + display: none; +} + +.sg-vsf-meldungen-mobile__panels { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + width: 100%; +} + +.sg-vsf-meldungen-mobile__panel { + width: 100%; +} + @media (max-width: 767px) { + .sg-vsf-meldungen-layout { + display: none; + } + + .sg-vsf-meldungen-mobile { + display: flex; + width: 100%; + } + .sg-notifications-pattern__card { width: 100%; min-width: 0; @@ -62,10 +86,6 @@ flex: 1 1 auto; } - .sg-vsf-meldungen-layout { - grid-template-columns: 1fr; - } - .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment, .sg-notifications-pattern__card > .sg-notifications-pattern__title-segment, .sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {