Update VSF meldungen layout
This commit is contained in:
+133
-137
@@ -140,121 +140,187 @@
|
|||||||
<h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">Meldungen</h1>
|
<h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">Meldungen</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sg-content-block-card-group" data-pattern="card-gruppe-mit-tastennavigation-vsf-meldungen">
|
<section class="sg-vsf-meldungen-layout" aria-label="VSF Meldungen">
|
||||||
<div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Meldungen Navigation" data-component="tab-navigation" data-component-size="large">
|
<div class="sg-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-updates-heading">
|
||||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-meldungen-panel-updates" id="vsf-meldungen-tab-updates" data-component-part="tab-button">Updates</button>
|
<h2 class="sg-heading-h2 sg-group-card__heading" id="vsf-meldungen-updates-heading">Updates</h2>
|
||||||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-meldungen-panel-termine" id="vsf-meldungen-tab-termine" data-component-part="tab-button">Termine</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sg-content-block-card-group__panels">
|
|
||||||
<div class="sg-content-block-card-group__panel" id="vsf-meldungen-panel-updates" role="tabpanel" aria-labelledby="vsf-meldungen-tab-updates">
|
|
||||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Updates Meldungen">
|
<div class="sg-preview-area sg-notifications-pattern" aria-label="Updates Meldungen">
|
||||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||||
<p class="sg-body">Update-Hinweis mit hoher Priorität zur Illustration.</p>
|
<p class="sg-body">
|
||||||
|
<span class="sg-strong">Update Signal Eins</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
Aktualisierung mit hoher Priorität zur Illustration.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||||
<p class="sg-body">Update-Hinweis im positiven Bereich zur Illustration.</p>
|
<p class="sg-body">
|
||||||
|
<span class="sg-strong">Update Signal Zwei</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
Positive Meldung zur Illustration.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||||
<p class="sg-body">Neutraler Update-Hinweis zur Illustration.</p>
|
<p class="sg-body">
|
||||||
|
<span class="sg-strong">Update Signal Drei</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
Weitere Meldung zur Illustration.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
|
||||||
<p class="sg-body">Zusätzlicher Update-Hinweis 4 zur Illustration.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-kaufsignale-heading">
|
||||||
|
<h2 class="sg-heading-h2 sg-group-card__heading" id="vsf-meldungen-kaufsignale-heading">Kaufsignale</h2>
|
||||||
|
|
||||||
|
<div class="sg-preview-area sg-notifications-pattern" aria-label="Kaufsignale Meldungen">
|
||||||
|
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
<span class="sg-strong">Kaufsignal Signal Eins</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
Verkaufssignal zur Illustration.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||||
<p class="sg-body">Zusätzlicher Update-Hinweis 5 zur Illustration.</p>
|
<p class="sg-body">
|
||||||
|
<span class="sg-strong">Kaufsignal Signal Zwei</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
Positives Kaufsignal zur Illustration.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||||
<p class="sg-body">Zusätzlicher Update-Hinweis 6 zur Illustration.</p>
|
<p class="sg-body">
|
||||||
|
<span class="sg-strong">Kaufsignal Signal Drei</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-yellow sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
Weitere Signalmeldung zur Illustration.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-yellow" data-component-part="card-body">
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
|
||||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
|
||||||
<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">
|
|
||||||
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sg-content-block-card-group__panel" id="vsf-meldungen-panel-termine" role="tabpanel" aria-labelledby="vsf-meldungen-tab-termine" hidden>
|
<div class="sg-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-termine-heading">
|
||||||
|
<h2 class="sg-heading-h2 sg-group-card__heading" id="vsf-meldungen-termine-heading">Termine</h2>
|
||||||
|
|
||||||
<div class="sg-preview-area sg-notifications-pattern" aria-label="Termine Meldungen">
|
<div class="sg-preview-area sg-notifications-pattern" aria-label="Termine Meldungen">
|
||||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||||
<p class="sg-body">Terminwarnung mit hoher Priorität zur Illustration.</p>
|
<p class="sg-body">
|
||||||
|
<span class="sg-strong">Termin Signal Eins</span>
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header">
|
|
||||||
<p class="sg-body">Terminhinweis im positiven Bereich zur Illustration.</p>
|
|
||||||
</div>
|
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
|
|
||||||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||||
<p class="sg-body">Neutraler Terminhinweis zur Illustration.</p>
|
<p class="sg-body">
|
||||||
|
Terminmeldung mit weissem Hintergrund.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
<span class="sg-strong">Termin Signal Zwei</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
Weiterer Termin mit weissem Hintergrund.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification-with-title" data-component="notification-card">
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
<span class="sg-strong">Termin Signal Drei</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body">
|
||||||
|
Dritte Terminmeldung mit weissem Hintergrund.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
<div class="sg-navigation-card-layout sg-navigation-card-block">
|
|
||||||
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
|
|
||||||
<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">
|
|
||||||
<a class="sg-hyperlink" href="#" data-component="hyperlink">Mehr laden</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
@@ -525,76 +591,6 @@
|
|||||||
window.addEventListener('load', updateNotificationsPatternRowState);
|
window.addEventListener('load', updateNotificationsPatternRowState);
|
||||||
window.addEventListener('resize', 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);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -42,6 +42,18 @@
|
|||||||
height: auto;
|
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) {
|
@media (max-width: 767px) {
|
||||||
.sg-notifications-pattern__card {
|
.sg-notifications-pattern__card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -50,6 +62,10 @@
|
|||||||
flex: 1 1 auto;
|
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__text-segment,
|
||||||
.sg-notifications-pattern__card > .sg-notifications-pattern__title-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 {
|
.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
|
||||||
|
|||||||
Reference in New Issue
Block a user