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

- teilweise Umstellung von css auf scss (page.scss)

Browse Source 
- adding fontawesome-free, sass-loader, node-sass. resolve-url-loader
- MobileDialog.js isn't a map control anymore
- about menu with small description (mouse icons)
This commit is contained in:
Arno Kaimbacher 2021-02-10 12:20:43 +01:00
parent cc0100fa44
commit b390fd6f21
12 changed files with 3314 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/map/leftMouse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 B

BIN
images/map/middleMouse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 298 B

BIN
images/map/rightMouse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 343 B

15
index.html
View File

@ -50,7 +50,7 @@
</a> </a>
<div class="row"> <div class="row">
<div class="logo two columns"> <div class="logo two columns">
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="http://www.europe-geology.eu/onshore-geology/geological-map/">
<img src="images/egdi_logo.svg" height="51"> <img src="images/egdi_logo.svg" height="51">
</a> </a>
</div> </div>
@ -58,6 +58,19 @@
</div> </div>
<ul class="menu main-navigation six columns"> <ul class="menu main-navigation six columns">
<!-- <li><a id="menu-map-icon" href="#map">Map</a></li> --> <!-- <li><a id="menu-map-icon" href="#map">Map</a></li> -->
<!-- <li>
<a href="http://www.europe-geology.eu/onshore-geology/geological-map/" target="_blank"
class='home_button gba_button'>
<span class='fm_icon fa fa-home'></span>
<span class='fm_icon_text text_show'>EGDI</span>
</a>
</li> -->
<li>
<a id="menu-about-icon" href='#' class='gba_button about_button'>
<i class="fm_icon fa fa-question"></i>
<span class='fm_icon_text text_show'>About</span>
</a>
</li>
</ul> </ul>
</div> </div>
</nav> </nav>

3035
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -4,6 +4,7 @@
"description": "3D geology viewer", "description": "3D geology viewer",
"main": "dist/main.js", "main": "dist/main.js",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^5.15.2",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"proj4": "^2.6.3", "proj4": "^2.6.3",
"three": "^0.125.1" "three": "^0.125.1"
@ -23,6 +24,9 @@
"img-loader": "^3.0.2", "img-loader": "^3.0.2",
"less-loader": "^7.1.0", "less-loader": "^7.1.0",
"mini-css-extract-plugin": "^1.3.1", "mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"resolve-url-loader": "^3.1.2",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0", "style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3", "terser-webpack-plugin": "^5.0.3",
"url-loader": "^4.1.1", "url-loader": "^4.1.1",

330
src/css/page.css → src/css/page.scss
View File

@ -1,4 +1,10 @@
@import "../../node_modules/normalize.css/normalize.css"; @import "../../node_modules/normalize.css/normalize.css";
// $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";
@import "../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
/* html, body /* html, body
{ {
height: 100%; height: 100%;
@ -8,7 +14,8 @@
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} */ } */
html, body { html,
body {
height: 100%; height: 100%;
width: 100%; width: 100%;
line-height: 1.6; line-height: 1.6;
@ -39,7 +46,7 @@ section {
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
overflow-y: scroll overflow-y: scroll;
} }
.canvas-area { .canvas-area {
@ -114,7 +121,8 @@ section {
clear: both; clear: both;
} }
.gba-top, .gba-bottom { .gba-top,
.gba-bottom {
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
pointer-events: none; pointer-events: none;
@ -162,8 +170,8 @@ section {
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
border-radius: 5px; 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-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-position: 50% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
display: block; display: block;
@ -172,40 +180,45 @@ section {
/* Typography /* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0; margin-top: 0;
margin-bottom: 2rem; margin-bottom: 2rem;
font-weight: 300; font-weight: 300;
} }
h1 { h1 {
font-size: 4.0rem; font-size: 4rem;
line-height: 1.2; line-height: 1.2;
letter-spacing: -.1rem; letter-spacing: -0.1rem;
} }
h2 { h2 {
font-size: 3.6rem; font-size: 3.6rem;
line-height: 1.25; line-height: 1.25;
letter-spacing: -.1rem; letter-spacing: -0.1rem;
} }
h3 { h3 {
font-size: 3.0rem; font-size: 3rem;
line-height: 1.3; line-height: 1.3;
letter-spacing: -.1rem; letter-spacing: -0.1rem;
} }
h4 { h4 {
font-size: 2.4rem; font-size: 2.4rem;
line-height: 1.35; line-height: 1.35;
letter-spacing: -.08rem; letter-spacing: -0.08rem;
} }
h5 { h5 {
font-size: 1.8rem; font-size: 1.8rem;
line-height: 1.5; line-height: 1.5;
letter-spacing: -.05rem; letter-spacing: -0.05rem;
} }
h6 { h6 {
@ -218,7 +231,7 @@ h6 {
@media (min-width: 550px) { @media (min-width: 550px) {
h1 { h1 {
font-size: 5.0rem; font-size: 5rem;
} }
h2 { h2 {
font-size: 4.2rem; font-size: 4.2rem;
@ -227,7 +240,7 @@ h6 {
font-size: 3.6rem; font-size: 3.6rem;
} }
h4 { h4 {
font-size: 3.0rem; font-size: 3rem;
} }
h5 { h5 {
font-size: 2.4rem; font-size: 2.4rem;
@ -245,11 +258,11 @@ p {
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
a { a {
color: #1EAEDB; color: #1eaedb;
} }
a:hover { a:hover {
color: #0FA0CE; color: #0fa0ce;
} }
/* Grid /* Grid
@ -264,7 +277,8 @@ a:hover {
box-sizing: border-box; box-sizing: border-box;
} }
.column, .columns { .column,
.columns {
width: 100%; width: 100%;
float: left; float: left;
box-sizing: border-box; box-sizing: border-box;
@ -285,13 +299,16 @@ a:hover {
.container { .container {
width: 80%; width: 80%;
} }
.column, .columns { .column,
.columns {
margin-left: 4%; margin-left: 4%;
} }
.column:first-child, .columns:first-child { .column:first-child,
.columns:first-child {
margin-left: 0; margin-left: 0;
} }
.one.column, .one.columns { .one.column,
.one.columns {
width: 4.66666666667%; width: 4.66666666667%;
} }
.two.columns { .two.columns {
@ -316,7 +333,7 @@ a:hover {
width: 65.3333333333%; width: 65.3333333333%;
} }
.nine.columns { .nine.columns {
width: 74.0%; width: 74%;
} }
.ten.columns { .ten.columns {
width: 82.6666666667%; width: 82.6666666667%;
@ -338,46 +355,60 @@ a:hover {
width: 48%; width: 48%;
} }
/* Offsets */ /* Offsets */
.offset-by-one.column, .offset-by-one.columns { .offset-by-one.column,
.offset-by-one.columns {
margin-left: 8.66666666667%; margin-left: 8.66666666667%;
} }
.offset-by-two.column, .offset-by-two.columns { .offset-by-two.column,
.offset-by-two.columns {
margin-left: 17.3333333333%; margin-left: 17.3333333333%;
} }
.offset-by-three.column, .offset-by-three.columns { .offset-by-three.column,
.offset-by-three.columns {
margin-left: 26%; margin-left: 26%;
} }
.offset-by-four.column, .offset-by-four.columns { .offset-by-four.column,
.offset-by-four.columns {
margin-left: 34.6666666667%; margin-left: 34.6666666667%;
} }
.offset-by-five.column, .offset-by-five.columns { .offset-by-five.column,
.offset-by-five.columns {
margin-left: 43.3333333333%; margin-left: 43.3333333333%;
} }
.offset-by-six.column, .offset-by-six.columns { .offset-by-six.column,
.offset-by-six.columns {
margin-left: 52%; margin-left: 52%;
} }
.offset-by-seven.column, .offset-by-seven.columns { .offset-by-seven.column,
.offset-by-seven.columns {
margin-left: 60.6666666667%; margin-left: 60.6666666667%;
} }
.offset-by-eight.column, .offset-by-eight.columns { .offset-by-eight.column,
.offset-by-eight.columns {
margin-left: 69.3333333333%; margin-left: 69.3333333333%;
} }
.offset-by-nine.column, .offset-by-nine.columns { .offset-by-nine.column,
margin-left: 78.0%; .offset-by-nine.columns {
margin-left: 78%;
} }
.offset-by-ten.column, .offset-by-ten.columns { .offset-by-ten.column,
.offset-by-ten.columns {
margin-left: 86.6666666667%; margin-left: 86.6666666667%;
} }
.offset-by-eleven.column, .offset-by-eleven.columns { .offset-by-eleven.column,
.offset-by-eleven.columns {
margin-left: 95.3333333333%; margin-left: 95.3333333333%;
} }
.offset-by-one-third.column, .offset-by-one-third.columns { .offset-by-one-third.column,
.offset-by-one-third.columns {
margin-left: 34.6666666667%; margin-left: 34.6666666667%;
} }
.offset-by-two-thirds.column, .offset-by-two-thirds.columns { .offset-by-two-thirds.column,
.offset-by-two-thirds.columns {
margin-left: 69.3333333333%; margin-left: 69.3333333333%;
} }
.offset-by-one-half.column, .offset-by-one-half.columns { .offset-by-one-half.column,
.offset-by-one-half.columns {
margin-left: 52%; margin-left: 52%;
} }
} }
@ -387,7 +418,9 @@ a:hover {
/* Self Clearing Goodness */ /* Self Clearing Goodness */
.container:after, .row:after, .u-cf { .container:after,
.row:after,
.u-cf {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
@ -395,7 +428,11 @@ a:hover {
/* Buttons /* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] { .button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block; display: inline-block;
height: 38px; height: 38px;
padding: 0 30px; padding: 0 30px;
@ -404,7 +441,7 @@ a:hover {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
line-height: 38px; line-height: 38px;
letter-spacing: .1rem; letter-spacing: 0.1rem;
text-transform: uppercase; text-transform: uppercase;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
@ -415,32 +452,62 @@ a:hover {
box-sizing: border-box; box-sizing: border-box;
} }
.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { .button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: #333; color: #333;
border-color: #888; border-color: #888;
outline: 0; outline: 0;
} }
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { .button.button-primary,
color: #FFF; button.button-primary,
background-color: #33C3F0; input[type="submit"].button-primary,
border-color: #33C3F0; input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #fff;
background-color: #33c3f0;
border-color: #33c3f0;
} }
.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { .button.button-primary:hover,
color: #FFF; button.button-primary:hover,
background-color: #1EAEDB; input[type="submit"].button-primary:hover,
border-color: #1EAEDB; input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: #fff;
background-color: #1eaedb;
border-color: #1eaedb;
} }
/* Forms /* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px; height: 38px;
padding: 6px 10px; padding: 6px 10px;
/* The 6px vertically centers text on FF, ignored by Webkit */ /* The 6px vertically centers text on FF, ignored by Webkit */
background-color: #fff; background-color: #fff;
border: 1px solid #D1D1D1; border: 1px solid #d1d1d1;
border-radius: 4px; border-radius: 4px;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;
@ -448,7 +515,14 @@ input[type="email"], input[type="number"], input[type="search"], input[type="tex
/* Removes awkward default styles on some inputs for iOS */ /* Removes awkward default styles on some inputs for iOS */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
@ -460,14 +534,23 @@ textarea {
padding-bottom: 6px; padding-bottom: 6px;
} }
input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { input[type="email"]:focus,
border: 1px solid #33C3F0; input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33c3f0;
outline: 0; outline: 0;
} }
label, legend { label,
legend {
display: block; display: block;
margin-bottom: .5rem; margin-bottom: 0.5rem;
font-weight: 600; font-weight: 600;
} }
@ -476,13 +559,14 @@ fieldset {
border-width: 0; border-width: 0;
} }
input[type="checkbox"], input[type="radio"] { input[type="checkbox"],
input[type="radio"] {
display: inline; display: inline;
} }
label>.label-body { label > .label-body {
display: inline-block; display: inline-block;
margin-left: .5rem; margin-left: 0.5rem;
font-weight: normal; font-weight: normal;
} }
@ -510,16 +594,16 @@ label>.label-body {
position: absolute; position: absolute;
left: 100%; left: 100%;
padding: 20px; padding: 20px;
-webkit-transition: all .15s ease-in-out; -webkit-transition: all 0.15s ease-in-out;
-moz-transition: all .15s ease-in-out; -moz-transition: all 0.15s ease-in-out;
-ms-transition: all .15s ease-in-out; -ms-transition: all 0.15s ease-in-out;
-o-transition: all .15s ease-in-out; -o-transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
user-select: none; user-select: none;
} }
.header .menu-icon.active { .header .menu-icon.active {
background-color: rgba(0, 0, 0, .3); background-color: rgba(0, 0, 0, 0.3);
} }
.header .menu-icon:hover { .header .menu-icon:hover {
@ -532,11 +616,11 @@ label>.label-body {
/* position: absolute; /* position: absolute;
padding: 22px; padding: 22px;
color: black; */ color: black; */
-webkit-transition: all .15s ease-in-out; -webkit-transition: all 0.15s ease-in-out;
-moz-transition: all .15s ease-in-out; -moz-transition: all 0.15s ease-in-out;
-ms-transition: all .15s ease-in-out; -ms-transition: all 0.15s ease-in-out;
-o-transition: all .15s ease-in-out; -o-transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
user-select: none; user-select: none;
} }
@ -561,11 +645,11 @@ label>.label-body {
-ms-transform: translateX(-100%); -ms-transform: translateX(-100%);
-o-transform: translateX(-100%); -o-transform: translateX(-100%);
transform: translateX(-100%); transform: translateX(-100%);
-webkit-transition: all .5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;
-moz-transition: all .5s ease-in-out; -moz-transition: all 0.5s ease-in-out;
-ms-transition: all .5s ease-in-out; -ms-transition: all 0.5s ease-in-out;
-o-transition: all .5s ease-in-out; -o-transition: all 0.5s ease-in-out;
transition: all .5s ease-in-out; transition: all 0.5s ease-in-out;
/* background:#3ad29f; */ /* background:#3ad29f; */
color: #757575; color: #757575;
background-color: white; background-color: white;
@ -599,7 +683,8 @@ label>.label-body {
text-decoration: none; text-decoration: none;
} }
nav ul li a.current, nav ul li a:hover { nav ul li a.current,
nav ul li a:hover {
background-color: #eee; background-color: #eee;
color: #757575; color: #757575;
} }
@ -619,16 +704,16 @@ nav ul li a:hover {
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
code { code {
padding: .2rem .5rem; padding: 0.2rem 0.5rem;
margin: 0 .2rem; margin: 0 0.2rem;
font-size: 90%; font-size: 90%;
white-space: nowrap; white-space: nowrap;
background: #F1F1F1; background: #f1f1f1;
border: 1px solid #E1E1E1; border: 1px solid #e1e1e1;
border-radius: 4px; border-radius: 4px;
} }
pre>code { pre > code {
display: block; display: block;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
white-space: pre; white-space: pre;
@ -637,32 +722,47 @@ pre>code {
/* Tables /* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
th, td { th,
td {
padding: 12px 15px; padding: 12px 15px;
text-align: left; text-align: left;
border-bottom: 1px solid #E1E1E1; border-bottom: 1px solid #e1e1e1;
} }
th:first-child, td:first-child { th:first-child,
td:first-child {
padding-left: 0; padding-left: 0;
} }
th:last-child, td:last-child { th:last-child,
td:last-child {
padding-right: 0; padding-right: 0;
} }
/* Spacing /* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */ –––––––––––––––––––––––––––––––––––––––––––––––––– */
button, .button { button,
.button {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
input, textarea, select, fieldset { input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
pre, blockquote, dl, figure, table, p, ul, ol, form { pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
} }
@ -699,15 +799,25 @@ there.
/* Larger than mobile */ /* Larger than mobile */
@media (min-width: 400px) {} @media (min-width: 400px) {
}
/* Larger than phablet (also point when grid becomes active) */ /* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
@media (min-width: 550px) {} }
/* Larger than tablet */ /* Larger than tablet */
@media (min-width: 750px) { @media (min-width: 750px) {
.gba_button .fm_icon,
.gba_button:hover .fm_icon {
/*width: 24px;
height: 24px;
display: inline-block;*/
/*background-size: 24px 24px;*/
font-size: 20px;
/*line-height:22px;*/
}
.header .navigation { .header .navigation {
/* clear: none; /* clear: none;
float: right; float: right;
@ -722,8 +832,23 @@ there.
} }
/* smaller than tablet */ /* smaller than tablet */
@media (max-width: 550px) {
.sidebar_right,
.input-area {
display: none;
left: 0;
right: 0;
box-shadow: 0 0 0 black;
}
}
/* smaller than tablet */
@media (max-width: 750px) { @media (max-width: 750px) {
.gba_button .fm_icon,
.gba_button:hover .fm_icon {
font-size: 26px;
}
#map-title { #map-title {
display: none; display: none;
padding: 1em; padding: 1em;
@ -771,14 +896,12 @@ there.
} }
/* Larger than desktop */ /* Larger than desktop */
@media (min-width: 1000px) {
@media (min-width: 1000px) {} }
/* Larger than Desktop HD */ /* Larger than Desktop HD */
@media (min-width: 1200px) {
@media (min-width: 1200px) {} }
.tab-content { .tab-content {
min-height: 390px; min-height: 390px;
@ -822,12 +945,11 @@ ul.tab-nav li span.active.button {
/* visibility: visible; */ /* visibility: visible; */
} }
.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, 1px 1px #FFF; 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; position: absolute;
pointer-events: none; pointer-events: none;
-moz-user-select: none; -moz-user-select: none;
@ -839,7 +961,8 @@ ul.tab-nav li span.active.button {
.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, 1px 1px #FFF; 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; position: absolute;
pointer-events: none; pointer-events: none;
-moz-user-select: none; -moz-user-select: none;
@ -851,7 +974,8 @@ ul.tab-nav li span.active.button {
.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, 1px 1px #FFF; 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; position: absolute;
pointer-events: none; pointer-events: none;
-moz-user-select: none; -moz-user-select: none;

10
src/js/controls/BasemapControl.js
View File

@ -64,13 +64,13 @@ export class BasemapControl extends Control {
// let dialog = this.dialog = new MobileDialog(); // let dialog = this.dialog = new MobileDialog();
this.dialog = new MobileDialog("Baselayer", { klass: "fm_basemap_list", parentDiv: 'basemap-control-parent' }).addTo(this._map); this.dialog = new MobileDialog("Baselayer", this._map.container, { klass: "fm_basemap_list", parentDiv: 'basemap-control-parent' });//.addTo(this._map);
let basemaps = this.basemaps = this._map.basemaps; let basemaps = this.basemaps = this._map.basemaps;
this._initBasemapHtml(basemaps.services); let html = this._initBasemapHtml(basemaps.services);
// domEvent.on(link, 'click', this.expand, this); // domEvent.on(link, 'click', this.expand, this);
domEvent.on(link, 'click', () => { domEvent.on(link, 'click', () => {
this.dialog.show(); this.dialog.show(html);
}, this); }, this);
return container; return container;
@ -80,6 +80,7 @@ export class BasemapControl extends Control {
_initBasemapHtml(basemapServices) { _initBasemapHtml(basemapServices) {
let buttonDiv = dom.createDom('div');
for (let i = 0; i < basemapServices.length; i++) { for (let i = 0; i < basemapServices.length; i++) {
let basemap = basemapServices[i]; let basemap = basemapServices[i];
if (basemap.type === 'MapServer') { if (basemap.type === 'MapServer') {
@ -89,7 +90,7 @@ export class BasemapControl extends Control {
//+ "</a>"; //+ "</a>";
var btnLink = dom.createDom('a', { var btnLink = dom.createDom('a', {
'class': 'gba_basemap_option' 'class': 'gba_basemap_option'
}, this.dialog.popupcontent); }, buttonDiv);
btnLink.dataset.name = basemap.name; btnLink.dataset.name = basemap.name;
let image = dom.createDom('img', { let image = dom.createDom('img', {
@ -109,6 +110,7 @@ export class BasemapControl extends Control {
}, this); }, this);
} }
} }
return buttonDiv;
} }

47
src/js/controls/MobileDialog.js
View File

@ -1,24 +1,27 @@
import { Control } from "./Control"; // import { Control } from "./Control";
import * as dom from '../core/domUtil'; import * as dom from '../core/domUtil';
import * as domEvent from '../core/domEvent'; import * as domEvent from '../core/domEvent';
import * as util from '../core/utilities';
import './MobileDialog.css'; import './MobileDialog.css';
export class MobileDialog extends Control { export class MobileDialog {
defaultTitle = '3DViewer'; defaultTitle = '3DViewer';
declaredClass = "MobileDialog"; declaredClass = "MobileDialog";
defaultOptions = {}; options = { };
constructor(title, options) { constructor(title, parentContainer, options = {}) {
super(options); // super(options);
util.setOptions(this, options);
this.title = title ? title : this.defaultTitle; this.title = title ? title : this.defaultTitle;
this.options = options || this.defaultOptions; this.options = options || this.defaultOptions;
this.init(parentContainer);
} }
onAdd(map) { init(parentContainer) {
this.map = map; // this.map = map;
let className = "gba-basemap-control"; let className = "gba-basemap-control";
let container; let container;
@ -29,8 +32,8 @@ export class MobileDialog extends Control {
toggleable = true; toggleable = true;
} else { } else {
container = this._container = this.map.container container = this._container = parentContainer;
dom.addClass(container, className); // dom.addClass(container, className);
toggleable = false; toggleable = false;
} }
@ -72,20 +75,20 @@ export class MobileDialog extends Control {
this.dialogDiv.classList.remove('show'); this.dialogDiv.classList.remove('show');
} }
show() { show(html) {
// let isHelp = html === undefined ? true : false; let isHelp = html === undefined ? true : false;
// if (html === undefined) { if (html === undefined) {
// html = this._help(); html = this._help();
// } }
// if (html instanceof HTMLElement) { if (html instanceof HTMLElement) {
// this.popupcontent.innerHTML = ""; this.popupcontent.innerHTML = "";
// this.popupcontent.appendChild(html); this.popupcontent.appendChild(html);
// } }
// else { else {
// this.popupcontent.innerHTML = html; this.popupcontent.innerHTML = html;
// } }
// this.domNode.getElementsByClassName("popuptitle")[0].innerHTML = title || this.title; // this.domNode.getElementsByClassName("popuptitle")[0].innerHTML = title || this.title;
@ -105,7 +108,7 @@ export class MobileDialog extends Control {
_help() { _help() {
let html = ""; let html = "";
//var imagePath = $UrlHelper.resolve('~') + "content/img/"; //var imagePath = $UrlHelper.resolve('~') + "content/img/";
let imagePath = "content/img/"; let imagePath = "images/map/";
let list = '<ul><li id="leftMouse"><img src=' + imagePath + 'leftMouse.png> Rotate 3D Model</li>' + let list = '<ul><li id="leftMouse"><img src=' + imagePath + 'leftMouse.png> Rotate 3D Model</li>' +
'<li id="middleMouse"><img src=' + imagePath + 'middleMouse.png> Zoom 3D Model</li>' + '<li id="middleMouse"><img src=' + imagePath + 'middleMouse.png> Zoom 3D Model</li>' +
'<li id="rightMouse"><img src=' + imagePath + 'rightMouse.png> Pan 3D Model</li></ul>'; '<li id="rightMouse"><img src=' + imagePath + 'rightMouse.png> Pan 3D Model</li></ul>';

15
src/js/core/Map.js
View File

@ -20,8 +20,10 @@ class Map extends OrbitControls {
title; title;
serviceUrl; serviceUrl;
basemaps; basemaps;
title;
constructor(x, y, z, size, center, camera, scene, container) { constructor(x, y, z, center, camera, scene, container) {
let size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min);
// call parent constructor of OrbitControls // call parent constructor of OrbitControls
super(size, center, camera, scene, container); super(size, center, camera, scene, container);
@ -42,7 +44,7 @@ class Map extends OrbitControls {
} }
// to do: initialize map title via serviceUrl: // to do: initialize map title via serviceUrl:
this.title = "Geological 3D model of Vienna"; // this.title = "Geological 3D model of Vienna";
// to do: initialize layers via serviceUrl: // to do: initialize layers via serviceUrl:
// this.serviceUrl = serviceUrl; // this.serviceUrl = serviceUrl;
@ -58,13 +60,14 @@ class Map extends OrbitControls {
}; };
} }
static async build(x, y, z, size, center, camera, scene, container, serviceUrl) { static async build(x, y, z, center, camera, scene, container, serviceUrl) {
const modelData = await util.getMetadata(serviceUrl); const modelData = await util.getMetadata(serviceUrl);
// do your async stuff here // do your async stuff here
// now instantiate and return a class // now instantiate and return a class
let map = new Map(x, y, z, size, center, camera, scene, container); let map = new Map(x, y, z, center, camera, scene, container);
map._initDataLayers(modelData.mappedfeatures); map._initDataLayers(modelData.mappedfeatures);
map.title = modelData.model.model_name;
return map; return map;
} }
@ -79,9 +82,9 @@ class Map extends OrbitControls {
featuregeom_id: layerData.featuregeom_id, featuregeom_id: layerData.featuregeom_id,
q: true, q: true,
type: "3dface", type: "3dface",
name: layerData.legend_description, name: layerData.preview.legend_text, //layerData.legend_description,
description: "test", description: "test",
color: layerData.color color: layerData.preview.legend_color //layerData.color
}); });
this.addLayer(dxfLayer); this.addLayer(dxfLayer);
} }

15
src/js/main.js
View File

@ -20,8 +20,9 @@ import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
import * as util from './core/utilities'; import * as util from './core/utilities';
import * as browser from './core/browser'; import * as browser from './core/browser';
import * as domUtil from './core/domUtil'; import * as domUtil from './core/domUtil';
import { MobileDialog } from "./controls/MobileDialog";
import '../css/page.css'; /* style loader will import it */ import '../css/page.scss'; /* style loader will import it */
class Application { class Application {
@ -54,7 +55,8 @@ class Application {
this.navigation = document.getElementsByClassName('navigation')[0]; this.navigation = document.getElementsByClassName('navigation')[0];
// this.addEventListeners(); // this.addEventListeners();
this.mapIcon = document.querySelector('#menu-map-icon'); this.dialog = new MobileDialog("Help", container, { klass: "fm_about" });
this.aboutIcon = document.querySelector('#menu-about-icon');
// this.createScene(); // this.createScene();
@ -68,7 +70,7 @@ class Application {
async createScene() { async createScene() {
var dirNode = document.getElementsByTagName("body")[0]; var dirNode = document.getElementsByTagName("body")[0];
if (browser.touch == true) { if (browser.touch == true && browser.mobile == true) {
//dirNode.setAttribute("dir", "ltr"); //dirNode.setAttribute("dir", "ltr");
domUtil.addClass(dirNode, "touch"); domUtil.addClass(dirNode, "touch");
} else { } else {
@ -162,7 +164,7 @@ class Application {
// create map // create map
// let map = this.map = new Map(x, y, z, size, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta?modelid=20'); // let map = this.map = new Map(x, y, z, size, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta?modelid=20');
let map = this.map = await Map.build(x, y, z, size, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta?modelid=20'); let map = this.map = await Map.build(x, y, z, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta_all?modelid=20');
this.mapTitle = document.querySelector('#map-title'); this.mapTitle = document.querySelector('#map-title');
this.mapTitle.innerHTML += map.title; this.mapTitle.innerHTML += map.title;
// this.map.minDistance = size*0.75; // this.map.minDistance = size*0.75;
@ -333,6 +335,11 @@ class Application {
domEvent.on(this.downloadButton, 'click', this.downloadMapImage, this); domEvent.on(this.downloadButton, 'click', this.downloadMapImage, this);
domEvent.on(this.aboutIcon, 'click', function (e) {
e.preventDefault();
this.dialog.show();
}, this);
domEvent.on(this.menuIcon, 'click', function (e) { domEvent.on(this.menuIcon, 'click', function (e) {
e.preventDefault(); e.preventDefault();
this.navigation.classList.toggle("active"); this.navigation.classList.toggle("active");

20
webpack.config.js
View File

@ -4,7 +4,6 @@ const webpack = require('webpack'); //e.g. for iusing DefinePlugin
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// https://www.sitepoint.com/es6-babel-webpack/
/** /**
* flag Used to check if the environment is production or not * flag Used to check if the environment is production or not
@ -34,7 +33,7 @@ module.exports = {
loader: 'url-loader', loader: 'url-loader',
options: { options: {
limit: 10000, limit: 10000,
name: 'fonts/[name].[ext]' name: 'webfonts/[name].[ext]'
} }
}, },
// { // {
@ -62,7 +61,7 @@ module.exports = {
}, },
{ {
test: /\.(less|css)$/, test: /\.(scss|css)$/,
use: [ use: [
{ {
loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader', loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
@ -72,14 +71,17 @@ module.exports = {
// hmr: process.env.NODE_ENV === 'development', // hmr: process.env.NODE_ENV === 'development',
// }, // },
}, },
// Translates CSS into CommonJS
{ {
loader: "css-loader", loader: "css-loader",
options: { options: {
sourceMap: true sourceMap: true
} }
}, },
'resolve-url-loader',
// Compiles Sass to CSS
{ {
loader: "less-loader", loader: "sass-loader",
options: { options: {
sourceMap: true sourceMap: true
} }
@ -106,10 +108,10 @@ module.exports = {
compress: { compress: {
directives: false, directives: false,
// drop_console: true, // drop_console: true,
// drop_debugger: true, // drop_debugger: true,
// keep_classnames: false, // keep_classnames: false,
// keep_fnames: false, // keep_fnames: false,
}, },
mangle: true, // Note `mangle.properties` is `false` by default. mangle: true, // Note `mangle.properties` is `false` by default.
keep_classnames: false, keep_classnames: false,
@ -121,6 +123,7 @@ module.exports = {
plugins: [ plugins: [
new webpack.DefinePlugin({ // Remove this plugin if you don't plan to define any global constants new webpack.DefinePlugin({ // Remove this plugin if you don't plan to define any global constants
ENVIRONMENT: JSON.stringify(process.env.NODE_ENV), ENVIRONMENT: JSON.stringify(process.env.NODE_ENV),
CONSTANT_VALUE: JSON.stringify(process.env.CONSTANT_VALUE), CONSTANT_VALUE: JSON.stringify(process.env.CONSTANT_VALUE),
@ -140,6 +143,7 @@ module.exports = {
// paths: glob.sync(__dirname + '/*.html'), // paths: glob.sync(__dirname + '/*.html'),
// minimize: true, // minimize: true,
// }), // }),
// new webpack.HotModuleReplacementPlugin(), // new webpack.HotModuleReplacementPlugin(),
], ],