Drawer-Overlay und mobile Zurueck-Navigation angleichen

This commit is contained in:
gitea_admin committed 2026-09-06 09:26:58 +02:00
1 parent 7fbc289504
commit 9e86405b26
2 files changed
+23 -3

No files matched your search

+4 -3
View File
@@ -647,7 +647,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " const setDrawerState = (open) => {"; echo " const setDrawerState = (open) => {";
echo " const drawer = getDrawer(); const backdrop = contentRoot.querySelector('[data-lager-drawer-backdrop]');"; echo " const drawer = getDrawer(); const backdrop = contentRoot.querySelector('[data-lager-drawer-backdrop]');";
echo " if (!drawer || !backdrop) { return; }"; echo " if (!drawer || !backdrop) { return; }";
echo " drawer.dataset.open = String(open); drawer.setAttribute('aria-hidden', String(!open)); backdrop.dataset.open = String(open); backdrop.setAttribute('aria-hidden', String(!open));"; echo " drawer.dataset.open = String(open); drawer.setAttribute('aria-hidden', String(!open)); backdrop.dataset.open = String(open); backdrop.setAttribute('aria-hidden', String(!open)); document.body.classList.toggle('sg-card-list-page-drawer-open', open);";
echo " };"; echo " };";
echo " const closeDrawer = () => { setDrawerState(false); contentRoot.querySelectorAll('[data-lager-drawer-open]').forEach((trigger) => trigger.setAttribute('aria-expanded', 'false')); };"; echo " const closeDrawer = () => { setDrawerState(false); contentRoot.querySelectorAll('[data-lager-drawer-open]').forEach((trigger) => trigger.setAttribute('aria-expanded', 'false')); };";
echo " contentRoot.addEventListener('click', (event) => {"; echo " contentRoot.addEventListener('click', (event) => {";
@@ -719,10 +719,10 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " '<div class=\"sg-bestellungen-mobile-detail-host\" data-bestellungen-mobile-detail-host=\"true\">',"; echo " '<div class=\"sg-bestellungen-mobile-detail-host\" data-bestellungen-mobile-detail-host=\"true\">',";
echo " '<div class=\"sg-navigation-card-layout\">',"; echo " '<div class=\"sg-navigation-card-layout\">',";
echo " '<div class=\"sg-navigation-card-block\">',"; echo " '<div class=\"sg-navigation-card-block\">',";
echo " '<article class=\"sg-card\" data-component=\"card\" data-pattern=\"navigation-card\" aria-label=\"Navigations-Card\">',"; echo " '<article class=\"sg-card\" data-component=\"card\" data-pattern=\"navigation-card\" aria-label=\"Navigation Detailansicht zurück oben\">',";
echo " '<div class=\"sg-card-segment sg-card-segment--body\" data-component-part=\"card-body\" data-pattern-part=\"navigation-card-segment\">',"; echo " '<div class=\"sg-card-segment sg-card-segment--body\" data-component-part=\"card-body\" data-pattern-part=\"navigation-card-segment\">',";
echo " '<div class=\"sg-navigation-card-center\">',"; echo " '<div class=\"sg-navigation-card-center\">',";
echo " '<button class=\"sg-interaction-element sg-hyperlink\" type=\"button\" data-bestellungen-detail-back>schliessen</button>',"; echo " '<button class=\"sg-interaction-element sg-hyperlink\" type=\"button\" data-bestellungen-detail-back>zurück</button>',";
echo " '</div>',"; echo " '</div>',";
echo " '</div>',"; echo " '</div>',";
echo " '</article>',"; echo " '</article>',";
@@ -753,6 +753,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " drawer.setAttribute('aria-hidden', String(!open));"; echo " drawer.setAttribute('aria-hidden', String(!open));";
echo " backdrop.dataset.open = String(open);"; echo " backdrop.dataset.open = String(open);";
echo " backdrop.setAttribute('aria-hidden', String(!open));"; echo " backdrop.setAttribute('aria-hidden', String(!open));";
echo " document.body.classList.toggle('sg-card-list-page-drawer-open', open);";
echo " };"; echo " };";
echo " const closeDrawer = () => {"; echo " const closeDrawer = () => {";
echo " setDrawerState(false);"; echo " setDrawerState(false);";
+19
View File
@@ -35,6 +35,25 @@ body.sg-bestellungen-mobile-detail-open {
overflow: hidden; overflow: hidden;
} }
body.sg-card-list-page-drawer-open {
overflow: hidden;
}
.sg-card-list-page-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.35);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 999;
}
.sg-card-list-page-drawer-backdrop[data-open="true"] {
opacity: 1;
pointer-events: auto;
}
body.sg-bestellungen-mobile-detail-open > :not([data-bestellungen-mobile-detail-host]) { body.sg-bestellungen-mobile-detail-open > :not([data-bestellungen-mobile-detail-host]) {
display: none !important; display: none !important;
} }