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: standardize pills and tags

Browse source
This commit is contained in:
Marco Allegretti 2026-01-30 12:59:56 +01:00
parent 4a9e0e1791
commit d33743580d
4 changed files with 26 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -847,6 +847,24 @@
white-space: nowrap; white-space: nowrap;
} }
.ui-pill-core {
background: color-mix(in srgb, var(--color-info) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--color-info) 35%, transparent);
color: var(--color-info);
}
.ui-pill-disabled {
background: color-mix(in srgb, var(--color-error) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--color-error) 35%, transparent);
color: var(--color-error);
}
.ui-pill-recommended {
background: color-mix(in srgb, var(--color-primary) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
color: var(--color-primary);
}
.loading-small, .empty-small, .error-small { .loading-small, .empty-small, .error-small {
color: var(--color-text-muted); color: var(--color-text-muted);
font-size: 0.875rem; font-size: 0.875rem;

15
frontend/src/pages/admin/invitations.astro
View file

@ -148,10 +148,10 @@ import { API_BASE as apiBase } from '../../lib/api';
<div class="inv-main"> <div class="inv-main">
<code class="inv-code">${inv.code}</code> <code class="inv-code">${inv.code}</code>
<div class="inv-meta"> <div class="inv-meta">
${inv.email ? `<span class="tag email-tag">📧 ${inv.email}</span>` : ''} ${inv.email ? `<span class="ui-badge email-tag">📧 ${inv.email}</span>` : ''}
${inv.community_name ? `<span class="tag community-tag">🏘️ ${inv.community_name}</span>` : ''} ${inv.community_name ? `<span class="ui-badge community-tag">🏘️ ${inv.community_name}</span>` : ''}
<span class="tag uses-tag">${inv.uses_count}/${inv.max_uses || '∞'} uses</span> <span class="ui-badge uses-tag">${inv.uses_count}/${inv.max_uses || '∞'} uses</span>
${inv.expires_at ? `<span class="tag expires-tag">⏰ ${new Date(inv.expires_at).toLocaleDateString()}</span>` : ''} ${inv.expires_at ? `<span class="ui-badge expires-tag">⏰ ${new Date(inv.expires_at).toLocaleDateString()}</span>` : ''}
</div> </div>
<div class="inv-creator"> <div class="inv-creator">
Created by ${inv.created_by_username || 'Unknown'} on ${new Date(inv.created_at).toLocaleDateString()} Created by ${inv.created_by_username || 'Unknown'} on ${new Date(inv.created_at).toLocaleDateString()}
@ -300,13 +300,6 @@ import { API_BASE as apiBase } from '../../lib/api';
gap: 0.5rem; gap: 0.5rem;
} }
.tag {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
background: var(--color-bg);
}
.inv-creator { .inv-creator {
font-size: 0.8125rem; font-size: 0.8125rem;
color: var(--color-text-muted); color: var(--color-text-muted);

19
frontend/src/pages/admin/plugins.astro
View file

@ -100,21 +100,6 @@ import { API_BASE } from '../../lib/api';
gap: 0.5rem; gap: 0.5rem;
} }
.plugin-info h3 .badge {
font-size: 0.7rem;
padding: 0.15rem 0.5rem;
border-radius: 1rem;
background: var(--color-primary);
color: var(--color-primary-contrast);
font-weight: normal;
}
.plugin-info h3 .badge.core {
background: var(--color-bg);
border: 1px solid var(--color-border);
color: var(--color-text-muted);
}
.plugin-info p { .plugin-info p {
margin: 0; margin: 0;
color: var(--color-text-muted); color: var(--color-text-muted);
@ -226,8 +211,8 @@ import { API_BASE } from '../../lib/api';
<div class="plugin-info"> <div class="plugin-info">
<h3> <h3>
${plugin.display_name} ${plugin.display_name}
${isCore ? '<span class="badge core">Core</span>' : ''} ${isCore ? '<span class="ui-pill ui-pill-core">Core</span>' : ''}
${plugin.is_recommended && !isCore ? '<span class="badge">Recommended</span>' : ''} ${plugin.is_recommended && !isCore ? '<span class="ui-pill ui-pill-recommended">Recommended</span>' : ''}
</h3> </h3>
<p>${plugin.description || 'No description'}</p> <p>${plugin.description || 'No description'}</p>
</div> </div>

14
frontend/src/pages/communities/[slug]/plugins.astro
View file

@ -186,8 +186,8 @@ const { slug } = Astro.params;
<div class="plugin-title"> <div class="plugin-title">
<h3>${escapeHtml(p.name)}</h3> <h3>${escapeHtml(p.name)}</h3>
<span class="version">v${escapeHtml(p.version)}</span> <span class="version">v${escapeHtml(p.version)}</span>
${isCore ? `<span class="ui-pill tag-core">core</span>` : ''} ${isCore ? `<span class="ui-pill ui-pill-core">core</span>` : ''}
${disabledGlobally ? `<span class="ui-pill tag-disabled">disabled globally</span>` : ''} ${disabledGlobally ? `<span class="ui-pill ui-pill-disabled">disabled globally</span>` : ''}
</div> </div>
<div class="plugin-controls"> <div class="plugin-controls">
@ -433,16 +433,6 @@ const { slug } = Astro.params;
font-family: monospace; font-family: monospace;
} }
.tag-core {
background: var(--color-info-muted);
color: var(--color-info);
}
.tag-disabled {
background: var(--color-error-muted);
color: var(--color-error);
}
.desc { .desc {
color: var(--color-text-muted); color: var(--color-text-muted);
margin-bottom: 0.75rem; margin-bottom: 0.75rem;