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

Add group-card h2 variant sandwich menu and align VSF page to component template

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-28 11:34:37 +02:00
parent 0538f5d868
commit b71544d95f
4 changed files with 36 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cards.html
+14
View File
@@ -170,7 +170,21 @@
<p class="sg-preview-label">Variante: Group Card mit H2 Überschrift</p>
<div class="sg-group-card sg-group-card--margin-after-large" data-component="group-card">
<div class="sg-group-card__header-row">
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Gruppenüberschrift</h2>
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Gruppenmenü öffnen" data-component-part="sandwich-trigger">
<span class="sg-sandwich-button__icon" aria-hidden="true">
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Gruppenmenü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link" href="#" data-component-part="sandwich-menu-link">Gruppenüberschrift anpassen</a>
</div>
</div>
</div>
<article class="sg-card" data-component="card" data-component-context="group-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
patterns/vsf-list-detailseite.html
+1 -1
View File
@@ -110,7 +110,7 @@
<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-vsf-list-detail-page__group-card-header">
<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">
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Meldungsmenü öffnen" data-component-part="sandwich-trigger">
styles/33-layouts-vsf-list-detailseite.css
-21
View File
@@ -64,27 +64,6 @@
width: 100%;
}
.sg-vsf-list-detail-page__group-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-small);
width: 100%;
margin-bottom: var(--spacing-small);
}
.sg-vsf-list-detail-page__group-card-header .sg-group-card__heading {
flex: 1 1 auto;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: var(--card-segment-padding-horizontal);
}
.sg-vsf-list-detail-page__group-card-header .sg-sandwich-menu-wrap {
margin-right: var(--card-segment-padding-horizontal);
}
.sg-vsf-list-detail-page__notification-card.sg-vsf-list-detail-page__notification-card--hidden {
display: none;
}
styles/40-components-cards.css
+21
View File
@@ -171,6 +171,15 @@
margin-bottom: var(--spacing-large);
}
.sg-group-card__header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-small);
width: 100%;
margin-bottom: var(--spacing-small);
}
.sg-group-card__heading {
flex: 0 0 100%;
margin-top: 0;
@@ -179,6 +188,18 @@
margin-left: var(--card-segment-padding-horizontal);
}
.sg-group-card__header-row .sg-group-card__heading {
flex: 1 1 auto;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: var(--card-segment-padding-horizontal);
}
.sg-group-card__header-row .sg-sandwich-menu-wrap {
margin-right: var(--card-segment-padding-horizontal);
}
.sg-page-cards .sg-preview-area {
display: flex;
flex-direction: column;