From 4797c5f62acb9acbe4ce3511140d07a8f8d1a61a Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Tue, 26 Jul 2022 15:32:25 -0700 Subject: [PATCH 01/16] adjust intro height to fix collision with whats this button when font is zoomed --- src/components/Intro.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Intro.scss b/src/components/Intro.scss index 86e12b5..1685e2e 100644 --- a/src/components/Intro.scss +++ b/src/components/Intro.scss @@ -5,7 +5,7 @@ @include luti_font; position: fixed; - bottom: 25vh; + bottom: 7em; left: 0; right: 0; margin: 0 auto; From ffa786f740dc4a575b5e6db9ac52d44d52ab68e2 Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Tue, 26 Jul 2022 16:39:37 -0700 Subject: [PATCH 02/16] move zoom buttons to bottom right --- src/Homepage.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/Homepage.js b/src/Homepage.js index f2127af..59a4812 100644 --- a/src/Homepage.js +++ b/src/Homepage.js @@ -137,6 +137,17 @@ class Homepage extends React.Component { }; } + componentDidMount() { + window.setTimeout(() => { + // move to useEffect + L.control + .zoom({ + position: "bottomright", + }) + .addTo(this.state.map); + }, 1000); + } + render() { const query = queryString.parse(this.props.location.search); @@ -207,6 +218,7 @@ class Homepage extends React.Component { attributionControl={false} bounceAtZoomLimits={false} ref={this.onMapLoad} + zoomControl={false} > Date: Tue, 26 Jul 2022 16:40:07 -0700 Subject: [PATCH 03/16] make zoom button position move with InfoBox open/close --- src/components/InfoBox.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js index 2df9a19..72e0c72 100644 --- a/src/components/InfoBox.js +++ b/src/components/InfoBox.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import classNames from "classnames"; import PropTypes from "prop-types"; @@ -14,6 +14,17 @@ const TRANSITION_SPEED = 500; export default function InfoBox({ desc, displayMode, title, url }) { const [hidden, setHidden] = useState(true); + const ref = useRef(null); + + useEffect(() => { + const intro = document.querySelector(".leaflet-control-zoom"); // this except use the new buttons + const height = ref.current.clientHeight; + + if (!height || !intro) return; + + intro.style.marginBottom = hidden ? "80px" : `${height + 64}px`; + }, [hidden]); + useEffect(() => { const body = document.body; body.classList.add("overflow-hidden"); @@ -45,7 +56,7 @@ export default function InfoBox({ desc, displayMode, title, url }) { displayMode={displayMode} handleClick={() => setHidden(!hidden)} /> -
+

{title}

From 63d2a408d3a224076f0554c90be3b15244782d32 Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Tue, 26 Jul 2022 17:08:02 -0700 Subject: [PATCH 04/16] animate zoom buttons --- src/App.scss | 5 +++++ src/components/InfoBox.js | 8 +++++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/App.scss b/src/App.scss index d45bc82..6c6219d 100644 --- a/src/App.scss +++ b/src/App.scss @@ -59,6 +59,11 @@ body { } } +.leaflet-bottom .leaflet-control { + margin-bottom: 80px; +} + + .leaflet-control-attribution { display: none; } diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js index 72e0c72..10703cc 100644 --- a/src/components/InfoBox.js +++ b/src/components/InfoBox.js @@ -22,7 +22,13 @@ export default function InfoBox({ desc, displayMode, title, url }) { if (!height || !intro) return; - intro.style.marginBottom = hidden ? "80px" : `${height + 64}px`; + if (hidden) { + intro.style.transition = "margin 300ms"; + intro.style.marginBottom = "80px"; // .leaflet-bottom .leaflet-control in App.scss + } else { + intro.style.transition = "margin 300ms 200ms"; + intro.style.marginBottom = `${height + 64}px`; + } }, [hidden]); useEffect(() => { From 2ae7c796cf673ce4e0b318cb7376e8d9eaeb059c Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Wed, 27 Jul 2022 20:50:16 -0700 Subject: [PATCH 05/16] style zoom buttons --- src/App.scss | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src/App.scss b/src/App.scss index 6c6219d..126a460 100644 --- a/src/App.scss +++ b/src/App.scss @@ -53,16 +53,37 @@ body { } } +// hides zoom controls in mobile .leaflet-control-container { @media (max-width: $mobile_breakpoint) { display: none; } } +// customize zoom button styles +$border-radius: 6px; + +.leaflet-container .leaflet-bar { + border: unset; +} .leaflet-bottom .leaflet-control { margin-bottom: 80px; } - +.leaflet-touch .leaflet-bar { + background-color: #F6F6F6; +} +.leaflet-container .leaflet-bar a { + color: #AAAAAA; + font-weight: 900; +} +.leaflet-touch .leaflet-bar a:first-child { + border-top-left-radius: $border-radius; + border-top-right-radius: $border-radius; +} +.leaflet-touch .leaflet-bar a:last-child { + border-bottom-left-radius: $border-radius; + border-bottom-right-radius: $border-radius; +} .leaflet-control-attribution { display: none; From d39b119989f95cfd761aab4a6c9cf5fec283a37d Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Wed, 27 Jul 2022 21:52:14 -0700 Subject: [PATCH 06/16] replace leaflet zoom buttons with our custom svg --- public/LUTI_Zoom_Icon.svg | 16 ++++++++++++++++ src/App.scss | 28 ++++++++++++++++++++-------- src/Homepage.js | 2 ++ 3 files changed, 38 insertions(+), 8 deletions(-) create mode 100644 public/LUTI_Zoom_Icon.svg diff --git a/public/LUTI_Zoom_Icon.svg b/public/LUTI_Zoom_Icon.svg new file mode 100644 index 0000000..0e7fb85 --- /dev/null +++ b/public/LUTI_Zoom_Icon.svg @@ -0,0 +1,16 @@ + + + + + +- + ++ + diff --git a/src/App.scss b/src/App.scss index 126a460..b10e638 100644 --- a/src/App.scss +++ b/src/App.scss @@ -63,28 +63,40 @@ body { // customize zoom button styles $border-radius: 6px; -.leaflet-container .leaflet-bar { - border: unset; -} .leaflet-bottom .leaflet-control { + margin-right: 20px; margin-bottom: 80px; } -.leaflet-touch .leaflet-bar { - background-color: #F6F6F6; + + +.leaflet-container .leaflet-bar { + border: unset; } + .leaflet-container .leaflet-bar a { - color: #AAAAAA; - font-weight: 900; + border-bottom: none; + background-color: unset; + + } + +$background-size: 64px; .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; + + background-image: url(http://localhost:3000//LUTI_Zoom_Icon.svg); + background-size: $background-size; + background-position: top -10px left -15px; } .leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: $border-radius; border-bottom-right-radius: $border-radius; -} + background-image: url(http://localhost:3000//LUTI_Zoom_Icon.svg); + background-size: $background-size; + background-position: bottom -11px left -15px; +} .leaflet-control-attribution { display: none; } diff --git a/src/Homepage.js b/src/Homepage.js index 59a4812..1fea40a 100644 --- a/src/Homepage.js +++ b/src/Homepage.js @@ -142,6 +142,8 @@ class Homepage extends React.Component { // move to useEffect L.control .zoom({ + zoomInText: "", + zoomOutText: "", position: "bottomright", }) .addTo(this.state.map); From 5cb625a3bdb88724cde29aa0ba900452632a5311 Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Wed, 27 Jul 2022 21:54:08 -0700 Subject: [PATCH 07/16] adds hover style to zoom buttons --- src/App.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/App.scss b/src/App.scss index b10e638..6be11b2 100644 --- a/src/App.scss +++ b/src/App.scss @@ -61,26 +61,20 @@ body { } // customize zoom button styles +$background-size: 64px; $border-radius: 6px; .leaflet-bottom .leaflet-control { margin-right: 20px; margin-bottom: 80px; } - - .leaflet-container .leaflet-bar { border: unset; } - .leaflet-container .leaflet-bar a { border-bottom: none; background-color: unset; - - } - -$background-size: 64px; .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; @@ -97,6 +91,10 @@ $background-size: 64px; background-size: $background-size; background-position: bottom -11px left -15px; } +.leaflet-touch .leaflet-bar a:hover { + filter: contrast(95%); +} + .leaflet-control-attribution { display: none; } From 45991462dfde3dfe6bb14581f94421fe7bf37f86 Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Wed, 27 Jul 2022 22:30:20 -0700 Subject: [PATCH 08/16] fix relative import/url issue in css background image --- src/App.scss | 9 ++++----- src/components/InfoBox.js | 14 +++++++++++++- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/src/App.scss b/src/App.scss index 6be11b2..33706e1 100644 --- a/src/App.scss +++ b/src/App.scss @@ -61,7 +61,6 @@ body { } // customize zoom button styles -$background-size: 64px; $border-radius: 6px; .leaflet-bottom .leaflet-control { @@ -75,20 +74,20 @@ $border-radius: 6px; border-bottom: none; background-color: unset; } + +.leaflet-touch .leaflet-bar a { + background-size: 64px; +} .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; - background-image: url(http://localhost:3000//LUTI_Zoom_Icon.svg); - background-size: $background-size; background-position: top -10px left -15px; } .leaflet-touch .leaflet-bar a:last-child { border-bottom-left-radius: $border-radius; border-bottom-right-radius: $border-radius; - background-image: url(http://localhost:3000//LUTI_Zoom_Icon.svg); - background-size: $background-size; background-position: bottom -11px left -15px; } .leaflet-touch .leaflet-bar a:hover { diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js index 10703cc..cac891c 100644 --- a/src/components/InfoBox.js +++ b/src/components/InfoBox.js @@ -17,7 +17,19 @@ export default function InfoBox({ desc, displayMode, title, url }) { const ref = useRef(null); useEffect(() => { - const intro = document.querySelector(".leaflet-control-zoom"); // this except use the new buttons + const controlLinks = document.querySelectorAll( + ".leaflet-touch .leaflet-bar a" + ); + if (!controlLinks || controlLinks.length !== 2) return; + + const backgroundImage = "url(/LUTI_Zoom_Icon.svg)"; + + controlLinks[0].style.backgroundImage = backgroundImage; + controlLinks[1].style.backgroundImage = backgroundImage; + }, []); + + useEffect(() => { + const intro = document.querySelector(".leaflet-control-zoom"); const height = ref.current.clientHeight; if (!height || !intro) return; From bd80a7c704d069da2b508c6e48bc456628430f6d Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Thu, 28 Jul 2022 13:53:27 -0700 Subject: [PATCH 09/16] add disabled styling --- src/App.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/App.scss b/src/App.scss index 33706e1..c708b52 100644 --- a/src/App.scss +++ b/src/App.scss @@ -90,10 +90,18 @@ $border-radius: 6px; background-position: bottom -11px left -15px; } + .leaflet-touch .leaflet-bar a:hover { filter: contrast(95%); } +.leaflet-touch .leaflet-bar a.leaflet-disabled { + filter: contrast(220%) brightness(0.9); + + :hover { + filter: contrast(220%); + } +} .leaflet-control-attribution { display: none; } From b44fcc7ce96ee21afc5d7e5ddb62b5dfad9eccfb Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Fri, 29 Jul 2022 12:44:52 -0700 Subject: [PATCH 10/16] margin fixup --- src/App.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.scss b/src/App.scss index c708b52..3362e97 100644 --- a/src/App.scss +++ b/src/App.scss @@ -64,7 +64,7 @@ body { $border-radius: 6px; .leaflet-bottom .leaflet-control { - margin-right: 20px; + margin-right: 28px; margin-bottom: 80px; } .leaflet-container .leaflet-bar { From e7e57d1f7b923785bd1b2f3d301fdea1011bef87 Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Fri, 29 Jul 2022 12:54:55 -0700 Subject: [PATCH 11/16] add box shadow placeholder --- src/App.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.scss b/src/App.scss index 3362e97..b997f34 100644 --- a/src/App.scss +++ b/src/App.scss @@ -64,6 +64,7 @@ body { $border-radius: 6px; .leaflet-bottom .leaflet-control { + box-shadow: -6px 7px 15px #242424; margin-right: 28px; margin-bottom: 80px; } From c64a411e8422801c97a7854a3d2cf0ae75f564ca Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Sat, 30 Jul 2022 09:49:43 -0700 Subject: [PATCH 12/16] fix background img import issue maybe again --- src/App.scss | 5 +++++ src/components/InfoBox.js | 12 ------------ {public => src/images}/LUTI_Zoom_Icon.svg | 0 3 files changed, 5 insertions(+), 12 deletions(-) rename {public => src/images}/LUTI_Zoom_Icon.svg (100%) diff --git a/src/App.scss b/src/App.scss index b997f34..32f7aa6 100644 --- a/src/App.scss +++ b/src/App.scss @@ -79,6 +79,11 @@ $border-radius: 6px; .leaflet-touch .leaflet-bar a { background-size: 64px; } + +.leaflet-touch .leaflet-bar a { + background-image: url("images/LUTI_Zoom_Icon.svg"); +} + .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js index cac891c..db621a3 100644 --- a/src/components/InfoBox.js +++ b/src/components/InfoBox.js @@ -16,18 +16,6 @@ export default function InfoBox({ desc, displayMode, title, url }) { const ref = useRef(null); - useEffect(() => { - const controlLinks = document.querySelectorAll( - ".leaflet-touch .leaflet-bar a" - ); - if (!controlLinks || controlLinks.length !== 2) return; - - const backgroundImage = "url(/LUTI_Zoom_Icon.svg)"; - - controlLinks[0].style.backgroundImage = backgroundImage; - controlLinks[1].style.backgroundImage = backgroundImage; - }, []); - useEffect(() => { const intro = document.querySelector(".leaflet-control-zoom"); const height = ref.current.clientHeight; diff --git a/public/LUTI_Zoom_Icon.svg b/src/images/LUTI_Zoom_Icon.svg similarity index 100% rename from public/LUTI_Zoom_Icon.svg rename to src/images/LUTI_Zoom_Icon.svg From c9fe84824a3618ac0f9b561e5a2f10f0f21ab26f Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Sat, 30 Jul 2022 10:54:36 -0700 Subject: [PATCH 13/16] accessibility fixup make focus go back to map when info box closes previously keyboard-only users would get stuck after opening infobox --- src/components/InfoBox.js | 58 +++++++++++++++++++++++----------- src/components/InfoButton.scss | 7 ++-- 2 files changed, 45 insertions(+), 20 deletions(-) diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js index db621a3..242e8ba 100644 --- a/src/components/InfoBox.js +++ b/src/components/InfoBox.js @@ -12,24 +12,42 @@ import "./InfoBox.scss"; const TRANSITION_SPEED = 500; export default function InfoBox({ desc, displayMode, title, url }) { - const [hidden, setHidden] = useState(true); + const [closed, setClosed] = useState(true); const ref = useRef(null); + const setKeyboardUser = (e) => { + const body = document.body; + + if (e.keyCode === 9) { + body.classList.add("using-keyboard"); + } + }; + + useEffect(() => { + const map = document.getElementsByClassName("leaflet-container")[0]; + + map.addEventListener("keyup", setKeyboardUser); + + return () => { + map.removeEventListener("keyup", setKeyboardUser); + }; + }, []); + useEffect(() => { const intro = document.querySelector(".leaflet-control-zoom"); const height = ref.current.clientHeight; if (!height || !intro) return; - if (hidden) { + if (closed) { intro.style.transition = "margin 300ms"; intro.style.marginBottom = "80px"; // .leaflet-bottom .leaflet-control in App.scss } else { intro.style.transition = "margin 300ms 200ms"; intro.style.marginBottom = `${height + 64}px`; } - }, [hidden]); + }, [closed]); useEffect(() => { const body = document.body; @@ -37,30 +55,34 @@ export default function InfoBox({ desc, displayMode, title, url }) { const map = document.getElementsByClassName("leaflet-container")[0]; - const handleClick = () => { - setHidden(!hidden); + const handleMapClick = () => { + setClosed(!closed); }; - if (hidden) { - map.removeEventListener("click", handleClick); - map.removeEventListener("touchstart", handleClick); - map.removeEventListener("touchmove", handleClick); - return; + if (closed) { + document.querySelector(".leaflet-container").focus(); + map.removeEventListener("click", handleMapClick); + map.removeEventListener("touchstart", handleMapClick); + map.removeEventListener("touchmove", handleMapClick); + } else { + map.addEventListener("click", handleMapClick); + map.addEventListener("touchstart", handleMapClick); + map.addEventListener("touchmove", handleMapClick); } - window.setTimeout(() => { - map.addEventListener("click", handleClick); - map.addEventListener("touchstart", handleClick); - map.addEventListener("touchmove", handleClick); - }, 100); - }, [hidden]); + return () => { + map.removeEventListener("click", handleMapClick); + map.removeEventListener("touchstart", handleMapClick); + map.removeEventListener("touchmove", handleMapClick); + }; + }, [closed]); return ( - +
setHidden(!hidden)} + handleClick={() => setClosed(!closed)} />
diff --git a/src/components/InfoButton.scss b/src/components/InfoButton.scss index a3f9b45..f89bba3 100644 --- a/src/components/InfoButton.scss +++ b/src/components/InfoButton.scss @@ -6,7 +6,7 @@ border: 0; outline: 0; width: 340px; - position: absolute; + position: fixed; left: 0; right: 0; bottom: -20px; // this svg has extra padding in the image @@ -15,13 +15,16 @@ text-align: center; z-index: $z-index-map; + @media (min-width: $mobile_breakpoint) { bottom: -40px; // this svg has extra padding in the image } } - +.using-keyboard .info-button:focus { + border: 1px solid blue; +} .info-button:hover { cursor: pointer; From 725141ea1fad9dc11ea3b1853ceada396baf5e05 Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Sat, 30 Jul 2022 14:49:12 -0700 Subject: [PATCH 14/16] make space bar press on map toggle InfoBox --- src/components/InfoBox.js | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/InfoBox.js b/src/components/InfoBox.js index 242e8ba..6f3549c 100644 --- a/src/components/InfoBox.js +++ b/src/components/InfoBox.js @@ -13,28 +13,42 @@ const TRANSITION_SPEED = 500; export default function InfoBox({ desc, displayMode, title, url }) { const [closed, setClosed] = useState(true); + const [spaceKeyPressed, setSpaceKeyPressed] = useState(false); const ref = useRef(null); - const setKeyboardUser = (e) => { + const handleKeyUp = (e) => { const body = document.body; if (e.keyCode === 9) { body.classList.add("using-keyboard"); } + + if (e.keyCode === 32) { + if (document.activeElement.classList.contains("leaflet-container")) { + setSpaceKeyPressed(true); + } + } }; + useEffect(() => { + if (spaceKeyPressed) { + setClosed(!closed); + } + }, [spaceKeyPressed]); + useEffect(() => { const map = document.getElementsByClassName("leaflet-container")[0]; - map.addEventListener("keyup", setKeyboardUser); + map.addEventListener("keyup", handleKeyUp); return () => { - map.removeEventListener("keyup", setKeyboardUser); + map.removeEventListener("keyup", handleKeyUp); }; }, []); useEffect(() => { + setSpaceKeyPressed(false); const intro = document.querySelector(".leaflet-control-zoom"); const height = ref.current.clientHeight; @@ -49,21 +63,18 @@ export default function InfoBox({ desc, displayMode, title, url }) { } }, [closed]); + const handleMapClick = () => { + setClosed(true); + }; + useEffect(() => { const body = document.body; body.classList.add("overflow-hidden"); const map = document.getElementsByClassName("leaflet-container")[0]; - const handleMapClick = () => { - setClosed(!closed); - }; - if (closed) { document.querySelector(".leaflet-container").focus(); - map.removeEventListener("click", handleMapClick); - map.removeEventListener("touchstart", handleMapClick); - map.removeEventListener("touchmove", handleMapClick); } else { map.addEventListener("click", handleMapClick); map.addEventListener("touchstart", handleMapClick); From e17a1a44b32b4c4672bf94606a50becc6278fc3c Mon Sep 17 00:00:00 2001 From: Lisa Ballard Date: Sun, 31 Jul 2022 15:28:08 -0700 Subject: [PATCH 15/16] fix zoom buttons rendering below viewport in iOS --- src/App.scss | 5 ++++- src/Homepage.js | 2 +- src/components/InfoBox.js | 4 ++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/App.scss b/src/App.scss index 32f7aa6..2f49483 100644 --- a/src/App.scss +++ b/src/App.scss @@ -63,10 +63,13 @@ body { // customize zoom button styles $border-radius: 6px; +.leaflet-bottom.leaflet-right { + position: fixed; +} .leaflet-bottom .leaflet-control { box-shadow: -6px 7px 15px #242424; margin-right: 28px; - margin-bottom: 80px; + margin-bottom: 32px; } .leaflet-container .leaflet-bar { border: unset; diff --git a/src/Homepage.js b/src/Homepage.js index 1fea40a..d490071 100644 --- a/src/Homepage.js +++ b/src/Homepage.js @@ -241,9 +241,9 @@ class Homepage extends React.Component { /> )} + {this.state.currentVideo && this.state.videosPlaying > 0 && (