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

Align Meldungen notification structure and logic with notifications pattern

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-01 17:18:39 +02:00
parent acc584d6e7
commit 12f16b9813
1 changed files with 2 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-meldungen.html
+2 -12
View File
@@ -148,8 +148,7 @@
<div class="sg-content-block-card-group__panels"> <div class="sg-content-block-card-group__panels">
<div class="sg-content-block-card-group__panel" id="vsf-meldungen-panel-updates" role="tabpanel" aria-labelledby="vsf-meldungen-tab-updates"> <div class="sg-content-block-card-group__panel" id="vsf-meldungen-panel-updates" role="tabpanel" aria-labelledby="vsf-meldungen-tab-updates">
<div class="sg-preview-area sg-notifications-pattern" aria-label="Updates Meldungen"> <div class="sg-preview-area sg-notifications-pattern sg-group-card" aria-label="Updates Meldungen" data-component="group-card">
<div class="sg-group-card" data-component="group-card">
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card"> <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">Update-Hinweis mit hoher Priorität zur Illustration.</p> <p class="sg-body">Update-Hinweis mit hoher Priorität zur Illustration.</p>
@@ -203,13 +202,11 @@
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button> <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
</div> </div>
</article> </article>
</div>
</div> </div>
</div> </div>
<div class="sg-content-block-card-group__panel" id="vsf-meldungen-panel-termine" role="tabpanel" aria-labelledby="vsf-meldungen-tab-termine" hidden> <div class="sg-content-block-card-group__panel" id="vsf-meldungen-panel-termine" role="tabpanel" aria-labelledby="vsf-meldungen-tab-termine" hidden>
<div class="sg-preview-area sg-notifications-pattern" aria-label="Termine Meldungen"> <div class="sg-preview-area sg-notifications-pattern sg-group-card" aria-label="Termine Meldungen" data-component="group-card">
<div class="sg-group-card" data-component="group-card">
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card"> <article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red sg-notifications-pattern__text-segment" data-component-part="card-header">
<p class="sg-body">Terminwarnung mit hoher Priorität zur Illustration.</p> <p class="sg-body">Terminwarnung mit hoher Priorität zur Illustration.</p>
@@ -236,7 +233,6 @@
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button> <button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">zum Unternehmen</button>
</div> </div>
</article> </article>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -502,12 +498,6 @@
return; return;
} }
// Enforce equalized multi-row widths only for 2-column rows.
// For 3+ columns, keep native min/max card behavior.
if (firstRowCards.length !== 2) {
return;
}
const referenceWidth = referenceCard.getBoundingClientRect().width; const referenceWidth = referenceCard.getBoundingClientRect().width;
grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`); grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
grid.classList.add('sg-notifications-pattern--multi-row'); grid.classList.add('sg-notifications-pattern--multi-row');