explorer: slim in-map search overlay — single-line, top-right (Figma 222:456)#224
Open
rdhyee wants to merge 1 commit into
Open
explorer: slim in-map search overlay — single-line, top-right (Figma 222:456)#224rdhyee wants to merge 1 commit into
rdhyee wants to merge 1 commit into
Conversation
…ght (Figma 222:456) Replaces the multi-row ~480 px overlay on the upper-left with a slim single-line treatment in the upper-right of the map, matching Hana's Figma reference at node 222:456 (file Nqkuqh3Z4aqVh0nmwUAgKg). Changes: - `.map-search-overlay` now ~340 px × 32 px, `flex-direction: row`, positioned `top: 8px; right: 8px;` (was `left: 50px` and column). - New `#searchSubmitBtn` (SVG magnifier) calls `doSearch(_searchScope)`, same as Enter on `#sampleSearch`. - Scope buttons (`#searchAreaBtn` / `#searchWorldBtn`) and the help paragraph are preserved in the DOM but hidden via overlay-scoped CSS (`aria-hidden`, `tabindex=-1`). Existing handlers in zoomWatcher still bind. Area-scoped search remains reachable via the `?search_scope=area` URL hydration path — that path reads `_searchScope` directly and doesn't depend on the hidden buttons. - The 10-15 s first-search warning + isamplesorg#169 link are moved from a visible paragraph to a `title=` tooltip on the input. - `#searchResults` (aria-live results-count line) becomes a separate small floating element under the overlay (`.map-search-results-line`) with `:empty { display: none }` so it doesn't add a blank strip. - Sidebar `#sampleSearchSidebar` (M-1B mirror input) is untouched — the two-way mirror still works. Responsive: input width 260 → 160 → 120 at 600 px / 400 px breakpoints so the overlay never overlaps the right-edge Cesium credits column. Codex round-0 sign-off; one fix applied (real overlay height was ~36 px because of padding stack — tightened with `box-sizing: border-box; height: 32px` and matching child sizes). Verified locally: `quarto render` produces docs/explorer.html with the new layout; visual check in Chrome confirms top-right placement. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
Summary
Replaces the M-1A multi-row search overlay (~480 px × ~100 px on the upper-left of the map) with a slim single-line treatment in the upper-right, matching Hana's Figma reference at node
222:456(fileNqkuqh3Z4aqVh0nmwUAgKg).The earlier overlay was obscuring too much of the map. The new one is ~340 px × ~32 px, a plain input + magnifier-icon button.
What changed
.map-search-overlay:flex-direction: row,top: 8px; right: 8px(wasleft: 50px+ column), explicitheight: 32px+box-sizing: border-box.#searchSubmitBtn(inline-SVG magnifier) → callsdoSearch(_searchScope), same as Enter.#searchAreaBtn/#searchWorldBtn) and help paragraph preserved in DOM, hidden via overlay-scoped CSS so handlers still bind;?search_scope=areaURL hydration unaffected (it reads_searchScopedirectly).title=tooltip on the input.#searchResultsaria-live line lifted out of the overlay as.map-search-results-line, hidden when empty.#sampleSearchSidebar(M-1B mirror) untouched.Responsive: 260 / 160 / 120 px at 600 / 400 px breakpoints so the overlay never overlaps the right-edge Cesium credits column.
Out of scope (separate follow-up PRs)
#sampleCardonly..search-barCSS rules (orphan after this PR; harmless).Test plan
doSearch(_searchScope).#sampleSearch(two-way).?search_scope=areaURL still hydrates and routes area-scoped queries.Codex review round-0 with one fix applied (overlay height stack-correction).
🤖 Generated with Claude Code