Make VSF cards wrap by available width with per-card overlay stage
This commit is contained in:
@@ -111,8 +111,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-vsf-list-card-context" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
|
||||
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
|
||||
<div class="sg-object-card-grid" aria-label="VSF Listen Cards Übersicht">
|
||||
<div class="sg-object-card sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-vsf-list-card-context" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
|
||||
<article class="sg-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||
<div class="sg-strong">NAME DER LISTE</div>
|
||||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||||
@@ -190,6 +191,46 @@
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" value="NAME DER LISTE" aria-label="Name" data-vsf-edit-input>
|
||||
</label>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea class="sg-input-multi-line sg-form-inactive-selectable" rows="4" aria-label="Beschreibung" data-vsf-edit-input>BESCHREIBUNG LISTE</textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-edit-save>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
|
||||
<label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
|
||||
<span class="sg-label">Bestätigung</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-vsf-delete-confirmation-input>
|
||||
</label>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-delete-confirmation-submit>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Neue Liste anlegen Karte">
|
||||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
|
||||
<div class="sg-strong">Neue Liste anlegen</div>
|
||||
@@ -251,45 +292,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
|
||||
<div class="sg-form-sections-card__field-group">
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Name</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" value="NAME DER LISTE" aria-label="Name" data-vsf-edit-input>
|
||||
</label>
|
||||
<label class="sg-labeled-input-row">
|
||||
<span class="sg-label">Beschreibung</span>
|
||||
<textarea class="sg-input-multi-line sg-form-inactive-selectable" rows="4" aria-label="Beschreibung" data-vsf-edit-input>BESCHREIBUNG LISTE</textarea>
|
||||
</label>
|
||||
</div>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-edit-save>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
|
||||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
|
||||
<p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
|
||||
<label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
|
||||
<span class="sg-label">Bestätigung</span>
|
||||
<input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-vsf-delete-confirmation-input>
|
||||
</label>
|
||||
<div class="sg-delete-confirmation-pattern__actions">
|
||||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-delete-confirmation-submit>
|
||||
Löschen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<main class="sg-vsf-list-overview-page-v2__content" aria-label="Inhaltsbereich">
|
||||
|
||||
Reference in New Issue
Block a user