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

Bestellungen-Drawer mit Backdrop

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-16 18:41:24 +02:00
parent eee2b87a48
commit dd8184c2b9
3 changed files with 51 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/styles/30-layouts-card-list-page.css
+15 -1
View File
@@ -7,6 +7,21 @@
flex-direction: column;
}
.sg-card-list-page-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
z-index: 999;
}
.sg-card-list-page-drawer-backdrop[data-open="true"] {
opacity: 1;
pointer-events: auto;
}
.sg-card-list-page-drawer {
position: fixed;
top: 0;
@@ -183,4 +198,3 @@
margin: 0;
color: var(--text-vsf-drawer-object-card-body);
}
modules/shared/auth/ui/home.php
+21 -7
View File
@@ -162,6 +162,7 @@ function auth_render_bestellungen_large_table(array $bestellungenTable): string
$html[] = '</article>';
$html[] = '</section>';
$html[] = '<div class="sg-card-list-page-drawer-backdrop" aria-hidden="true" data-bestellungen-drawer-backdrop="true" data-open="false"></div>';
$html[] = '<aside class="sg-card-list-page-drawer" aria-label="Bestell-Details" aria-hidden="true" data-bestellungen-drawer="true" data-open="false">';
$html[] = '<div class="sg-card-list-page-drawer__header">';
$html[] = '<h2 class="sg-heading-h2 sg-card-list-page-drawer__title" data-order-drawer-title>Bestellung</h2>';
@@ -551,17 +552,25 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " wrap.setAttribute('data-has-value', String(hasValue));";
echo " wrap.dataset.componentState = hasValue ? 'active' : 'inactive-selectable';";
echo " };";
echo " const getDrawer = () => contentRoot.querySelector('[data-bestellungen-drawer]');";
echo " const getDrawerBackdrop = () => contentRoot.querySelector('[data-bestellungen-drawer-backdrop]');";
echo " const setDrawerState = (open) => {";
echo " const drawer = getDrawer();";
echo " const backdrop = getDrawerBackdrop();";
echo " if (!drawer || !backdrop) { return; }";
echo " drawer.dataset.open = String(open);";
echo " drawer.setAttribute('aria-hidden', String(!open));";
echo " backdrop.dataset.open = String(open);";
echo " backdrop.setAttribute('aria-hidden', String(!open));";
echo " };";
echo " const closeDrawer = () => {";
echo " const drawer = contentRoot.querySelector('[data-bestellungen-drawer]');";
echo " if (!drawer) { return; }";
echo " drawer.dataset.open = 'false';";
echo " drawer.setAttribute('aria-hidden', 'true');";
echo " setDrawerState(false);";
echo " contentRoot.querySelectorAll('[data-order-drawer-open]').forEach((trigger) => {";
echo " trigger.setAttribute('aria-expanded', 'false');";
echo " });";
echo " };";
echo " const openDrawer = (trigger) => {";
echo " const drawer = contentRoot.querySelector('[data-bestellungen-drawer]');";
echo " const drawer = getDrawer();";
echo " if (!drawer) { return; }";
echo " const drawerTitle = drawer.querySelector('[data-order-drawer-title]');";
echo " const drawerOrderNumber = drawer.querySelector('[data-order-drawer-order-number]');";
@@ -580,8 +589,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " const country = trigger.dataset.orderCountry || '';";
echo " const streetLine = [street, houseNumber].filter((part) => part && part.length > 0).join(' ').trim();";
echo " const cityLine = [zip, city].filter((part) => part && part.length > 0).join(' ').trim();";
echo " drawer.dataset.open = 'true';";
echo " drawer.setAttribute('aria-hidden', 'false');";
echo " setDrawerState(true);";
echo " if (drawerTitle) { drawerTitle.textContent = orderNumber !== '' ? 'Bestellung ' + orderNumber : 'Bestellung'; }";
echo " if (drawerOrderNumber) { drawerOrderNumber.textContent = orderNumber; }";
echo " if (drawerOrderDate) { drawerOrderDate.textContent = orderDate; }";
@@ -684,6 +692,12 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
echo " closeDrawer();";
echo " return;";
echo " }";
echo " const backdrop = event.target.closest('[data-bestellungen-drawer-backdrop]');";
echo " if (backdrop) {";
echo " event.preventDefault();";
echo " closeDrawer();";
echo " return;";
echo " }";
echo " const sortButton = event.target.closest('[data-bestellungen-sort-button]');";
echo " if (sortButton) {";
echo " event.preventDefault();";
public/assets/styleguide.upstream.css
+15 -1
View File
@@ -3137,6 +3137,21 @@ section + section {
flex-direction: column;
}
.sg-card-list-page-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
z-index: 999;
}
.sg-card-list-page-drawer-backdrop[data-open="true"] {
opacity: 1;
pointer-events: auto;
}
.sg-card-list-page-drawer {
position: fixed;
top: 0;
@@ -4369,4 +4384,3 @@ section + section {
color: var(--text-typography-preview);
margin-top: 0;
}