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: enhance ui-form controls and dedupe settings forms

Browse source
This commit is contained in:
Marco Allegretti 2026-01-30 09:50:02 +01:00
parent b4a5088d88
commit 89b6e936e2
3 changed files with 16 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/components/ui/DesignSystemStyles.astro
View file

@ -182,9 +182,18 @@
}
.ui-form .form-group {
margin-bottom: var(--ui-form-group-mb, 0);
}
.ui-form .form-group:last-child {
margin-bottom: 0;
}
.ui-form .form-group :where(input, textarea, select) {
width: 100%;
max-width: var(--ui-form-control-max-width, 100%);
}
.ui-form .form-group label {
display: block;
margin-bottom: 0.5rem;

14
frontend/src/pages/admin/settings.astro
View file

@ -20,7 +20,7 @@ import { API_BASE as apiBase } from '../../lib/api';
<div id="loading">Loading settings...</div>
<div id="error" class="error-box" style="display: none;"></div>
<form id="settings-form" class="ui-form" style="display: none;">
<form id="settings-form" class="ui-form" style="--ui-form-control-max-width: 400px; display: none;">
<!-- General Settings -->
<section class="settings-section ui-card ui-card-soft ui-card-pad-md">
<h2>General</h2>
@ -145,18 +145,6 @@ import { API_BASE as apiBase } from '../../lib/api';
margin-bottom: 0.5rem;
}
.form-group input[type="text"],
.form-group select {
width: 100%;
max-width: 400px;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: 1rem;
background: var(--color-bg);
color: var(--color-text);
}
.form-group input:focus,
.form-group select:focus {
outline: none;

52
frontend/src/pages/communities/[slug]/settings.astro
View file

@ -20,9 +20,9 @@ const { slug } = Astro.params;
You don't have permission to manage this community's settings.
</div>
<form id="settings-form" style="display: none;">
<form id="settings-form" class="ui-form" style="--ui-form-control-max-width: 400px; display: none;">
<!-- Membership -->
<section class="settings-section">
<section class="settings-section ui-card ui-card-soft ui-card-pad-md">
<h2>Membership</h2>
<div class="form-group">
@ -37,7 +37,7 @@ const { slug } = Astro.params;
</section>
<!-- Moderation -->
<section class="settings-section">
<section class="settings-section ui-card ui-card-soft ui-card-pad-md">
<h2>Moderation</h2>
<div class="form-group">
@ -52,7 +52,7 @@ const { slug } = Astro.params;
</section>
<!-- Governance -->
<section class="settings-section">
<section class="settings-section ui-card ui-card-soft ui-card-pad-md">
<h2>Governance</h2>
<div class="form-group">
@ -68,7 +68,7 @@ const { slug } = Astro.params;
</section>
<!-- Plugins -->
<section class="settings-section">
<section class="settings-section ui-card ui-card-soft ui-card-pad-md">
<h2>Plugins</h2>
<div class="form-group">
@ -88,7 +88,7 @@ const { slug } = Astro.params;
</section>
<div class="form-actions">
<button type="submit" id="save-btn">Save Settings</button>
<button type="submit" id="save-btn" class="ui-btn ui-btn-primary">Save Settings</button>
<span id="save-status"></span>
</div>
</form>
@ -127,10 +127,7 @@ const { slug } = Astro.params;
}
.settings-section {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
@ -157,22 +154,6 @@ const { slug } = Astro.params;
color: var(--color-text);
}
.form-group select {
width: 100%;
max-width: 400px;
padding: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 8px;
font-size: 1rem;
background: var(--color-bg);
color: var(--color-text);
}
.form-group select:focus {
outline: none;
border-color: var(--color-primary);
}
.hint {
font-size: 0.9rem;
color: var(--color-text-muted);
@ -190,27 +171,6 @@ const { slug } = Astro.params;
margin-top: 1rem;
}
.form-actions button {
padding: 0.75rem 2rem;
background: var(--color-primary);
color: var(--color-text-inverse);
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s;
}
.form-actions button:hover {
opacity: 0.9;
}
.form-actions button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
#save-status {
color: var(--color-success);
font-weight: 500;