Merge pull request #1906 from weather-gov/ik/scroll-button-contrast

Adjust scroll buttons and chart spacing
weather-gov · Oct 18, 2024 · a85cce5 · a85cce5
2 parents 582829a + e1eaf41
commit a85cce5
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 19 deletions.
diff --git a/web/themes/new_weather_theme/assets/css/styles.css b/web/themes/new_weather_theme/assets/css/styles.css
diff --git a/web/themes/new_weather_theme/assets/css/styles.css.map b/web/themes/new_weather_theme/assets/css/styles.css.map
diff --git a/web/themes/new_weather_theme/assets/sass/components/hourly-table.scss b/web/themes/new_weather_theme/assets/sass/components/hourly-table.scss
@@ -4,13 +4,18 @@
 /* Scroll button states
 ------------------------------------- */
 .wx-scroll-button {
+  background-color: color("gray-cool-20");
+  color: color("base-darker");
+
   &:hover {
     cursor: pointer;
-    background-color: color("base");
+    background-color: color("base-dark");
+    color: color("white");
   }
 
   &:active {
-    background-color: color("base-darker");
+    background-color: color("base-darkest");
+    color: color("white");
   }
 }
 

diff --git a/web/themes/new_weather_theme/templates/partials/hourly-charts.html.twig b/web/themes/new_weather_theme/templates/partials/hourly-charts.html.twig
@@ -9,10 +9,10 @@
 {% set windDirections = hours | map(h => h.windDirection) | json_encode %}
 
 <div class="wx-chart-wrapper margin-top-3 margin-bottom-4">
-  <span class="font-family-mono text-primary-dark">
-    {{ "Temperature" | t }}
-  </span>
-  <div class="position-sticky left-0 display-flex flex-justify padding-top-2 padding-bottom-105">
+  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-05">
+    {{ "Temperature" | t }} <span class="usa-sr-only"> {{ "chart" | t }} </span>
+  </h5>
+  <div class="position-sticky left-0 display-flex desktop:display-none flex-justify padding-top-2 padding-bottom-05">
     {% include "@new_weather_theme/partials/scroll-buttons.html.twig" %}
   </div>
   <div class="wx-chart wx-hourly-temp-chart-container margin-bottom-105 position-relative grid-col-12 width-full overflow-x-auto" data-times="{{ times }}" data-temps="{{ temps }}" data-feels-like="{{ feelsLike }}" data-sync-scrolling="true">
@@ -34,10 +34,10 @@
 </div>
 
 <div class="wx-chart-wrapper margin-bottom-2">
-  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-105">
+  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-05">
     {{ "Chance of precipitation" | t }} <span class="usa-sr-only"> {{ "chart" | t }} </span>
   </h5>
-  <div class="position-sticky left-0 display-flex flex-justify padding-top-2 padding-bottom-105">
+  <div class="position-sticky left-0 display-flex desktop:display-none flex-justify padding-top-2 padding-bottom-05">
     {% include "@new_weather_theme/partials/scroll-buttons.html.twig" %}
   </div>
   <div class="wx-chart wx-hourly-pops-chart-container position-relative grid-col-12 width-full overflow-x-auto" data-times="{{ times }}" data-pops="{{ pops }}" data-sync-scrolling="true">
@@ -49,10 +49,10 @@
 </div>
 
 <div class="wx-chart-wrapper margin-bottom-4">
-  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-105">
+  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-05">
     {{ "Wind" | t }} <span class="usa-sr-only"> {{ "chart" | t }} </span>
   </h5>
-  <div class="position-sticky left-0 display-flex flex-justify padding-top-2 padding-bottom-105">
+  <div class="position-sticky left-0 display-flex desktop:display-none flex-justify padding-top-2 padding-bottom-05">
     {% include "@new_weather_theme/partials/scroll-buttons.html.twig" %}
   </div>
   <div class="wx-chart wx-hourly-wind-chart-container margin-bottom-105 position-relative grid-col-12 width-full overflow-x-auto" data-times="{{ times }}" data-wind-speeds="{{ windSpeeds }}" data-wind-gusts="{{ windGusts }}" data-wind-directions="{{ windDirections }}" data-sync-scrolling="true">
@@ -73,10 +73,10 @@
 </div>
 
 <div class="wx-chart-wrapper margin-bottom-2">
-  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-105">
+  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-05">
     {{ "Humidity" | t }} <span class="usa-sr-only"> {{ "chart" | t }} </span>
   </h5>
-  <div class="position-sticky left-0 display-flex flex-justify padding-top-2 padding-bottom-105">
+  <div class="position-sticky left-0 display-flex desktop:display-none flex-justify padding-top-2 padding-bottom-05">
     {% include "@new_weather_theme/partials/scroll-buttons.html.twig" %}
   </div>
   <div class="wx-chart wx-hourly-humidity-chart-container position-relative grid-col-12 width-full overflow-x-auto" data-times="{{ times }}" data-humidity="{{ relativeHumidity }}" data-sync-scrolling="true">
@@ -87,11 +87,11 @@
   </div>
 </div>
 
-<div class="wx-chart-wrapper margin-bottom-2">
-  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-105">
+<div class="wx-chart-wrapper margin-bottom-0">
+  <h5 class="wx-mono-lg text-normal text-primary-dark margin-top-0 margin-bottom-05">
     {{ "Dewpoint" | t }} <span class="usa-sr-only"> {{ "chart" | t }} </span>
   </h5>
-  <div class="position-sticky left-0 display-flex flex-justify padding-top-2 padding-bottom-105">
+  <div class="position-sticky left-0 display-flex desktop:display-none flex-justify padding-top-2 padding-bottom-05">
     {% include "@new_weather_theme/partials/scroll-buttons.html.twig" %}
   </div>
   <div class="wx-chart wx-hourly-dewpoint-chart-container position-relative grid-col-12 width-full overflow-x-auto" data-times="{{ times }}" data-dewpoints="{{ dewpoints }}" data-sync-scrolling="true">

diff --git a/web/themes/new_weather_theme/templates/partials/scroll-buttons.html.twig b/web/themes/new_weather_theme/templates/partials/scroll-buttons.html.twig
@@ -1,13 +1,13 @@
 <div>
-  <button class="wx-scroll-button bg-gray-30 circle-5 border-0 text-white display-flex flex-align-center flex-justify-center padding-y-1px padding-x-05" data-direction="left" type="button" role="button">
+  <button class="wx-scroll-button circle-4 border-0 display-flex flex-align-center flex-justify-center padding-y-1px padding-x-05" data-direction="left" type="button" role="button">
     <span class="usa-sr-only">{{ "scroll left" | t }}</span>
     <svg class="usa-icon usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
       <use xlink:href="/themes/new_weather_theme/assets/images/uswds/sprite.svg#arrow_back"></use>
     </svg>
   </button>
 </div>
 <div>
-  <button class="wx-scroll-button bg-gray-30 circle-5 border-0 text-white display-flex flex-align-center flex-justify-center padding-y-1px padding-x-05" data-direction="right" type="button" role="button">
+  <button class="wx-scroll-button circle-4 border-0 display-flex flex-align-center flex-justify-center padding-y-1px padding-x-05" data-direction="right" type="button" role="button">
     <span class="usa-sr-only">{{ "scroll right" | t }}</span>
     <svg class="usa-icon usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
       <use xlink:href="/themes/new_weather_theme/assets/images/uswds/sprite.svg#arrow_forward"></use>