Drawer-Overlay und mobile Zurueck-Navigation angleichen
This commit is contained in:
1 parent
7fbc289504
commit
9e86405b26
2 files changed
+23
-3
No files matched your search
@@ -647,7 +647,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " const setDrawerState = (open) => {";
|
||||
echo " const drawer = getDrawer(); const backdrop = contentRoot.querySelector('[data-lager-drawer-backdrop]');";
|
||||
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 " const closeDrawer = () => { setDrawerState(false); contentRoot.querySelectorAll('[data-lager-drawer-open]').forEach((trigger) => trigger.setAttribute('aria-expanded', 'false')); };";
|
||||
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-navigation-card-layout\">',";
|
||||
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-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 " '</article>',";
|
||||
@@ -753,6 +753,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
|
||||
echo " drawer.setAttribute('aria-hidden', String(!open));";
|
||||
echo " backdrop.dataset.open = String(open);";
|
||||
echo " backdrop.setAttribute('aria-hidden', String(!open));";
|
||||
echo " document.body.classList.toggle('sg-card-list-page-drawer-open', open);";
|
||||
echo " };";
|
||||
echo " const closeDrawer = () => {";
|
||||
echo " setDrawerState(false);";
|
||||
|
||||
@@ -35,6 +35,25 @@ body.sg-bestellungen-mobile-detail-open {
|
||||
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]) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user