marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ux: normalize forms via ui-form

Browse source
This commit is contained in:
Marco Allegretti 2026-01-30 11:46:41 +01:00
parent 510e1080e0
commit a8ea0c53fb
3 changed files with 14 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
frontend/src/pages/communities/[slug]/proposals/new.astro
View file

@ -9,16 +9,16 @@ const { slug } = Astro.params;
<section class="create-page"> <section class="create-page">
<div class="create-card ui-card ui-card-pad-xl"> <div class="create-card ui-card ui-card-pad-xl">
<h1>Create Proposal</h1> <h1>Create Proposal</h1>
<form id="create-form"> <form id="create-form" class="ui-form" style="--ui-form-group-mb: 1.25rem;">
<div class="field"> <div class="form-group">
<label for="title">Title</label> <label for="title">Title</label>
<input type="text" id="title" name="title" required /> <input type="text" id="title" name="title" required />
</div> </div>
<div class="field"> <div class="form-group">
<label for="description">Description</label> <label for="description">Description</label>
<textarea id="description" name="description" rows="5" required></textarea> <textarea id="description" name="description" rows="5" required></textarea>
</div> </div>
<div class="field"> <div class="form-group">
<label>Options</label> <label>Options</label>
<div id="options-container"> <div id="options-container">
<div class="option-input"> <div class="option-input">
@ -128,44 +128,6 @@ const { slug } = Astro.params;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.field {
margin-bottom: 1.25rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
input, textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-bg);
color: var(--color-text);
font-size: 1rem;
font-family: inherit;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--color-primary);
}
select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-bg);
color: var(--color-text);
font-size: 1rem;
cursor: pointer;
}
.method-hint { .method-hint {
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-text-muted); color: var(--color-text-muted);

60
frontend/src/pages/communities/new.astro
View file

@ -7,22 +7,22 @@ import { API_BASE as apiBase } from '../../lib/api';
<section class="create-page"> <section class="create-page">
<div class="create-card ui-card ui-card-pad-xl"> <div class="create-card ui-card ui-card-pad-xl">
<h1>Create Community</h1> <h1>Create Community</h1>
<form id="create-form"> <form id="create-form" class="ui-form" style="--ui-form-group-mb: 1rem;">
<div class="field"> <div class="form-group">
<label for="name">Community Name</label> <label for="name">Community Name</label>
<input type="text" id="name" name="name" required /> <input type="text" id="name" name="name" required />
</div> </div>
<div class="field"> <div class="form-group">
<label for="slug">URL Slug</label> <label for="slug">URL Slug</label>
<input type="text" id="slug" name="slug" required pattern="[a-z0-9-]+" /> <input type="text" id="slug" name="slug" required pattern="[a-z0-9-]+" />
<small>Lowercase letters, numbers, and hyphens only</small> <small class="help-text">Lowercase letters, numbers, and hyphens only</small>
</div> </div>
<div class="field"> <div class="form-group">
<label for="description">Description (optional)</label> <label for="description">Description (optional)</label>
<textarea id="description" name="description" rows="3"></textarea> <textarea id="description" name="description" rows="3"></textarea>
</div> </div>
<div id="error" class="error"></div> <div id="error" class="error"></div>
<button type="submit">Create Community</button> <button type="submit" class="ui-btn ui-btn-primary create-submit-btn">Create Community</button>
</form> </form>
</div> </div>
</section> </section>
@ -100,57 +100,11 @@ import { API_BASE as apiBase } from '../../lib/api';
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.field { .create-submit-btn {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
input, textarea {
width: 100%; width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 6px;
background: var(--color-bg);
color: var(--color-text);
font-size: 1rem;
font-family: inherit;
}
input:focus, textarea:focus {
outline: none;
border-color: var(--color-primary);
}
small {
display: block;
margin-top: 0.25rem;
color: var(--color-text-muted);
font-size: 0.75rem;
}
button {
width: 100%;
padding: 0.75rem;
background: var(--color-primary);
color: var(--color-on-primary);
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
margin-top: 1rem; margin-top: 1rem;
} }
button:hover {
background: var(--color-primary-hover);
}
.error { .error {
color: var(--color-error); color: var(--color-error);
font-size: 0.875rem; font-size: 0.875rem;

52
frontend/src/pages/settings.astro
View file

@ -51,7 +51,7 @@ import { API_BASE as apiBase } from '../lib/api';
.join(''); .join('');
container.innerHTML = ` container.innerHTML = `
<div class="form-section ui-card ui-card-pad-lg"> <div class="form-section ui-card ui-card-pad-lg ui-form">
<h2>Appearance</h2> <h2>Appearance</h2>
<div class="form-group"> <div class="form-group">
@ -74,7 +74,7 @@ import { API_BASE as apiBase } from '../lib/api';
</div> </div>
<form id="profile-form" class="settings-form"> <form id="profile-form" class="settings-form">
<div class="form-section ui-card ui-card-pad-lg"> <div class="form-section ui-card ui-card-pad-lg ui-form">
<h2>Profile</h2> <h2>Profile</h2>
<div class="form-group"> <div class="form-group">
@ -181,6 +181,7 @@ import { API_BASE as apiBase } from '../lib/api';
.settings-page { .settings-page {
padding: 2rem 0; padding: 2rem 0;
max-width: 500px; max-width: 500px;
--ui-form-group-mb: 1.25rem;
} }
h1 { h1 {
@ -204,37 +205,6 @@ import { API_BASE as apiBase } from '../lib/api';
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.form-group {
margin-bottom: 1.25rem;
}
.form-group label {
display: block;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.form-group input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-bg);
color: var(--color-text);
font-size: 1rem;
}
.form-group input:focus {
outline: none;
border-color: var(--color-primary);
}
.form-group input:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.hint { .hint {
font-size: 0.75rem; font-size: 0.75rem;
color: var(--color-text-muted); color: var(--color-text-muted);
@ -260,25 +230,9 @@ import { API_BASE as apiBase } from '../lib/api';
} }
.theme-select { .theme-select {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-bg);
color: var(--color-text);
font-size: 1rem;
cursor: pointer; cursor: pointer;
} }
.theme-select:hover {
border-color: var(--color-border-hover);
}
.theme-select:focus {
outline: none;
border-color: var(--color-primary);
}
.theme-preview { .theme-preview {
margin-top: 1rem; margin-top: 1rem;
padding: 0.75rem; padding: 0.75rem;