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

Align notification card width behavior with VSF list detail layout

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-01 17:07:58 +02:00
parent 835f177ab2
commit ad4ab5b49d
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-meldungen.html
+15 -15
View File
@@ -140,7 +140,7 @@
<h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">Meldungen</h1> <h1 class="sg-heading-h1 sg-vsf-list-detail-page__title">Meldungen</h1>
</div> </div>
<div class="sg-content-block-card-group sg-page-cards" data-pattern="card-gruppe-mit-tastennavigation-vsf-meldungen"> <div class="sg-content-block-card-group sg-vsf-list-detail-page__left-column" data-pattern="card-gruppe-mit-tastennavigation-vsf-meldungen">
<div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Meldungen Navigation" data-component="tab-navigation" data-component-size="large"> <div class="sg-tab-button-group sg-content-block-card-group__tabs" role="tablist" aria-label="Meldungen Navigation" data-component="tab-navigation" data-component-size="large">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-meldungen-panel-updates" id="vsf-meldungen-tab-updates" data-component-part="tab-button">Updates</button> <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-meldungen-panel-updates" id="vsf-meldungen-tab-updates" data-component-part="tab-button">Updates</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-meldungen-panel-termine" id="vsf-meldungen-tab-termine" data-component-part="tab-button">Termine</button> <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-meldungen-panel-termine" id="vsf-meldungen-tab-termine" data-component-part="tab-button">Termine</button>
@@ -148,10 +148,10 @@
<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" aria-label="Updates Meldungen">
<div class="sg-group-card" 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-vsf-list-detail-page__notification-card" data-pattern="notification" data-component="notification-card" data-component-context="group-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" 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>
</div> </div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body"> <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
@@ -159,8 +159,8 @@
</div> </div>
</article> </article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card"> <article class="sg-card sg-vsf-list-detail-page__notification-card" data-pattern="notification" data-component="notification-card" data-component-context="group-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
<p class="sg-body">Update-Hinweis im positiven Bereich zur Illustration.</p> <p class="sg-body">Update-Hinweis im positiven Bereich zur Illustration.</p>
</div> </div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body"> <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
@@ -168,8 +168,8 @@
</div> </div>
</article> </article>
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card"> <article class="sg-card sg-card--notification-white sg-vsf-list-detail-page__notification-card" data-pattern="notification" data-component="notification-card" data-component-context="group-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
<p class="sg-body">Neutraler Update-Hinweis zur Illustration.</p> <p class="sg-body">Neutraler Update-Hinweis zur Illustration.</p>
</div> </div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body"> <div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
@@ -181,10 +181,10 @@
</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" aria-label="Termine Meldungen">
<div class="sg-group-card" 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-vsf-list-detail-page__notification-card" data-pattern="notification" data-component="notification-card" data-component-context="group-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" 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>
</div> </div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body"> <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
@@ -192,8 +192,8 @@
</div> </div>
</article> </article>
<article class="sg-card sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card"> <article class="sg-card sg-vsf-list-detail-page__notification-card" data-pattern="notification" data-component="notification-card" data-component-context="group-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green sg-notifications-pattern__text-segment" data-component-part="card-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
<p class="sg-body">Terminhinweis im positiven Bereich zur Illustration.</p> <p class="sg-body">Terminhinweis im positiven Bereich zur Illustration.</p>
</div> </div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body"> <div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
@@ -201,8 +201,8 @@
</div> </div>
</article> </article>
<article class="sg-card sg-card--notification-white sg-notifications-pattern__card" data-pattern="notification" data-component="notification-card"> <article class="sg-card sg-card--notification-white sg-vsf-list-detail-page__notification-card" data-pattern="notification" data-component="notification-card" data-component-context="group-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white sg-notifications-pattern__text-segment" data-component-part="card-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
<p class="sg-body">Neutraler Terminhinweis zur Illustration.</p> <p class="sg-body">Neutraler Terminhinweis zur Illustration.</p>
</div> </div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body"> <div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">