geolba/GeotiefExplore
2
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Releases Wiki Activity

- use Open Sans font locally

Browse Source 
- npm updates
- uninstall normalize.css and three-cg-ts packages
This commit is contained in:
Arno Kaimbacher 2022-08-30 17:29:00 +02:00
parent c60220d08d
commit eb0721c681
4 changed files with 4593 additions and 3521 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7779
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

23
package.json
View File

@ -4,14 +4,13 @@
"description": "3D geology viewer", "description": "3D geology viewer",
"main": "dist/main.js", "main": "dist/main.js",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2", "@fontsource/open-sans": "^4.5.11",
"@types/three": "^0.129.1", "@fortawesome/fontawesome-free": "^6.1.2",
"@types/three": "^0.143.2",
"bulma": "^0.9.2", "bulma": "^0.9.2",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"normalize.css": "^8.0.1",
"proj4": "^2.6.3", "proj4": "^2.6.3",
"three": "^0.129.0", "three": "^0.143.0"
"three-csg-ts": "^3.1.3"
}, },
"author": "Arno Kaimbacher", "author": "Arno Kaimbacher",
"license": "MIT", "license": "MIT",
@ -24,15 +23,15 @@
"@babel/preset-env": "^7.12.7", "@babel/preset-env": "^7.12.7",
"@babel/preset-typescript": "^7.13.0", "@babel/preset-typescript": "^7.13.0",
"babel-loader": "^8.2.1", "babel-loader": "^8.2.1",
"concurrently": "^6.0.0", "concurrently": "^7.3.0",
"css-loader": "^6.2.0", "css-loader": "^6.2.0",
"dotenv": "^10.0.0", "dotenv": "^16.0.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"http-server": "^14.1.1",
"img-loader": "^4.0.0", "img-loader": "^4.0.0",
"mini-css-extract-plugin": "^2.0.0", "mini-css-extract-plugin": "^2.0.0",
"node-sass": "^6.0.0", "node-sass": "^7.0.1",
"resolve-url-loader": "^4.0.0", "sass-loader": "^13.0.2",
"sass-loader": "^12.1.0",
"style-loader": "^3.0.0", "style-loader": "^3.0.0",
"terser-webpack-plugin": "^5.0.3", "terser-webpack-plugin": "^5.0.3",
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
@ -44,7 +43,9 @@
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js", "babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
"serve": "http-server", "serve": "http-server",
"prod": "rm -rf dist && webpack --progress --mode=production", "prod": "rm -rf dist && webpack --progress --mode=production",
"watch": "concurrently \"npm run serve\" \"npx webpack --progress --mode=development --watch\" " "prod_serve": "concurrently \"npm run serve\" \"npx webpack --progress --mode=production --watch\" ",
"dev_serve": "concurrently \"npm run serve\" \"npx webpack --progress --mode=development --watch\" ",
"dev": "rm -rf dist && npx webpack --progress --mode=development --watch"
}, },
"keywords": [ "keywords": [
"3D", "3D",

300
src/css/page_bulma.scss
View File

@ -11,12 +11,20 @@
// $fa-font-path: "../../webfonts" !default; // $fa-font-path: "../../webfonts" !default;
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts" !default; $fa-font-path: "~@fortawesome/fontawesome-free/webfonts" !default;
@import '~@fortawesome/fontawesome-free/scss/solid'; @import "~@fortawesome/fontawesome-free/scss/solid";
@import '~@fortawesome/fontawesome-free/scss/fontawesome'; @import "~@fortawesome/fontawesome-free/scss/fontawesome";
// Import a Google Font // Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700'); // @import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
@import "@fontsource/open-sans/400.css"; // Weight 500.
// @font-face {
// font-family: "Open Sans";
// font-style: normal;
// font-weight: normal;
// src: url("open-sans-greek-400-normal.woff2") format("woff2"),
// url("open-sans-greek-400-normal.woff") format("woff");
// }
// 1. Import the initial variables // 1. Import the initial variables
@import "../../node_modules/bulma/sass/utilities/_all.sass"; @import "../../node_modules/bulma/sass/utilities/_all.sass";
@ -25,18 +33,18 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts" !default;
// Update the blue shade, used for links // Update the blue shade, used for links
$blue: #06bcef; $blue: #06bcef;
// Add pink and its invert // Add pink and its invert
$pink: #FA7C91; $pink: #fa7c91;
$pink-invert: #fff; $pink-invert: #fff;
$purple: #8A4D76; $purple: #8a4d76;
$brown: #757763; $brown: #757763;
$beige-light: #D0D1CD; $beige-light: #d0d1cd;
$beige-lighter: #EFF0EB; $beige-lighter: #eff0eb;
$mouse-grey: #6c6e6b; $mouse-grey: #6c6e6b;
$select-green: #03a678; $select-green: #03a678;
// Update Bulma's global variables // Update Bulma's global variables
// Update the sans-serif font family // Update the sans-serif font family
$family-sans-serif: "Nunito", sans-serif; $family-sans-serif: "Open Sans", sans-serif;
// 3. Set the derived variables // 3. Set the derived variables
$grey-dark: $brown; $grey-dark: $brown;
@ -49,7 +57,6 @@ $fullhd-enabled: false;
$tabs-link-active-border-bottom-color: $select-green; $tabs-link-active-border-bottom-color: $select-green;
$tabs-link-active-color: $select-green; $tabs-link-active-color: $select-green;
// Update some of Bulma's component variables // Update some of Bulma's component variables
// $body-background-color: $beige-lighter; // $body-background-color: $beige-lighter;
$control-border-width: 2px; $control-border-width: 2px;
@ -57,27 +64,28 @@ $input-border-color: transparent;
// $input-shadow: none; // $input-shadow: none;
.main.columns:last-child { .main.columns:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.navbar-brand img { .navbar-brand img {
height: 51px; height: 51px;
} }
html, html,
body { body {
height: 100%; height: 100%;
width: 100%; width: 100%;
line-height: 1.6; line-height: 1.6;
font-weight: 400; font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; // font-family: $family-sans-serif;
color: #222; font-family: 'Open Sans', sans-serif;
color: #222;
} }
ol, ol,
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
/* body { /* body {
@ -90,217 +98,217 @@ ul {
// } // }
.main { .main {
padding-top: 51px; padding-top: 51px;
// display: flex; // display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
/* height: 100%; */ /* height: 100%; */
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
overflow-y: scroll; overflow-y: scroll;
} }
.canvas-area { .canvas-area {
/* flex: 2; /* flex: 2;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; */ justify-content: center; */
height: 100%; height: 100%;
} }
.input-area { .input-area {
// flex: 1; // flex: 1;
// display: flex; // display: flex;
// flex-direction: column; // flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
#map-title { #map-title {
display: block; display: block;
padding: 1em; padding: 1em;
} }
.btnDownloadMeme { .btnDownloadMeme {
margin-top: 10px; margin-top: 10px;
} }
#div-map { #div-map {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
#webgl { #webgl {
height: auto; height: auto;
width: auto; width: auto;
} }
.mapDesktop { .mapDesktop {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
bottom: 30px; bottom: 30px;
top: 30px; top: 30px;
left: 30px; left: 30px;
right: 30px; right: 30px;
/* Old browsers */ /* Old browsers */
background: #cde6f9; background: #cde6f9;
background-image: -moz-linear-gradient(top, #cde6f9 0%, white 70%, #6b716f); background-image: -moz-linear-gradient(top, #cde6f9 0%, white 70%, #6b716f);
background: -webkit-linear-gradient(top, #cde6f9 0%, white 70%, #6b716f); background: -webkit-linear-gradient(top, #cde6f9 0%, white 70%, #6b716f);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: linear-gradient(top, #cde6f9 0%, white 60%, #6b716f); background: linear-gradient(top, #cde6f9 0%, white 60%, #6b716f);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde6f9', endColorstr='#6b716f', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde6f9', endColorstr='#6b716f', GradientType=0);
} }
#inset { #inset {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
border: none; border: none;
width: 120px; width: 120px;
height: 120px; height: 120px;
/*background-color:lightcyan;*/ /*background-color:lightcyan;*/
} }
/* control positioning */ /* control positioning */
.gba-control { .gba-control {
position: relative; position: relative;
z-index: 7; z-index: 7;
pointer-events: auto; pointer-events: auto;
float: left; float: left;
clear: both; clear: both;
} }
.gba-top, .gba-top,
.gba-bottom { .gba-bottom {
position: absolute; position: absolute;
// z-index: 5; // z-index: 5;
pointer-events: none; pointer-events: none;
} }
.gba-top { .gba-top {
top: 0; top: 0;
} }
.gba-right { .gba-right {
right: 0; right: 0;
/*right: 5px;*/ /*right: 5px;*/
} }
.gba-bottom { .gba-bottom {
bottom: 0; bottom: 0;
} }
.gba-left { .gba-left {
left: 0; left: 0;
} }
.gba-right .gba-control { .gba-right .gba-control {
float: right; float: right;
} }
.gba-top .gba-control:not(:first-child) { .gba-top .gba-control:not(:first-child) {
margin-top: 10px; margin-top: 10px;
} }
.gba-bottom .gba-control { .gba-bottom .gba-control {
margin-bottom: 10px; margin-bottom: 10px;
} }
.gba-left .gba-control { .gba-left .gba-control {
margin-left: 0px; margin-left: 0px;
} }
.gba-control-home a { .gba-control-home a {
width: 30px; width: 30px;
height: 30px; height: 30px;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
border-radius: 4px; border-radius: 4px;
display: block; display: block;
background-color: #999999; background-color: #999999;
text-align: center; text-align: center;
color: #ffffff; color: #ffffff;
display: block; display: block;
} }
.red-label { .red-label {
color: #f00; color: #f00;
padding: 2px; 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, text-shadow: -1px -1px #fff, 0 -1px #fff, 1px -1px #fff, -1px 0 #fff,
1px 1px #fff; 1px 0 #fff, -1px 1px #fff, 0 1px #fff, 1px 1px #fff;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
} }
.green-label { .green-label {
color: #3ad29f; color: #3ad29f;
padding: 2px; 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, text-shadow: -1px -1px #fff, 0 -1px #fff, 1px -1px #fff, -1px 0 #fff,
1px 1px #fff; 1px 0 #fff, -1px 1px #fff, 0 1px #fff, 1px 1px #fff;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
} }
.grey-label { .grey-label {
color: #6b716f; color: #6b716f;
padding: 2px; 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, text-shadow: -1px -1px #fff, 0 -1px #fff, 1px -1px #fff, -1px 0 #fff,
1px 1px #fff; 1px 0 #fff, -1px 1px #fff, 0 1px #fff, 1px 1px #fff;
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
} }
#div-tabs { #div-tabs {
padding-top: 30px; padding-top: 30px;
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.tabs { .tabs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.tab-content .tab-pane { .tab-content .tab-pane {
display: none; display: none;
/* visibility: hidden; */ /* visibility: hidden; */
} }
.tab-content .tab-pane.active { .tab-content .tab-pane.active {
display: block; display: block;
/* visibility: visible; */ /* visibility: visible; */
} }
.tab-content { .tab-content {
padding:1em; padding: 1em;
} }
.tab-pane section { .tab-pane section {
padding: 0; padding: 0;
} }
// 4. Import the rest of bulma, only what you need from Bulma // 4. Import the rest of bulma, only what you need from Bulma
// @import "../../node_modules/bulma/sass/utilities/_all.sass"; // @import "../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../node_modules/bulma/sass/grid/_all.sass"; @import "../../node_modules/bulma/sass/grid/_all.sass";
@import "../../node_modules/bulma/sass/base/_all.sass"; // @import "../../node_modules/bulma/sass/base/_all.sass";
@import "../../node_modules/bulma/sass/base/minireset.sass";
@import "../../node_modules/bulma/sass/elements/box.sass"; @import "../../node_modules/bulma/sass/elements/box.sass";
@import "../../node_modules/bulma/sass/elements/button.sass"; @import "../../node_modules/bulma/sass/elements/button.sass";
@import "../../node_modules/bulma/sass/elements/container.sass"; @import "../../node_modules/bulma/sass/elements/container.sass";
@ -316,5 +324,5 @@ ul {
@import "../../node_modules/bulma/sass/layout/section.sass"; @import "../../node_modules/bulma/sass/layout/section.sass";
html { html {
overflow-y: hidden; overflow-y: hidden;
} }

8
webpack.config.js
View File

@ -35,14 +35,14 @@ module.exports = {
// }, // },
module: { module: {
rules: [ rules: [
// {
// {
// test: /\.(svg|eot|ttf|woff|woff2)$/, // test: /\.(svg|eot|ttf|woff|woff2)$/,
// loader: 'url-loader', // loader: 'url-loader',
// // include: path.resolve(__dirname, '~@fontsource/open-sans/files/'),
// options: { // options: {
// limit: 10000, // limit: 10000,
// name: 'webfonts/[name].[ext]' // name: '[name].[ext]',
// outputPath: 'assets/fonts/',
// } // }
// }, // },