Use display/visibility instead of z-index for managing pane display

mileswwatkins · Nov 30, 2024 · b5a5399 · b5a5399
1 parent 83ead81
commit b5a5399
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/src/App.css b/src/App.css
@@ -28,20 +28,10 @@ a {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 2;
   }
 
   .FilterPane--hidden {
-    z-index: -1;
-  }
-
-  .mapboxgl-map {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100dvh;
-    z-index: 1;
+    display: none;
   }
 }
 

diff --git a/src/components/Attribution.js b/src/components/Attribution.js
@@ -36,6 +36,10 @@ const Attribution = () => {
         </a>{" "}
         by Adrien Coquet
       </span>
+      {/*
+        Colors c/o Kevin Blake
+        https://github.com/kevinsblake/NatParksPalettes
+      */}
     </div>
   );
 };

diff --git a/src/components/Map.css b/src/components/Map.css
@@ -1,3 +1,7 @@
+.Map {
+  width: 100%;
+}
+
 .Map-circle {
   cursor: pointer;
   width: 10px;
@@ -25,14 +29,35 @@
   border-radius: 50%;
   top: 1rem;
   left: 1rem;
-  z-index: 3;
+  z-index: 2;
   background: #faf3ce;
   justify-content: center;
   align-items: center;
   cursor: pointer;
 }
 
+.mapboxgl-map {
+  width: 100%;
+  height: 100dvh;
+}
+
 @media (max-width: 700px) {
+  .Map {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100dvh;
+  }
+
+  .Map--hidden {
+    /*
+      If you use `display: none` instead, then the Mapbox GL JS map will not
+      render at full height
+    */
+    visibility: hidden;
+  }
+
   .Map-Logo-Backing--active {
     display: flex;
   }

diff --git a/src/components/Map.js b/src/components/Map.js
@@ -32,10 +32,8 @@ class Map extends Component {
   };
 
   render() {
-    console.log(this.props);
-
     return (
-      <>
+      <div className={`Map ${!this.props.isActive && "Map--hidden"}`}>
         <div
           className={`Map-Logo-Backing ${this.props.isActive && "Map-Logo-Backing--active"}`}
           onClick={this.props.returnToFilters}
@@ -96,7 +94,7 @@ class Map extends Component {
 
           {this.state.popup.visible && <MapPopup {...this.state.popup} />}
         </ReactMapGL>
-      </>
+      </div>
     );
   }
 }