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: modernize voting config page

Browse source
This commit is contained in:
Marco Allegretti 2026-01-30 12:27:50 +01:00
parent e45e52b46d
commit 072c8da18b
1 changed files with 32 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
frontend/src/pages/communities/[slug]/voting-config.astro
View file

@ -6,47 +6,28 @@ const { slug } = Astro.params;
--- ---
<Layout title="Voting Configuration"> <Layout title="Voting Configuration">
<div class="config-container"> <section class="ui-page">
<header class="page-header"> <div class="ui-container ui-config-container">
<a href={`/communities/${slug}`} class="back-link">← Back to Community</a> <div class="ui-hero ui-card ui-card-glass">
<h1>Voting Configuration</h1> <div class="ui-hero-top">
<p class="subtitle">Configure voting methods for this community</p> <div class="ui-hero-title">
</header> <h1>Voting Configuration</h1>
<p class="ui-hero-subtitle">Configure voting methods for this community</p>
</div>
<a href={`/communities/${slug}`} class="ui-btn ui-btn-secondary">Back to Community</a>
</div>
</div>
<div class="voting-methods" id="voting-methods"> <div class="voting-methods" id="voting-methods">
<p class="loading">Loading voting methods...</p> <p class="loading">Loading voting methods...</p>
</div>
</div> </div>
</div> </section>
</Layout> </Layout>
<style> <style>
.config-container { .ui-config-container {
max-width: 800px; max-width: 900px;
margin: 0 auto;
padding: 2rem;
}
.back-link {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.9rem;
}
.back-link:hover {
color: var(--accent-color);
}
.page-header {
margin-bottom: 2rem;
}
.page-header h1 {
margin: 0.5rem 0 0 0;
}
.subtitle {
color: var(--text-secondary);
margin-top: 0.5rem;
} }
.voting-methods { .voting-methods {
@ -54,13 +35,6 @@ const { slug } = Astro.params;
gap: 1.25rem; gap: 1.25rem;
} }
.method-card {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 0.75rem;
padding: 1.25rem;
}
.method-card.disabled { .method-card.disabled {
opacity: 0.5; opacity: 0.5;
} }
@ -85,13 +59,13 @@ const { slug } = Astro.params;
font-weight: normal; font-weight: normal;
} }
.complexity.simple { background: #28a745; color: white; } .complexity.simple { background: var(--color-success); color: var(--color-on-primary); }
.complexity.moderate { background: #ffc107; color: #000; } .complexity.moderate { background: var(--color-warning); color: var(--color-on-primary); }
.complexity.advanced { background: #dc3545; color: white; } .complexity.advanced { background: var(--color-error); color: var(--color-on-primary); }
.method-info p { .method-info p {
margin: 0; margin: 0;
color: var(--text-secondary); color: var(--color-text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
@ -117,7 +91,7 @@ const { slug } = Astro.params;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
inset: 0; inset: 0;
background: var(--border-color); background: var(--color-border);
border-radius: 26px; border-radius: 26px;
transition: 0.3s; transition: 0.3s;
} }
@ -129,13 +103,13 @@ const { slug } = Astro.params;
width: 20px; width: 20px;
left: 3px; left: 3px;
bottom: 3px; bottom: 3px;
background: white; background: var(--color-surface);
border-radius: 50%; border-radius: 50%;
transition: 0.3s; transition: 0.3s;
} }
input:checked + .toggle-slider { input:checked + .toggle-slider {
background: var(--accent-color); background: var(--color-primary);
} }
input:checked + .toggle-slider:before { input:checked + .toggle-slider:before {
@ -143,8 +117,8 @@ const { slug } = Astro.params;
} }
.default-badge { .default-badge {
background: var(--accent-color); background: var(--color-primary);
color: white; color: var(--color-on-primary);
padding: 0.2rem 0.6rem; padding: 0.2rem 0.6rem;
border-radius: 1rem; border-radius: 1rem;
font-size: 0.75rem; font-size: 0.75rem;
@ -153,15 +127,15 @@ const { slug } = Astro.params;
.loading { .loading {
text-align: center; text-align: center;
padding: 2rem; padding: 2rem;
color: var(--text-secondary); color: var(--color-text-muted);
} }
.error-message { .error-message {
background: #dc354520; background: var(--color-error-muted);
border: 1px solid #dc3545; border: 1px solid var(--color-error);
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: var(--radius-md);
color: #dc3545; color: var(--color-error);
} }
</style> </style>
@ -220,7 +194,7 @@ const { slug } = Astro.params;
const methods = await res.json(); const methods = await res.json();
container.innerHTML = methods.map(m => ` container.innerHTML = methods.map(m => `
<div class="method-card ${m.is_enabled ? '' : 'disabled'}" data-id="${m.voting_method.id}"> <div class="method-card ui-card ui-card-soft ui-card-pad-md ${m.is_enabled ? '' : 'disabled'}" data-id="${m.voting_method.id}">
<div class="method-header"> <div class="method-header">
<div class="method-info"> <div class="method-info">
<h3> <h3>