R7 Today tab implementation #1929

eric-gade · 2024-10-15T21:01:31Z

What does this PR do? 🛠️

Implements #1918

What does the reviewer need to know? 🤔

There is a bug with the radar "legend" and its sizing that we did not notice before. That will be addressed in #1932

Additionally, there are changes here to make the new "light" version of the accordion. We needed to add two new SVGs with the strokes at the primary color in order to get these to work properly, since the USWDS accordion uses background-image to display the + and - icons

Screenshots (if appropriate): 📸

Mobile

Tablet

Desktop

github-actions · 2024-10-15T21:01:48Z

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?

github-actions · 2024-10-15T21:07:34Z

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?

greg-does-weather

Code review looks good! 👍

Code Review Checklist

A checked item is either an assertion that I have tested this item or an indication that I have verified it does not apply to this pull request.

The Basics

Checks are passing
I read the code
I ran the code

Reliability

error handling exists for unusual or missing values

Accessibility

New pages have been added to cypress-axe file so that they will be tested with our automated accessibility testing
Meets WCAG 2.0 AA or 2.1 AA for Section 508 compliance

Device Matrix

firefox/gecko (renders correctly and user interactions work)
chrome/chromium/edge (renders correctly and user interactions work)
safari/webkit (renders correctly and user interactions work)
web page is readable and usable
- at 480px (mobile)
- at 640px (tablet)
- at 1024px (desktop)

partly-igor

A few design edits and a note on the radar ratios but generally looking good. If we want to hide the CMI legend until we figure out a fix, I think that would be fine.

partly-igor · 2024-10-16T21:26:03Z

web/themes/new_weather_theme/templates/layout/page--point.html.twig

-
-          {% include '@new_weather_theme/partials/satellite.html.twig' %}
+        <div class="wx-tab-container wx-focus-offset-205" id="today" role="tabpanel" aria-labelledby="current-conditions-tab-button" tabindex="0">
+          <div class="grid-container">


Let's add padding-x-0 tablet:padding-x-2 here so that on mobile the cards take up the full width

@eric-gade I think you may have missed this one

partly-igor · 2024-10-16T21:27:00Z

web/themes/new_weather_theme/templates/block/block--weathergov-current-conditions.html.twig

-        {% set message = "There was an error loading the current conditions." | t %}
-        {% include '@new_weather_theme/partials/uswds-alert.html.twig' with { 'level': "error", body: message } %}
-      {% else %}
+<h3 class="wx-visual-h2 text-normal text-primary-darker padding-x-2 tablet:padding-x-0 margin-top-3 margin-bottom-2">


Can change margin-top-3 to margin-top-0 here because the padding on the tab wrapper is duplicating the 3 units of space below the tabs.

partly-igor · 2024-10-16T21:27:59Z

web/themes/new_weather_theme/templates/partials/satellite.html.twig

-    <h3 class="wx-visual-h2 text-normal text-primary-darker padding-x-2 tablet:padding-x-0 margin-top-3 margin-bottom-2">{{ "Satellite" | t }}</h3>
-  </div>
+  <div class="margin-top-2" wx-outer-radar-container>
+    <h3 class="wx-visual-h2 text-normal text-primary-darker margin-top-3 margin-bottom-2">{{ "Satellite" | t }}</h3>


After removing the padding on mobile, needs to add padding-x-2 tablet:padding-x-0 so that this heading lines up with the others.

partly-igor · 2024-10-16T21:34:57Z

web/themes/new_weather_theme/assets/sass/components/radar.scss

+.wx-radar-container .cmi-map {
+  aspect-ratio: 3/2 !important;
+  height: auto !important;
+  width: auto !important;
+}
+
+.wx-radar-container.wx-radar-container__expanded .cmi-map {
+  aspect-ratio: 3/4 !important;
+  height: auto !important;
+  width: auto !important;
+}
+
 @include at-media("tablet") {
  .wx-radar-container {
    &.wx-radar-container__expanded {
-      aspect-ratio: 1/1;
+      aspect-ratio: 1/1 !important;
    }
  }
 }


As we talked about, the controls will go back to being absolutely conditioned so we don't have the cyan gap. We're adjusting the aspect ratios to include the controls in order to get it working correctly. I've adjusted the sizes slightly so that the ratios use integer numbers:

Breakpoint Collapsed Expanded

Mobile 1/1 3/5

Tablet 3/4 3/4

Desktop 1/1 3/2

* Renaming "current" to "today" * Pre-fetching daily forecast data in module * Updating new partials and adding summarized chart options * Updating layout for current cond/today forecast screensizes * Ensuring CC and summary forecast have same height dsktp * satellite/radar layout * Radar layout * Hide arrow for temp chart summary on desktop * Adding expand to radar at desktop breakpoint

* round to two decimals * show qpf chart and table regardless * update tests to require qpf table

Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 22.7.4 to 22.7.5. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: James Tranovich <james.tranovich@noaa.gov>

library version bump remove precip table Adding new accordion style and updating radar aspects library bump

Bumps [playwright](https://github.com/microsoft/playwright) from 1.47.2 to 1.48.0. - [Release notes](https://github.com/microsoft/playwright/releases) - [Commits](microsoft/playwright@v1.47.2...v1.48.0) --- updated-dependencies: - dependency-name: playwright dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [eslint-plugin-cypress](https://github.com/cypress-io/eslint-plugin-cypress) from 3.5.0 to 3.6.0. - [Release notes](https://github.com/cypress-io/eslint-plugin-cypress/releases) - [Commits](cypress-io/eslint-plugin-cypress@v3.5.0...v3.6.0) --- updated-dependencies: - dependency-name: eslint-plugin-cypress dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [stylelint](https://github.com/stylelint/stylelint) from 16.9.0 to 16.10.0. - [Release notes](https://github.com/stylelint/stylelint/releases) - [Changelog](https://github.com/stylelint/stylelint/blob/main/CHANGELOG.md) - [Commits](stylelint/stylelint@16.9.0...16.10.0) --- updated-dependencies: - dependency-name: stylelint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps [@playwright/test](https://github.com/microsoft/playwright) from 1.47.2 to 1.48.0. - [Release notes](https://github.com/microsoft/playwright/releases) - [Commits](microsoft/playwright@v1.47.2...v1.48.0) --- updated-dependencies: - dependency-name: "@playwright/test" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Co-authored-by: Igor Korenfeld <igor.korenfeld@gsa.gov>

partly-igor

A few minor things, but otherwise looks good to me.

partly-igor · 2024-10-17T15:05:43Z

web/themes/new_weather_theme/templates/partials/today-summary-forecast.html.twig

@@ -1,5 +1,5 @@
 {% set today = weather.daily[0] %}
-<h3 class="wx-visual-h2 text-normal text-primary-darker padding-x-2 tablet:padding-x-0 margin-top-3 margin-bottom-2">
+<h3 class="wx-visual-h2 text-normal text-primary-darker padding-x-2 tablet:padding-x-0 margin-top-0 margin-bottom-2">


This is good for desktop, but realized this needs the 3 units of margin on mobile, otherwise it gets too close to the current conditions section so for this one margin-top-3 desktop:margin-top-0

partly-igor · 2024-10-17T15:07:06Z

web/themes/new_weather_theme/templates/partials/daily-summary-list-item.html.twig

+                <span class="font-family-mono text-primary-dark usa-sr-only">
+                    {{ "Temperature" | t }}
+                </span>
+                <div class="position-sticky left-0 display-flex flex-justify padding-top-2 padding-bottom-105 desktop:display-none">


My mistake on this, we do need the arrows on desktop too because it doesn't the max amount of hours (only fits in the afternoon).

partly-igor · 2024-10-17T15:32:24Z

web/themes/new_weather_theme/assets/sass/components/radar.scss

-    &.wx-radar-container__expanded {
-      aspect-ratio: 1/1;
-    }
+      aspect-ratio: 3/4 !important;
  }


Mistake on my part, this should have been 4/3 so it's wider than it is tall in the collapsed state. Then 3/4 should be the ratio for the expanded, so then it becomes taller.

eric-gade requested review from greg-does-weather and partly-igor and removed request for greg-does-weather October 16, 2024 16:57

eric-gade marked this pull request as ready for review October 16, 2024 17:00

eric-gade requested a review from greg-does-weather October 16, 2024 17:02

greg-does-weather approved these changes Oct 16, 2024

View reviewed changes

partly-igor requested changes Oct 16, 2024

View reviewed changes

eric-gade and others added 10 commits October 17, 2024 08:21

remove adr workflows (#1922)

564f2f8

Round QPF chart to two decimals, and always show QPF chart/table (#1919)

2280669

* round to two decimals * show qpf chart and table regardless * update tests to require qpf table

Squashed again for signing

ff62def

library version bump remove precip table Adding new accordion style and updating radar aspects library bump

Minor tweaks

a41dc1f

Co-authored-by: Igor Korenfeld <igor.korenfeld@gsa.gov>

eric-gade force-pushed the eg-1918-today-tab-redesign branch from 59bbb2e to a41dc1f Compare October 17, 2024 12:24

eric-gade and others added 4 commits October 17, 2024 08:39

Attempt to update aspect ratios

eb3fa49

Fixing sumary forecast top margin

83b286e

Hiding CMI radar legend strip

b20b11f

Merge branch 'main' into eg-1918-today-tab-redesign

61a7ab0

eric-gade requested a review from partly-igor October 17, 2024 12:51

lints

35cbbb0

partly-igor approved these changes Oct 17, 2024

View reviewed changes

partly-igor reviewed Oct 17, 2024

View reviewed changes

eric-gade added 2 commits October 17, 2024 14:25

Updating aspect ratios

2a41a0f

Fixing container padding on mobile

85485b1

eric-gade added 6 commits October 17, 2024 14:40

Fixing padding nonsense on satellite

ec13bd7

Scroll arrow updates

ee004c9

Adding optional max temp/maxy for temp chart

c718e75

Merge branch 'main' into eg-1918-today-tab-redesign

7fea705

Fixing current <=> today in tests

cacf8dd

Fixing a11y issues with keyboard access in scrollable charts

f2a9448

eric-gade enabled auto-merge (squash) October 21, 2024 16:12

eric-gade and others added 5 commits October 21, 2024 12:32

Fixing cypress test assumptions

3fa41c8

typo

eae2abd

Even more typos!

cde2408

add 404 template

7461e3e

Fix url

147e2ef

eric-gade merged commit c812cb4 into main Oct 21, 2024
19 of 20 checks passed

eric-gade deleted the eg-1918-today-tab-redesign branch October 21, 2024 20:21

greg-does-weather mentioned this pull request Oct 22, 2024

404 Error pages #1741

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

R7 Today tab implementation #1929

R7 Today tab implementation #1929

eric-gade commented Oct 15, 2024 •

edited

Loading

github-actions bot commented Oct 15, 2024

github-actions bot commented Oct 15, 2024

greg-does-weather left a comment

partly-igor left a comment

partly-igor Oct 16, 2024

partly-igor Oct 17, 2024

partly-igor Oct 16, 2024

partly-igor Oct 16, 2024

partly-igor Oct 16, 2024

partly-igor left a comment

partly-igor Oct 17, 2024

partly-igor Oct 17, 2024

partly-igor Oct 17, 2024

R7 Today tab implementation #1929

R7 Today tab implementation #1929

Conversation

eric-gade commented Oct 15, 2024 • edited Loading

What does this PR do? 🛠️

What does the reviewer need to know? 🤔

Screenshots (if appropriate): 📸

github-actions bot commented Oct 15, 2024

github-actions bot commented Oct 15, 2024

greg-does-weather left a comment

Choose a reason for hiding this comment

Code Review Checklist

The Basics

Reliability

Accessibility

Device Matrix

partly-igor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

partly-igor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eric-gade commented Oct 15, 2024 •

edited

Loading