Lisab/zoom buttons

src/App.scss

@@ -53,12 +53,64 @@ body {
   }
 }
 
+// hides zoom controls in mobile
 .leaflet-control-container {
   @media (max-width: $mobile_breakpoint) {
     display: none;
   }
 }
 
+// customize zoom button styles
+$border-radius: 6px;
+
+.leaflet-bottom.leaflet-right {
+  position: fixed;
+}
+.leaflet-bottom > .leaflet-control {
+  box-shadow: $box-shadow;
+  margin-right: 28px;
+  margin-bottom: 32px;
+}
+.leaflet-container .leaflet-bar {
+  border: unset;
+}
+.leaflet-container .leaflet-bar a {
+  border-bottom: none;
+  background-color: unset;
+}
+
+.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;
+
+  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-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;
 }

src/Homepage.js

@@ -137,6 +137,19 @@ class Homepage extends React.Component {
     };
   }
 
+  componentDidMount() {
+    window.setTimeout(() => {
+      // move to useEffect
+      L.control
+        .zoom({
+          zoomInText: "",
+          zoomOutText: "",
+          position: "bottomright",
+        })
+        .addTo(this.state.map);
+    }, 1000);
+  }
+
   render() {
     const query = queryString.parse(this.props.location.search);
 
@@ -207,6 +220,7 @@ class Homepage extends React.Component {
             attributionControl={false}
             bounceAtZoomLimits={false}
             ref={this.onMapLoad}
+            zoomControl={false}
           >
             <Videos
               debug={query.debug}
@@ -227,9 +241,9 @@ class Homepage extends React.Component {
             />
           </Map>
         )}
+
         {this.state.currentVideo && this.state.videosPlaying > 0 && (
           <InfoBox
-            hidden={false}
             {...this.state.currentVideo.info()}
             displayMode={this.props.displayMode}
           />

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";
 
@@ -12,40 +12,90 @@ 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 [spaceKeyPressed, setSpaceKeyPressed] = useState(false);
 
-  useEffect(() => {
+  const ref = useRef(null);
+
+  const handleKeyUp = (e) => {
     const body = document.body;
-    body.classList.add("overflow-hidden");
 
+    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];
 
-    const handleClick = () => {
-      setHidden(!hidden);
+    map.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      map.removeEventListener("keyup", handleKeyUp);
     };
+  }, []);
 
-    if (hidden) {
-      map.removeEventListener("click", handleClick);
-      map.removeEventListener("touchstart", handleClick);
-      map.removeEventListener("touchmove", handleClick);
-      return;
+  useEffect(() => {
+    setSpaceKeyPressed(false);
+    const intro = document.querySelector(".leaflet-control-zoom");
+    const height = ref.current.clientHeight;
+
+    if (!height || !intro) return;
+
+    if (closed) {
+      intro.style.transition = "margin 300ms";
+      intro.style.marginBottom = "32px"; // .leaflet-bottom .leaflet-control in App.scss
+    } else {
+      intro.style.transition = "margin 300ms 200ms";
+      intro.style.marginBottom = `${height + 24}px`;
+    }
+  }, [closed]);
+
+  const handleMapClick = () => {
+    setClosed(true);
+  };
+
+  useEffect(() => {
+    const body = document.body;
+    body.classList.add("overflow-hidden");
+
+    const map = document.getElementsByClassName("leaflet-container")[0];
+
+    if (closed) {
+      document.querySelector(".leaflet-container").focus();
+    } 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 (
-    <CSSTransition in={!hidden} timeout={TRANSITION_SPEED}>
+    <CSSTransition in={!closed} timeout={TRANSITION_SPEED}>
       <div>
         <InfoButton
           displayMode={displayMode}
-          handleClick={() => setHidden(!hidden)}
+          handleClick={() => setClosed(!closed)}
         />
-        <div className={classNames("info-wrapper", displayMode)}>
+        <div ref={ref} className={classNames("info-wrapper", displayMode)}>
           <div className="info-title">
             <h1>{title}</h1>
           </div>

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;

src/components/Intro.scss

@@ -5,7 +5,7 @@
     @include luti_font;
 
     position: fixed;
-    bottom: 25vh;
+    bottom:  7em;
     left: 0;
     right: 0;
     margin: 0 auto;

src/shared.scss

@@ -6,6 +6,8 @@ $mobile_breakpoint: 780px;
 $transition_speed: 500ms; // see TRANSITION_SPEED in js
 $z-index-map: 500;
 
+$box-shadow: 0 5px 15px rgb(34 34 34 / 20%);
+
 /*-- colors ---*/
 
 // light mode