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

Move create-list content into second segment

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-15 13:11:56 +02:00
parent fbdccb7c01
commit 2b034373ef
2 changed files with 48 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/delete-confirmation-overlay.html
+43 -44
View File
@@ -148,45 +148,47 @@
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button> <button class="sg-interaction-element sg-button sg-button--active" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
</div> </div>
<p class="sg-body sg-delete-confirmation-pattern__text sg-delete-confirmation-pattern__create-list-title" data-create-list-title hidden>Füge das Unternehmen einer neuen Liste hinzu</p> <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__create-list-segment" data-create-list-form hidden>
<p class="sg-body sg-delete-confirmation-pattern__text sg-delete-confirmation-pattern__create-list-title" data-create-list-title>Füge das Unternehmen einer neuen Liste hinzu</p>
<div class="sg-form-sections-card-wrapper sg-delete-confirmation-pattern__create-list-form" data-create-list-form hidden aria-label="Formular mit Abschnitten"> <div class="sg-form-sections-card-wrapper sg-delete-confirmation-pattern__create-list-form" aria-label="Formular mit Abschnitten">
<form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular"> <form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
<div class="sg-form-sections-card__body" data-pattern-part="form-body"> <div class="sg-form-sections-card__body" data-pattern-part="form-body">
<section class="sg-form-sections-card__chapter" aria-label="Neue Liste"> <section class="sg-form-sections-card__chapter" aria-label="Neue Liste">
<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">Name</span> <span class="sg-label">Name</span>
<input <input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="text" type="text"
placeholder="Name eingeben" placeholder="Name eingeben"
aria-label="Name" aria-label="Name"
maxlength="80" maxlength="80"
> >
</label> </label>
<label class="sg-labeled-input-row"> <label class="sg-labeled-input-row">
<span class="sg-label">Beschreibung</span> <span class="sg-label">Beschreibung</span>
<textarea <textarea
class="sg-input-multi-line sg-form-inactive-selectable" class="sg-input-multi-line sg-form-inactive-selectable"
rows="4" rows="4"
placeholder="Beschreibung eingeben" placeholder="Beschreibung eingeben"
aria-label="Beschreibung" aria-label="Beschreibung"
maxlength="350" maxlength="350"
></textarea> ></textarea>
</label> </label>
</div> </div>
</section> </section>
</div>
<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Zuruecksetzen</button>
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
</div> </div>
</footer>
</form> <footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
<div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Zuruecksetzen</button>
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Liste anlegen</button>
</div>
</footer>
</form>
</div>
</div> </div>
</div> </div>
</article> </article>
@@ -202,6 +204,7 @@
const createListForm = stage.querySelector('[data-create-list-form]'); const createListForm = stage.querySelector('[data-create-list-form]');
const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]'); const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]');
const createListTitle = stage.querySelector('[data-create-list-title]'); const createListTitle = stage.querySelector('[data-create-list-title]');
const createListSegment = stage.querySelector('[data-create-list-form]');
const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]'); const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]');
const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]'); const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]');
const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]'); const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]');
@@ -216,11 +219,8 @@
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => { stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
dialog.hidden = true; dialog.hidden = true;
}); });
if (createListForm) { if (createListSegment) {
createListForm.hidden = true; createListSegment.hidden = true;
}
if (createListTitle) {
createListTitle.hidden = true;
} }
if (createListFormToggle) { if (createListFormToggle) {
createListFormToggle.disabled = false; createListFormToggle.disabled = false;
@@ -300,9 +300,8 @@
createListFormToggle.addEventListener('click', (event) => { createListFormToggle.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
createListForm.hidden = false; if (createListSegment) {
if (createListTitle) { createListSegment.hidden = false;
createListTitle.hidden = false;
} }
createListFormToggle.setAttribute('aria-expanded', 'true'); createListFormToggle.setAttribute('aria-expanded', 'true');
createListFormToggle.classList.remove('sg-button--active'); createListFormToggle.classList.remove('sg-button--active');
styles/27-patterns-delete-confirmation.css
+5 -1
View File
@@ -114,8 +114,12 @@
margin-top: 0; margin-top: 0;
} }
.sg-delete-confirmation-pattern__create-list-segment {
gap: 0;
}
.sg-delete-confirmation-pattern__create-list-title { .sg-delete-confirmation-pattern__create-list-title {
margin: calc(var(--spacing-large) - var(--layout-delete-confirmation-content-gap)) 0 calc(var(--spacing-large) - var(--layout-delete-confirmation-content-gap)) 0; margin: 0 0 var(--spacing-large) 0;
} }
.sg-delete-confirmation-pattern__create-list-form[hidden] { .sg-delete-confirmation-pattern__create-list-form[hidden] {