Skip to content

Commit 8fb3416

Browse files
dabreegsterdabreegster
committed
Use breadcrumbs and improve buttons everywhere
1 parent bf36396 commit 8fb3416

13 files changed

+202
-156
lines changed

‎web/src/App.svelte

+3-5
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,9 @@
6161
<hr />
6262

6363
{#if $app}
64-
<div>
65-
<button class="secondary" on:click={zoomToFit}
66-
>Zoom to fit study area</button
67-
>
68-
</div>
64+
<button class="secondary" on:click={zoomToFit}
65+
>Zoom to fit study area</button
66+
>
6967
{/if}
7068
<BasemapPicker />
7169
</div>

‎web/src/DebugGJ.svelte

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@
1616
<div slot="sidebar">
1717
<h1>Debug GJ</h1>
1818

19-
<div>
20-
<button on:click={() => ($mode = { mode: "network" })}>Back</button>
21-
</div>
19+
<button on:click={() => ($mode = { mode: "network" })}>Back</button>
2220
</div>
2321

2422
<div slot="map">

‎web/src/DebugMode.svelte

+3-5
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,9 @@
1010
<div slot="sidebar">
1111
<h1>Debug mode</h1>
1212

13-
<div>
14-
<button on:click={() => ($mode = { mode: "neighbourhood" })}
15-
>Back to editing</button
16-
>
17-
</div>
13+
<button on:click={() => ($mode = { mode: "neighbourhood" })}
14+
>Back to editing</button
15+
>
1816
</div>
1917

2018
<div slot="map">

‎web/src/ManageSavefiles.svelte

+6-8
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,12 @@
5050

5151
<details>
5252
<summary>Save / load project</summary>
53-
<div><button on:click={saveGj}>Save to GJ</button></div>
54-
<div>
55-
<label>
56-
Load edits from GJ
57-
<input bind:this={fileInput} on:change={loadFile} type="file" />
58-
</label>
59-
</div>
60-
<div>
53+
<button on:click={saveGj}>Save to GJ</button>
54+
<label>
55+
Load edits from GJ
56+
<input bind:this={fileInput} on:change={loadFile} type="file" />
57+
</label>
58+
<div style="display: flex; justify-content: space-between;">
6159
<button on:click={saveLocalStorage}>Save to local storage</button><button
6260
on:click={loadLocalStorage}>Load from local storage</button
6361
>

‎web/src/NetworkMode.svelte

+32-19
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,37 @@
3636

3737
<SplitComponent>
3838
<div slot="sidebar">
39-
<h1>Define neighbourhood boundaries</h1>
39+
<nav aria-label="breadcrumb">
40+
<!-- svelte-ignore a11y-invalid-attribute -->
41+
<ul>
42+
<li>
43+
<a href="#" on:click={() => ($mode = { mode: "title" })}
44+
>Change study area</a
45+
>
46+
</li>
47+
<li>Define neighbourhood boundaries</li>
48+
</ul>
49+
</nav>
50+
51+
<nav>
52+
<ul>
53+
<li>
54+
<button
55+
class="outline"
56+
on:click={() => ($mode = { mode: "route", prevMode: "network" })}
57+
>Route</button
58+
>
59+
</li>
60+
<li>
61+
<button
62+
class="outline"
63+
on:click={() => ($mode = { mode: "debug-gj" })}
64+
>Debug route snapper</button
65+
>
66+
</li>
67+
</ul>
68+
</nav>
69+
4070
<p>
4171
Inside the neighbourhood you define, the goal is to eliminate (or
4272
deliberately permit) through-traffic. An appropriate neighbourhood
@@ -48,14 +78,7 @@
4878
boundary may not match the conventional definition of "neighbourhood."
4979
</p>
5080

51-
<div>
52-
<button on:click={() => ($mode = { mode: "title" })}
53-
>Start over and change your study area</button
54-
>
55-
</div>
56-
<div>
57-
<button on:click={newBoundary}>Draw a new boundary</button>
58-
</div>
81+
<button on:click={newBoundary}>Draw a new boundary</button>
5982
{#each boundaryNames as name}
6083
<div style="display: flex; justify-content: space-between;">
6184
<button class="outline" on:click={() => pickNeighbourhood(name)}
@@ -67,16 +90,6 @@
6790
>
6891
</div>
6992
{/each}
70-
<div>
71-
<button on:click={() => ($mode = { mode: "route", prevMode: "network" })}
72-
>Route</button
73-
>
74-
</div>
75-
<div>
76-
<button on:click={() => ($mode = { mode: "debug-gj" })}
77-
>Debug route snapper</button
78-
>
79-
</div>
8093

8194
<hr />
8295
<ManageSavefiles />

‎web/src/RouteMode.svelte

+25-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,31 @@
4141

4242
<SplitComponent>
4343
<div slot="sidebar">
44-
<div><button on:click={back}>Back</button></div>
44+
<nav aria-label="breadcrumb">
45+
<!-- svelte-ignore a11y-invalid-attribute -->
46+
<ul>
47+
<li>
48+
<a href="#" on:click={() => ($mode = { mode: "title" })}
49+
>Change study area</a
50+
>
51+
</li>
52+
<li>
53+
<a href="#" on:click={() => ($mode = { mode: "network" })}
54+
>Change neighbourhood</a
55+
>
56+
</li>
57+
{#if prevMode == "neighbourhood"}
58+
<li>
59+
<a href="#" on:click={() => ($mode = { mode: "neighbourhood" })}
60+
>Editing modal filters</a
61+
>
62+
</li>
63+
{/if}
64+
<li>Routing</li>
65+
</ul>
66+
</nav>
67+
68+
<button on:click={back}>Back</button>
4569

4670
<p>Drag markers for a route</p>
4771
<p>

‎web/src/SetBoundaryMode.svelte

+6-5
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,15 @@
4343
<SplitComponent>
4444
<div slot="sidebar">
4545
<h1>Draw your neighbourhood boundary for {name}</h1>
46-
<p>TODO: maybe move the instructions from the previous screen to here...</p>
47-
48-
<SnapPolygonControls route_tool={notNull($route_tool)} />
4946

50-
<div>
47+
<div style="display: flex; justify-content: space-between;">
5148
<button on:click={() => notNull($route_tool).finish()}>Finish</button>
52-
<button on:click={onFailure}>Cancel</button>
49+
<button class="secondary" on:click={onFailure}>Cancel</button>
5350
</div>
51+
52+
<p>TODO: maybe move the instructions from the previous screen to here...</p>
53+
54+
<SnapPolygonControls route_tool={notNull($route_tool)} />
5455
</div>
5556

5657
<div slot="map">

‎web/src/ViewShortcutsMode.svelte

+26-8
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,27 @@
8383

8484
<SplitComponent>
8585
<div slot="sidebar">
86-
<div><button on:click={back}>Back to editing</button></div>
86+
<nav aria-label="breadcrumb">
87+
<!-- svelte-ignore a11y-invalid-attribute -->
88+
<ul>
89+
<li>
90+
<a href="#" on:click={() => ($mode = { mode: "title" })}
91+
>Change study area</a
92+
>
93+
</li>
94+
<li>
95+
<a href="#" on:click={() => ($mode = { mode: "network" })}
96+
>Change neighbourhood</a
97+
>
98+
</li>
99+
<li>
100+
<a href="#" on:click={back}>Editing modal filters</a>
101+
</li>
102+
<li>Viewing shortcuts</li>
103+
</ul>
104+
</nav>
105+
106+
<button on:click={back}>Back to editing</button>
87107

88108
{#if state.state == "neutral"}
89109
<p>Click a road to see shortcuts</p>
@@ -96,14 +116,12 @@
96116
real traffic patterns; it's just looking for any possible path. This
97117
view lets you understand the limits of this assumption.
98118
</p>
99-
<div>
100-
<button on:click={() => (state = { state: "neutral" })}
101-
>Pick a different road</button
102-
>
103-
</div>
104-
<div>
119+
<button on:click={() => (state = { state: "neutral" })}
120+
>Pick a different road</button
121+
>
122+
<div style="display: flex; justify-content: space-between;">
105123
<button disabled={state.shortcutIndex == 0} on:click={prev}>
106-
Prev
124+
Previous
107125
</button>
108126
{state.shortcutIndex + 1} / {state.gj.features.length}
109127
<button

‎web/src/common/BasemapPicker.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
// TODO Z-ordering won't work when we change, because layerId() doesn't get recalculated
1111
</script>
1212

13-
<div>
13+
<label>
1414
Basemap:
1515
<select bind:value={choice}>
1616
<option value="dataviz">MapTiler Dataviz</option>
1717
<option value="streets">MapTiler Streets</option>
1818
<option value="hybrid">MapTiler Satellite</option>
1919
<option value="uk-openzoomstack-light">OS Open Zoomstack</option>
2020
</select>
21-
</div>
21+
</label>

‎web/src/common/OverpassSelector.svelte

+5-10
Original file line numberDiff line numberDiff line change
@@ -83,17 +83,12 @@
8383
{#if polygonTool}
8484
<PolygonControls {polygonTool} />
8585
{:else}
86-
<div>
87-
<button type="button" on:click={importCurrentView}
88-
>Import current view</button
89-
>
90-
</div>
86+
<button type="button" on:click={importCurrentView}>Import current view</button
87+
>
9188

9289
<i>or...</i>
9390

94-
<div>
95-
<button type="button" on:click={startPolygonTool}
96-
>Draw an area to import on the map</button
97-
>
98-
</div>
91+
<button type="button" on:click={startPolygonTool}
92+
>Draw an area to import on the map</button
93+
>
9994
{/if}

0 commit comments

Comments
 (0)