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-hero primitive

Browse source
This commit is contained in:
Marco Allegretti 2026-01-29 21:40:25 +01:00
parent 40358ca7fa
commit 8ca2d04051
6 changed files with 55 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -503,6 +503,42 @@
margin: 0; margin: 0;
} }
.ui-hero {
padding: var(--ui-hero-pad, 1.25rem);
margin-bottom: var(--ui-hero-mb, 1rem);
}
.ui-hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.ui-hero-title {
margin: 0;
font-size: 2.125rem;
letter-spacing: -0.02em;
}
.ui-hero-title h1 {
margin: 0;
font-size: inherit;
letter-spacing: inherit;
}
.ui-hero-subtitle {
margin: 0.25rem 0 0;
color: var(--color-text-muted);
}
@media (max-width: 640px) {
.ui-hero-title {
font-size: 1.75rem;
}
}
.ui-auth-page { .ui-auth-page {
display: flex; display: flex;
justify-content: center; justify-content: center;

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

@ -50,9 +50,9 @@ const { slug } = Astro.params;
const communityDesc = community.description ? escapeHtml(community.description) : ''; const communityDesc = community.description ? escapeHtml(community.description) : '';
container.innerHTML = ` container.innerHTML = `
<div class="community-hero ui-card ui-card-glass"> <div class="community-hero ui-hero ui-card ui-card-glass">
<div class="hero-top"> <div class="ui-hero-top">
<div class="hero-title"> <div class="ui-hero-title">
<h1>${communityName}</h1> <h1>${communityName}</h1>
<div class="hero-slug">/${communitySlug}</div> <div class="hero-slug">/${communitySlug}</div>
</div> </div>
@ -404,22 +404,7 @@ const { slug } = Astro.params;
<style> <style>
.community-hero { .community-hero {
padding: 1.25rem; --ui-hero-mb: 1.25rem;
margin-bottom: 1.25rem;
}
.hero-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.hero-title h1 {
margin: 0;
font-size: 2.125rem;
letter-spacing: -0.02em;
} }
.hero-slug { .hero-slug {
@ -457,12 +442,6 @@ const { slug } = Astro.params;
text-transform: uppercase; text-transform: uppercase;
} }
@media (max-width: 640px) {
.hero-title h1 {
font-size: 1.75rem;
}
}
.edit-modal { .edit-modal {
position: fixed; position: fixed;
inset: 0; inset: 0;

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

@ -8,11 +8,11 @@ const { slug } = Astro.params;
<Layout title="Community Plugins"> <Layout title="Community Plugins">
<section class="ui-page"> <section class="ui-page">
<div class="ui-container"> <div class="ui-container">
<div class="hero ui-card ui-card-glass"> <div class="ui-hero ui-card ui-card-glass">
<div class="hero-top"> <div class="ui-hero-top">
<div> <div>
<h1 class="hero-title">Plugins</h1> <h1 class="ui-hero-title">Plugins</h1>
<p class="hero-subtitle">Manage plugins for this community</p> <p class="ui-hero-subtitle">Manage plugins for this community</p>
</div> </div>
<a class="ui-btn ui-btn-secondary" href={`/communities/${slug}`}>Back</a> <a class="ui-btn ui-btn-secondary" href={`/communities/${slug}`}>Back</a>
</div> </div>
@ -372,30 +372,6 @@ const { slug } = Astro.params;
</script> </script>
<style> <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);
}
.community-badge { .community-badge {
padding: 1rem 1.1rem; padding: 1rem 1.1rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;

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

@ -8,11 +8,11 @@ const { slug } = Astro.params;
<Layout title="Proposals"> <Layout title="Proposals">
<section class="ui-page"> <section class="ui-page">
<div class="ui-container"> <div class="ui-container">
<div class="hero ui-card ui-card-glass"> <div class="ui-hero ui-card ui-card-glass">
<div class="hero-top"> <div class="ui-hero-top">
<div> <div>
<h1 class="hero-title">Proposals</h1> <h1 class="ui-hero-title">Proposals</h1>
<p class="hero-subtitle">Proposals and decisions</p> <p class="ui-hero-subtitle">Proposals and decisions</p>
</div> </div>
<a href={`/communities/${slug}/proposals/new`} class="ui-btn ui-btn-primary" id="create-btn" style="display: none;">+ New Proposal</a> <a href={`/communities/${slug}/proposals/new`} class="ui-btn ui-btn-primary" id="create-btn" style="display: none;">+ New Proposal</a>
</div> </div>
@ -238,30 +238,6 @@ const { slug } = Astro.params;
</script> </script>
<style> <style>
.hero {
padding: 1.25rem;
margin-bottom: 1rem;
}
.hero-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
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-kpis { .hero-kpis {
margin-top: 1rem; margin-top: 1rem;
} }

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

@ -7,11 +7,11 @@ import { API_BASE as apiBase } from '../lib/api';
<Layout title="All Proposals"> <Layout title="All Proposals">
<section class="ui-page"> <section class="ui-page">
<div class="ui-container"> <div class="ui-container">
<div class="hero ui-card ui-card-glass"> <div class="ui-hero ui-card ui-card-glass">
<div class="hero-top"> <div class="ui-hero-top">
<div> <div>
<h1 class="hero-title">All Proposals</h1> <h1 class="ui-hero-title">All Proposals</h1>
<p class="hero-subtitle">Browse proposals across all communities</p> <p class="ui-hero-subtitle">Browse proposals across all communities</p>
</div> </div>
</div> </div>
</div> </div>
@ -141,30 +141,6 @@ import { API_BASE as apiBase } from '../lib/api';
</script> </script>
<style> <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);
}
.toolbar { .toolbar {
padding: 1rem; padding: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;

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

@ -156,9 +156,9 @@ const proposalId = id ?? '';
const safeMethodLabel = escapeHtml(methodKey.replace('_', ' ')); const safeMethodLabel = escapeHtml(methodKey.replace('_', ' '));
container.innerHTML = ` container.innerHTML = `
<div class="proposal-hero ui-card ui-card-glass"> <div class="proposal-hero ui-hero ui-card ui-card-glass">
<div class="hero-top"> <div class="ui-hero-top">
<div class="hero-title"> <div class="ui-hero-title">
<h1>${safeTitle}</h1> <h1>${safeTitle}</h1>
<div class="hero-meta"> <div class="hero-meta">
<span class="ui-pill status-${statusKey}">${escapeHtml(statusKey)}</span> <span class="ui-pill status-${statusKey}">${escapeHtml(statusKey)}</span>
@ -663,25 +663,6 @@ const proposalId = id ?? '';
display: none; display: none;
} }
.proposal-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 h1 {
margin: 0;
font-size: 2.125rem;
letter-spacing: -0.02em;
}
.hero-meta { .hero-meta {
display: flex; display: flex;
align-items: baseline; align-items: baseline;