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" />
<main class="admin-content">
<header class="page-header">
<header class="ui-page-header">
<div class="header-content">
<div class="header-icon">
<svg class="icon icon-xl"><use href="#icon-vote-cast"/></svg>
</div>
<div>
<div class="ui-page-title">
<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>
</header>
@ -29,7 +29,7 @@ import { API_BASE } from '../../lib/api';
Understanding Voting Methods
</h2>
<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;">
<svg class="icon icon-lg"><use href="#icon-approval"/></svg>
</div>
@ -41,7 +41,7 @@ import { API_BASE } from '../../lib/api';
<span class="dot"></span>
</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;">
<svg class="icon icon-lg"><use href="#icon-ranked-choice"/></svg>
</div>
@ -53,7 +53,7 @@ import { API_BASE } from '../../lib/api';
<span class="dot"></span>
</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;">
<svg class="icon icon-lg"><use href="#icon-schulze"/></svg>
</div>
@ -65,7 +65,7 @@ import { API_BASE } from '../../lib/api';
<span class="dot filled"></span>
</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;">
<svg class="icon icon-lg"><use href="#icon-star"/></svg>
</div>
@ -77,7 +77,7 @@ import { API_BASE } from '../../lib/api';
<span class="dot"></span>
</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;">
<svg class="icon icon-lg"><use href="#icon-quadratic"/></svg>
</div>
@ -118,7 +118,7 @@ import { API_BASE } from '../../lib/api';
</h2>
<p>Configure the default deliberation workflow for proposals</p>
</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-step">
<div class="phase-icon inform">
@ -184,10 +184,6 @@ import { API_BASE } from '../../lib/api';
max-width: 1000px;
}
.page-header {
margin-bottom: 2rem;
}
.header-content {
display: flex;
align-items: center;
@ -205,16 +201,6 @@ import { API_BASE } from '../../lib/api';
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 {
margin-bottom: 2.5rem;
@ -235,10 +221,6 @@ import { API_BASE } from '../../lib/api';
}
.comparison-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 1.25rem;
text-align: center;
transition: all 0.2s ease;
cursor: pointer;
@ -324,10 +306,6 @@ import { API_BASE } from '../../lib/api';
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
transition: all 0.15s ease;
}
@ -426,10 +404,7 @@ import { API_BASE } from '../../lib/api';
/* Phase Flow */
.phase-config {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 1.5rem;
}
.phase-flow {
@ -597,7 +572,7 @@ import { API_BASE } from '../../lib/api';
container.innerHTML = methods.map(m => {
const meta = methodIcons[m.name] || { icon: 'icon-vote-cast', color: 'var(--color-primary)' };
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};">
<svg class="icon"><use href="#${meta.icon}"/></svg>
</div>