Support mobile viewports. CSS/component tech debt, though; needs refa…

…ctoring
mileswwatkins · Nov 30, 2024 · 051f0d8 · 051f0d8
1 parent 87cfcdc
commit 051f0d8
Show file tree

Hide file tree

Showing 9 changed files with 233 additions and 58 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,6 +1,11 @@
+a {
+  color: #3a4330;
+}
+
 .Main {
   display: flex;
   height: 100vh;
+  position: relative;
 }
 
 .FilterPane {
@@ -15,6 +20,35 @@
   overflow-y: scroll;
 }
 
-a {
-  color: #3a4330;
+@media (max-width: 700px) {
+  .FilterPane {
+    padding: 2rem 4rem;
+    flex-basis: 100%;
+    height: calc(100dvh - 4rem);
+    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;
+  }
+}
+
+@media (max-width: 400px) {
+  .FilterPane {
+    min-width: unset;
+    padding: 1.5rem;
+    height: calc(100dvh - 3rem);
+  }
 }
diff --git a/src/App.js b/src/App.js
@@ -14,6 +14,7 @@ class App extends Component {
       popup: { ...this.initialPopupState },
       filters: { ...this.initialFiltersState },
       data: [],
+      hideFiltersOnMobile: false,
     };
 
     this.onChangeAfterDate = this.onChangeAfterDate.bind(this);
@@ -107,6 +108,13 @@ class App extends Component {
     });
   };
 
+  onSubmit = (e) => {
+    e.preventDefault();
+    this.setState({
+      hideFiltersOnMobile: true,
+    });
+  };
+
   onReset = (e) => {
     e.preventDefault();
     this.setState({
@@ -116,6 +124,12 @@ class App extends Component {
     });
   };
 
+  returnToFilters = () => {
+    this.setState({
+      hideFiltersOnMobile: false,
+    });
+  };
+
   render() {
     if (!this.state.data.length) {
       return "";
@@ -142,7 +156,9 @@ class App extends Component {
 
     return (
       <div className="Main">
-        <div className="FilterPane">
+        <div
+          className={`FilterPane ${this.state.hideFiltersOnMobile && "FilterPane--hidden"}`}
+        >
           <div>
             <Logotype />
             <Filters
@@ -156,14 +172,20 @@ class App extends Component {
               onChangeElectricity={this.onChangeElectricity}
               onChangeCarAccess={this.onChangeCarAccess}
               onChangeAccessible={this.onChangeAccessible}
+              onSubmit={this.onSubmit}
               onReset={this.onReset}
             />
           </div>
 
           <Attribution />
         </div>
 
-        <Map data={this.state.data} filters={this.state.filters} />
+        <Map
+          data={this.state.data}
+          filters={this.state.filters}
+          returnToFilters={this.returnToFilters}
+          isActive={this.state.hideFiltersOnMobile}
+        />
       </div>
     );
   }

diff --git a/src/components/Attribution.css b/src/components/Attribution.css
@@ -2,3 +2,9 @@
   display: block;
   font-size: 0.75rem;
 }
+
+@media (max-width: 400px) {
+  .Attribution {
+    font-size: 0.6rem;
+  }
+}
diff --git a/src/components/Filters.css b/src/components/Filters.css
@@ -1,6 +1,21 @@
+.Filter-Buttons {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.Filter-Submit {
+  display: none;
+  margin: 0;
+  font-size: 1rem;
+  width: fit-content;
+}
+
 .Filter-Reset {
   margin: 0;
   font-size: 1rem;
+  width: fit-content;
 }
 
 form > label {
@@ -56,3 +71,40 @@ form > label {
   transform: scale(1.15);
   margin-right: 0.55rem;
 }
+
+@media (max-width: 700px) {
+  .Filter-Submit {
+    display: block;
+  }
+}
+
+@media (max-width: 400px) {
+  .Filter-Text {
+    font-size: 1rem;
+    line-height: 1.25rem;
+  }
+
+  .Filter-DateText {
+    font-size: 0.8rem;
+  }
+
+  .Filter-SelectText {
+    font-size: 0.8rem;
+  }
+
+  .Filter-List {
+    padding-left: 0.75rem;
+  }
+
+  .Filter-Submit {
+    font-size: 0.8rem;
+  }
+
+  .Filter-Reset {
+    font-size: 0.8rem;
+  }
+
+  .Filter-DateText {
+    width: 85px;
+  }
+}
diff --git a/src/components/Filters.js b/src/components/Filters.js
@@ -21,6 +21,7 @@ const Filters = ({
   onChangeElectricity,
   accessible,
   onChangeAccessible,
+  onSubmit,
   onReset,
 }) => {
   const beforeDateMin = add(afterDate || new Date(), { days: 1 });
@@ -138,12 +139,20 @@ const Filters = ({
             </li>
           </ul>
         </div>
-        <input
-          type="reset"
-          className="Filter-Reset"
-          value="Reset filters"
-          onClick={onReset}
-        ></input>
+        <div className="Filter-Buttons">
+          <input
+            type="submit"
+            className="Filter-Submit"
+            value="Search for lookouts"
+            onClick={onSubmit}
+          ></input>
+          <input
+            type="reset"
+            className="Filter-Reset"
+            value="Reset filters"
+            onClick={onReset}
+          ></input>
+        </div>
       </form>
     </section>
   );

diff --git a/src/components/Logotype.css b/src/components/Logotype.css
@@ -17,3 +17,9 @@
   font-size: 2rem;
   font-family: NationalPark;
 }
+
+@media (max-width: 400px) {
+  .Logotype-Title {
+    font-size: 1.65rem;
+  }
+}
diff --git a/src/components/Map.css b/src/components/Map.css
@@ -16,3 +16,29 @@
 .Map-circle__selected {
   box-shadow: 0px 0px 0px 3px #d00;
 }
+
+.Map-Logo-Backing {
+  display: none;
+  position: absolute;
+  height: 5.5rem;
+  width: 5.5rem;
+  border-radius: 50%;
+  top: 1rem;
+  left: 1rem;
+  z-index: 3;
+  background: #faf3ce;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+@media (max-width: 700px) {
+  .Map-Logo-Backing--active {
+    display: flex;
+  }
+}
+
+.Map-Logo {
+  height: 2.5rem;
+  transform: translateY(-0.1rem);
+}
diff --git a/src/components/Map.js b/src/components/Map.js
@@ -32,57 +32,71 @@ class Map extends Component {
   };
 
   render() {
+    console.log(this.props);
+
     return (
-      <ReactMapGL
-        initialViewState={{
-          latitude: 42,
-          longitude: -115,
-          zoom: 4.5,
-        }}
-        mapStyle="mapbox://styles/mapbox/outdoors-v12"
-        mapboxAccessToken={
-          process.env.REACT_APP_MAPBOX_TOKEN ??
-          "pk.eyJ1IjoibWlsZXN3d2F0a2lucyIsImEiOiJjbG0xcXl5cngzNnFyM2twaXk4cG83NXFyIn0.420VQRr7GT87ST-4uJ_9nA"
-        }
-        onClick={this.onMapClick}
-      >
-        {this.props.data.map((i) => (
-          <Marker
-            key={i.metadata.facility_name}
-            latitude={i.metadata.facility_latitude}
-            longitude={i.metadata.facility_longitude}
-          >
-            <div
-              className={
-                "Map-circle " +
-                (i.metadata.facility_latitude ===
-                  this.state.popup.location.latitude &&
-                i.metadata.facility_longitude ===
-                  this.state.popup.location.longitude
-                  ? "Map-circle__selected "
-                  : "") +
-                (checkFilters(i, this.props.filters)
-                  ? "Map-circle__active "
-                  : "")
-              }
-              onClick={(e) => {
-                this.setState({
-                  popup: {
-                    visible: true,
-                    info: i,
-                    location: {
-                      latitude: i.metadata.facility_latitude,
-                      longitude: i.metadata.facility_longitude,
+      <>
+        <div
+          className={`Map-Logo-Backing ${this.props.isActive && "Map-Logo-Backing--active"}`}
+          onClick={this.props.returnToFilters}
+        >
+          <img
+            src="logo.svg"
+            alt="the silhouette of a fire lookout tower"
+            className="Map-Logo"
+          ></img>
+        </div>
+        <ReactMapGL
+          initialViewState={{
+            latitude: 42,
+            longitude: -115,
+            zoom: 4.5,
+          }}
+          mapStyle="mapbox://styles/mapbox/outdoors-v12"
+          mapboxAccessToken={
+            process.env.REACT_APP_MAPBOX_TOKEN ??
+            "pk.eyJ1IjoibWlsZXN3d2F0a2lucyIsImEiOiJjbG0xcXl5cngzNnFyM2twaXk4cG83NXFyIn0.420VQRr7GT87ST-4uJ_9nA"
+          }
+          onClick={this.onMapClick}
+        >
+          {this.props.data.map((i) => (
+            <Marker
+              key={i.metadata.facility_name}
+              latitude={i.metadata.facility_latitude}
+              longitude={i.metadata.facility_longitude}
+            >
+              <div
+                className={
+                  "Map-circle " +
+                  (i.metadata.facility_latitude ===
+                    this.state.popup.location.latitude &&
+                  i.metadata.facility_longitude ===
+                    this.state.popup.location.longitude
+                    ? "Map-circle__selected "
+                    : "") +
+                  (checkFilters(i, this.props.filters)
+                    ? "Map-circle__active "
+                    : "")
+                }
+                onClick={(e) => {
+                  this.setState({
+                    popup: {
+                      visible: true,
+                      info: i,
+                      location: {
+                        latitude: i.metadata.facility_latitude,
+                        longitude: i.metadata.facility_longitude,
+                      },
                     },
-                  },
-                });
-              }}
-            ></div>
-          </Marker>
-        ))}
+                  });
+                }}
+              ></div>
+            </Marker>
+          ))}
 
-        {this.state.popup.visible && <MapPopup {...this.state.popup} />}
-      </ReactMapGL>
+          {this.state.popup.visible && <MapPopup {...this.state.popup} />}
+        </ReactMapGL>
+      </>
     );
   }
 }

diff --git a/src/components/MapPopup.css b/src/components/MapPopup.css
@@ -68,3 +68,9 @@
 .Map-Popup-calendar .react-datepicker__day--highlighted:hover {
   background-color: #3dcc4a;
 }
+
+@media (max-width: 400px) {
+  .Map-Popup-calendar {
+    display: none;
+  }
+}