From ad73ea0bf61f30405a79217710f6040ba86501e5 Mon Sep 17 00:00:00 2001
From: Mary Bucknell <mbucknell@usgs.gov>
Date: Tue, 10 Apr 2018 16:24:25 -0500
Subject: [PATCH] Use media queries to position graph control underneath the
legend when on mobile.
---
assets/src/scripts/components/hydrograph/index.js | 10 ++++++++++
assets/src/styles/components/_hydrograph.scss | 8 +++++---
2 files changed, 15 insertions(+), 3 deletions(-)
diff --git a/assets/src/scripts/components/hydrograph/index.js b/assets/src/scripts/components/hydrograph/index.js
index 463d736fc..138629aa4 100644
--- a/assets/src/scripts/components/hydrograph/index.js
+++ b/assets/src/scripts/components/hydrograph/index.js
@@ -1,6 +1,7 @@
/**
* Hydrograph charting module.
*/
+import {mediaQuery} from '../../utils';
const { select } = require('d3-selection');
const { extent } = require('d3-array');
@@ -8,6 +9,7 @@ const { line: d3Line } = require('d3-shape');
const { createStructuredSelector } = require('reselect');
const { addSVGAccessibility, addSROnlyTable } = require('../../accessibility');
+const { USWDS_MEDIUM_SCREEN } = require('../../config');
const { dispatch, link, provide } = require('../../lib/redux');
const { audibleUI } = require('./audible');
@@ -370,6 +372,14 @@ const graphControls = function(elem) {
.classed('usa-unstyled-list', true)
.classed('graph-controls-container', true);
+ graphControlDiv.call(link(function(elem, layout) {
+ if (!mediaQuery(USWDS_MEDIUM_SCREEN)) {
+ elem.style('padding-left', `${layout.margin.left}px`);
+ } else {
+ elem.style('padding-left', null);
+ }
+ }, layoutSelector));
+
graphControlDiv.append('li')
.call(audibleUI);
diff --git a/assets/src/styles/components/_hydrograph.scss b/assets/src/styles/components/_hydrograph.scss
index bc77cb152..23d83125a 100644
--- a/assets/src/styles/components/_hydrograph.scss
+++ b/assets/src/styles/components/_hydrograph.scss
@@ -299,9 +299,11 @@ $highlight: $color-gray-lightest;
}
.graph-controls-container {
- position: absolute;
display: inline-block;
- top: 0;
- right: 0;
+ @include media($medium-screen) {
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
}
}
--
GitLab