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

Add gridfield component

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-10 13:22:40 +02:00
parent e4fb7250ed
commit 9f99482a93
6 changed files with 108 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/gridfield.html
+42
View File
@@ -0,0 +1,42 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Gridfield</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body class="sg-page-gridfield">
<h1 class="sg-main-heading">Components – Gridfield</h1>
<section id="component-gridfield">
<p class="sg-preview-label">Component: Gridfield</p>
<div class="sg-gridfield-demo" data-component="gridfield">
<div class="sg-gridfield-row" data-gridfield-state="normal">
<p class="sg-table-label">Komponente normal</p>
<span class="sg-label">Label</span>
<select class="sg-interaction-element sg-pulldown" aria-label="Gridfield Pulldown">
<option selected>Auswahl</option>
</select>
</div>
<div class="sg-gridfield-row" data-gridfield-state="input">
<p class="sg-table-label">Eingabefeld</p>
<span class="sg-label">Label</span>
<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="Einzeiliges Eingabefeld" aria-label="Gridfield Eingabefeld">
</div>
<div class="sg-gridfield-row" data-gridfield-state="disabled">
<p class="sg-table-label">form-disabled</p>
<span class="sg-label">Label</span>
<select class="sg-interaction-element sg-pulldown sg-pulldown--disabled" aria-label="Gridfield deaktivierter Pulldown" disabled>
<option>Nicht verfügbar</option>
</select>
</div>
</div>
</section>
</body>
</html>
index.html
+1
View File
@@ -28,6 +28,7 @@
<ul class="sg-index-list">
<li><a href="./components/cards.html">Cards</a></li>
<li><a href="./components/gridfield.html">Gridfield</a></li>
<li><a href="./components/interactive-elements.html">Interactive Elements</a></li>
<li><a href="./components/charts.html">Charts</a></li>
<li><a href="./components/data-display.html">Data Display</a></li>
semantic-tokens-components.html
+8 -1
View File
@@ -122,6 +122,14 @@
<tr><td>layout-search-field-width</td><td>dimension-search-field-width</td><td>Fixe Breite des Suchfeld-Inputs.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Gridfield</h3>
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
<tr><td>layout-gridfield-label-column-width</td><td>layout-input-label-width</td><td>Breite der Label-Spalte der Gridfield-Zeile.</td></tr>
<tr><td>layout-gridfield-column-gap</td><td>spacing-small</td><td>Horizontaler Abstand zwischen Label und Control in der Gridfield-Zeile.</td></tr>
<tr><td>layout-gridfield-row-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen Label und Control in gestapelten Gridfield-Zeilen.</td></tr>
<tr><td>layout-gridfield-field-max-width</td><td>layout-input-field-max-width</td><td>Maximale Breite des Control-Bereichs im Gridfield.</td></tr>
</tbody></table>
<h3 class="sg-sub-heading sg-section-h3">Pulldown and Menu</h3>
<p class="sg-table-label">Changelog (2026-05-25): Overlay-Layer vereinheitlicht; Pulldowns liegen über Scorebars (Fix Relativmodus).</p>
<table class="sg-foundation-table sg-table-label"><thead><tr><th>Semantischer Token</th><th>Verwendeter Foundation-Token</th><th>Beschreibung Verwendungszweck in der Komponente</th></tr></thead><tbody>
@@ -136,7 +144,6 @@
<tr><td>layout-pulldown-panel-form-mobile-width</td><td>90%</td><td>Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.</td></tr>
<tr><td>layer-pulldown-panel</td><td>dimension-layer-pulldown-panel</td><td>Layer-Stufe geöffneter Pulldown-Ausklappfelder über übrigen Seiteninhalten.</td></tr>
<tr><td>layout-multiselect-pulldown-panel-desktop-width</td><td>dimension-multiselect-pulldown-panel-desktop-width</td><td>Semantische Obergrenze für die Panelbreite geöffneter Pulldowns; das Panel darf über Triggerbreite wachsen, bleibt aber durch diese Breite und die Viewport-Kappe begrenzt.</td></tr>
<tr><td>layout-multiselect-pulldown-panel-mobile-width</td><td>dimension-multiselect-pulldown-panel-mobile-width</td><td>Reservierter semantischer Alias für feste Mobile-Breite im Multiselektions-Pulldown; aktuell nicht aktiv genutzt, da das Panel inhaltsbasiert mit Viewport-Kappe skaliert.</td></tr>
<tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
<tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Sandwich-Menü für große und kleine Variante.</td></tr>
<tr><td>text-activatable-remove</td><td>text-control-default</td><td>Zeichenfarbe des Schließen-Kontrollfelds für aktive Filterzeilen innerhalb geöffneter Pulldown-Panel-Formbereiche.</td></tr>
styleguide.css
+1
View File
@@ -2,6 +2,7 @@
@import "./styles/02-base.css";
@import "./styles/03-typography-helpers.css";
@import "./styles/10-components-interactive-elements.css";
@import "./styles/11-components-gridfield.css";
@import "./styles/20-patterns-portal-header.css";
@import "./styles/21-patterns-options-row.css";
@import "./styles/22-patterns-object-card.css";
styles/01-foundations.css
+4 -2
View File
@@ -77,11 +77,14 @@
--layout-pulldown-panel-form-mobile-width: 90%;
--layer-pulldown-panel: var(--dimension-layer-pulldown-panel);
--layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width);
--layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width);
--layout-multiselect-pulldown-label-column-width-fallback: max-content;
--layout-input-label-width: var(--dimension-input-label-width);
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
--layout-input-field-max-width: var(--dimension-input-field-max-width);
--layout-gridfield-label-column-width: var(--layout-input-label-width);
--layout-gridfield-column-gap: var(--spacing-small);
--layout-gridfield-row-gap: var(--spacing-small);
--layout-gridfield-field-max-width: var(--layout-input-field-max-width);
--layout-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
--layout-search-field-width: var(--dimension-search-field-width);
--layout-mode-toggle-local-height: var(--compact-interaction-height);
@@ -277,7 +280,6 @@
--dimension-search-field-width: 15.3rem;
--dimension-layer-pulldown-panel: 40;
--dimension-multiselect-pulldown-panel-desktop-width: 500px;
--dimension-multiselect-pulldown-panel-mobile-width: 80vw;
--dimension-options-row-mode-toggle-width: 7rem;
--dimension-options-row-help-panel-width: 16rem;
--dimension-card-list-drawer-width: 40%;
styles/11-components-gridfield.css
+52
View File
@@ -0,0 +1,52 @@
/* ========================================================= */
/* Components: Gridfield */
/* ========================================================= */
.sg-gridfield-demo {
display: inline-flex;
flex-direction: column;
gap: var(--spacing-small);
width: fit-content;
padding: var(--spacing-large);
border-radius: var(--radius-card);
background: var(--surface-form-preview);
}
.sg-gridfield-row {
display: grid;
grid-template-columns: var(--layout-gridfield-label-column-width) minmax(0, 1fr);
column-gap: var(--layout-gridfield-column-gap);
align-items: center;
width: 100%;
max-width: var(--layout-gridfield-field-max-width);
}
.sg-gridfield-row .sg-label {
min-width: 0;
margin: 0;
line-height: 1;
color: var(--text-control-default);
}
.sg-gridfield-row .sg-interaction-element,
.sg-gridfield-row .sg-pulldown-demo,
.sg-gridfield-row .sg-pulldown {
width: 100%;
min-width: 0;
max-width: 100%;
}
@media (max-width: 48rem) {
.sg-gridfield-demo {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.sg-gridfield-row {
grid-template-columns: 1fr;
row-gap: var(--layout-gridfield-row-gap);
align-items: start;
max-width: 100%;
}
}