ux: normalize modal forms via ui-form

This commit is contained in:
Marco Allegretti 2026-01-30 11:53:02 +01:00
parent a8ea0c53fb
commit 4fc534a243
3 changed files with 3 additions and 47 deletions

View file

@ -168,6 +168,7 @@
} }
:where(input, textarea, select):focus-visible { :where(input, textarea, select):focus-visible {
outline: none;
border-color: var(--color-primary); border-color: var(--color-primary);
} }

View file

@ -269,7 +269,7 @@ const { slug } = Astro.params;
modal.innerHTML = ` modal.innerHTML = `
<div class="modal-content ui-card ui-card-pad-xl"> <div class="modal-content ui-card ui-card-pad-xl">
<h2>Edit Community</h2> <h2>Edit Community</h2>
<form id="edit-community-form"> <form id="edit-community-form" class="ui-form" style="--ui-form-group-mb: 1rem;">
<div class="form-group"> <div class="form-group">
<label for="edit-name">Name</label> <label for="edit-name">Name</label>
<input type="text" id="edit-name" value="${community.name}" required /> <input type="text" id="edit-name" value="${community.name}" required />
@ -462,26 +462,6 @@ const { slug } = Astro.params;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.modal-content .form-group {
margin-bottom: 1rem;
}
.modal-content label {
display: block;
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.modal-content input, .modal-content textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-bg);
color: var(--color-text);
font-family: inherit;
}
.modal-actions { .modal-actions {
display: flex; display: flex;
gap: 1rem; gap: 1rem;

View file

@ -545,7 +545,7 @@ const proposalId = id ?? '';
modal.innerHTML = ` modal.innerHTML = `
<div class="modal-content ui-card ui-card-pad-xl"> <div class="modal-content ui-card ui-card-pad-xl">
<h2>Edit Proposal</h2> <h2>Edit Proposal</h2>
<form id="edit-form"> <form id="edit-form" class="ui-form" style="--ui-form-group-mb: 1rem;">
<div class="form-group"> <div class="form-group">
<label for="edit-title">Title</label> <label for="edit-title">Title</label>
<input type="text" id="edit-title" value="${data.proposal.title}" required /> <input type="text" id="edit-title" value="${data.proposal.title}" required />
@ -806,31 +806,6 @@ const proposalId = id ?? '';
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.modal-content .form-group {
margin-bottom: 1rem;
}
.modal-content label {
display: block;
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.modal-content input, .modal-content textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-bg);
color: var(--color-text);
font-family: inherit;
}
.modal-content input:focus, .modal-content textarea:focus {
outline: none;
border-color: var(--color-primary);
}
.modal-actions { .modal-actions {
display: flex; display: flex;
gap: 1rem; gap: 1rem;