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

ui: centralize panel primitives

Browse source
This commit is contained in:
Marco Allegretti 2026-01-29 17:31:40 +01:00
parent c7791611a5
commit f566583412
5 changed files with 77 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
frontend/src/components/ui/DesignSystemStyles.astro
View file

@ -200,6 +200,71 @@
margin-bottom: 1.5rem;
}
:where(.panels, .proposal-panels) {
display: grid;
gap: 1rem;
}
.panel {
padding: 0;
overflow: hidden;
}
:where(.panel > summary, .panel-summary) {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
gap: 1rem;
user-select: none;
}
.panel > summary {
padding: 1rem 1.25rem;
align-items: baseline;
border-bottom: 1px solid var(--color-border);
}
.panel > summary.panel-summary {
padding: 1rem 1.1rem;
align-items: center;
border-bottom: none;
}
:where(.panel > summary, .panel-summary)::-webkit-details-marker {
display: none;
}
.panel[open] > summary {
background: rgba(255, 255, 255, 0.03);
}
.panel-title {
font-weight: 700;
letter-spacing: -0.01em;
}
.panel-meta {
color: var(--color-text-muted);
font-size: 0.875rem;
}
.panel-hint {
color: var(--color-text-muted);
font-size: 0.8125rem;
}
.panel-body {
border-top: 1px solid var(--color-border);
padding: 1rem 1.1rem 1.1rem;
}
.panel-actions {
margin-top: 0.75rem;
display: flex;
justify-content: flex-end;
}
.ui-page-title h1 {
font-size: 2rem;
font-weight: 700;
@ -423,5 +488,14 @@
.ui-actions {
justify-content: flex-start;
}
:where(.panel > summary, .panel-summary) {
flex-direction: column;
align-items: flex-start;
}
.panel-actions {
justify-content: flex-start;
}
}
</style>

52
frontend/src/pages/communities/[slug]/index.astro
View file

@ -457,62 +457,10 @@ const { slug } = Astro.params;
text-transform: uppercase;
}
.panels {
display: grid;
gap: 1rem;
}
.panel {
overflow: hidden;
}
.panel summary {
cursor: pointer;
list-style: none;
padding: 1rem 1.25rem;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid var(--color-border);
}
.panel summary::-webkit-details-marker {
display: none;
}
.panel[open] summary {
background: rgba(255, 255, 255, 0.03);
}
.panel-hint {
color: var(--color-text-muted);
font-size: 0.8125rem;
}
.panel-body {
padding: 1rem 1.25rem 1.25rem;
}
.panel-actions {
margin-top: 0.75rem;
display: flex;
justify-content: flex-end;
}
@media (max-width: 640px) {
.hero-title h1 {
font-size: 1.75rem;
}
.panel summary {
flex-direction: column;
align-items: flex-start;
}
.panel-actions {
justify-content: flex-start;
}
}
.edit-modal {

35
frontend/src/pages/dashboard.astro
View file

@ -311,41 +311,6 @@ import { API_BASE as apiBase } from '../lib/api';
text-transform: uppercase;
}
.panels {
display: grid;
gap: 1rem;
}
.panel {
padding: 0;
overflow: hidden;
}
.panel-summary {
list-style: none;
cursor: pointer;
padding: 1rem 1.1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
user-select: none;
}
.panel-summary::-webkit-details-marker {
display: none;
}
.panel-title {
font-weight: 700;
letter-spacing: -0.01em;
}
.panel-body {
border-top: 1px solid var(--color-border);
padding: 0.9rem 1.1rem 1.1rem;
}
.panel-content {
min-height: 72px;
}

35
frontend/src/pages/delegations.astro
View file

@ -400,41 +400,6 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
color: var(--color-text-muted);
}
.panel {
padding: 0;
overflow: hidden;
}
.panel-summary {
list-style: none;
cursor: pointer;
padding: 1rem 1.1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
user-select: none;
}
.panel-summary::-webkit-details-marker {
display: none;
}
.panel-title {
font-weight: 700;
letter-spacing: -0.01em;
}
.panel-meta {
color: var(--color-text-muted);
font-size: 0.875rem;
}
.panel-body {
border-top: 1px solid var(--color-border);
padding: 1rem 1.1rem 1.1rem;
}
@media (max-width: 640px) {
.delegate-card {
flex-direction: column;

42
frontend/src/pages/proposals/[id].astro
View file

@ -4,6 +4,7 @@ import Layout from '../../layouts/Layout.astro';
import { API_BASE as apiBase } from '../../lib/api';
import VotingResultsChart from '../../components/voting/VotingResultsChart.astro';
const { id } = Astro.params;
const proposalId = id ?? '';
---
<Layout title="Proposal">
@ -13,13 +14,13 @@ const { id } = Astro.params;
<div class="state-card ui-card"><p class="loading">Loading proposal…</p></div>
</div>
<div id="results-chart-host" class="results-chart-host" aria-hidden="true">
<VotingResultsChart proposalId={id} apiBase={apiBase} />
<VotingResultsChart proposalId={proposalId} apiBase={apiBase} />
</div>
</div>
</section>
</Layout>
<script define:vars={{ id, apiBase }}>
<script define:vars={{ id: proposalId, apiBase }}>
const token = localStorage.getItem('token');
let currentProposal = null;
let selectedOptions = new Set();
@ -604,43 +605,6 @@ const { id } = Astro.params;
margin-top: 0.5rem;
}
.proposal-panels {
display: grid;
gap: 1rem;
}
.panel {
overflow: hidden;
}
.panel summary {
cursor: pointer;
list-style: none;
padding: 1rem 1.25rem;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
border-bottom: 1px solid var(--color-border);
}
.panel summary::-webkit-details-marker {
display: none;
}
.panel[open] summary {
background: rgba(255, 255, 255, 0.03);
}
.panel-hint {
color: var(--color-text-muted);
font-size: 0.8125rem;
}
.panel-body {
padding: 1rem 1.25rem 1.25rem;
}
.author-actions-row {
display: flex;
gap: 0.5rem;