diff --git a/patterns/vsf-meldungen.html b/patterns/vsf-meldungen.html index 6c111a6..41d8ac7 100644 --- a/patterns/vsf-meldungen.html +++ b/patterns/vsf-meldungen.html @@ -140,121 +140,187 @@

Meldungen

-
-
- - -
+
+
+

Updates

-
-
-
-
-
-

Update-Hinweis mit hoher Priorität zur Illustration.

-
-
- -
-
+
+
+
+

+ Update Signal Eins +

+
-
-
-

Update-Hinweis im positiven Bereich zur Illustration.

-
-
- -
-
+
+

+ Aktualisierung mit hoher Priorität zur Illustration. +

+
-
-
-

Neutraler Update-Hinweis zur Illustration.

-
-
- -
-
+
+ +
+
-
-
-

Zusätzlicher Update-Hinweis 4 zur Illustration.

-
-
- -
-
+
+
+

+ Update Signal Zwei +

+
-
-
-

Zusätzlicher Update-Hinweis 5 zur Illustration.

-
-
- -
-
+
+

+ Positive Meldung zur Illustration. +

+
-
-
-

Zusätzlicher Update-Hinweis 6 zur Illustration.

-
-
- -
-
-
-
- -
-
+
+ +
+ -
-
+ +
+

Kaufsignale

+ +
+
+
+

+ Kaufsignal Signal Eins +

+
+ +
+

+ Verkaufssignal zur Illustration. +

+
+ +
+ +
+
+ +
+
+

+ Kaufsignal Signal Zwei +

+
+ +
+

+ Positives Kaufsignal zur Illustration. +

+
+ +
+ +
+
+ +
+
+

+ Kaufsignal Signal Drei +

+
+ +
+

+ Weitere Signalmeldung zur Illustration. +

+
+ +
+ +
+
+
+
+ +
+

Termine

+ +
+
+
+

+ Termin Signal Eins +

+
+ +
+

+ Terminmeldung mit weissem Hintergrund. +

+
+ +
+ +
+
+ +
+
+

+ Termin Signal Zwei +

+
+ +
+

+ Weiterer Termin mit weissem Hintergrund. +

+
+ +
+ +
+
+ +
+
+

+ Termin Signal Drei +

+
+ +
+

+ Dritte Terminmeldung mit weissem Hintergrund. +

+
+ +
+ +
+
+
+
+
@@ -525,76 +591,6 @@ window.addEventListener('load', updateNotificationsPatternRowState); window.addEventListener('resize', updateNotificationsPatternRowState); - const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation-vsf-meldungen"]'); - - if (tabGroup) { - const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]')); - const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]')); - const tabList = tabGroup.querySelector('[role="tablist"]'); - - const applyMobileBalancedTabRows = () => { - if (!tabList) { - return; - } - - tabs.forEach((tab) => { - tab.style.removeProperty('--sg-tab-mobile-row-slots'); - }); - - if (window.matchMedia('(min-width: 768px)').matches || tabs.length <= 3) { - return; - } - - const maxItemsPerRow = 3; - const rowCount = Math.ceil(tabs.length / maxItemsPerRow); - const baseRowSize = Math.floor(tabs.length / rowCount); - const rowRemainder = tabs.length % rowCount; - let tabStartIndex = 0; - - for (let rowIndex = 0; rowIndex < rowCount; rowIndex += 1) { - const rowSize = baseRowSize + (rowIndex < rowRemainder ? 1 : 0); - for (let itemOffset = 0; itemOffset < rowSize; itemOffset += 1) { - const tab = tabs[tabStartIndex + itemOffset]; - if (tab) { - tab.style.setProperty('--sg-tab-mobile-row-slots', String(rowSize)); - } - } - tabStartIndex += rowSize; - } - }; - - const activateTab = (targetTab) => { - tabs.forEach((tab) => { - tab.setAttribute('aria-selected', String(tab === targetTab)); - }); - - panels.forEach((panel) => { - panel.hidden = panel.id !== targetTab.getAttribute('aria-controls'); - }); - }; - - tabs.forEach((tab, index) => { - tab.addEventListener('click', () => { - activateTab(tab); - }); - - tab.addEventListener('keydown', (event) => { - if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') { - return; - } - - event.preventDefault(); - const direction = event.key === 'ArrowRight' ? 1 : -1; - const nextIndex = (index + direction + tabs.length) % tabs.length; - const nextTab = tabs[nextIndex]; - nextTab.focus(); - activateTab(nextTab); - }); - }); - - applyMobileBalancedTabRows(); - window.addEventListener('resize', applyMobileBalancedTabRows); - } diff --git a/styles/28-patterns-notifications.css b/styles/28-patterns-notifications.css index 2aac24b..5997573 100644 --- a/styles/28-patterns-notifications.css +++ b/styles/28-patterns-notifications.css @@ -42,6 +42,18 @@ height: auto; } +.sg-vsf-meldungen-layout { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: var(--spacing-small); + align-items: start; + width: 100%; +} + +.sg-vsf-meldungen-layout > .sg-group-card { + min-width: 0; +} + @media (max-width: 767px) { .sg-notifications-pattern__card { width: 100%; @@ -50,6 +62,10 @@ 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 {