Small style/standardization cleanup

sdl60660 · Jun 22, 2022 · 964c7da · 964c7da · vercel · Jun 22, 2022
1 parent cfc0740
commit 964c7da
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 30 deletions.
diff --git a/src/components/Controls.svelte b/src/components/Controls.svelte
@@ -96,7 +96,9 @@
   </div>
 </div>
 
-<style>
+<style type="text/scss">
+  @import "../settings.scss";
+
   .wrapper {
     background-color: rgba(221, 221, 221, 0.89);
     padding: 0.5rem 0.8rem;
@@ -154,7 +156,7 @@
   }
 
   .button-active {
-    background-color: rgb(205 179 143);
+    background-color: rgb(205, 179, 143);
     border: 1px solid black;
   }
 
@@ -175,7 +177,7 @@
     display: none;
   }
 
-  @media only screen and (max-width: 700px) {
+  @media only screen and (max-width: $mobile-breakpoint) {
     /* .slow-button {
       display: none;
     } */

diff --git a/src/components/InsetMap.svelte b/src/components/InsetMap.svelte
@@ -9,6 +9,8 @@
 
   import CloseButton from "./CloseButton.svelte";
 
+  import config from "../config.json";
+
   export let bounds = [
     [-125, 24],
     [-66, 51],
@@ -43,8 +45,8 @@
   let currentStartLocation = null;
   let currentStoppingFeature = null;
 
-  $: containerWidth = width > 700 ? "26rem" : "100%";
-  $: containerHeight = width > 700 ? "14rem" : "20vh";
+  $: containerWidth = width > config.mobile_breakpoint ? "26rem" : "100%";
+  $: containerHeight = width > config.mobile_breakpoint ? "14rem" : "20vh";
 
   const mainPathLayerID = "locator-path";
   const colorPalette = [
@@ -121,7 +123,7 @@
       marker = new mapbox.Marker({ element: markerEl })
         .setLngLat([0, 0])
         .addTo(map);
-      
+
       const unsubscribeStoppingFeature = stoppingFeature.subscribe(
         (featureName) => {
           currentStoppingFeature = featureName;
@@ -251,8 +253,8 @@
       const coordinateSet = lineString(riverPath[0].geometry.coordinates);
       const boundProps = { animate: true, padding: 30, speed: 1.2 };
       if (suggestionModalActive === false) {
-        boundProps.maxZoom = maxZoom
-      };
+        boundProps.maxZoom = maxZoom;
+      }
       map.fitBounds(bbox(coordinateSet), boundProps);
 
       map.once("moveend", () => {
@@ -476,7 +478,9 @@
   bind:this={markerEl}
 />
 
-<style>
+<style type="text/scss">
+  @import "../settings.scss";
+
   .map {
     /* width: 26rem;
     height: 14rem; */
@@ -550,7 +554,7 @@
   }
 
   /* Mobile */
-  @media only screen and (max-width: 700px) {
+  @media only screen and (max-width: $mobile-breakpoint) {
     .map {
       position: absolute;
       width: 100%;
@@ -563,7 +567,7 @@
   }
 
   /* Keyboard open */
-  @media only screen and (max-width: 700px) and (max-height: 400px) {
+  @media only screen and (max-width: $mobile-breakpoint) and (max-height: 400px) {
     .map {
       opacity: 0 !important;
       z-index: -100;
@@ -573,8 +577,8 @@
   /* Tablet */
   @media only screen and (min-width: 701px) and (max-width: 1100px) {
     .map {
-      width: 20.4rem;
-      height: 11rem;
+      width: 19rem !important;
+      height: 11rem !important;
     }
   }
 </style>
diff --git a/src/components/Map.svelte b/src/components/Map.svelte
@@ -1362,6 +1362,12 @@
       bottom: 3rem;
     }
 
+    // .left-column {
+    //   left: 1rem;
+    //   top: 1rem;
+    //   bottom: 1rem;
+    // }
+
     :global(.mapboxgl-ctrl-top-left .mapboxgl-ctrl) {
       margin: 1.5rem 0 0 1rem !important;
     }

diff --git a/src/components/NavigationInfo.svelte b/src/components/NavigationInfo.svelte
@@ -340,7 +340,9 @@
   Know one of these missing river names? Make a suggestion!
 </div>
 
-<style>
+<style type="text/scss">
+  @import "../settings.scss";
+
   .navbox-wrapper {
     position: relative;
     /* position: absolute; */
@@ -527,7 +529,7 @@
   }
 
   /* Mobile */
-  @media only screen and (max-width: 700px) {
+  @media only screen and (max-width: $mobile-breakpoint) {
     .pre-run-controls {
       display: none;
     }

diff --git a/src/components/Prompt.svelte b/src/components/Prompt.svelte
@@ -2,13 +2,16 @@
   import { Moon } from "svelte-loading-spinners";
   import { stoppingFeature, startLocation } from "../state";
 
+  import config from "../config.json";
+
   export let currentLocation;
   export let vizState;
   export let errorStatus;
   export let bannerVisible;
 
   let loading = false;
-  let eventActionName = window.innerWidth > 700 ? "Click" : "Tap";
+  let eventActionName =
+    window.innerWidth > config.mobile_breakpoint ? "Click" : "Tap";
   let message = `${eventActionName} to drop a raindrop anywhere in the world and watch where it ends up`;
 
   $: if (currentLocation?.lat && message !== "") {
@@ -20,19 +23,19 @@
     loading = false;
   } else if (vizState === "overview") {
     message =
-      window.innerWidth > 700
+      window.innerWidth > config.mobile_breakpoint
         ? ""
         : "Run the path again, copy a link to share, or exit and try another path using the buttons below.";
     loading = false;
   } else if (vizState === "uninitialized") {
     resetPrompt();
   } else if (vizState === "error") {
     if (errorStatus?.status === "API error") {
-      message = "Routing Server is down! Sorry, this is likely due to high volume, try again in a bit."
-    }
-    else {
       message =
-      "Unable to find a flowpath for that location. Please try somewhere else.";
+        "Routing Server is down! Sorry, this is likely due to high volume, try again in a bit.";
+    } else {
+      message =
+        "Unable to find a flowpath for that location. Please try somewhere else.";
     }
     loading = false;
   }
@@ -52,14 +55,19 @@
     const stateName = addressData.features.find((d) =>
       d.place_type.includes("region")
     )?.text;
-    const countryName = addressData.features.find(d => 
-      d.place_type.includes('country')
+    const countryName = addressData.features.find((d) =>
+      d.place_type.includes("country")
     )?.text;
 
     const place = placeName || countyName;
-    const locationStringComponents = [place, stateName, countryName].filter(d => d);
+    const locationStringComponents = [place, stateName, countryName].filter(
+      (d) => d
+    );
 
-    const fullLocationString = locationStringComponents.length > 0 ? locationStringComponents.join(', ') : "Unknown Territory";
+    const fullLocationString =
+      locationStringComponents.length > 0
+        ? locationStringComponents.join(", ")
+        : "Unknown Territory";
 
     startLocation.update(() => fullLocationString);
 
@@ -82,7 +90,12 @@
   };
 </script>
 
-<div class="wrapper" style="display: {bannerVisible ? 'none' : 'block'};" tabindex="0" aria-label="prompt and information box">
+<div
+  class="wrapper"
+  style="display: {bannerVisible ? 'none' : 'block'};"
+  tabindex="0"
+  aria-label="prompt and information box"
+>
   <div
     style={`display: ${message === "" ? "none" : "flex"};`}
     class="message-box"
@@ -96,7 +109,7 @@
   <div
     style="display:{vizState === 'uninitialized' &&
     loading === false &&
-    window.innerWidth > 700
+    window.innerWidth > config.mobile_breakpoint
       ? 'block'
       : 'none'};"
     class="scroll-helper"
@@ -105,7 +118,9 @@
   </div>
 </div>
 
-<style>
+<style type="text/scss">
+  @import "../settings.scss";
+
   .wrapper {
     font-family: "Roboto", "Inter", Arial, Helvetica, sans-serif;
 
@@ -146,7 +161,7 @@
   }
 
   /* Mobile */
-  @media only screen and (max-width: 700px) {
+  @media only screen and (max-width: $mobile-breakpoint) {
     .scroll-helper {
       display: none;
     }
@@ -176,7 +191,7 @@
   }
 
   /* Keyboard open */
-  @media only screen and (max-width: 700px) and (max-height: 400px) {
+  @media only screen and (max-width: $mobile-breakpoint) and (max-height: 400px) {
     .message-box {
       opacity: 0 !important;
       z-index: -100;

diff --git a/src/config.json b/src/config.json
@@ -0,0 +1,3 @@
+{
+    "mobile_breakpoint": 700
+}