Skip to content

feat: redesign the weather overlay and add a temperature curve - #10

Open
lucasclgibson wants to merge 2 commits into
developmentfrom
feat/redesign-weather-overlay
Open

feat: redesign the weather overlay and add a temperature curve#10
lucasclgibson wants to merge 2 commits into
developmentfrom
feat/redesign-weather-overlay

Conversation

@lucasclgibson

Copy link
Copy Markdown

Keeps the four condition photographs and redesigns everything on top of them.

  • Removes <app-header>; the date line and brand logo are now plain markup fed by SDK helpers
  • Temperature becomes the hero (18rem landscape, 14rem portrait); glass cards and backdrop blurs are gone, replaced by a legibility scrim
  • Adds a smoothed temperature curve with six-hourly clock marks, a dotted "now" rule and high/low readings
  • Portrait stacks the curve under the temperature at full width
  • Long city names step down a size, with an ellipsis backstop, verified at all ten resolutions
  • Background is now set by class instead of body.style.backgroundImage; error and forecast visibility likewise

Bundle drops from 5.67 MB to 4.50 MB despite keeping the photographs, since the removed component graph outweighed them.

Note: the curve is forward-looking only. Showing the elapsed part of the day needs historical hours, which OpenWeatherMap puts behind One Call 3.0.

Replace the app-header component and glass cards with plain markup on a scrim,
so the condition photograph stays and the type carries the screen.

- Make the temperature the hero and give portrait a real layout
- Draw the day's temperature as a smoothed curve with clock marks
- Step long city names down a size so they cannot overflow
- Set the background by class rather than an inline style
@lucasclgibson lucasclgibson self-assigned this Sep 1, 2026
@vpetersson

Copy link
Copy Markdown

screenshots/no-api-key-2160x3840.webp

This should be an impossible state for a few reasons:

  1. We should serve cached data if we have data from the last few hours if the API is unreachable
  2. If we have no cached data (or if is too old), we should never emit ready_signal, and subsequently the page will never show. Later on, we can move this to abort_signal when that is released.

- Mirrors the calendar's clock: same formatting, same thirty second tick
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants