From ffec90ae9b64ea09738c7d21a3bd4a39555495e4 Mon Sep 17 00:00:00 2001
From: Aaron Briggs <abriggs@contractor.usgs.gov>
Date: Fri, 28 Aug 2020 14:46:59 -0500
Subject: [PATCH] add formal constants
---
assets/src/scripts/d3-rendering/legend.js | 26 +++++++++++++++++------
1 file changed, 20 insertions(+), 6 deletions(-)
diff --git a/assets/src/scripts/d3-rendering/legend.js b/assets/src/scripts/d3-rendering/legend.js
index 42f47a774..86ecdaa5b 100644
--- a/assets/src/scripts/d3-rendering/legend.js
+++ b/assets/src/scripts/d3-rendering/legend.js
@@ -8,6 +8,17 @@ const MARKER_GROUP_X_OFFSET = 15;
const VERTICAL_ROW_OFFSET_PROVISIONAL_DATA_MESSAGE = 18;
const VERTICAL_ROW_OFFSET = 38;
+const BACKING_RECTANGLE_WIDTH = 98;
+const BACKING_RECTANGLE_WIDTH_MOBILE = 73;
+const BACKING_RECTANGLE_HEIGHT = 23;
+const BACKING_RECTANGLE_HEIGHT_MOBILE = 17;
+const BACKING_RECTANGLE_ROUNDING_RADIUS = 2;
+const HORIZONTAL_START_PROVISIONAL_DATA_TEXT = 105;
+const HORIZONTAL_START_PROVISIONAL_DATA_TEXT_MOBILE = 75;
+const HORIZONTAL_OFFSET_TO_CENTER_TEXT_IN_BACKING_RECTANGLE = 8;
+const VERTICAL_OFFSET_FOR_BACKING_RECTANGLE_MOBILE = 5;
+
+
/**
* Create a simple legend
*
@@ -32,23 +43,26 @@ export const drawSimpleLegend = function(div, {legendMarkerRows, layout}) {
legend.append('rect')
.attr('x', 0)
- .attr('y', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? 0 : 5)
- .attr('width', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? 98 : 73)
- .attr('height', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? VERTICAL_ROW_OFFSET_PROVISIONAL_DATA_MESSAGE + 5 : 17)
+ .attr('y', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? 0 : VERTICAL_OFFSET_FOR_BACKING_RECTANGLE_MOBILE)
+ .attr('width', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? BACKING_RECTANGLE_WIDTH :
+ BACKING_RECTANGLE_WIDTH_MOBILE)
+ .attr('height', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? BACKING_RECTANGLE_HEIGHT :
+ BACKING_RECTANGLE_HEIGHT_MOBILE)
.attr('fill', '#565c65')
- .attr('rx', 2);
+ .attr('rx', BACKING_RECTANGLE_ROUNDING_RADIUS);
legend.append('a')
.attr('xlink:href', '/provisional-data-statement')
.append('text')
- .attr('x', 8)
+ .attr('x', HORIZONTAL_OFFSET_TO_CENTER_TEXT_IN_BACKING_RECTANGLE)
.attr('y', VERTICAL_ROW_OFFSET_PROVISIONAL_DATA_MESSAGE)
.append('tspan')
.text('IMPORTANT')
.style('fill', 'white')
.append('tspan').text('data may be provisional - ')
.style('fill', 'black')
- .attr('x', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? 105 : 75)
+ .attr('x', mediaQuery(config.USWDS_MEDIUM_SCREEN) ? HORIZONTAL_START_PROVISIONAL_DATA_TEXT :
+ HORIZONTAL_START_PROVISIONAL_DATA_TEXT_MOBILE)
.append('tspan')
.text('learn more')
.style('fill', '#0000EE');
--
GitLab