Skip to content

feat(home): Google-style search pill in the header (icon-only filters) #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
p4gs merged 1 commit into from
Jun 2, 2026
Merged

feat(home): Google-style search pill in the header (icon-only filters) #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 105 additions & 32 deletions docs/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,24 +305,27 @@ body {

/* ============================================================
Search + filter
Desktop: sits INSIDE the header band — overlaid in the centre between the
logo and nav, at the header's own 64px height so the header does NOT grow.
Transparent (the header's frosted glass is the backdrop); compact + stacked
(search on top, filter row beneath). Control sizes are in the min-width:641px
block below. NOTE: kept a sibling of the header, not a child — the header's
backdrop-filter would otherwise trap this fixed element and break the mobile
bottom island.
Desktop (min-width:641px block below): a Google-style search pill that sits
inside the header band — logo on the left, the pill to its right at the same
height, filters as icon-only buttons inside the pill's right edge (split off
by a vertical divider). The bar overlays the header at its own 64px height so
the header does NOT grow. Aligned to the header .container (same max-width +
padding) so the pill lands cleanly between the logo and the nav.
NOTE: kept a sibling of the header, not a child — the header's backdrop-filter
would otherwise trap this fixed element and break the mobile bottom island.
============================================================ */
.floating-bar {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 64px; /* match header — a band, not extra height */
width: min(460px, calc(100vw - 500px)); /* stay clear of the logo (left) and nav (right) */
z-index: 101; /* above the header so the controls are clickable */
left: 0;
right: 0;
margin: 0 auto;
max-width: var(--max-width); /* align to the header .container */
padding: 0 var(--space-lg); /* match .container horizontal padding */
height: 64px; /* match header — a band, not extra height */
z-index: 101; /* above the header so the controls are clickable */
display: flex;
align-items: center; /* vertically centre the stacked block in the band */
align-items: center;
}

.floating-bar-inner {
Expand Down Expand Up @@ -557,35 +560,104 @@ body {
}

/* ============================================================
Desktop-only: shrink the search + filter controls so the stacked block fits
inside the header's 64px band. Scoped to >=641px so the comfortable base
sizes (incl. the iOS-safe 16px search input) still apply on mobile.
Desktop (>=641px): Google-style search pill in the header.
One row — [magnifier] search input … | filter icons. The pill is reserved
into the centre of the header by margins that clear the logo (left) and nav
(right). Scoped to >=641px so the mobile bottom island (base + max-width:640)
is untouched, incl. its full text labels and iOS-safe 16px input.
============================================================ */
@media (min-width: 641px) {
.floating-search input {
padding: 4px 10px 4px 28px;
font-size: 13px;
border-radius: 7px;
/* The pill */
.floating-bar-inner {
flex-direction: row;
align-items: center;
gap: 0;
width: auto;
height: 40px; /* proportional to the 32px logo */
flex: 1;
margin-left: 185px; /* clear the logo (~169px + gap) */
margin-right: 284px; /* clear the nav (~268px + gap) */
padding: 0 4px 0 0;
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border);
border-radius: 22px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.floating-bar-inner:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-muted);
}

/* Search input — transparent, fills the pill; magnifier inside-left */
.floating-search {
flex: 1;
min-width: 0;
}
.floating-search svg {
width: 14px;
height: 14px;
left: 9px;
left: 16px;
width: 16px;
height: 16px;
}
.floating-search input {
height: 36px;
padding: 0 10px 0 42px;
background: transparent;
border: none;
border-radius: 0;
font-size: 14px;
}
.floating-search input:focus {
border: none;
box-shadow: none; /* focus ring lives on the pill */
}

/* Filter icons, split from the input by a vertical divider */
.floating-filters {
flex: 0 0 auto;
width: auto;
justify-content: flex-end;
gap: 1px;
}
.floating-filters::before {
content: "";
flex: 0 0 auto;
width: 1px;
height: 22px;
background: var(--color-border);
margin: 0 6px;
}

/* Icon-only filter buttons — no text labels, no chevrons, round hover */
.filter-btn {
padding: 2px 8px;
font-size: 0.7rem;
gap: 3px;
border-radius: 14px;
padding: 7px;
gap: 0;
border: none;
border-radius: 50%;
}
.filter-btn .filter-label,
.filter-btn .chevron {
display: none;
}
.filter-btn:hover {
background: var(--color-bg-elevated);
border: none;
}
.filter-btn.filter-active {
background: var(--color-primary-muted);
}

/* View toggle: plain round icons, no segmented container */
.view-toggle {
padding: 1px;
border-radius: 14px;
background: transparent;
border: none;
padding: 0;
gap: 1px;
border-radius: 0;
}
.view-btn {
width: 24px;
height: 20px;
border-radius: 11px;
width: 30px;
height: 30px;
border-radius: 50%;
}
}

Expand Down Expand Up @@ -1512,6 +1584,7 @@ body {
transform: none; /* reset desktop centering translate */
height: auto; /* reset desktop 64px band height */
margin: 0;
padding: 0; /* reset the desktop container-padding (0 var(--space-lg)) */
border: 1px solid var(--color-border);
border-radius: 14px;
/* Elevated surface (light: #fff vs the page's #f8f9fa; dark: #242424 vs #0d0d0d)
Expand Down
16 changes: 8 additions & 8 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,9 @@ <h2 class="demo-heading">See it in action</h2>
<input type="text" id="search" placeholder="Search guides...">
</div>
<div class="floating-filters">
<button class="filter-btn sort-btn filter-active" id="sort-btn" aria-label="Sort A to Z">
<button class="filter-btn sort-btn filter-active" id="sort-btn" aria-label="Sort A to Z" title="Sort A–Z">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5h10M11 9h7M11 13h4M3 17l4 4 4-4M7 3v18"></path></svg>
A-Z
<span class="filter-label">A-Z</span>
</button>
<div class="view-toggle">
<button class="view-btn active" data-view="card" aria-label="Card view">
Expand All @@ -77,9 +77,9 @@ <h2 class="demo-heading">See it in action</h2>
</div>

<div class="filter-dropdown" id="filter-category">
<button class="filter-btn">
<button class="filter-btn" title="System type">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect></svg>
System Type
<span class="filter-label">System Type</span>
<svg class="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="filter-dropdown-menu">
Expand All @@ -95,9 +95,9 @@ <h2 class="demo-heading">See it in action</h2>
</div>

<div class="filter-dropdown" id="filter-status">
<button class="filter-btn">
<button class="filter-btn" title="Guide status">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
Guide Status
<span class="filter-label">Guide Status</span>
<svg class="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="filter-dropdown-menu">
Expand All @@ -109,9 +109,9 @@ <h2 class="demo-heading">See it in action</h2>
</div>

<div class="filter-dropdown" id="filter-packs">
<button class="filter-btn">
<button class="filter-btn" title="Code packs">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
Code Packs
<span class="filter-label">Code Packs</span>
<svg class="chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div class="filter-dropdown-menu">
Expand Down
Loading