Feat/map selection highlight polish - #740
Merged
Merged
Conversation
…d hover affordance Fades the selected-building/character outline in via a paint-opacity transition instead of snapping instantly, swaps the hardcoded #ffb703 for the semantic accent color, and adds a dimmer hover-only preview ring on buildings/characters. Also fixes the hover rings rendering at full opacity instead of their intended dimmer resting state. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Adds a `compact` prop to the shared List component (tighter item padding/gap) and applies it to BuildingDetail's residents/workers lists, which are nested inside an already-dense detail panel. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011H8vdMQa7b5tHiz32seC6v
…l character tooltips - A character standing inside a building was triggering both the building's and the character's hover outline at once, since MapLibre fires per-layer mousemove handlers independently for overlapping features. The buildings-fill hover handler now checks whether the same point also hits the "characters" layer and defers to it, mirroring the existing click-priority pattern. - Character map tooltips now show a single status line - "[Activity] at [Building]", "[Activity] outside", "Walking to [Building]", or "Walking outside" - instead of separate Currently/Lives at/Works at lines. - CharacterPointFeatureSerializer exposes current_location_type and destination_location_type, resolving through Node.interior_space as well as Node.building so characters in interior rooms (not just at a building's entrance node) resolve to that building instead of reading as "outside". Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011H8vdMQa7b5tHiz32seC6v
Show "Currently" above Age/Sex in CharacterDetail, and reduce the non-modal DetailCard variant's max-width from 280px to 200px. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011H8vdMQa7b5tHiz32seC6v
Also read "home" instead of "house" when the character is at or walking to their own residence. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011H8vdMQa7b5tHiz32seC6v
Cursor is inherited, so without an explicit default, hovering any plain text (tooltip copy, list items, etc.) showed the browser's text-selection I-beam. Sets cursor: default on body and restores cursor: text only on actual text inputs/textareas/contenteditable elements. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011H8vdMQa7b5tHiz32seC6v
…ails button Header now has a target-icon button (secondary variant, same size as Close) that recenters the map on whichever entity is selected. Also fixes Button's icon prop rendering unsized (no CSS constrained its SVG), and adds a small Button size used for the tooltip's View details action.
…e 768px Most body text read as too large on wider viewports; drop the md/lg font-size escalation from the shared type scale so text stays the same size at every breakpoint instead of growing past 768px.
Extracts MapDetailCard from DetailCard so the docked panel portals into Map's own wrapper (via a new DetailSurface `container` prop) and positions relative to the map instead of the viewport, fixing it sitting far too high on the page. It stays docked top-right through a wider range of narrow viewports before falling back to the mobile bottom sheet, and sits closer to the zoom controls. DetailCard itself is now always a centered modal. Also gives the character/building lists in the detail card a stronger hover effect (List's existing background/border hover rule was nearly invisible). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011H8vdMQa7b5tHiz32seC6v
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.
This pull request introduces several UI and code structure improvements focused on detail card layouts, list compactness, and button styling, as well as refactors supporting components for greater flexibility and maintainability. The most notable changes are grouped below.
Detail Card and Panel Refactoring:
DetailCardto remove the"right"placement variant and extracted the header/content layout into a newDetailCardBodycomponent, simplifying the code and clarifying the separation between modal and docked panel variants. [1] [2] [3] [4] [5]DetailSurfaceto accept a customcontainerprop, allowing dialogs to be portaled into a specific DOM node (enabling map-relative positioning for docked panels). [1] [2]List Component and Styling Enhancements:
compactprop toListfor denser list layouts, and improved hover/select styling for better usability in nested panels (e.g., for residents/workers lists inBuildingDetail). [1] [2] [3] [4] [5] [6] [7] [8] [9]Button Component and Styling Updates:
sizeprop (with a newsmalloption) and improved icon sizing and alignment inButton, supporting more compact header buttons. [1] [2] [3] [4]Character and Building Detail Improvements:
CharacterDetailfor better clarity, and updated the tooltip test to reflect the new display logic. [1] [2] [3]Testing and Test Utilities:
FakeMaptest utility to supportsetPaintPropertyand configurablequeryRenderedFeaturesresults, enabling more robust and flexible map-related tests. [1] [2] [3]These changes collectively improve UI consistency, component reusability, and test coverage, while laying the groundwork for more flexible and maintainable detail panel layouts.