Skip to content

Commit

Permalink
Merge pull request #30 from sdl60660/globe-view
Browse files Browse the repository at this point in the history
Globe View
  • Loading branch information
sdl60660 committed Jun 29, 2022
2 parents 1bc4961 + 2f2ae5f commit 84a0d75
Show file tree
Hide file tree
Showing 12 changed files with 234 additions and 176 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,4 @@ Thank you to [Mapbox](https://www.mapbox.com/) for sponsoring this project!
## Updates
* **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.

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)
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).
8 changes: 5 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "river-runner",
"version": "2.2.2",
"version": "2.3.0",
"private": true,
"author": "Sam Learner",
"repository": {
Expand All @@ -21,12 +21,14 @@
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-svelte3": "^3.2.0",
"node-sass": "^7.0.1",
"rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^7.0.0",
"rollup-plugin-terser": "^7.0.0",
"svelte": "^3.0.0"
"svelte": "^3.0.0",
"svelte-preprocess": "^4.10.7"
},
"dependencies": {
"@rollup/plugin-json": "^4.1.0",
Expand All @@ -53,7 +55,7 @@
"d3-fetch": "^2.0.0",
"dateformat": "^4.5.1",
"fast-xml-parser": "^3.19.0",
"mapbox-gl": "2.3",
"mapbox-gl": "^2.9.1",
"node-html-parser": "^3.3.5",
"scrollama": "^2.2.2",
"sirv-cli": "^1.0.0",
Expand Down
6 changes: 5 additions & 1 deletion rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
import json from '@rollup/plugin-json';

import autoPreprocess from 'svelte-preprocess';


const production = !process.env.ROLLUP_WATCH;

function serve() {
Expand Down Expand Up @@ -42,7 +45,8 @@ export default {
compilerOptions: {
// enable run-time checks when not in production
// dev: !production
}
},
preprocess: autoPreprocess()
}),
// we'll extract any component CSS out into
// a separate file - better for performance
Expand Down
155 changes: 80 additions & 75 deletions src/components/CloseButton.svelte
Original file line number Diff line number Diff line change
@@ -1,96 +1,101 @@
<script>
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
const abortRun = () => {
dispatch('abort-run')
}
const dispatch = createEventDispatcher();
const abortRun = () => {
dispatch("abort-run");
};
export let callback = abortRun;
export let callback = abortRun;
</script>

<!-- style="display: {activeIndex >= 0 ? "block" : "none"};" -->
<button on:click={callback} class="close" />

<!-- Styling mostly from here: https://svelte.dev/repl/fdbb69a2c3744cfe956a370c824eb4df?version=3.15.0 -->
<style>
.close {
display: block;
position: absolute;
z-index: 100;
top: 0;
right: 0;
transform: translate(50%, -50%);
cursor: pointer;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 1.5rem;
height: 1.5rem;
border: 0;
color: black;
border-radius: 1.5rem;
background: white;
box-shadow: 0 0 0 1px black;
/* transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
<style type="text/scss">
@import "../settings.scss";
.close {
display: block;
position: absolute;
z-index: 100;
top: 0;
right: 0;
transform: translate(50%, -50%);
cursor: pointer;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 1.5rem;
height: 1.5rem;
border: 0;
color: black;
border-radius: 1.5rem;
background: white;
box-shadow: 0 0 0 1px black;
/* transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); */
-webkit-appearance: none;
}
-webkit-appearance: none;
}
.close:before, .close:after {
content: '';
display: block;
box-sizing: border-box;
position: absolute;
top: 50%;
width: 1rem;
height: 1px;
background: black;
transform-origin: center;
/* transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
.close:before,
.close:after {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
top: 50%;
width: 1rem;
height: 1px;
background: black;
transform-origin: center;
/* transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); */
}
}
.close:before {
-webkit-transform: translate(0, -50%) rotate(45deg);
-moz-transform: translate(0, -50%) rotate(45deg);
transform: translate(0, -50%) rotate(45deg);
left: 0.25rem;
}
.close:before {
-webkit-transform: translate(0, -50%) rotate(45deg);
-moz-transform: translate(0, -50%) rotate(45deg);
transform: translate(0, -50%) rotate(45deg);
left: 0.25rem;
}
.close:after {
-webkit-transform: translate(0, -50%) rotate(-45deg);
-moz-transform: translate(0, -50%) rotate(-45deg);
transform: translate(0, -50%) rotate(-45deg);
left: 0.25rem;
}
.close:after {
-webkit-transform: translate(0, -50%) rotate(-45deg);
-moz-transform: translate(0, -50%) rotate(-45deg);
transform: translate(0, -50%) rotate(-45deg);
left: 0.25rem;
}
.close:hover {
background: black;
}
.close:hover {
background: black;
}
.close:hover:before, .close:hover:after {
height: 2px;
background: white;
}
.close:hover:before,
.close:hover:after {
height: 2px;
background: white;
}
.close:focus {
border-color: #3399ff;
box-shadow: 0 0 0 2px #3399ff;
}
.close:focus {
border-color: #3399ff;
box-shadow: 0 0 0 2px #3399ff;
}
/* .close:active {
/* .close:active {
transform: scale(0.9);
} */
.close:hover, .close:focus, .close:active {
outline: none;
}
.close:hover,
.close:focus,
.close:active {
outline: none;
}
@media only screen and (max-width: 700px) {
.close {
top: 50%;
}
@media only screen and (max-width: $mobile-breakpoint) {
.close {
top: 50%;
}
}
</style>

<!-- style="display: {activeIndex >= 0 ? "block" : "none"};" -->
<button on:click={callback} class="close"></button>
42 changes: 29 additions & 13 deletions src/components/ContactBox.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -40,19 +40,33 @@
<p>
<strong>Sources</strong>: The data used in this project comes from the
River Runner API, which is based on several open source projects and
datasets and developed by
<a href="https://www.usgs.gov/staff-profiles/david-l-blodgett" target="_blank" rel="noreferrer">Dave Blodgett</a>,
<a href="https://internetofwater.org/about/people/kyle-onda/" target="_blank" rel="noreferrer">Kyle Onda</a>, and
<a href="https://github.com/webb-ben" target="_blank" rel="noreferrer">Ben Webb</a>.
Learn about it
datasets and developed by
<a
href="https://www.usgs.gov/staff-profiles/david-l-blodgett"
target="_blank"
rel="noreferrer">Dave Blodgett</a
>,
<a
href="https://internetofwater.org/about/people/kyle-onda/"
target="_blank"
rel="noreferrer">Kyle Onda</a
>, and
<a href="https://github.com/webb-ben" target="_blank" rel="noreferrer"
>Ben Webb</a
>. Learn about it
<a href="https://ksonda.github.io/global-river-runner/" target="_blank"
>here</a
>.</p>

<p>Code and data for this project lives
<a target="_blank" href={"https://github.com/sdl60660/river-runner/tree/global"}
>here</a
>. Thank you to <a href="https://www.mapbox.com/community/" target="_blank">Mapbox</a> for sponsoring.
>.
</p>

<p>
Code and data for this project lives
<a
target="_blank"
href={"https://github.com/sdl60660/river-runner/tree/global"}>here</a
>. Thank you to
<a href="https://www.mapbox.com/community/" target="_blank">Mapbox</a> for
sponsoring.
</p>
<p>
This version of the app is in beta. Report any issues you experience <a
Expand Down Expand Up @@ -90,7 +104,9 @@
{/if}
</div>

<style>
<style type="text/scss">
@import "../settings.scss";
.contact-box {
background-color: rgba(243, 243, 243, 0.856);
padding: 1rem;
Expand Down Expand Up @@ -139,7 +155,7 @@
}
}
@media only screen and (max-width: 700px) {
@media only screen and (max-width: $mobile-breakpoint) {
.contact-box {
box-sizing: border-box;
border-radius: 0;
Expand Down
8 changes: 5 additions & 3 deletions src/components/Controls.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -154,7 +156,7 @@
}
.button-active {
background-color: rgb(205 179 143);
background-color: rgb(205, 179, 143);
border: 1px solid black;
}
Expand All @@ -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;
} */
Expand Down

1 comment on commit 84a0d75

@vercel
Copy link

@vercel vercel bot commented on 84a0d75 Jun 29, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.