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

Add Meldungen overlay card with layout-scoped top offset and dialog interactions

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-28 11:38:38 +02:00
parent b71544d95f
commit 248ce908c0
2 changed files with 121 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-list-detailseite.html
+66 -2
View File
@@ -109,7 +109,9 @@
<div class="sg-vsf-list-detail-page__content">
<aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen">
<div class="sg-group-card" data-component="group-card">
<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-group-card sg-delete-confirmation-pattern__target" data-component="group-card">
<div class="sg-group-card__header-row">
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Meldungen</h2>
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
@@ -121,7 +123,7 @@
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Meldungsmenü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Meldungen anpassen</a>
<a class="sg-sandwich-menu-link" href="#!" data-component-part="sandwich-menu-link" data-vsf-open-dialog="meldungen">Meldungen anpassen</a>
</div>
</div>
</div>
@@ -161,6 +163,18 @@
</div>
</article>
</div>
<article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Meldungen anpassen" role="dialog" aria-modal="true" aria-labelledby="vsf-meldungen-overlay-title" data-vsf-dialog="meldungen" hidden>
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-meldungen-overlay-title"><strong>Meldungen anpassen</strong></p>
<p class="sg-body sg-delete-confirmation-pattern__text">Passe die Anzeige und Priorisierung der Meldungen an.</p>
<div class="sg-delete-confirmation-pattern__actions">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-vsf-dialog-close>Schließen</button>
</div>
</div>
</article>
</div>
</div>
</aside>
<div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten">
@@ -359,6 +373,48 @@
});
});
const closeVsfDialog = (stage) => {
if (!stage) {
return;
}
stage.querySelectorAll('[data-vsf-dialog]').forEach((dialog) => {
dialog.hidden = true;
});
stage.dataset.dialogOpen = 'false';
};
document.querySelectorAll('[data-vsf-open-dialog]').forEach((link) => {
link.addEventListener('click', (event) => {
event.preventDefault();
const stage = link.closest('.sg-delete-confirmation-pattern__stage');
if (!stage) {
return;
}
const target = link.getAttribute('data-vsf-open-dialog');
const dialog = stage.querySelector(`[data-vsf-dialog="${target}"]`);
if (!dialog) {
return;
}
stage.querySelectorAll('[data-vsf-dialog]').forEach((otherDialog) => {
otherDialog.hidden = true;
});
dialog.hidden = false;
stage.dataset.dialogOpen = 'true';
});
});
document.querySelectorAll('[data-vsf-dialog-close]').forEach((button) => {
button.addEventListener('click', () => {
const stage = button.closest('.sg-delete-confirmation-pattern__stage');
closeVsfDialog(stage);
});
});
const updatePulldownSelectionState = (demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
@@ -507,6 +563,14 @@
}
});
}
if (!event.target.closest('.sg-delete-confirmation-pattern__floating-card') && !event.target.closest('[data-vsf-open-dialog]')) {
document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
if (stage.dataset.dialogOpen === 'true') {
closeVsfDialog(stage);
}
});
}
});
window.addEventListener('load', updateObjectCardGridRowState);
styles/33-layouts-vsf-list-detailseite.css
+9
View File
@@ -68,6 +68,15 @@
display: none;
}
.sg-vsf-list-detail-page__meldungen-overlay-pattern {
max-width: 100%;
}
.sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
top: calc(var(--spacing-large) * 5);
transform: translateX(-50%);
}
.sg-vsf-list-detail-page__mobile-toggle {
display: none;
}