From d348c790d263ee94ca0b9fb330e3202d5229640a Mon Sep 17 00:00:00 2001 From: Dustin Carlino Date: Sun, 8 Dec 2024 14:31:01 +0000 Subject: [PATCH] Use help modal instead of inline text --- web/assets/help.svg | 1 + web/package-lock.json | 2 +- web/src/NetworkMode.svelte | 34 ++++++++++++++------------- web/src/common/HelpButton.svelte | 30 +++++++++++++++++++++++ web/src/common/index.ts | 1 + web/src/edit/NeighbourhoodMode.svelte | 26 ++++++++++---------- 6 files changed, 64 insertions(+), 30 deletions(-) create mode 100644 web/assets/help.svg create mode 100644 web/src/common/HelpButton.svelte diff --git a/web/assets/help.svg b/web/assets/help.svg new file mode 100644 index 0000000..f7ffc5d --- /dev/null +++ b/web/assets/help.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/package-lock.json b/web/package-lock.json index 0f35c26..477534d 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -3687,7 +3687,7 @@ }, "node_modules/svelte-utils": { "version": "0.0.1", - "resolved": "git+ssh://git@github.com/a-b-street/svelte-utils.git#cffca12521432791fa7191537564ca426f778d6d", + "resolved": "git+ssh://git@github.com/a-b-street/svelte-utils.git#981edf094bd36440f50823ae6fc07c5153c87db9", "dependencies": { "@maptiler/geocoding-control": "^1.2.2", "@turf/bbox": "^7.0.0-alpha.114", diff --git a/web/src/NetworkMode.svelte b/web/src/NetworkMode.svelte index 8065981..207232c 100644 --- a/web/src/NetworkMode.svelte +++ b/web/src/NetworkMode.svelte @@ -4,7 +4,7 @@ import { downloadGeneratedFile, notNull } from "svelte-utils"; import type { Feature } from "geojson"; import { FillLayer, GeoJSON, hoverStateFilter } from "svelte-maplibre"; - import { layerId, Popup, Link } from "./common"; + import { layerId, Popup, Link, HelpButton } from "./common"; import ModalFilterLayer from "./ModalFilterLayer.svelte"; import { SplitComponent } from "svelte-utils/top_bar_layout"; import { app, autosave, mode, projectName } from "./stores"; @@ -72,7 +72,22 @@ Choose project -
  • Pick neighbourhood
    • +
  • + Pick neighbourhood + +

    + Inside the neighbourhood you define, the goal is to eliminate (or + deliberately permit) through-traffic. An appropriate neighbourhood + boundary depends on many factors. The simplest approach is to find + the area bounded on all sides by "main" roads, which are designed + for higher traffic volumes. There are many other considerations, + though -- maybe severances like rivers or rail should be part of a + boundary. Bridges and tunnels near a boundary may be confusing as + well. And note that your boundary may not match the conventional + definition of "neighbourhood." +

    +     +
    • -
    -
    - Help -

    - Inside the neighbourhood you define, the goal is to eliminate (or - deliberately permit) through-traffic. An appropriate neighbourhood - boundary depends on many factors. The simplest approach is to find the - area bounded on all sides by "main" roads, which are designed for higher - traffic volumes. There are many other considerations, though -- maybe - severances like rivers or rail should be part of a boundary. Bridges and - tunnels near a boundary may be confusing as well. And note that your - boundary may not match the conventional definition of "neighbourhood." -

    -
    +
    Draw a new boundary
    ($mode = { mode: "auto-boundaries" })}> diff --git a/web/src/common/HelpButton.svelte b/web/src/common/HelpButton.svelte new file mode 100644 index 0000000..f81bd45 --- /dev/null +++ b/web/src/common/HelpButton.svelte @@ -0,0 +1,30 @@ + + + + +{#if show} + (show = false)}> +

    Help

    + +     +{/if} + + diff --git a/web/src/common/index.ts b/web/src/common/index.ts index 6d73e9c..a8cfad8 100644 --- a/web/src/common/index.ts +++ b/web/src/common/index.ts @@ -1,5 +1,6 @@ export { default as BasemapPicker } from "./BasemapPicker.svelte"; export { default as DisableInteractiveLayers } from "./DisableInteractiveLayers.svelte"; +export { default as HelpButton } from "./HelpButton.svelte"; export { default as Link } from "./Link.svelte"; export { default as Popup } from "./Popup.svelte"; export { default as StreetView } from "./StreetView.svelte"; diff --git a/web/src/edit/NeighbourhoodMode.svelte b/web/src/edit/NeighbourhoodMode.svelte index c7963ba..6dfad86 100644 --- a/web/src/edit/NeighbourhoodMode.svelte +++ b/web/src/edit/NeighbourhoodMode.svelte @@ -5,7 +5,7 @@ import type { LngLat } from "maplibre-gl"; import { onDestroy } from "svelte"; import { type LayerClickInfo } from "svelte-maplibre"; - import { Popup, Link } from "../common"; + import { Popup, Link, HelpButton } from "../common"; import RenderNeighbourhood from "../RenderNeighbourhood.svelte"; import { SplitComponent } from "svelte-utils/top_bar_layout"; import { @@ -141,7 +141,18 @@ Pick neighbourhood -
  • Editing
    • +
  • + Editing + +

    + Now that you've defined a neighbourhood boundary, you can see the + possible shortcuts that vehicles are currently able to take + through it. You can add a new modal filter to try and solve this. + The colored "cell" areas show what's reachable for drivers without + leaving the boundary you've drawn. +

    +     +