Conversation
Fixes crosshare-org#573 The puzzle title was only visible inside the pause/begin overlay, not on the active puzzle page itself. This is a problem for puzzles where the title is a hint (e.g. 'Distant Lands'). Added a title bar below the TopBar that: - Shows the puzzle title when the puzzle is active (timer running or solved) - Is hidden when the pause/begin overlay is showing (redundant there) - Is hidden in Slate (embed) mode, where SlateHeader already shows the title - Truncates long titles with text-overflow: ellipsis to avoid multiline wrapping
|
Thanks for contributing! Can you post some screenshots of how this looks at different breakpoints? My strong inclination is to avoid adding a separate bar - especially on mobile where vertical space is often so constrained. |
Avoids adding an extra bar below the TopBar which takes mobile vertical space. The title is now rendered inside the existing header row using the built-in embedTitle styling (ellipsis truncation, flex-grow, hidden on narrow screens via media query). The TopBar already receives title as a prop (used in embed mode); adding a showTitle boolean lets the puzzle page opt into the same inline display when the puzzle is actively being solved. Changes: - TopBar: add showTitle prop; render title inside headerInner using embedTitle class when showTitle && !isEmbed && !isSlate - Puzzle: pass showTitle instead of rendering a separate div - Puzzle.module.scss: remove the standalone .puzzleTitle class
|
Thanks for the feedback, @mdirolf! I've reworked the implementation to avoid adding a separate bar. Instead of a new row below the TopBar, the title is now rendered inside the existing header row using the built-in
Regarding screenshots -- I don't have a running instance set up to capture them right now, but the change reuses the existing embed behavior (visible on desktop, hidden on narrow screens). You can preview by checking the updated diff. Happy to adjust further if you have a different placement in mind. |
|
Hi @mdirolf - reopening this since the rework is ready per your feedback. To summarize (as noted above): no separate bar was added. The puzzle title now renders inside the existing header row using the embedTitle styling that's already used for the embed case - no extra vertical space, ellipsis truncation for long titles, and it's hidden on narrow screens via the existing media query. I don't have a running local instance right now to capture breakpoint screenshots, but the implementation reuses the exact same markup/classes already shipped for embed mode. Happy to adjust if you'd prefer a different placement once you take a look at the diff. |
|
Please run it locally and post some screenshots of how it looks at the different breakpoints. Thanks! |
2 participants
Fixes #573
The puzzle title was only visible inside the pause/begin overlay, making it invisible while solving. This matters for puzzles where the title is a hint (e.g. 'Distant Lands').
Changes