From fba3090d36ebfeae6a2f1a4d467fc1369d8b2a84 Mon Sep 17 00:00:00 2001 From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com> Date: Tue, 31 Aug 2021 14:40:22 -0700 Subject: [PATCH] Fix button centering on iphone (#581) * Fix button centering on iphone For some reason, physical iPhones are not centering the text inside the map buttons correctly. (`48`, `AK`, `HI`, `PR`) * convert to verbose css syntax * Test using svg buttons * Remove unused style reference * Fix new icon svg images were "eating" the button's click events --- .../territoryFocusControl.module.scss | 28 +--------- .../territoryFocusControl.module.scss.d.ts | 1 - .../src/components/territoryFocusControl.tsx | 51 +++++++++++-------- client/src/images/mapbtn-48.svg | 1 + client/src/images/mapbtn-AK.svg | 1 + client/src/images/mapbtn-HI.svg | 1 + client/src/images/mapbtn-PR.svg | 1 + client/src/styles/global.scss | 25 +++++++++ 8 files changed, 60 insertions(+), 49 deletions(-) create mode 100644 client/src/images/mapbtn-48.svg create mode 100644 client/src/images/mapbtn-AK.svg create mode 100644 client/src/images/mapbtn-HI.svg create mode 100644 client/src/images/mapbtn-PR.svg diff --git a/client/src/components/territoryFocusControl.module.scss b/client/src/components/territoryFocusControl.module.scss index 82fa91fd..a1932560 100644 --- a/client/src/components/territoryFocusControl.module.scss +++ b/client/src/components/territoryFocusControl.module.scss @@ -1,34 +1,8 @@ -.territoryFocusButton { - width: 2.5em; - height: 2.5em; - border-width: 1px 2px; - border-color: #000000; - border-style: solid; - background-color: #ffffff; -} - -.territoryFocusButton:not(:disabled):hover { - background-color: #f4f4f4; -} - .territoryFocusContainer { display: flex; flex-direction: column; - text-align: center; - font-size: 16px; - line-height: 1.75em; position: absolute; left: 20px; - top: 300px; - z-index: 10; - left: 20px; top: 150px; -} - -.territoryFocusButton:first-child { - border-top-width: 2px; -} - -.territoryFocusButton:last-child { - border-bottom-width: 2px; + z-index: 10; } diff --git a/client/src/components/territoryFocusControl.module.scss.d.ts b/client/src/components/territoryFocusControl.module.scss.d.ts index 2a87a84f..ab67f45f 100644 --- a/client/src/components/territoryFocusControl.module.scss.d.ts +++ b/client/src/components/territoryFocusControl.module.scss.d.ts @@ -1,7 +1,6 @@ declare namespace TerritoryFocusControlModuleScssNamespace { export interface ITerritoryFocusControlModuleScss { territoryFocusContainer: string; - territoryFocusButton: string; } } diff --git a/client/src/components/territoryFocusControl.tsx b/client/src/components/territoryFocusControl.tsx index 10bbd15b..8a5e7ea8 100644 --- a/client/src/components/territoryFocusControl.tsx +++ b/client/src/components/territoryFocusControl.tsx @@ -4,10 +4,10 @@ import {_useMapControl as useMapControl} from 'react-map-gl'; import * as styles from './territoryFocusControl.module.scss'; interface ITerritoryFocusControl { - onClickTerritoryFocusButton : MouseEventHandler; + onClickTerritoryFocusButton: MouseEventHandler; } -const TerritoryFocusControl = ({onClickTerritoryFocusButton} : ITerritoryFocusControl) => { +const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusControl) => { const intl = useIntl(); const {containerRef} = useMapControl({ @@ -81,28 +81,37 @@ const TerritoryFocusControl = ({onClickTerritoryFocusButton} : ITerritoryFocusCo ), }, ]; + // the offset for this array should map the territories variable + const territoriesIconClassName = [ + 'mapboxgl-ctrl-zoom-to-48', + 'mapboxgl-ctrl-zoom-to-ak', + 'mapboxgl-ctrl-zoom-to-hi', + 'mapboxgl-ctrl-zoom-to-pr', + ]; return (
- {territories.map((territory) => - , - )} +
+ {territories.map((territory, index) => + , + )} +
); }; diff --git a/client/src/images/mapbtn-48.svg b/client/src/images/mapbtn-48.svg new file mode 100644 index 00000000..8bf32889 --- /dev/null +++ b/client/src/images/mapbtn-48.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/images/mapbtn-AK.svg b/client/src/images/mapbtn-AK.svg new file mode 100644 index 00000000..6f738bff --- /dev/null +++ b/client/src/images/mapbtn-AK.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/images/mapbtn-HI.svg b/client/src/images/mapbtn-HI.svg new file mode 100644 index 00000000..a088fde6 --- /dev/null +++ b/client/src/images/mapbtn-HI.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/images/mapbtn-PR.svg b/client/src/images/mapbtn-PR.svg new file mode 100644 index 00000000..af7aa9e0 --- /dev/null +++ b/client/src/images/mapbtn-PR.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index 79cbb01a..253b626f 100644 --- a/client/src/styles/global.scss +++ b/client/src/styles/global.scss @@ -282,6 +282,7 @@ $j40-blue-background-color: #EFF6FB; // see more here: https://thatemil.com/blog/2014/04/06/intrinsic-sizing-of-svg-in-responsive-web-design/ .mapboxgl-ctrl-icon { height: 1em; + pointer-events: none; /* this keeps the icons from "eating" the click events instead of the button getting them */ } } @@ -296,6 +297,30 @@ $j40-blue-background-color: #EFF6FB; background-image: url("../../node_modules/uswds/dist/img/usa-icons/remove.svg"); } } + + button.mapboxgl-ctrl-zoom-to-48 { + .mapboxgl-ctrl-icon { + background-image: url("../images/mapbtn-48.svg"); + } + } + + button.mapboxgl-ctrl-zoom-to-ak { + .mapboxgl-ctrl-icon { + background-image: url("../images/mapbtn-AK.svg"); + } + } + + button.mapboxgl-ctrl-zoom-to-hi { + .mapboxgl-ctrl-icon { + background-image: url("../images/mapbtn-HI.svg"); + } + } + + button.mapboxgl-ctrl-zoom-to-pr { + .mapboxgl-ctrl-icon { + background-image: url("../images/mapbtn-PR.svg"); + } + } }