From 885947ee318ae615489aaca80dba07631cdd3bd2 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Thu, 18 Mar 2021 17:40:47 +0100 Subject: [PATCH] - scss framework bulma --- index.html | 225 ++++++++++++++++-------------- index_old.html | 172 +++++++++++++++++++++++ package-lock.json | 11 ++ package.json | 1 + src/css/page_bulma.scss | 296 ++++++++++++++++++++++++++++++++++++++++ src/js/main.js | 35 +++-- 6 files changed, 627 insertions(+), 113 deletions(-) create mode 100644 index_old.html create mode 100644 src/css/page_bulma.scss diff --git a/index.html b/index.html index 0e7ca83..fefe10d 100644 --- a/index.html +++ b/index.html @@ -41,131 +41,146 @@ - - -
-
- -
- - - -
-
-
- +
+
+
+ + + Log in + +
+ -
+
+
+ -
-
- -
    -
  • - GEOLOGY -
    • -
  • - ANALYSIS -
    • -
- - -
-
-
-
-
-
Download Map Image
- - - - Download - -
-
-
-
-
- -
-
Functions
- - -
+
+
+
+
+
- +
+ + +
+
+ +
+ + +
+
+
+
+
+
Download Map Image
+ + + Download + +
+
+
+
+
+ +
+
Functions
+ +
+ +
+
+
+ + +
+
+ + + +
+ +
- - -
+ + diff --git a/index_old.html b/index_old.html new file mode 100644 index 0000000..0e7ca83 --- /dev/null +++ b/index_old.html @@ -0,0 +1,172 @@ + + + + + + + + + GeotiefExplore + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + +
+ + + +
+
+
+ +
+
+
+ +
+ +
+
+ +
    +
  • + GEOLOGY +
    • +
  • + ANALYSIS +
    • +
+ + +
+
+
+
+
+
Download Map Image
+ + + + Download + +
+
+
+
+
+ +
+
Functions
+ + +
+ +
+
+
+ + +
+
+ + + +
+ + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 4d01b1c..0a6bf6f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@fortawesome/fontawesome-free": "^5.15.2", + "bulma": "^0.9.2", "lodash": "^4.17.21", "normalize.css": "^8.0.1", "proj4": "^2.6.3", @@ -1955,6 +1956,11 @@ "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", "dev": true }, + "node_modules/bulma": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz", + "integrity": "sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A==" + }, "node_modules/call-bind": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", @@ -8212,6 +8218,11 @@ "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==", "dev": true }, + "bulma": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz", + "integrity": "sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A==" + }, "call-bind": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", diff --git a/package.json b/package.json index b0a7be4..4919828 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "main": "dist/main.js", "dependencies": { "@fortawesome/fontawesome-free": "^5.15.2", + "bulma": "^0.9.2", "lodash": "^4.17.21", "normalize.css": "^8.0.1", "proj4": "^2.6.3", diff --git a/src/css/page_bulma.scss b/src/css/page_bulma.scss new file mode 100644 index 0000000..d98c6f4 --- /dev/null +++ b/src/css/page_bulma.scss @@ -0,0 +1,296 @@ +@charset "utf-8"; +// @import "~bulma/bulma"; + +// $fa-font-path: "/webfonts"; // destination folder in dist +//Adapt the path to be relative to your main.scss file +@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"; +@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss"; + +// Import a Google Font +@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); + +// Set your brand colors +$purple: #8A4D76; +$pink: #FA7C91; +$brown: #757763; +$beige-light: #D0D1CD; +$beige-lighter: #EFF0EB; +$mouse-grey: #6c6e6b; +$select-green: #03a678; + +// Update Bulma's global variables +$family-sans-serif: "Nunito", sans-serif; +$grey-dark: $brown; +// $grey-light: $beige-light; +// $primary: $purple; +// $link: $mouse-grey; +$widescreen-enabled: false; +$fullhd-enabled: false; +$tabs-link-active-border-bottom-color: $select-green; +$tabs-link-active-color: $select-green; + + +// Update some of Bulma's component variables +// $body-background-color: $beige-lighter; +$control-border-width: 2px; +$input-border-color: transparent; +// $input-shadow: none; + +.main.columns:last-child { + margin-bottom: 0; +} + +.navbar-brand img { + height: 51px; +} + +html, +body { + height: 100%; + width: 100%; + line-height: 1.6; + font-weight: 400; + font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: #222; +} + +ol, +ul { + list-style: none; + padding: 0; +} + +/* body { + padding-top: 65px; + } */ + +// section { +// text-align: left; +// padding: 60px 0 0 0; +// } + +.main { + padding-top: 51px; + // display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + /* height: 100%; */ + position: absolute; + overflow: hidden; + left: 0; + right: 0; + top: 0; + bottom: 0; + overflow-y: scroll; +} + +.canvas-area { + /* flex: 2; + display: flex; + align-items: center; + justify-content: center; */ + height: 100%; +} + +.input-area { + // flex: 1; + // display: flex; + // flex-direction: column; + align-items: center; + justify-content: center; +} + +#map-title { + display: block; + padding: 1em; +} + +.btnDownloadMeme { + margin-top: 10px; +} + +#div-map { + position: relative; + height: 100%; + width: 100%; +} + +#webgl { + height: auto; + width: auto; +} + +.mapDesktop { + overflow: hidden; + position: absolute; + bottom: 30px; + top: 30px; + left: 30px; + right: 30px; + /* Old browsers */ + background: #cde6f9; + background-image: -moz-linear-gradient(top, #cde6f9 0%, white 70%, #6b716f); + background: -webkit-linear-gradient(top, #cde6f9 0%, white 70%, #6b716f); + /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + background: linear-gradient(top, #cde6f9 0%, white 60%, #6b716f); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde6f9', endColorstr='#6b716f', GradientType=0); +} + +#inset { + position: absolute; + bottom: 0; + left: 0; + border: none; + width: 120px; + height: 120px; + /*background-color:lightcyan;*/ +} + +/* control positioning */ +.gba-control { + position: relative; + z-index: 7; + pointer-events: auto; + float: left; + clear: both; +} + +.gba-top, +.gba-bottom { + position: absolute; + // z-index: 5; + pointer-events: none; +} + +.gba-top { + top: 0; +} + +.gba-right { + right: 0; + /*right: 5px;*/ +} + +.gba-bottom { + bottom: 0; +} + +.gba-left { + left: 0; +} + +.gba-right .gba-control { + float: right; +} + +.gba-top .gba-control:not(:first-child) { + margin-top: 10px; +} + +.gba-bottom .gba-control { + margin-bottom: 10px; +} + +.gba-left .gba-control { + margin-left: 0px; +} + +.gba-control-home span { + width: 30px; + height: 30px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + border-radius: 5px; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABDlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmXl5f///+VlZWZmZmWlpaUlJSYmJiSkpKampqzs7O3t7fMzMyTk5O2trarq6uysrLR0dHY2Njb29v8/PyMjIy4uLi5ubm6urq1tbSbm5uhoaGmpqanp6eoqKi7u7u+vr7BwcHFxcXGxsbHx8fIyMjJycmpqanNzc3Ozs7Pz8/Q0NCNjY3S0tLT09PV1dXW1tavr6/Z2dmxsbHc3Nzd3d3i4uLn5+fv7+/w8PD39/f5+fn7+/uPj4/9/f3+/v6QkJA5Pja9AAAAGnRSTlMABUdVVmxucX6MtLvHycrN2Nzi4+vs7e/3+OshyJcAAAECSURBVHherdLFcsQwEEXRDjLDJOkWGYcnzMzM/P8/Eo8V18i4yl091alSaSGAgclSdnMTPQB9vKBumCriYZg3j0qKGI9DyVRxVPVNHjVZyTN6u/VzGFmNiN4di3NmWWiw1itq9+Faoux5WxhjFNeka660grkkTUZxQ1Ff7glR2WTEO+rUfI0zqgbFM1moB0rm+BEL+5FS1XzUjOvPlFHdViELx3tKa8M7xr/LW7tpvr/A6Gn+HlHGy/+Xv8Ny+XCzUtmo5/LyD2Ofp7m8LYN9nuZ9gy/1djssd17CVlmwD/Susjbrj2yvhdnJPQbTPEjpeHKPwCAvqBe6hmYXs1uY6YdfRkdtRcSvwdgAAAAASUVORK5CYII=") + /*img/home.png*/; + background-position: 50% 50%; + background-repeat: no-repeat; + display: block; +} + + + +.red-label { + color: #f00; + padding: 2px; + text-shadow: -1px -1px #fff, 0 -1px #fff, 1px -1px #fff, -1px 0 #fff, 1px 0 #fff, -1px 1px #fff, 0 1px #fff, + 1px 1px #fff; + position: absolute; + pointer-events: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +.green-label { + color: #3ad29f; + padding: 2px; + text-shadow: -1px -1px #fff, 0 -1px #fff, 1px -1px #fff, -1px 0 #fff, 1px 0 #fff, -1px 1px #fff, 0 1px #fff, + 1px 1px #fff; + position: absolute; + pointer-events: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +.grey-label { + color: #6b716f; + padding: 2px; + text-shadow: -1px -1px #fff, 0 -1px #fff, 1px -1px #fff, -1px 0 #fff, 1px 0 #fff, -1px 1px #fff, 0 1px #fff, + 1px 1px #fff; + position: absolute; + pointer-events: none; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +#div-tabs { + padding-top: 30px; + position: relative; + height: 100%; + width: 100%; +} +.tabs { + display: flex; + flex-direction: column; +} +.tab-content .tab-pane { + display: none; + /* visibility: hidden; */ +} + +.tab-content .tab-pane.active { + display: block; + /* visibility: visible; */ +} +.tab-content { + padding:1em; + } + +// Import only what you need from Bulma +@import "../../node_modules/bulma/sass/utilities/_all.sass"; +@import "../../node_modules/bulma/sass/grid/_all.sass"; +@import "../../node_modules/bulma/sass/base/_all.sass"; +@import "../../node_modules/bulma/sass/elements/button.sass"; +@import "../../node_modules/bulma/sass/elements/container.sass"; +@import "../../node_modules/bulma/sass/elements/title.sass"; +@import "../../node_modules/bulma/sass/elements/icon.sass"; +@import "../../node_modules/bulma/sass/form/_all.sass"; +@import "../../node_modules/bulma/sass/components/navbar.sass"; +@import "../../node_modules/bulma/sass/components/tabs.sass"; + +@import "../../node_modules/bulma/sass/layout/hero.sass"; +@import "../../node_modules/bulma/sass/layout/section.sass"; + +html { + overflow-y: hidden; +} diff --git a/src/js/main.js b/src/js/main.js index 224563d..5f8ee33 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -26,7 +26,7 @@ import { ShowModal } from './components/ShowModal'; import { Selection } from './clip/Selection'; import _ from "lodash"; -import '../css/page.scss'; /* style loader will import it */ +import '../css/page_bulma.scss'; /* style loader will import it */ class Application { @@ -398,17 +398,36 @@ class Application { this.dialog.show(); }, this); - domEvent.on(this.menuIcon, 'click', function (e) { - e.preventDefault(); - this.navigation.classList.toggle("active"); - }, this); + // domEvent.on(this.menuIcon, 'click', function (e) { + // e.preventDefault(); + // this.navigation.classList.toggle("active"); + // }, this); + + const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); + // Check if there are any navbar burgers + if ($navbarBurgers.length > 0) { + // Add a click event on each of them + $navbarBurgers.forEach( el => { + el.addEventListener('click', () => { + + // Get the target from the "data-target" attribute + const target = el.dataset.target; + const $target = document.getElementById(target); + + // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" + el.classList.toggle('is-active'); + $target.classList.toggle('is-active'); + + }); + }); + } - var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li span.button')); + var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li')); tabButtons.map(function (button) { button.addEventListener('click', function () { - document.querySelector('li span.active.button').classList.remove('active'); - button.classList.add('active'); + document.querySelector('li.is-active').classList.remove('is-active'); + button.classList.add('is-active'); document.querySelector('.tab-pane.active').classList.remove('active'); document.querySelector(button.getAttribute('name')).classList.add('active');