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 admin voting UI

Browse source
This commit is contained in:
Marco Allegretti 2026-01-30 09:40:09 +01:00
parent b375a756c0
commit 6e2f34d707
1 changed files with 10 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/pages/admin/voting.astro
View file

@ -10,14 +10,14 @@ import { API_BASE } from '../../lib/api';
<AdminNav currentPage="/admin/voting" /> <AdminNav currentPage="/admin/voting" />
<main class="admin-content"> <main class="admin-content">
<header class="page-header"> <header class="ui-page-header">
<div class="header-content"> <div class="header-content">
<div class="header-icon"> <div class="header-icon">
<svg class="icon icon-xl"><use href="#icon-vote-cast"/></svg> <svg class="icon icon-xl"><use href="#icon-vote-cast"/></svg>
</div> </div>
<div> <div class="ui-page-title">
<h1>Voting Methods</h1> <h1>Voting Methods</h1>
<p class="subtitle">Configure how your communities make decisions</p> <p class="ui-subtitle">Configure how your communities make decisions</p>
</div> </div>
</div> </div>
</header> </header>
@ -29,7 +29,7 @@ import { API_BASE } from '../../lib/api';
Understanding Voting Methods Understanding Voting Methods
</h2> </h2>
<div class="comparison-grid"> <div class="comparison-grid">
<div class="comparison-card" data-method="approval"> <div class="comparison-card ui-card ui-card-pad-md" data-method="approval">
<div class="card-icon" style="--method-color: #22c55e;"> <div class="card-icon" style="--method-color: #22c55e;">
<svg class="icon icon-lg"><use href="#icon-approval"/></svg> <svg class="icon icon-lg"><use href="#icon-approval"/></svg>
</div> </div>
@ -41,7 +41,7 @@ import { API_BASE } from '../../lib/api';
<span class="dot"></span> <span class="dot"></span>
</div> </div>
</div> </div>
<div class="comparison-card" data-method="ranked_choice"> <div class="comparison-card ui-card ui-card-pad-md" data-method="ranked_choice">
<div class="card-icon" style="--method-color: #3b82f6;"> <div class="card-icon" style="--method-color: #3b82f6;">
<svg class="icon icon-lg"><use href="#icon-ranked-choice"/></svg> <svg class="icon icon-lg"><use href="#icon-ranked-choice"/></svg>
</div> </div>
@ -53,7 +53,7 @@ import { API_BASE } from '../../lib/api';
<span class="dot"></span> <span class="dot"></span>
</div> </div>
</div> </div>
<div class="comparison-card" data-method="schulze"> <div class="comparison-card ui-card ui-card-pad-md" data-method="schulze">
<div class="card-icon" style="--method-color: #8b5cf6;"> <div class="card-icon" style="--method-color: #8b5cf6;">
<svg class="icon icon-lg"><use href="#icon-schulze"/></svg> <svg class="icon icon-lg"><use href="#icon-schulze"/></svg>
</div> </div>
@ -65,7 +65,7 @@ import { API_BASE } from '../../lib/api';
<span class="dot filled"></span> <span class="dot filled"></span>
</div> </div>
</div> </div>
<div class="comparison-card" data-method="star"> <div class="comparison-card ui-card ui-card-pad-md" data-method="star">
<div class="card-icon" style="--method-color: #f59e0b;"> <div class="card-icon" style="--method-color: #f59e0b;">
<svg class="icon icon-lg"><use href="#icon-star"/></svg> <svg class="icon icon-lg"><use href="#icon-star"/></svg>
</div> </div>
@ -77,7 +77,7 @@ import { API_BASE } from '../../lib/api';
<span class="dot"></span> <span class="dot"></span>
</div> </div>
</div> </div>
<div class="comparison-card" data-method="quadratic"> <div class="comparison-card ui-card ui-card-pad-md" data-method="quadratic">
<div class="card-icon" style="--method-color: #ec4899;"> <div class="card-icon" style="--method-color: #ec4899;">
<svg class="icon icon-lg"><use href="#icon-quadratic"/></svg> <svg class="icon icon-lg"><use href="#icon-quadratic"/></svg>
</div> </div>
@ -118,7 +118,7 @@ import { API_BASE } from '../../lib/api';
</h2> </h2>
<p>Configure the default deliberation workflow for proposals</p> <p>Configure the default deliberation workflow for proposals</p>
</div> </div>
<div class="phase-config" id="phase-config"> <div class="phase-config ui-card ui-card-pad-md" id="phase-config">
<div class="phase-flow"> <div class="phase-flow">
<div class="phase-step"> <div class="phase-step">
<div class="phase-icon inform"> <div class="phase-icon inform">
@ -184,10 +184,6 @@ import { API_BASE } from '../../lib/api';
max-width: 1000px; max-width: 1000px;
} }
.page-header {
margin-bottom: 2rem;
}
.header-content { .header-content {
display: flex; display: flex;
align-items: center; align-items: center;
@ -205,16 +201,6 @@ import { API_BASE } from '../../lib/api';
color: var(--color-primary); color: var(--color-primary);
} }
.page-header h1 {
margin: 0 0 0.25rem;
font-size: 1.75rem;
}
.subtitle {
color: var(--color-text-muted);
margin: 0;
}
/* Comparison Section */ /* Comparison Section */
.comparison-section { .comparison-section {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
@ -235,10 +221,6 @@ import { API_BASE } from '../../lib/api';
} }
.comparison-card { .comparison-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 1.25rem;
text-align: center; text-align: center;
transition: all 0.2s ease; transition: all 0.2s ease;
cursor: pointer; cursor: pointer;
@ -324,10 +306,6 @@ import { API_BASE } from '../../lib/api';
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
padding: 1rem 1.25rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
transition: all 0.15s ease; transition: all 0.15s ease;
} }
@ -426,10 +404,7 @@ import { API_BASE } from '../../lib/api';
/* Phase Flow */ /* Phase Flow */
.phase-config { .phase-config {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 16px; border-radius: 16px;
padding: 1.5rem;
} }
.phase-flow { .phase-flow {
@ -597,7 +572,7 @@ import { API_BASE } from '../../lib/api';
container.innerHTML = methods.map(m => { container.innerHTML = methods.map(m => {
const meta = methodIcons[m.name] || { icon: 'icon-vote-cast', color: 'var(--color-primary)' }; const meta = methodIcons[m.name] || { icon: 'icon-vote-cast', color: 'var(--color-primary)' };
return ` return `
<div class="method-row ${m.is_active ? '' : 'disabled'}" data-id="${m.id}"> <div class="method-row ui-card ui-card-soft ui-card-pad-md ${m.is_active ? '' : 'disabled'}" data-id="${m.id}">
<div class="method-icon" style="background: color-mix(in srgb, ${meta.color} 15%, transparent); color: ${meta.color};"> <div class="method-icon" style="background: color-mix(in srgb, ${meta.color} 15%, transparent); color: ${meta.color};">
<svg class="icon"><use href="#${meta.icon}"/></svg> <svg class="icon"><use href="#${meta.icon}"/></svg>
</div> </div>