Lisab/zoom buttons

src/App.scss

@@ -53,12 +53,61 @@ 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-control {
+  box-shadow: -6px 7px 15px #242424;
+  margin-right: 28px;
+  margin-bottom: 80px;
+}
+.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}

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,23 @@ 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");
+    const height = ref.current.clientHeight;
+
+    if (!height || !intro) return;
+
+    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(() => {
     const body = document.body;
     body.classList.add("overflow-hidden");
@@ -45,7 +62,7 @@ export default function InfoBox({ desc, displayMode, title, url }) {
           displayMode={displayMode}
           handleClick={() => setHidden(!hidden)}
         />
-        <div className={classNames("info-wrapper", displayMode)}>
+        <div ref={ref} className={classNames("info-wrapper", displayMode)}>
           <div className="info-title">
             <h1>{title}</h1>
           </div>

src/components/Intro.scss

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