alexei.dolgolyov/notify-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 31 Wiki Activity

feat(redesign): subpage hero header + iconpicker portal + tighter gaps

Browse Source 
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:
Admin
2026-04-25 02:15:34 +03:00
parent 46a4a6ee29
commit 9733e5c122
6 changed files with 378 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/+layout.svelte
+2 -2
View File
@@ -607,7 +607,7 @@
style="padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));">
<!-- Always-visible topbar — search + utilities + primary CTA -->
<div class="topbar px-4 md:px-8">
<div class="topbar">
<div class="topbar-glass">
<button type="button" class="topbar-search" onclick={() => openSearch?.()}>
<NavIcon name="mdiMagnify" size={16} />
@@ -630,7 +630,7 @@
</div>
{#key page.url.pathname}
<div class="px-4 md:px-8 pb-4 md:pb-8 pt-4" in:fade={{ duration: 200, delay: 50 }}>
<div class="pb-4 md:pb-8" style="padding-top: 12px;" in:fade={{ duration: 200, delay: 50 }}>
{@render children()}
</div>
{/key}