Add mobile VSF meldungen tabs
This commit is contained in:
@@ -199,6 +199,16 @@
|
|||||||
</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-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-kaufsignale-heading">
|
<div class="sg-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-kaufsignale-heading">
|
||||||
@@ -259,6 +269,16 @@
|
|||||||
</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-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-termine-heading">
|
<div class="sg-group-card" data-component="group-card" aria-labelledby="vsf-meldungen-termine-heading">
|
||||||
@@ -319,6 +339,178 @@
|
|||||||
</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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="sg-vsf-meldungen-mobile" aria-label="VSF Meldungen für Mobile">
|
||||||
|
<div class="sg-group-card" data-component="group-card">
|
||||||
|
<div class="sg-tab-button-group sg-vsf-meldungen-mobile__tabs" role="tablist" aria-label="Tasten Navigation gross" data-component="tab-navigation" data-component-size="large">
|
||||||
|
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-meldungen-mobile-panel-updates" id="vsf-meldungen-mobile-tab-updates" data-component-part="tab-button">Updates</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-meldungen-mobile-panel-kaufsignale" id="vsf-meldungen-mobile-tab-kaufsignale" data-component-part="tab-button">Kaufsignale</button>
|
||||||
|
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-meldungen-mobile-panel-termine" id="vsf-meldungen-mobile-tab-termine" data-component-part="tab-button">Termine</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="sg-vsf-meldungen-mobile__panels">
|
||||||
|
<div class="sg-vsf-meldungen-mobile__panel" id="vsf-meldungen-mobile-panel-updates" role="tabpanel" aria-labelledby="vsf-meldungen-mobile-tab-updates">
|
||||||
|
<div class="sg-preview-area sg-notifications-pattern" aria-label="Updates Meldungen Mobile">
|
||||||
|
<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">Update 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">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">
|
||||||
|
<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-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 sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body"><span class="sg-strong">Update Signal Zwei</span></p>
|
||||||
|
</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">
|
||||||
|
<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-with-title" data-component="notification-card">
|
||||||
|
<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"><span class="sg-strong">Update Signal Drei</span></p>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</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 class="sg-vsf-meldungen-mobile__panel" id="vsf-meldungen-mobile-panel-kaufsignale" role="tabpanel" aria-labelledby="vsf-meldungen-mobile-tab-kaufsignale" hidden>
|
||||||
|
<div class="sg-preview-area sg-notifications-pattern" aria-label="Kaufsignale Meldungen Mobile">
|
||||||
|
<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">
|
||||||
|
<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-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 sg-notifications-pattern__title-segment" data-component-part="card-header">
|
||||||
|
<p class="sg-body"><span class="sg-strong">Kaufsignal Signal Zwei</span></p>
|
||||||
|
</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">
|
||||||
|
<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-with-title" data-component="notification-card">
|
||||||
|
<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"><span class="sg-strong">Kaufsignal Signal Drei</span></p>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</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 class="sg-vsf-meldungen-mobile__panel" id="vsf-meldungen-mobile-panel-termine" role="tabpanel" aria-labelledby="vsf-meldungen-mobile-tab-termine" hidden>
|
||||||
|
<div class="sg-preview-area sg-notifications-pattern" aria-label="Termine Meldungen Mobile">
|
||||||
|
<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 Eins</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">Terminmeldung 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 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">
|
||||||
|
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</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>
|
</section>
|
||||||
|
|
||||||
@@ -591,6 +783,35 @@
|
|||||||
window.addEventListener('load', updateNotificationsPatternRowState);
|
window.addEventListener('load', updateNotificationsPatternRowState);
|
||||||
window.addEventListener('resize', 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -54,7 +54,31 @@
|
|||||||
min-width: 0;
|
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) {
|
@media (max-width: 767px) {
|
||||||
|
.sg-vsf-meldungen-layout {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sg-vsf-meldungen-mobile {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.sg-notifications-pattern__card {
|
.sg-notifications-pattern__card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
@@ -62,10 +86,6 @@
|
|||||||
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