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

Make VSF list card form markup strict 1:1 with interactive elements

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-27 16:42:24 +02:00
parent d95150c78a
commit 96dd1ce1d5
1 changed files with 4 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-list-card.html
+4 -23
View File
@@ -5,25 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Layout VSF List Card</title> <title>Styleguide – Layout VSF List Card</title>
<link rel="stylesheet" href="../styleguide.css"> <link rel="stylesheet" href="../styleguide.css">
<style>
#layout-vsf-list-card .sg-form-sections-card__field-group .sg-labeled-input-row {
width: 100%;
max-width: none;
}
#layout-vsf-list-card .sg-labeled-input-row .sg-pulldown,
#layout-vsf-list-card .sg-labeled-input-row .sg-pulldown-demo {
width: 100%;
min-width: 0;
max-width: var(--layout-input-field-max-width);
}
#layout-vsf-list-card .sg-pulldown-demo__trigger {
width: 100%;
min-width: 0;
max-width: var(--layout-input-field-max-width);
}
</style>
</head> </head>
<body> <body>
@@ -44,18 +25,18 @@
<div class="sg-form-sections-card__field-group"> <div class="sg-form-sections-card__field-group">
<label class="sg-labeled-input-row"> <label class="sg-labeled-input-row">
<span class="sg-label">Listentyp</span> <span class="sg-label">Listentyp</span>
<span class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable"> <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-form-inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp"> <button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-form-inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp">
Listentyp Listentyp
</button> </button>
<span class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel"> <div class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">
<ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen"> <ul class="sg-pulldown-option-list" aria-label="Listentyp Optionen">
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li> <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Watchlist</span></li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li> <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Portfolio</span></li>
<li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li> <li class="sg-pulldown-option" role="checkbox" aria-checked="false" data-pulldown-option><span>Screening</span></li>
</ul> </ul>
</span> </div>
</span> </div>
</label> </label>
<label class="sg-labeled-input-row"> <label class="sg-labeled-input-row">