Tweak styling a bit. Need to fix top nav in two modes still

a-b-street · Aug 16, 2024 · a94ba9d · a94ba9d
1 parent 54cf232
commit a94ba9d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/web/src/App.svelte b/web/src/App.svelte
@@ -35,7 +35,7 @@
   import workerWrapper from "./worker?worker";
   import { type Backend } from "./worker";
   import * as Comlink from "comlink";
-        import { PopulationLayer } from "./common";
+  import { PopulationLayer } from "./common";
 
   onMount(async () => {
     // If you get "import declarations may only appear at top level of a
@@ -170,7 +170,7 @@
         {/if}
 
         {#if $showPopulation}
-                <PopulationLayer />
+          <PopulationLayer />
         {/if}
       {/if}
     </MapLibre>

diff --git a/web/src/BufferRouteMode.svelte b/web/src/BufferRouteMode.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { GeoJSON, LineLayer } from "svelte-maplibre";
   import { SplitComponent } from "svelte-utils/top_bar_layout";
-  import { mode } from "./stores";
   import type { FeatureCollection } from "geojson";
   import { makeColorRamp, Popup } from "svelte-utils/map";
   import { SequentialLegend } from "svelte-utils";
   import { colorScale } from "./colors";
+  import { NavBar } from "./common";
 
   export let gj: FeatureCollection;
 
@@ -14,9 +14,7 @@
 </script>
 
 <SplitComponent>
-  <div slot="top">
-    <button on:click={() => ($mode = { kind: "route" })}>Back</button>
-  </div>
+  <div slot="top"><NavBar /></div>
   <div slot="sidebar">
     <h2>Buffer around a route</h2>
     <SequentialLegend {colorScale} limits={limitsMinutes} />

diff --git a/web/src/common/PopulationLayer.svelte b/web/src/common/PopulationLayer.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { GeoJSON, LineLayer, FillLayer, hoverStateFilter } from "svelte-maplibre";
+  import {
+    GeoJSON,
+    LineLayer,
+    FillLayer,
+    hoverStateFilter,
+  } from "svelte-maplibre";
   import { notNull } from "svelte-utils";
   import { Popup } from "svelte-utils/map";
   import { backend } from "../stores";
@@ -11,12 +16,12 @@
       manageHoverState
       paint={{
         "fill-color": "red",
-        "fill-opacity": hoverStateFilter(0.5, 0.8),
+        "fill-opacity": hoverStateFilter(0.2, 0.8),
       }}
     >
       <Popup openOn="hover" let:props>{props.population.toLocaleString()}</Popup
       >
     </FillLayer>
-    <LineLayer paint={{"line-color": "black", "line-width": 1}} />
+    <LineLayer paint={{ "line-color": "black", "line-width": 1 }} />
   </GeoJSON>
 {/await}