mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-10 05:23:09 +00:00
ux: fix delegations insights actions
This commit is contained in:
parent
ee96360354
commit
abc58bdcd0
1 changed files with 15 additions and 74 deletions
|
|
@ -7,20 +7,20 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
|
|||
<Layout title="Delegations - Likwid">
|
||||
<section class="ui-page">
|
||||
<div class="ui-container">
|
||||
<div class="hero ui-card ui-card-glass">
|
||||
<div class="hero-top">
|
||||
<div class="ui-hero ui-card ui-card-glass">
|
||||
<div class="ui-hero-top">
|
||||
<div>
|
||||
<h1 class="hero-title">Vote Delegations</h1>
|
||||
<p class="hero-subtitle">Delegate your voting power to trusted members</p>
|
||||
<h1 class="ui-hero-title">Vote Delegations</h1>
|
||||
<p class="ui-hero-subtitle">Delegate your voting power to trusted members</p>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<div class="ui-hero-actions">
|
||||
<a href="/communities" class="ui-btn ui-btn-secondary">Browse</a>
|
||||
<button class="ui-btn ui-btn-primary" id="new-delegation-btn" type="button" style="display:none;">New Delegation</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-kpis">
|
||||
<div class="hero-kpis-label">At a glance</div>
|
||||
<div class="ui-hero-kpis">
|
||||
<div class="ui-hero-kpis-label">At a glance</div>
|
||||
<div class="ui-kpis">
|
||||
<div class="ui-kpi">
|
||||
<div class="ui-kpi-value" id="kpi-outgoing">—</div>
|
||||
|
|
@ -156,49 +156,6 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
|
|||
</Layout>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-top {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin: 0;
|
||||
font-size: 2.125rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
margin: 0.25rem 0 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-kpis {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.hero-kpis-label {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.8125rem;
|
||||
margin-bottom: 0.5rem;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.auth-required {
|
||||
padding: 1rem 1.1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -373,26 +330,6 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
|
|||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.insights-body {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.insights-title {
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.insights-list {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.delegate-card {
|
||||
flex-direction: column;
|
||||
|
|
@ -518,14 +455,18 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
|
|||
|
||||
setBadge('badge-delegation-insights', bullets.length);
|
||||
|
||||
const actionsHtml = actions.map((a) => {
|
||||
return `<button type="button" class="ui-btn ui-btn-${a.kind}" data-insight-action="${escapeHtml(a.action)}">${escapeHtml(a.label)}</button>`;
|
||||
}).join('');
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="insights-body">
|
||||
<div class="insights-title">What stands out</div>
|
||||
<ul class="insights-list">
|
||||
<div class="ui-insights">
|
||||
<div class="ui-insights-title">What stands out</div>
|
||||
<ul class="ui-insights-list">
|
||||
${bullets.map((b) => `<li>${escapeHtml(b)}</li>`).join('')}
|
||||
</ul>
|
||||
<div class="panel-actions">
|
||||
${actions.map((a) => `<button type="button" class="ui-btn ui-btn-${a.kind}" data-insight-action="${a.action}">${escapeHtml(a.label)}</button>`).join('')}
|
||||
${actionsHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue