diff --git a/assets/src/scripts/components/hydrograph/audible.js b/assets/src/scripts/components/hydrograph/audible.js
index 3c591ba68ad66e318ff1902e310a34630f167b9d..83c236e37a9fe7f17ba40663a636c70a52ea659d 100644
--- a/assets/src/scripts/components/hydrograph/audible.js
+++ b/assets/src/scripts/components/hydrograph/audible.js
@@ -122,7 +122,8 @@ export const audibleUI = function (elem) {
}
const button = elem.append('button')
- .classed('usa-button-secondary', true)
+ .classed('usa-button', true)
+ .classed('usa-button--outline', true)
.attr('ga-on', 'click')
.attr('ga-event-category', 'TimeSeriesGraph')
.html('Audible ');
diff --git a/assets/src/scripts/components/hydrograph/cursor.js b/assets/src/scripts/components/hydrograph/cursor.js
index 1c59e6823932f714dc62db1999c071626e4e00af..fecf46d9fab00ef7d1d4abdfcb51e20b6376ba63 100644
--- a/assets/src/scripts/components/hydrograph/cursor.js
+++ b/assets/src/scripts/components/hydrograph/cursor.js
@@ -109,6 +109,7 @@ export const cursorSlider = function (elem) {
wrap.append('input')
.attr('type', 'range')
.attr('id', 'cursor-slider')
+ .attr('class', 'usa-range')
.attr('aria-label', 'Hydrograph cursor slider')
.on('input', dispatch(function () {
return Actions.setCursorOffset(this.valueAsNumber);
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 3cc3f52a59cad007afb03258234c06a607251a7a..9ec86ae5859a8a2e30f7b9c2558c9a3aa1c23121 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -306,15 +306,17 @@ export const timeSeriesGraph = function(elem) {
*/
const graphControls = function(elem) {
const graphControlDiv = elem.append('ul')
- .classed('usa-fieldset-inputs', true)
- .classed('usa-unstyled-list', true)
+ .classed('usa-fieldset', true)
+ .classed('usa-list--unstyled', true)
.classed('graph-controls-container', true);
graphControlDiv.append('li')
.call(audibleUI);
- const compareControlDiv = graphControlDiv.append('li');
+ const compareControlDiv = graphControlDiv.append('li')
+ .classed('usa-checkbox', true);
compareControlDiv.append('input')
+ .classed('usa-checkbox__input', true)
.attr('type', 'checkbox')
.attr('id', 'last-year-checkbox')
.attr('aria-labelledby', 'last-year-label')
@@ -335,6 +337,7 @@ const graphControls = function(elem) {
elem.property('checked', checked);
}, isVisibleSelector('compare')));
compareControlDiv.append('label')
+ .classed('usa-checkbox__label', true)
.attr('id', 'last-year-label')
.attr('for', 'last-year-checkbox')
.text('Compare to last year');
@@ -381,8 +384,9 @@ const dateRangeControls = function(elem, siteno) {
container.attr('hidden', showControls ? null : true);
}, hasTimeSeriesWithPoints('current', 'P7D')));
const listContainer = container.append('ul')
- .attr('class', 'usa-fieldset-inputs usa-unstyled-list');
+ .attr('class', 'usa-fieldset usa-unstyled-list');
const li = listContainer.selectAll('li')
+ .attr('class', 'usa-fieldset')
.data(DATE_RANGE)
.enter().append('li');
listContainer.call(link(loadingIndicator, createStructuredSelector({
@@ -394,6 +398,7 @@ const dateRangeControls = function(elem, siteno) {
.attr('type', 'radio')
.attr('name', 'ts-daterange-input')
.attr('id', d => d.label)
+ .attr('class', 'usa-radio__input')
.attr('value', d => d.period)
.attr('ga-on', 'click')
.attr('ga-event-category', 'TimeSeriesGraph')
@@ -405,6 +410,7 @@ const dateRangeControls = function(elem, siteno) {
);
}));
li.append('label')
+ .attr('class', 'usa-radio__label')
.attr('for', (d) => d.label)
.text((d) => d.name);
li.select(`#${DATE_RANGE[0].label}`).attr('checked', true);
diff --git a/assets/src/scripts/components/hydrograph/parameters.js b/assets/src/scripts/components/hydrograph/parameters.js
index 41728907725dcf4e080c4dac598f3fa864710796..dfd28ff6cda3262a755d947664eceffc9b1bf8d1 100644
--- a/assets/src/scripts/components/hydrograph/parameters.js
+++ b/assets/src/scripts/components/hydrograph/parameters.js
@@ -140,15 +140,18 @@ export const plotSeriesSelectTable = function (elem, {siteno, availableTimeSerie
const columnHeaders = ['Parameter', 'Preview', '#'];
const tableContainer = elem.append('div')
.attr('id', 'select-time-series');
+
tableContainer.append('label')
.attr('id', 'select-time-series-label')
.text('Select a time series');
const table = tableContainer.append('table')
- .classed('usa-table-borderless', true)
+ .classed('usa-table', true)
+ .classed('usa-table--borderless', true)
.attr('aria-labelledby', 'select-time-series-label')
.attr('tabindex', 0)
.attr('role', 'listbox');
+
table.append('thead')
.append('tr')
.selectAll('th')
diff --git a/assets/src/scripts/components/hydrograph/tooltip.js b/assets/src/scripts/components/hydrograph/tooltip.js
index 14a8869242801fb40e8dba02199e183c4fbdb885..e6eff2fcaa50b056fcf7e94bd00e6ff813874ec6 100644
--- a/assets/src/scripts/components/hydrograph/tooltip.js
+++ b/assets/src/scripts/components/hydrograph/tooltip.js
@@ -139,22 +139,22 @@ const createTooltipTextGroup = function (elem, {currentPoints, comparePoints, qu
let tooltipFontSize = 0;
if (mediaQuery(config.USWDS_MEDIUM_SCREEN)) {
if (totalTooltipsShowing <= 2) {
- tooltipFontSize = 2;
+ tooltipFontSize = 1.25;
} else if (totalTooltipsShowing <= 4) {
- tooltipFontSize = 1.75;
+ tooltipFontSize = 1;
} else {
- tooltipFontSize = 1.25;
+ tooltipFontSize = 0.8;
}
} else if (mediaQuery(config.USWDS_SMALL_SCREEN)) {
if (totalTooltipsShowing <= 2) {
- tooltipFontSize = 1.75;
+ tooltipFontSize = 1;
} else if (totalTooltipsShowing <= 4) {
- tooltipFontSize = 1.25;
+ tooltipFontSize = .8;
} else {
- tooltipFontSize = 1;
+ tooltipFontSize = 0.6;
}
} else {
- tooltipFontSize = 1;
+ tooltipFontSize = 0.6;
}
elem.style('font-size', tooltipFontSize + 'rem');
};
diff --git a/assets/src/styles/components/hydrograph/_app.scss b/assets/src/styles/components/hydrograph/_app.scss
index fc287c3cc5097377f86a6852a4819e77bf286300..ecb46f45de9ffefddb24b7efb37e681af735a021 100644
--- a/assets/src/styles/components/hydrograph/_app.scss
+++ b/assets/src/styles/components/hydrograph/_app.scss
@@ -20,7 +20,7 @@
#select-time-series {
label {
- font-weight: weight('bold');
+ @include u-text( 'bold' );
}
table {
display: block;
@@ -73,6 +73,7 @@
}
.tooltip {
position: absolute;
+ bottom: 0;
left: 1em;
text-align: center;
width: 11em;
@@ -103,6 +104,7 @@
.hydrograph-container {
width: 100%;
vertical-align: top;
+ min-height: 85px;
// Import the SVG styles for the graph
@import './graph';
@@ -164,6 +166,9 @@
.graph-controls-container {
display: inline-block;
+ li {
+ margin-bottom: 10px;
+ }
@include at-media('tablet') {
position: absolute;
top: 0;
diff --git a/assets/src/styles/components/hydrograph/_variables.scss b/assets/src/styles/components/hydrograph/_variables.scss
index 5cddac9c6b3d614c8cad0eb7798a0a5a9d3e6c7b..d27acca4b0772c5bd342580629ef4edf5c1bc47d 100644
--- a/assets/src/styles/components/hydrograph/_variables.scss
+++ b/assets/src/styles/components/hydrograph/_variables.scss
@@ -1,5 +1,5 @@
$approved-time-series: #1b9e77;
$estimated-time-series: #7570b3;
$default-time-series: #d95f02;
-$selected: color('mint-cool-10v');
+$selected: color('accent-cool-lighter');
$highlight: color('gray-4');
diff --git a/assets/src/styles/graph.scss b/assets/src/styles/graph.scss
index 38298df316a867b99e3b9cbaa470815d856fd44d..2809ddeebea1bf19898cfa10cd8dc4b38ab67aac 100644
--- a/assets/src/styles/graph.scss
+++ b/assets/src/styles/graph.scss
@@ -1,7 +1,7 @@
@import './common';
@import './components/hydrograph/graph';
-.graph-controls-container,
-.slider-wrapper {
+.graph-controls-container, .slider-wrapper {
display: none;
}
+
diff --git a/assets/src/styles/partials/_tooltip.scss b/assets/src/styles/partials/_tooltip.scss
index 5ee93422384639c57f80280a5fed68012277c721..5400c095ced3fc16f0dc86c920ca16e75ecdc83d 100644
--- a/assets/src/styles/partials/_tooltip.scss
+++ b/assets/src/styles/partials/_tooltip.scss
@@ -9,7 +9,7 @@
$tooltip-color: $base-font-color;
$tooltip-width: 16em;
$tooltip-shadow: 0 2px 2px silver;
- $tooltip-distance-from-item: 3em;
+ $tooltip-distance-from-item: 1em;
background: $tooltip-background;
border-radius: $base-border-radius;
@@ -37,7 +37,7 @@
.tooltip {
word-wrap: normal;
position: absolute;
- right: $tooltip-distance-from-item;
+ left: $tooltip-distance-from-item;
background-color: $tooltip-background;
background: #fff;
border-radius: $base-border-radius;
diff --git a/wdfn-server/waterdata/templates/monitoring_location.html b/wdfn-server/waterdata/templates/monitoring_location.html
index 04de5961be46b0037f92e17fb9353e489272a79e..4871d677935d2d0801b88a987fbf812df27876ef 100644
--- a/wdfn-server/waterdata/templates/monitoring_location.html
+++ b/wdfn-server/waterdata/templates/monitoring_location.html
@@ -36,7 +36,6 @@
<div>
{% if status_code == 200 %}
{% if stations|length > 1 %}
-
<h1>Multiple sites found</h1>
<h3>Please pick a site:</h3>
<table class="usa-table usa-table--borderless">
@@ -63,7 +62,7 @@
{% with site_no=stations[0].site_no %}{% include 'partials/social_share.html' %}{% endwith %}
<h1>{{ stations[0].station_nm }}</h1>
<div>
- <span class="usa-label">Important</span>
+ <span class="usa-tag">Important</span>
<a class="usa-link" aria-describedby="{{ 'classic'|tooltip_content_id }}" href="{{ config.NWIS_ENDPOINTS.UV}}?site_no={{stations[0].site_no}}" target="_blank">Classic Page</a>
{{ components.QuestionTooltip('classic', 'View all current conditions values on the classic Water Data for the Nation interface.', True) }}
</div>