From f9ae81bddd61b9749df987e6c8ee9263ae464705 Mon Sep 17 00:00:00 2001 From: mtmail Date: Wed, 19 May 2021 19:13:01 +0200 Subject: [PATCH] upgrade Bootstrap 4 => 5, remove jquery (#146) * upgrade Bootstrap 4 => 5 --- dist/theme/about-help.html | 2 +- package.json | 3 +- rollup.config.js | 16 ++- src/components/DetailsOneRow.svelte | 2 +- src/components/Error.svelte | 4 +- src/components/Header.svelte | 58 +++++------ src/components/LastUpdated.svelte | 4 +- src/components/SearchSection.svelte | 108 ++++++++++++--------- src/components/SearchSectionDetails.svelte | 16 ++- src/components/SearchSectionReverse.svelte | 25 +++-- src/components/UrlSubmitForm.svelte | 4 +- src/global_style.css | 10 ++ src/pages/DetailsPage.svelte | 4 +- test/details.js | 4 +- yarn.lock | 19 ++-- 15 files changed, 161 insertions(+), 118 deletions(-) create mode 100644 src/global_style.css diff --git a/dist/theme/about-help.html b/dist/theme/about-help.html index cbf57ca..aa0d15d 100644 --- a/dist/theme/about-help.html +++ b/dist/theme/about-help.html @@ -21,5 +21,5 @@

If you're the adminstrator of this website you can edit the text above in - dist/branding/about-and-help.html + dist/theme/about-and-help.html

diff --git a/package.json b/package.json index adab631..1b9092b 100644 --- a/package.json +++ b/package.json @@ -28,13 +28,12 @@ "svelte": "^3.0.0" }, "dependencies": { - "bootstrap": "^4.6.0", + "bootstrap": "^5.0.0", "escape-html": "^1.0.3", "eslint": "^7.19.0", "eslint-config-airbnb-base": "^14.2.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-svelte3": "^3.0.0", - "jquery": "^3.5.1", "leaflet": "^1.7.1", "leaflet-minimap": "^3.6.1", "timeago.js": "^4.0.2" diff --git a/rollup.config.js b/rollup.config.js index 90da3f7..b3a25b4 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -4,6 +4,7 @@ import resolve from '@rollup/plugin-node-resolve'; import livereload from 'rollup-plugin-livereload'; import { terser } from 'rollup-plugin-terser'; import css from 'rollup-plugin-css-only'; +import { readFileSync, writeFileSync } from 'fs'; const production = !process.env.ROLLUP_WATCH; @@ -43,9 +44,18 @@ export default { dev: !production } }), - // we'll extract any component CSS out into - // a separate file - better for performance - css({ output: 'bundle.css' }), + css({ + output: function (styles, styleNodes) { + // make sure global_styles.css gets appended to bundle.css, + // not prepended. + // The ':global()' rules (https://svelte.dev/docs#style) get + // prepended so we can't use them to overwrite bootstrap.css + // rules + let global_styles = readFileSync('src/global_style.css'); + styles += global_styles; + writeFileSync('dist/build/bundle.css', styles); + } + }), // If you have external dependencies installed from // npm, you'll most likely need these plugins. In diff --git a/src/components/DetailsOneRow.svelte b/src/components/DetailsOneRow.svelte index 4c43907..1d63d75 100644 --- a/src/components/DetailsOneRow.svelte +++ b/src/components/DetailsOneRow.svelte @@ -14,7 +14,7 @@ - + {#if addressLine.localname} {addressLine.localname} {:else} diff --git a/src/components/Error.svelte b/src/components/Error.svelte index db542e3..9267963 100644 --- a/src/components/Error.svelte +++ b/src/components/Error.svelte @@ -14,8 +14,6 @@
{error_message} - +
{/if} diff --git a/src/components/Header.svelte b/src/components/Header.svelte index 514fe20..a93d6c5 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -64,37 +64,39 @@
diff --git a/src/components/LastUpdated.svelte b/src/components/LastUpdated.svelte index 129c893..08be5d9 100644 --- a/src/components/LastUpdated.svelte +++ b/src/components/LastUpdated.svelte @@ -48,7 +48,7 @@
- + Loading data from API ...
@@ -62,7 +62,7 @@
{/if}
-
+
{#if last_updated_date} Data last updated: {timeago.format(new Date(last_updated_date))} diff --git a/src/components/SearchSection.svelte b/src/components/SearchSection.svelte index c789804..6bf7bca 100644 --- a/src/components/SearchSection.svelte +++ b/src/components/SearchSection.svelte @@ -79,64 +79,80 @@
- - - - - - - - - - +
+ +
+
+ + + + + + + + +
- - - - - - - - - - - - - - - +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + + + + + +
diff --git a/src/components/SearchSectionDetails.svelte b/src/components/SearchSectionDetails.svelte index cd5faac..a779b4f 100644 --- a/src/components/SearchSectionDetails.svelte +++ b/src/components/SearchSectionDetails.svelte @@ -25,11 +25,17 @@
- - +
+
+ +
+
+ +
+
OSM type+id (N123, n123, W123, w123, R123, r123), diff --git a/src/components/SearchSectionReverse.svelte b/src/components/SearchSectionReverse.svelte index 1861902..a455a4e 100644 --- a/src/components/SearchSectionReverse.svelte +++ b/src/components/SearchSectionReverse.svelte @@ -39,25 +39,29 @@ -
+
+
+
-
+
gotoCoordinates(lon, lat)} class="btn btn-outline-secondary btn-sm" title="switch lat and lon"><>
-
+
+
+
-
+
- {#each zoomLevels() as zoomTitle, i} {/each}
-
+