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

Arrange VSF cards in shared object-group grid and remove layout headings

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-28 12:04:22 +02:00
parent 746d5d0e2f
commit 499b549f30
1 changed files with 39 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-listen-uebersicht-seite.html
+39 -7
View File
@@ -108,9 +108,9 @@
</div>
<div id="layout-vsf-list-card">
<h2 class="sg-sub-heading sg-section-h2">Layout 3 - List Card inklusive Lösch- und Editier-Funktion</h2>
<div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
<div class="sg-object-card-grid" aria-label="VSF Listen Übersicht Karten">
<div class="sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-object-card" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
<article class="sg-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
<div class="sg-strong">NAME DER LISTE</div>
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
@@ -228,8 +228,8 @@
</article>
</div>
<div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
<div class="sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-object-card" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
<article class="sg-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
<div class="sg-strong">NAME DER LISTE</div>
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
@@ -347,8 +347,6 @@
</article>
</div>
<h2 class="sg-sub-heading sg-section-h2">Layout 1: Neue Liste anlegen Karte</h2>
<div class="sg-object-card-grid" aria-label="VSF List Card Layout Neue Liste anlegen">
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Neue Liste anlegen Karte">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
<div class="sg-strong">Neue Liste anlegen</div>
@@ -416,5 +414,39 @@
</section>
<script>
const updateObjectCardGridRowState = () => {
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
grid.classList.remove('sg-object-card-grid--multi-row');
grid.style.removeProperty('--layout-object-card-shared-width');
if (cards.length <= 1) {
return;
}
const firstTop = cards[0].offsetTop;
const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
if (!hasMultipleRows) {
return;
}
const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
const referenceCard = firstRowCards[0];
if (!referenceCard) {
return;
}
const referenceWidth = referenceCard.getBoundingClientRect().width;
grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
grid.classList.add('sg-object-card-grid--multi-row');
});
};
window.addEventListener('load', updateObjectCardGridRowState);
window.addEventListener('resize', updateObjectCardGridRowState);
</script>
</body>
</html>