feat(home): Google-style search pill in the header (icon-only filters)#77
Merged
Conversation
Desktop: logo on the left, then a single-row search pill at the logo's height, with the filter controls as ICON-ONLY buttons inside the pill's right edge, split from the input by a vertical divider — like Google. - .floating-bar aligned to the header .container (same max-width + padding) so the pill lands between logo and nav; margins reserve the logo (185px) and nav (284px). Header stays 64px (band overlay, no growth). - @media (min-width:641px): .floating-bar-inner is the pill (40px, rounded, bordered, focus ring); search input transparent + flex; .floating-filters is the icon cluster with a ::before | divider; .filter-btn icon-only (labels + chevrons hidden, round hover); view toggle = plain round icons. - index.html: filter labels wrapped in <span class=filter-label> (hidden on desktop, shown on mobile) + title tooltips on the icon buttons. - Mobile bottom island untouched (base + max-width:640); added padding:0 reset so the container padding doesn't inset the island. Verified via Interceptor (real built site, both themes): header height 64px; pill sits between logo (ends 457) and nav (starts 1172), 40px centered; labels hidden; divider present; input transparent; dropdowns open un-clipped; mobile island geometry resets cleanly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Reworks the desktop header search to look like Google's: logo on the left, a single-row search pill to its right at the logo's height, and the filter controls as icon-only buttons inside the pill's right edge, separated from the input by a vertical divider.
How
.floating-baraligned to the header.container(samemax-width+ padding); the pill (.floating-bar-inner) reserves the logo (185px) and nav (284px) widths via margins so it lands cleanly between them. Header stays 64px (band overlay, no growth).@media (min-width: 641px): pill = 40px rounded/bordered with a focus ring; search input transparent +flex:1;.floating-filtersis the icon cluster with a::before|divider;.filter-btnicon-only (labels + chevrons hidden, round hover); view toggle = plain round icons.index.html: filter labels wrapped in<span class="filter-label">(hidden on desktop, shown on mobile) +titletooltips on the now-iconic buttons.max-width:640rules), plus apadding:0reset so the desktop container padding doesn't inset it.Verification (Interceptor, real built site, both themes)
|divider present; input transparent.System Typedropdown opens from its icon, 308px,overflow:visible, not clipped.Build verified (exit 0).