gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add mobile tab switcher for VSF list detail

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-18 12:07:50 +02:00
parent f9db8beb2a
commit 3e05839dc8
2 changed files with 70 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-list-detailseite.html
+57 -11
View File
@@ -8,8 +8,13 @@
</head> </head>
<body> <body>
<section class="sg-vsf-list-detail-page" aria-label="VSF List Detailseite"> <section class="sg-vsf-list-detail-page" aria-label="VSF List Detailseite">
<div class="sg-vsf-list-detail-page__content"> <div class="sg-tab-button-group sg-vsf-list-detail-page__mobile-tabs" role="tablist" aria-label="Tasten Navigation gross" data-component="tab-navigation" data-component-size="large">
<aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen"> <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-list-detail-panel-meldungen" id="vsf-list-detail-tab-meldungen" data-component-part="tab-button" data-vsf-list-detail-tab="meldungen">Meldungen</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-list-detail-panel-unternehmen" id="vsf-list-detail-tab-unternehmen" data-component-part="tab-button" data-vsf-list-detail-tab="unternehmen">Unternehmen</button>
</div>
<div class="sg-vsf-list-detail-page__content" data-vsf-list-detail-active="meldungen">
<aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen" role="tabpanel" aria-labelledby="vsf-list-detail-tab-meldungen" id="vsf-list-detail-panel-meldungen" data-vsf-list-detail-panel="meldungen">
<div class="sg-delete-confirmation-pattern sg-vsf-list-detail-page__meldungen-overlay-pattern"> <div class="sg-delete-confirmation-pattern sg-vsf-list-detail-page__meldungen-overlay-pattern">
<div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false"> <div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false">
<div class="sg-group-card sg-delete-confirmation-pattern__target" data-component="group-card"> <div class="sg-group-card sg-delete-confirmation-pattern__target" data-component="group-card">
@@ -101,7 +106,7 @@
</div> </div>
</aside> </aside>
<div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten"> <div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten" role="tabpanel" aria-labelledby="vsf-list-detail-tab-unternehmen" id="vsf-list-detail-panel-unternehmen" data-vsf-list-detail-panel="unternehmen">
<div class="sg-group-card" data-component="group-card"> <div class="sg-group-card" data-component="group-card">
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Unternehmen</h2> <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Unternehmen</h2>
<div class="sg-object-card-grid" aria-label="Pattern – Object Card Liste"> <div class="sg-object-card-grid" aria-label="Pattern – Object Card Liste">
@@ -230,17 +235,58 @@
}); });
}; };
document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => { const vsfListDetailPage = document.querySelector('.sg-vsf-list-detail-page');
group.querySelectorAll('.sg-tab-button').forEach((button) => { const vsfListDetailMobileTabs = document.querySelector('.sg-vsf-list-detail-page__mobile-tabs');
const vsfListDetailButtons = vsfListDetailMobileTabs ? Array.from(vsfListDetailMobileTabs.querySelectorAll('.sg-tab-button')) : [];
const vsfListDetailPanels = {
meldungen: document.querySelector('[data-vsf-list-detail-panel="meldungen"]'),
unternehmen: document.querySelector('[data-vsf-list-detail-panel="unternehmen"]'),
};
const vsfListDetailMobileQuery = window.matchMedia('(max-width: 767px)');
const syncVsfListDetailMobileState = (activeKey) => {
const nextActiveKey = activeKey === 'unternehmen' ? 'unternehmen' : 'meldungen';
if (vsfListDetailPage) {
vsfListDetailPage.dataset.vsfListDetailActive = nextActiveKey;
}
vsfListDetailButtons.forEach((button) => {
const isActive = button.dataset.vsfListDetailTab === nextActiveKey;
button.setAttribute('aria-selected', String(isActive));
button.dataset.componentState = isActive ? 'active' : 'inactive';
});
const isMobile = vsfListDetailMobileQuery.matches;
Object.entries(vsfListDetailPanels).forEach(([key, panel]) => {
if (!panel) {
return;
}
panel.hidden = isMobile && key !== nextActiveKey;
panel.setAttribute('aria-hidden', String(isMobile && key !== nextActiveKey));
});
};
if (vsfListDetailMobileTabs) {
vsfListDetailButtons.forEach((button) => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => { syncVsfListDetailMobileState(button.dataset.vsfListDetailTab || 'meldungen');
const isActive = otherButton === button;
otherButton.setAttribute('aria-selected', String(isActive));
otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
});
});
}); });
}); });
}
const handleVsfListDetailMobileModeChange = () => {
syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
};
if (typeof vsfListDetailMobileQuery.addEventListener === 'function') {
vsfListDetailMobileQuery.addEventListener('change', handleVsfListDetailMobileModeChange);
} else if (typeof vsfListDetailMobileQuery.addListener === 'function') {
vsfListDetailMobileQuery.addListener(handleVsfListDetailMobileModeChange);
}
syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => { document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-sandwich-button'); const button = wrap.querySelector('.sg-sandwich-button');
styles/33-layouts-vsf-list-detailseite.css
+13 -4
View File
@@ -39,6 +39,10 @@
width: 100%; width: 100%;
} }
.sg-vsf-list-detail-page__mobile-tabs {
display: none;
}
.sg-vsf-list-detail-page__left-column { .sg-vsf-list-detail-page__left-column {
width: 30%; width: 30%;
min-width: 30%; min-width: 30%;
@@ -78,8 +82,10 @@
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width { .sg-vsf-list-detail-page__mobile-tabs {
display: flex;
width: 100%; width: 100%;
margin-bottom: var(--spacing-large);
} }
.sg-vsf-list-detail-page__content { .sg-vsf-list-detail-page__content {
@@ -95,9 +101,12 @@
width: 100%; width: 100%;
} }
.sg-vsf-list-detail-page__left-column .sg-group-card, .sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel] {
.sg-vsf-list-detail-page__right-column .sg-group-card { width: 100%;
margin-bottom: var(--spacing-large); }
.sg-vsf-list-detail-page__content > [data-vsf-list-detail-panel][hidden] {
display: none;
} }
.sg-vsf-list-detail-page__mobile-toggle { .sg-vsf-list-detail-page__mobile-toggle {