Add wind cardinal direction and update icon #1493
Conversation
|
@partly-igor Here are some screenshots from my first pass at implementation. The rotation looks okay to my not-very-discriminating eyes. But this is why I'm not a designer. 😂 With the addition of the two-character cardinal directions, the wind becomes two lines in the current observations in a lot of cases. Should we do something about that? |
There was a problem hiding this comment.
Good catch on the line breaks. I think the value tds have 2 units of right-padding by default. We could set that to 0 and that should give enough space for the text.
Suggesting an edit to the icon markup that should get us pretty consistent alignment and spacing, and get the arrow to be the right size:
| {# | ||
| The +180 here is to account for the fact that wind direction | ||
| is reported as a FROM direction, but our arrow points in the | ||
| TO direction. So we just need to spin it 'round. | ||
| #} | ||
| <svg role="img" aria-hidden="true" data-wind-direction class="width-2 height-2 margin-left-05 padding-2px" style="transform: rotate({{ wind.direction.angle + 180 }}deg);"> | ||
| <use xlink:href="{{ "/" ~ directory ~ "/assets/images/spritesheet.svg#wind_arrow_s" }}"></use> | ||
| <svg role="img" aria-hidden="true" data-wind-direction class="width-2 height-2 padding-2px" style="transform: rotate({{ wind.direction.angle + 180 }}deg);"> |
There was a problem hiding this comment.
It looks like putting padding on the actual svg element makes the vector smaller because the padding counts as part of the size, and makes it a little harder to align. So I suggest we warp the svg in a span that we can then add padding and alignment classes to:
| <svg role="img" aria-hidden="true" data-wind-direction class="width-2 height-2 padding-2px" style="transform: rotate({{ wind.direction.angle + 180 }}deg);"> | |
| <span class="display-flex flex-align-center padding-bottom-2px"> | |
| <svg role="img" aria-hidden="true" data-wind-direction class="width-2 height-2" style="transform: rotate({{ wind.direction.angle + 180 }}deg);"> |
|
This PR modifies theme Javascript or CSS assets but does not update the theme libraries file. Did you mean to update the appropriate version information in the libraries file? |
web/themes/new_weather_theme/templates/partials/observation-table.html.twig
Outdated
Show resolved
Hide resolved
web/themes/new_weather_theme/assets/sass/components/current-conditions.scss
Outdated
Show resolved
Hide resolved
|
Oh no, it was totally on purpose. I was just wrong. 😂 |
| <use xlink:href="{{ "/" ~ directory ~ "/assets/images/spritesheet.svg#wind_arrow_s" }}"></use> | ||
| </svg> | ||
| <span class="padding-x-05">{{ wind.direction.short }}</span> | ||
| <span class="display-flex flex-align-center"> |
There was a problem hiding this comment.
Just missing the margin-bottom-2px on the wrapper span
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
What does this PR do? 🛠️
This PR updates the wind direction icon and adds cardinal and ordinal (N, E, W, S, NE, NW, SE, SW) to wind direction. It also updates the spacing to match the design.
Screenshots (if appropriate): 📸
From current observations:
From an hourly table:
