feat(redesign): subpage hero header + iconpicker portal + tighter gaps
Three threads bundled:
- PageHeader.svelte upgraded to a glass-card subpage hero matching
the dashboard hero language, scaled down. New optional props (all
backward-compatible — old callers keep working): emphasis (italic
gradient word appended to title), crumb (uppercase mono kicker),
count + countLabel (right-side mono meter), pills (status chips
with tones: mint / sky / orchid / coral / citrus / primary).
- Providers page wired up first as the test surface: pulls live
online/offline/checking counts from the existing health probe and
shows a type-count pill. Locale keys added (en + ru) for the new
copy ('Service / providers' wordmark, longer description).
- IconPicker dropdown was suffering the same backdrop-filter
containing-block bug as IconGridSelect — repositioned popups
rendered inside any glass form panel got clipped or floated to
the bottom of the page. Now portals to <body> via the shared
$lib/portal action and uses Aurora glass styling end-to-end
(solid surface, gradient-active cell, glass-strong search input).
- Layout gaps tightened to match the mockup:
* sidebar→content horizontal gap is now 18px flat (was 50px:
the 18px shell-gap PLUS another 32px wrapper padding on each
child of main). Dropped px-4/md:px-8 from the topbar wrapper
and the per-page content wrapper — main's children sit flush
at the column boundary.
* topbar→content vertical gap reduced to 12px (was 16px / pt-4).
Build clean, 0 errors.
This commit is contained in:
@@ -1,51 +1,219 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
export interface HeaderPill {
|
||||
label: string;
|
||||
tone?: 'mint' | 'sky' | 'orchid' | 'coral' | 'citrus' | 'primary';
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
/** Italic-emphasized word(s) appended to the title with a gradient. */
|
||||
emphasis?: string;
|
||||
/** Body text under the title. */
|
||||
description?: string;
|
||||
/** Small label above the title (breadcrumb / section). */
|
||||
crumb?: string;
|
||||
/** Right-side count meter — e.g. "12 providers". */
|
||||
count?: number | string;
|
||||
/** Label under the count, e.g. "providers". */
|
||||
countLabel?: string;
|
||||
/** Status pills shown beneath the description. */
|
||||
pills?: HeaderPill[];
|
||||
/** Primary actions (buttons) — rendered top-right next to the meter. */
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
let { title, description = '', children }: Props = $props();
|
||||
let {
|
||||
title,
|
||||
emphasis = '',
|
||||
description = '',
|
||||
crumb = '',
|
||||
count,
|
||||
countLabel = '',
|
||||
pills = [],
|
||||
children,
|
||||
}: Props = $props();
|
||||
|
||||
const toneColors: Record<NonNullable<HeaderPill['tone']>, string> = {
|
||||
mint: 'var(--color-mint)',
|
||||
sky: 'var(--color-sky)',
|
||||
orchid: 'var(--color-orchid)',
|
||||
coral: 'var(--color-coral)',
|
||||
citrus: 'var(--color-citrus)',
|
||||
primary: 'var(--color-primary)',
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="page-header">
|
||||
<div class="animate-fade-slide-in">
|
||||
<h2 class="page-header__title">{title}</h2>
|
||||
{#if description}
|
||||
<p class="page-header__desc">{description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{#if children}
|
||||
<div class="animate-fade-slide-in" style="animation-delay: 60ms;">
|
||||
{@render children()}
|
||||
<section class="subpage-hero">
|
||||
<div class="subpage-hero__row">
|
||||
<div class="subpage-hero__main">
|
||||
{#if crumb}
|
||||
<div class="subpage-hero__crumb">{crumb}</div>
|
||||
{/if}
|
||||
<h2 class="subpage-hero__title">
|
||||
{title}{#if emphasis} <em>{emphasis}</em>{/if}
|
||||
</h2>
|
||||
{#if description}
|
||||
<p class="subpage-hero__sub">{description}</p>
|
||||
{/if}
|
||||
{#if pills.length > 0}
|
||||
<div class="subpage-hero__pills">
|
||||
{#each pills as p}
|
||||
<span class="subpage-hero__pill">
|
||||
<span class="subpage-hero__pill-dot" style="background: {toneColors[p.tone ?? 'primary']}"></span>
|
||||
{p.label}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="subpage-hero__side">
|
||||
{#if count !== undefined}
|
||||
<div class="subpage-hero__meter">
|
||||
<div class="subpage-hero__meter-value font-mono">{count}</div>
|
||||
{#if countLabel}
|
||||
<div class="subpage-hero__meter-label">{countLabel}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if children}
|
||||
<div class="subpage-hero__actions">{@render children()}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
.subpage-hero {
|
||||
position: relative;
|
||||
background: var(--color-glass);
|
||||
backdrop-filter: blur(28px) saturate(160%);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(160%);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 22px;
|
||||
box-shadow: var(--shadow-card);
|
||||
padding: 1.4rem 1.6rem 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.subpage-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
|
||||
opacity: 0.4;
|
||||
}
|
||||
.subpage-hero__row {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2rem;
|
||||
gap: 1rem;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.page-header__title {
|
||||
.subpage-hero__main { min-width: 0; flex: 1; }
|
||||
|
||||
.subpage-hero__crumb {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.62rem;
|
||||
color: var(--color-muted-foreground);
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.55rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.subpage-hero__title {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: 2.25rem;
|
||||
letter-spacing: -0.025em;
|
||||
font-size: 2.15rem;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--color-foreground);
|
||||
margin: 0;
|
||||
}
|
||||
.page-header__desc {
|
||||
font-size: 0.9rem;
|
||||
.subpage-hero__title em {
|
||||
font-style: italic;
|
||||
background: linear-gradient(135deg, var(--color-orchid), var(--color-primary) 60%, var(--color-sky));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.subpage-hero__sub {
|
||||
font-size: 0.88rem;
|
||||
color: var(--color-muted-foreground);
|
||||
margin: 0.55rem 0 0;
|
||||
line-height: 1.55;
|
||||
max-width: 60ch;
|
||||
}
|
||||
.subpage-hero__pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
margin-top: 0.85rem;
|
||||
}
|
||||
.subpage-hero__pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.22rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
background: var(--color-glass-strong);
|
||||
border: 1px solid var(--color-border);
|
||||
font-size: 0.7rem;
|
||||
color: var(--color-muted-foreground);
|
||||
font-weight: 500;
|
||||
}
|
||||
.subpage-hero__pill-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.subpage-hero__side {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.subpage-hero__meter {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.subpage-hero__meter-value {
|
||||
font-size: 2.15rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-foreground);
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
.subpage-hero__meter-label {
|
||||
font-size: 0.62rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.16em;
|
||||
color: var(--color-muted-foreground);
|
||||
margin-top: 0.4rem;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
}
|
||||
.subpage-hero__actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.subpage-hero { padding: 1.1rem 1.2rem 1.25rem; }
|
||||
.subpage-hero__title { font-size: 1.7rem; }
|
||||
.subpage-hero__row { flex-direction: column; align-items: stretch; }
|
||||
.subpage-hero__side { justify-content: space-between; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user