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

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

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