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: add ui-toolbar primitive

Browse source
This commit is contained in:
Marco Allegretti 2026-01-30 08:44:00 +01:00
parent 8ca2d04051
commit e83d7fcd1e
3 changed files with 37 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -539,6 +539,33 @@
}
}
.ui-toolbar {
padding: var(--ui-toolbar-pad, 1rem);
margin-bottom: var(--ui-toolbar-mb, 1rem);
}
.ui-toolbar-grid {
display: grid;
grid-template-columns: var(--ui-toolbar-cols, 1.5fr 1fr 1fr);
gap: 0.75rem;
align-items: end;
}
.ui-toolbar-label {
display: block;
font-size: 0.75rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 0.35rem;
}
@media (max-width: 768px) {
.ui-toolbar-grid {
grid-template-columns: 1fr;
}
}
.ui-auth-page {
display: flex;
justify-content: center;

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

@ -44,14 +44,14 @@ const { slug } = Astro.params;
</div>
</div>
<div class="toolbar ui-card">
<div class="toolbar-grid">
<div class="ui-toolbar ui-card">
<div class="ui-toolbar-grid">
<div>
<label class="toolbar-label" for="search-input">Search</label>
<label class="ui-toolbar-label" for="search-input">Search</label>
<input type="text" id="search-input" class="ui-input" placeholder="Search proposals…" />
</div>
<div>
<label class="toolbar-label" for="status-filter">Status</label>
<label class="ui-toolbar-label" for="status-filter">Status</label>
<select id="status-filter" class="ui-select">
<option value="">All statuses</option>
<option value="draft">Draft</option>
@ -61,7 +61,7 @@ const { slug } = Astro.params;
</select>
</div>
<div>
<label class="toolbar-label" for="sort-select">Sort</label>
<label class="ui-toolbar-label" for="sort-select">Sort</label>
<select id="sort-select" class="ui-select">
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
@ -250,33 +250,6 @@ const { slug } = Astro.params;
text-transform: uppercase;
}
.toolbar {
padding: 1rem;
margin-bottom: 1rem;
}
.toolbar-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 0.75rem;
align-items: end;
}
.toolbar-label {
display: block;
font-size: 0.75rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 0.35rem;
}
@media (max-width: 768px) {
.toolbar-grid {
grid-template-columns: 1fr;
}
}
.list {
display: grid;
gap: 1rem;

37
frontend/src/pages/proposals.astro
View file

@ -16,14 +16,14 @@ import { API_BASE as apiBase } from '../lib/api';
</div>
</div>
<div class="toolbar ui-card">
<div class="toolbar-grid">
<div class="ui-toolbar ui-card">
<div class="ui-toolbar-grid">
<div>
<label class="toolbar-label" for="search-input">Search</label>
<label class="ui-toolbar-label" for="search-input">Search</label>
<input type="text" id="search-input" class="ui-input" placeholder="Search proposals…" />
</div>
<div>
<label class="toolbar-label" for="status-filter">Status</label>
<label class="ui-toolbar-label" for="status-filter">Status</label>
<select id="status-filter" class="ui-select">
<option value="">All statuses</option>
<option value="draft">Draft</option>
@ -33,7 +33,7 @@ import { API_BASE as apiBase } from '../lib/api';
</select>
</div>
<div>
<label class="toolbar-label" for="sort-filter">Sort</label>
<label class="ui-toolbar-label" for="sort-filter">Sort</label>
<select id="sort-filter" class="ui-select">
<option value="newest">Newest first</option>
<option value="oldest">Oldest first</option>
@ -141,33 +141,6 @@ import { API_BASE as apiBase } from '../lib/api';
</script>
<style>
.toolbar {
padding: 1rem;
margin-bottom: 1rem;
}
.toolbar-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 0.75rem;
align-items: end;
}
.toolbar-label {
display: block;
font-size: 0.75rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-text-muted);
margin-bottom: 0.35rem;
}
@media (max-width: 768px) {
.toolbar-grid {
grid-template-columns: 1fr;
}
}
.list {
display: grid;
gap: 1rem;