mirror of
https://codeberg.org/likwid/likwid.git
synced 2026-02-09 21:13:09 +00:00
ux: refactor dashboard to shared ui primitives
This commit is contained in:
parent
09efdab83b
commit
ee96360354
1 changed files with 4 additions and 32 deletions
|
|
@ -150,7 +150,7 @@ import { API_BASE as apiBase } from '../lib/api';
|
||||||
const safeEmail = escapeHtml(user.email || '');
|
const safeEmail = escapeHtml(user.email || '');
|
||||||
|
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div class="hero ui-card ui-card-glass">
|
<div class="hero ui-card ui-card-glass ui-card-pad-md">
|
||||||
<div class="hero-top">
|
<div class="hero-top">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="hero-title">Welcome, ${safeName}!</h1>
|
<h1 class="hero-title">Welcome, ${safeName}!</h1>
|
||||||
|
|
@ -238,7 +238,7 @@ import { API_BASE as apiBase } from '../lib/api';
|
||||||
</div>
|
</div>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
<div class="account ui-card">
|
<div class="account ui-card ui-card-pad-md">
|
||||||
<div class="account-row">
|
<div class="account-row">
|
||||||
<div>
|
<div>
|
||||||
<div class="account-title">Account</div>
|
<div class="account-title">Account</div>
|
||||||
|
|
@ -290,9 +290,9 @@ import { API_BASE as apiBase } from '../lib/api';
|
||||||
let safeLink = String(a.link || '#');
|
let safeLink = String(a.link || '#');
|
||||||
if (!safeLink.startsWith('/')) safeLink = '#';
|
if (!safeLink.startsWith('/')) safeLink = '#';
|
||||||
return `
|
return `
|
||||||
<a href="${safeLink}" class="activity-item">
|
<a href="${safeLink}" class="list-item">
|
||||||
<span class="ui-pill type-${typeClass}">${type}</span>
|
<span class="ui-pill type-${typeClass}">${type}</span>
|
||||||
<span class="activity-title">${safeTitle}</span>
|
<span class="item-title">${safeTitle}</span>
|
||||||
</a>
|
</a>
|
||||||
`;
|
`;
|
||||||
}).join('');
|
}).join('');
|
||||||
|
|
@ -377,7 +377,6 @@ import { API_BASE as apiBase } from '../lib/api';
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.hero {
|
.hero {
|
||||||
padding: 1.25rem;
|
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -423,10 +422,6 @@ import { API_BASE as apiBase } from '../lib/api';
|
||||||
min-height: 72px;
|
min-height: 72px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.account {
|
|
||||||
padding: 1rem 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.account-row {
|
.account-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -477,32 +472,9 @@ import { API_BASE as apiBase } from '../lib/api';
|
||||||
gap: 0.35rem;
|
gap: 0.35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activity-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
border-bottom: 1px solid var(--color-border);
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--color-text);
|
|
||||||
transition: color 140ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.activity-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.activity-item:hover .activity-title {
|
|
||||||
color: var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.type-proposal { background: var(--color-success); color: var(--color-on-primary); }
|
.type-proposal { background: var(--color-success); color: var(--color-on-primary); }
|
||||||
.type-community { background: var(--color-secondary); color: var(--color-on-primary); }
|
.type-community { background: var(--color-secondary); color: var(--color-on-primary); }
|
||||||
|
|
||||||
.activity-title {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
|
.status-draft { background: var(--color-neutral-muted); color: var(--color-on-primary); }
|
||||||
.status-discussion { background: var(--color-info); color: var(--color-on-primary); }
|
.status-discussion { background: var(--color-info); color: var(--color-on-primary); }
|
||||||
.status-voting { background: var(--color-success); color: var(--color-on-primary); }
|
.status-voting { background: var(--color-success); color: var(--color-on-primary); }
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue