Skip to content

Commit 84a0d75

Browse files
sdl60660sdl60660
authored
Merge pull request #30 from sdl60660/globe-view
Globe View
2 parents 1bc4961 + 2f2ae5f commit 84a0d75

12 files changed

+234
-176
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,4 @@ Thank you to [Mapbox](https://www.mapbox.com/) for sponsoring this project!
4141
## Updates
4242
* **January 2022**: The [global version](https://river-runner-global.samlearner.com/) of this tool is now released and in beta! While some lingering issues are resolved and it remains in beta, it can be found on this branch, while the original, US-only version is preserved [here](https://github.com/sdl60660/river-runner/tree/us-only) in Github, and at its original URL: https://river-runner.samlearner.com/. This is to avoid any breaking changes to existing share links/paths due to any discrepancies and because minor US issues persist on the global version, mainly when paths involve dams, canals, or conduits.
4343

44-
If you'd like to be notified about major updates to the tool, you can sign up for an email list [here](https://tinyletter.com/samlearner)
44+
If you'd like to be notified about major updates to the tool, you can sign up for an email list [here](https://tinyletter.com/samlearner).

‎package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "river-runner",
3-
"version": "2.2.2",
3+
"version": "2.3.0",
44
"private": true,
55
"author": "Sam Learner",
66
"repository": {
@@ -21,12 +21,14 @@
2121
"eslint-config-airbnb-base": "^14.2.1",
2222
"eslint-plugin-import": "^2.22.1",
2323
"eslint-plugin-svelte3": "^3.2.0",
24+
"node-sass": "^7.0.1",
2425
"rollup": "^2.3.4",
2526
"rollup-plugin-css-only": "^3.1.0",
2627
"rollup-plugin-livereload": "^2.0.0",
2728
"rollup-plugin-svelte": "^7.0.0",
2829
"rollup-plugin-terser": "^7.0.0",
29-
"svelte": "^3.0.0"
30+
"svelte": "^3.0.0",
31+
"svelte-preprocess": "^4.10.7"
3032
},
3133
"dependencies": {
3234
"@rollup/plugin-json": "^4.1.0",
@@ -53,7 +55,7 @@
5355
"d3-fetch": "^2.0.0",
5456
"dateformat": "^4.5.1",
5557
"fast-xml-parser": "^3.19.0",
56-
"mapbox-gl": "2.3",
58+
"mapbox-gl": "^2.9.1",
5759
"node-html-parser": "^3.3.5",
5860
"scrollama": "^2.2.2",
5961
"sirv-cli": "^1.0.0",

‎rollup.config.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import { terser } from 'rollup-plugin-terser';
66
import css from 'rollup-plugin-css-only';
77
import json from '@rollup/plugin-json';
88

9+
import autoPreprocess from 'svelte-preprocess';
10+
11+
912
const production = !process.env.ROLLUP_WATCH;
1013

1114
function serve() {
@@ -42,7 +45,8 @@ export default {
4245
compilerOptions: {
4346
// enable run-time checks when not in production
4447
// dev: !production
45-
}
48+
},
49+
preprocess: autoPreprocess()
4650
}),
4751
// we'll extract any component CSS out into
4852
// a separate file - better for performance

‎src/components/CloseButton.svelte

Lines changed: 80 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,101 @@
11
<script>
2-
import { createEventDispatcher } from 'svelte';
2+
import { createEventDispatcher } from "svelte";
33
4-
const dispatch = createEventDispatcher();
5-
const abortRun = () => {
6-
dispatch('abort-run')
7-
}
4+
const dispatch = createEventDispatcher();
5+
const abortRun = () => {
6+
dispatch("abort-run");
7+
};
88
9-
export let callback = abortRun;
9+
export let callback = abortRun;
1010
</script>
1111

12+
<!-- style="display: {activeIndex >= 0 ? "block" : "none"};" -->
13+
<button on:click={callback} class="close" />
14+
1215
<!-- Styling mostly from here: https://svelte.dev/repl/fdbb69a2c3744cfe956a370c824eb4df?version=3.15.0 -->
13-
<style>
14-
.close {
15-
display: block;
16-
position: absolute;
17-
z-index: 100;
18-
top: 0;
19-
right: 0;
20-
transform: translate(50%, -50%);
21-
cursor: pointer;
22-
box-sizing: border-box;
23-
margin: 0;
24-
padding: 0;
25-
width: 1.5rem;
26-
height: 1.5rem;
27-
border: 0;
28-
color: black;
29-
border-radius: 1.5rem;
30-
background: white;
31-
box-shadow: 0 0 0 1px black;
32-
/* transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
16+
<style type="text/scss">
17+
@import "../settings.scss";
18+
19+
.close {
20+
display: block;
21+
position: absolute;
22+
z-index: 100;
23+
top: 0;
24+
right: 0;
25+
transform: translate(50%, -50%);
26+
cursor: pointer;
27+
box-sizing: border-box;
28+
margin: 0;
29+
padding: 0;
30+
width: 1.5rem;
31+
height: 1.5rem;
32+
border: 0;
33+
color: black;
34+
border-radius: 1.5rem;
35+
background: white;
36+
box-shadow: 0 0 0 1px black;
37+
/* transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
3338
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); */
34-
-webkit-appearance: none;
35-
}
39+
-webkit-appearance: none;
40+
}
3641
37-
.close:before, .close:after {
38-
content: '';
39-
display: block;
40-
box-sizing: border-box;
41-
position: absolute;
42-
top: 50%;
43-
width: 1rem;
44-
height: 1px;
45-
background: black;
46-
transform-origin: center;
47-
/* transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
42+
.close:before,
43+
.close:after {
44+
content: "";
45+
display: block;
46+
box-sizing: border-box;
47+
position: absolute;
48+
top: 50%;
49+
width: 1rem;
50+
height: 1px;
51+
background: black;
52+
transform-origin: center;
53+
/* transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
4854
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); */
49-
}
55+
}
5056
51-
.close:before {
52-
-webkit-transform: translate(0, -50%) rotate(45deg);
53-
-moz-transform: translate(0, -50%) rotate(45deg);
54-
transform: translate(0, -50%) rotate(45deg);
55-
left: 0.25rem;
56-
}
57+
.close:before {
58+
-webkit-transform: translate(0, -50%) rotate(45deg);
59+
-moz-transform: translate(0, -50%) rotate(45deg);
60+
transform: translate(0, -50%) rotate(45deg);
61+
left: 0.25rem;
62+
}
5763
58-
.close:after {
59-
-webkit-transform: translate(0, -50%) rotate(-45deg);
60-
-moz-transform: translate(0, -50%) rotate(-45deg);
61-
transform: translate(0, -50%) rotate(-45deg);
62-
left: 0.25rem;
63-
}
64+
.close:after {
65+
-webkit-transform: translate(0, -50%) rotate(-45deg);
66+
-moz-transform: translate(0, -50%) rotate(-45deg);
67+
transform: translate(0, -50%) rotate(-45deg);
68+
left: 0.25rem;
69+
}
6470
65-
.close:hover {
66-
background: black;
67-
}
71+
.close:hover {
72+
background: black;
73+
}
6874
69-
.close:hover:before, .close:hover:after {
70-
height: 2px;
71-
background: white;
72-
}
75+
.close:hover:before,
76+
.close:hover:after {
77+
height: 2px;
78+
background: white;
79+
}
7380
74-
.close:focus {
75-
border-color: #3399ff;
76-
box-shadow: 0 0 0 2px #3399ff;
77-
}
81+
.close:focus {
82+
border-color: #3399ff;
83+
box-shadow: 0 0 0 2px #3399ff;
84+
}
7885
79-
/* .close:active {
86+
/* .close:active {
8087
transform: scale(0.9);
8188
} */
8289
83-
.close:hover, .close:focus, .close:active {
84-
outline: none;
85-
}
90+
.close:hover,
91+
.close:focus,
92+
.close:active {
93+
outline: none;
94+
}
8695
87-
@media only screen and (max-width: 700px) {
88-
.close {
89-
top: 50%;
90-
}
96+
@media only screen and (max-width: $mobile-breakpoint) {
97+
.close {
98+
top: 50%;
9199
}
92-
100+
}
93101
</style>
94-
95-
<!-- style="display: {activeIndex >= 0 ? "block" : "none"};" -->
96-
<button on:click={callback} class="close"></button>

‎src/components/ContactBox.svelte

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -40,19 +40,33 @@
4040
<p>
4141
<strong>Sources</strong>: The data used in this project comes from the
4242
River Runner API, which is based on several open source projects and
43-
datasets and developed by
44-
<a href="https://www.usgs.gov/staff-profiles/david-l-blodgett" target="_blank" rel="noreferrer">Dave Blodgett</a>,
45-
<a href="https://internetofwater.org/about/people/kyle-onda/" target="_blank" rel="noreferrer">Kyle Onda</a>, and
46-
<a href="https://github.com/webb-ben" target="_blank" rel="noreferrer">Ben Webb</a>.
47-
Learn about it
43+
datasets and developed by
44+
<a
45+
href="https://www.usgs.gov/staff-profiles/david-l-blodgett"
46+
target="_blank"
47+
rel="noreferrer">Dave Blodgett</a
48+
>,
49+
<a
50+
href="https://internetofwater.org/about/people/kyle-onda/"
51+
target="_blank"
52+
rel="noreferrer">Kyle Onda</a
53+
>, and
54+
<a href="https://github.com/webb-ben" target="_blank" rel="noreferrer"
55+
>Ben Webb</a
56+
>. Learn about it
4857
<a href="https://ksonda.github.io/global-river-runner/" target="_blank"
4958
>here</a
50-
>.</p>
51-
52-
<p>Code and data for this project lives
53-
<a target="_blank" href={"https://github.com/sdl60660/river-runner/tree/global"}
54-
>here</a
55-
>. Thank you to <a href="https://www.mapbox.com/community/" target="_blank">Mapbox</a> for sponsoring.
59+
>.
60+
</p>
61+
62+
<p>
63+
Code and data for this project lives
64+
<a
65+
target="_blank"
66+
href={"https://github.com/sdl60660/river-runner/tree/global"}>here</a
67+
>. Thank you to
68+
<a href="https://www.mapbox.com/community/" target="_blank">Mapbox</a> for
69+
sponsoring.
5670
</p>
5771
<p>
5872
This version of the app is in beta. Report any issues you experience <a
@@ -90,7 +104,9 @@
90104
{/if}
91105
</div>
92106

93-
<style>
107+
<style type="text/scss">
108+
@import "../settings.scss";
109+
94110
.contact-box {
95111
background-color: rgba(243, 243, 243, 0.856);
96112
padding: 1rem;
@@ -139,7 +155,7 @@
139155
}
140156
}
141157
142-
@media only screen and (max-width: 700px) {
158+
@media only screen and (max-width: $mobile-breakpoint) {
143159
.contact-box {
144160
box-sizing: border-box;
145161
border-radius: 0;

‎src/components/Controls.svelte

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,9 @@
9696
</div>
9797
</div>
9898

99-
<style>
99+
<style type="text/scss">
100+
@import "../settings.scss";
101+
100102
.wrapper {
101103
background-color: rgba(221, 221, 221, 0.89);
102104
padding: 0.5rem 0.8rem;
@@ -154,7 +156,7 @@
154156
}
155157
156158
.button-active {
157-
background-color: rgb(205 179 143);
159+
background-color: rgb(205, 179, 143);
158160
border: 1px solid black;
159161
}
160162
@@ -175,7 +177,7 @@
175177
display: none;
176178
}
177179
178-
@media only screen and (max-width: 700px) {
180+
@media only screen and (max-width: $mobile-breakpoint) {
179181
/* .slow-button {
180182
display: none;
181183
} */

0 commit comments

Comments
 (0)