- teilweise Umstellung von css auf scss (page.scss)
- 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
parent
cc0100fa44
commit
b390fd6f21
BIN
images/map/leftMouse.png
Normal file
BIN
images/map/leftMouse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 358 B |
BIN
images/map/middleMouse.png
Normal file
BIN
images/map/middleMouse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 B |
BIN
images/map/rightMouse.png
Normal file
BIN
images/map/rightMouse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 343 B |
15
index.html
15
index.html
|
|
@ -50,7 +50,7 @@
|
|||
</a>
|
||||
<div class="row">
|
||||
<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">
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -58,6 +58,19 @@
|
|||
</div>
|
||||
<ul class="menu main-navigation six columns">
|
||||
<!-- <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>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
3035
package-lock.json
generated
3035
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -4,6 +4,7 @@
|
|||
"description": "3D geology viewer",
|
||||
"main": "dist/main.js",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.2",
|
||||
"normalize.css": "^8.0.1",
|
||||
"proj4": "^2.6.3",
|
||||
"three": "^0.125.1"
|
||||
|
|
@ -23,6 +24,9 @@
|
|||
"img-loader": "^3.0.2",
|
||||
"less-loader": "^7.1.0",
|
||||
"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",
|
||||
"terser-webpack-plugin": "^5.0.3",
|
||||
"url-loader": "^4.1.1",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,10 @@
|
|||
@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
|
||||
{
|
||||
height: 100%;
|
||||
|
|
@ -8,7 +14,8 @@
|
|||
font-family: 'Open Sans', sans-serif;
|
||||
} */
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
line-height: 1.6;
|
||||
|
|
@ -39,7 +46,7 @@ section {
|
|||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow-y: scroll
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.canvas-area {
|
||||
|
|
@ -114,7 +121,8 @@ section {
|
|||
clear: both;
|
||||
}
|
||||
|
||||
.gba-top, .gba-bottom {
|
||||
.gba-top,
|
||||
.gba-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
|
|
@ -162,8 +170,8 @@ section {
|
|||
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-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;
|
||||
|
|
@ -172,40 +180,45 @@ section {
|
|||
/* Typography
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 4.0rem;
|
||||
font-size: 4rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -.1rem;
|
||||
letter-spacing: -0.1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3.6rem;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -.1rem;
|
||||
letter-spacing: -0.1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 3.0rem;
|
||||
font-size: 3rem;
|
||||
line-height: 1.3;
|
||||
letter-spacing: -.1rem;
|
||||
letter-spacing: -0.1rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2.4rem;
|
||||
line-height: 1.35;
|
||||
letter-spacing: -.08rem;
|
||||
letter-spacing: -0.08rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -.05rem;
|
||||
letter-spacing: -0.05rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
|
|
@ -218,7 +231,7 @@ h6 {
|
|||
|
||||
@media (min-width: 550px) {
|
||||
h1 {
|
||||
font-size: 5.0rem;
|
||||
font-size: 5rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 4.2rem;
|
||||
|
|
@ -227,7 +240,7 @@ h6 {
|
|||
font-size: 3.6rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 3.0rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 2.4rem;
|
||||
|
|
@ -245,11 +258,11 @@ p {
|
|||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
a {
|
||||
color: #1EAEDB;
|
||||
color: #1eaedb;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0FA0CE;
|
||||
color: #0fa0ce;
|
||||
}
|
||||
|
||||
/* Grid
|
||||
|
|
@ -264,7 +277,8 @@ a:hover {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.column, .columns {
|
||||
.column,
|
||||
.columns {
|
||||
width: 100%;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -285,13 +299,16 @@ a:hover {
|
|||
.container {
|
||||
width: 80%;
|
||||
}
|
||||
.column, .columns {
|
||||
.column,
|
||||
.columns {
|
||||
margin-left: 4%;
|
||||
}
|
||||
.column:first-child, .columns:first-child {
|
||||
.column:first-child,
|
||||
.columns:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.one.column, .one.columns {
|
||||
.one.column,
|
||||
.one.columns {
|
||||
width: 4.66666666667%;
|
||||
}
|
||||
.two.columns {
|
||||
|
|
@ -316,7 +333,7 @@ a:hover {
|
|||
width: 65.3333333333%;
|
||||
}
|
||||
.nine.columns {
|
||||
width: 74.0%;
|
||||
width: 74%;
|
||||
}
|
||||
.ten.columns {
|
||||
width: 82.6666666667%;
|
||||
|
|
@ -338,46 +355,60 @@ a:hover {
|
|||
width: 48%;
|
||||
}
|
||||
/* Offsets */
|
||||
.offset-by-one.column, .offset-by-one.columns {
|
||||
.offset-by-one.column,
|
||||
.offset-by-one.columns {
|
||||
margin-left: 8.66666666667%;
|
||||
}
|
||||
.offset-by-two.column, .offset-by-two.columns {
|
||||
.offset-by-two.column,
|
||||
.offset-by-two.columns {
|
||||
margin-left: 17.3333333333%;
|
||||
}
|
||||
.offset-by-three.column, .offset-by-three.columns {
|
||||
.offset-by-three.column,
|
||||
.offset-by-three.columns {
|
||||
margin-left: 26%;
|
||||
}
|
||||
.offset-by-four.column, .offset-by-four.columns {
|
||||
.offset-by-four.column,
|
||||
.offset-by-four.columns {
|
||||
margin-left: 34.6666666667%;
|
||||
}
|
||||
.offset-by-five.column, .offset-by-five.columns {
|
||||
.offset-by-five.column,
|
||||
.offset-by-five.columns {
|
||||
margin-left: 43.3333333333%;
|
||||
}
|
||||
.offset-by-six.column, .offset-by-six.columns {
|
||||
.offset-by-six.column,
|
||||
.offset-by-six.columns {
|
||||
margin-left: 52%;
|
||||
}
|
||||
.offset-by-seven.column, .offset-by-seven.columns {
|
||||
.offset-by-seven.column,
|
||||
.offset-by-seven.columns {
|
||||
margin-left: 60.6666666667%;
|
||||
}
|
||||
.offset-by-eight.column, .offset-by-eight.columns {
|
||||
.offset-by-eight.column,
|
||||
.offset-by-eight.columns {
|
||||
margin-left: 69.3333333333%;
|
||||
}
|
||||
.offset-by-nine.column, .offset-by-nine.columns {
|
||||
margin-left: 78.0%;
|
||||
.offset-by-nine.column,
|
||||
.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%;
|
||||
}
|
||||
.offset-by-eleven.column, .offset-by-eleven.columns {
|
||||
.offset-by-eleven.column,
|
||||
.offset-by-eleven.columns {
|
||||
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%;
|
||||
}
|
||||
.offset-by-two-thirds.column, .offset-by-two-thirds.columns {
|
||||
.offset-by-two-thirds.column,
|
||||
.offset-by-two-thirds.columns {
|
||||
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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -387,7 +418,9 @@ a:hover {
|
|||
|
||||
/* Self Clearing Goodness */
|
||||
|
||||
.container:after, .row:after, .u-cf {
|
||||
.container:after,
|
||||
.row:after,
|
||||
.u-cf {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
|
|
@ -395,7 +428,11 @@ a:hover {
|
|||
|
||||
/* 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;
|
||||
height: 38px;
|
||||
padding: 0 30px;
|
||||
|
|
@ -404,7 +441,7 @@ a:hover {
|
|||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 38px;
|
||||
letter-spacing: .1rem;
|
||||
letter-spacing: 0.1rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
|
@ -415,32 +452,62 @@ a:hover {
|
|||
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;
|
||||
border-color: #888;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
|
||||
color: #FFF;
|
||||
background-color: #33C3F0;
|
||||
border-color: #33C3F0;
|
||||
.button.button-primary,
|
||||
button.button-primary,
|
||||
input[type="submit"].button-primary,
|
||||
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 {
|
||||
color: #FFF;
|
||||
background-color: #1EAEDB;
|
||||
border-color: #1EAEDB;
|
||||
.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 {
|
||||
color: #fff;
|
||||
background-color: #1eaedb;
|
||||
border-color: #1eaedb;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
padding: 6px 10px;
|
||||
/* The 6px vertically centers text on FF, ignored by Webkit */
|
||||
background-color: #fff;
|
||||
border: 1px solid #D1D1D1;
|
||||
border: 1px solid #d1d1d1;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
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 */
|
||||
|
||||
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;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
|
@ -460,14 +534,23 @@ textarea {
|
|||
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 {
|
||||
border: 1px solid #33C3F0;
|
||||
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 {
|
||||
border: 1px solid #33c3f0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
label, legend {
|
||||
label,
|
||||
legend {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
|
@ -476,13 +559,14 @@ fieldset {
|
|||
border-width: 0;
|
||||
}
|
||||
|
||||
input[type="checkbox"], input[type="radio"] {
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
label > .label-body {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
margin-left: 0.5rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -510,16 +594,16 @@ label>.label-body {
|
|||
position: absolute;
|
||||
left: 100%;
|
||||
padding: 20px;
|
||||
-webkit-transition: all .15s ease-in-out;
|
||||
-moz-transition: all .15s ease-in-out;
|
||||
-ms-transition: all .15s ease-in-out;
|
||||
-o-transition: all .15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
-webkit-transition: all 0.15s ease-in-out;
|
||||
-moz-transition: all 0.15s ease-in-out;
|
||||
-ms-transition: all 0.15s ease-in-out;
|
||||
-o-transition: all 0.15s ease-in-out;
|
||||
transition: all 0.15s ease-in-out;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.header .menu-icon.active {
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.header .menu-icon:hover {
|
||||
|
|
@ -532,11 +616,11 @@ label>.label-body {
|
|||
/* position: absolute;
|
||||
padding: 22px;
|
||||
color: black; */
|
||||
-webkit-transition: all .15s ease-in-out;
|
||||
-moz-transition: all .15s ease-in-out;
|
||||
-ms-transition: all .15s ease-in-out;
|
||||
-o-transition: all .15s ease-in-out;
|
||||
transition: all .15s ease-in-out;
|
||||
-webkit-transition: all 0.15s ease-in-out;
|
||||
-moz-transition: all 0.15s ease-in-out;
|
||||
-ms-transition: all 0.15s ease-in-out;
|
||||
-o-transition: all 0.15s ease-in-out;
|
||||
transition: all 0.15s ease-in-out;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -561,11 +645,11 @@ label>.label-body {
|
|||
-ms-transform: translateX(-100%);
|
||||
-o-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
-webkit-transition: all .5s ease-in-out;
|
||||
-moz-transition: all .5s ease-in-out;
|
||||
-ms-transition: all .5s ease-in-out;
|
||||
-o-transition: all .5s ease-in-out;
|
||||
transition: all .5s ease-in-out;
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-ms-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
/* background:#3ad29f; */
|
||||
color: #757575;
|
||||
background-color: white;
|
||||
|
|
@ -599,7 +683,8 @@ label>.label-body {
|
|||
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;
|
||||
color: #757575;
|
||||
}
|
||||
|
|
@ -619,12 +704,12 @@ nav ul li a:hover {
|
|||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
code {
|
||||
padding: .2rem .5rem;
|
||||
margin: 0 .2rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
margin: 0 0.2rem;
|
||||
font-size: 90%;
|
||||
white-space: nowrap;
|
||||
background: #F1F1F1;
|
||||
border: 1px solid #E1E1E1;
|
||||
background: #f1f1f1;
|
||||
border: 1px solid #e1e1e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
|
@ -637,32 +722,47 @@ pre>code {
|
|||
/* Tables
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
th, td {
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
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;
|
||||
}
|
||||
|
||||
th:last-child, td:last-child {
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/* Spacing
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
button, .button {
|
||||
button,
|
||||
.button {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
input, textarea, select, fieldset {
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
fieldset {
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -699,15 +799,25 @@ there.
|
|||
|
||||
/* Larger than mobile */
|
||||
|
||||
@media (min-width: 400px) {}
|
||||
@media (min-width: 400px) {
|
||||
}
|
||||
|
||||
/* Larger than phablet (also point when grid becomes active) */
|
||||
|
||||
@media (min-width: 550px) {}
|
||||
@media (min-width: 550px) {
|
||||
}
|
||||
|
||||
/* Larger than tablet */
|
||||
|
||||
@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 {
|
||||
/* clear: none;
|
||||
float: right;
|
||||
|
|
@ -722,8 +832,23 @@ there.
|
|||
}
|
||||
|
||||
/* 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) {
|
||||
.gba_button .fm_icon,
|
||||
.gba_button:hover .fm_icon {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
#map-title {
|
||||
display: none;
|
||||
padding: 1em;
|
||||
|
|
@ -771,14 +896,12 @@ there.
|
|||
}
|
||||
|
||||
/* Larger than desktop */
|
||||
|
||||
@media (min-width: 1000px) {}
|
||||
@media (min-width: 1000px) {
|
||||
}
|
||||
|
||||
/* Larger than Desktop HD */
|
||||
|
||||
@media (min-width: 1200px) {}
|
||||
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
min-height: 390px;
|
||||
|
|
@ -822,12 +945,11 @@ ul.tab-nav li span.active.button {
|
|||
/* visibility: visible; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.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;
|
||||
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;
|
||||
|
|
@ -839,7 +961,8 @@ ul.tab-nav li span.active.button {
|
|||
.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;
|
||||
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;
|
||||
|
|
@ -851,7 +974,8 @@ ul.tab-nav li span.active.button {
|
|||
.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;
|
||||
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;
|
||||
|
|
@ -64,13 +64,13 @@ export class BasemapControl extends Control {
|
|||
|
||||
|
||||
// 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;
|
||||
this._initBasemapHtml(basemaps.services);
|
||||
let html = this._initBasemapHtml(basemaps.services);
|
||||
|
||||
// domEvent.on(link, 'click', this.expand, this);
|
||||
domEvent.on(link, 'click', () => {
|
||||
this.dialog.show();
|
||||
this.dialog.show(html);
|
||||
}, this);
|
||||
|
||||
return container;
|
||||
|
|
@ -80,6 +80,7 @@ export class BasemapControl extends Control {
|
|||
|
||||
_initBasemapHtml(basemapServices) {
|
||||
|
||||
let buttonDiv = dom.createDom('div');
|
||||
for (let i = 0; i < basemapServices.length; i++) {
|
||||
let basemap = basemapServices[i];
|
||||
if (basemap.type === 'MapServer') {
|
||||
|
|
@ -89,7 +90,7 @@ export class BasemapControl extends Control {
|
|||
//+ "</a>";
|
||||
var btnLink = dom.createDom('a', {
|
||||
'class': 'gba_basemap_option'
|
||||
}, this.dialog.popupcontent);
|
||||
}, buttonDiv);
|
||||
btnLink.dataset.name = basemap.name;
|
||||
|
||||
let image = dom.createDom('img', {
|
||||
|
|
@ -109,6 +110,7 @@ export class BasemapControl extends Control {
|
|||
}, this);
|
||||
}
|
||||
}
|
||||
return buttonDiv;
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,27 @@
|
|||
import { Control } from "./Control";
|
||||
// import { Control } from "./Control";
|
||||
import * as dom from '../core/domUtil';
|
||||
import * as domEvent from '../core/domEvent';
|
||||
import * as util from '../core/utilities';
|
||||
|
||||
import './MobileDialog.css';
|
||||
|
||||
export class MobileDialog extends Control {
|
||||
export class MobileDialog {
|
||||
|
||||
defaultTitle = '3DViewer';
|
||||
declaredClass = "MobileDialog";
|
||||
defaultOptions = {};
|
||||
options = { };
|
||||
|
||||
constructor(title, options) {
|
||||
super(options);
|
||||
constructor(title, parentContainer, options = {}) {
|
||||
// super(options);
|
||||
util.setOptions(this, options);
|
||||
|
||||
this.title = title ? title : this.defaultTitle;
|
||||
this.options = options || this.defaultOptions;
|
||||
this.init(parentContainer);
|
||||
}
|
||||
|
||||
onAdd(map) {
|
||||
this.map = map;
|
||||
init(parentContainer) {
|
||||
// this.map = map;
|
||||
|
||||
let className = "gba-basemap-control";
|
||||
let container;
|
||||
|
|
@ -29,8 +32,8 @@ export class MobileDialog extends Control {
|
|||
toggleable = true;
|
||||
|
||||
} else {
|
||||
container = this._container = this.map.container
|
||||
dom.addClass(container, className);
|
||||
container = this._container = parentContainer;
|
||||
// dom.addClass(container, className);
|
||||
toggleable = false;
|
||||
|
||||
}
|
||||
|
|
@ -72,20 +75,20 @@ export class MobileDialog extends Control {
|
|||
this.dialogDiv.classList.remove('show');
|
||||
}
|
||||
|
||||
show() {
|
||||
// let isHelp = html === undefined ? true : false;
|
||||
show(html) {
|
||||
let isHelp = html === undefined ? true : false;
|
||||
|
||||
// if (html === undefined) {
|
||||
// html = this._help();
|
||||
// }
|
||||
if (html === undefined) {
|
||||
html = this._help();
|
||||
}
|
||||
|
||||
// if (html instanceof HTMLElement) {
|
||||
// this.popupcontent.innerHTML = "";
|
||||
// this.popupcontent.appendChild(html);
|
||||
// }
|
||||
// else {
|
||||
// this.popupcontent.innerHTML = html;
|
||||
// }
|
||||
if (html instanceof HTMLElement) {
|
||||
this.popupcontent.innerHTML = "";
|
||||
this.popupcontent.appendChild(html);
|
||||
}
|
||||
else {
|
||||
this.popupcontent.innerHTML = html;
|
||||
}
|
||||
|
||||
// this.domNode.getElementsByClassName("popuptitle")[0].innerHTML = title || this.title;
|
||||
|
||||
|
|
@ -105,7 +108,7 @@ export class MobileDialog extends Control {
|
|||
_help() {
|
||||
let html = "";
|
||||
//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>' +
|
||||
'<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>';
|
||||
|
|
|
|||
|
|
@ -20,8 +20,10 @@ class Map extends OrbitControls {
|
|||
title;
|
||||
serviceUrl;
|
||||
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
|
||||
super(size, center, camera, scene, container);
|
||||
|
||||
|
|
@ -42,7 +44,7 @@ class Map extends OrbitControls {
|
|||
}
|
||||
|
||||
// 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:
|
||||
// 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);
|
||||
|
||||
// do your async stuff here
|
||||
// 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.title = modelData.model.model_name;
|
||||
return map;
|
||||
}
|
||||
|
||||
|
|
@ -79,9 +82,9 @@ class Map extends OrbitControls {
|
|||
featuregeom_id: layerData.featuregeom_id,
|
||||
q: true,
|
||||
type: "3dface",
|
||||
name: layerData.legend_description,
|
||||
name: layerData.preview.legend_text, //layerData.legend_description,
|
||||
description: "test",
|
||||
color: layerData.color
|
||||
color: layerData.preview.legend_color //layerData.color
|
||||
});
|
||||
this.addLayer(dxfLayer);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,9 @@ import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
|
|||
import * as util from './core/utilities';
|
||||
import * as browser from './core/browser';
|
||||
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 {
|
||||
|
||||
|
|
@ -54,7 +55,8 @@ class Application {
|
|||
this.navigation = document.getElementsByClassName('navigation')[0];
|
||||
// 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();
|
||||
|
|
@ -68,7 +70,7 @@ class Application {
|
|||
async createScene() {
|
||||
|
||||
var dirNode = document.getElementsByTagName("body")[0];
|
||||
if (browser.touch == true) {
|
||||
if (browser.touch == true && browser.mobile == true) {
|
||||
//dirNode.setAttribute("dir", "ltr");
|
||||
domUtil.addClass(dirNode, "touch");
|
||||
} else {
|
||||
|
|
@ -162,7 +164,7 @@ class Application {
|
|||
// 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 = 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.innerHTML += map.title;
|
||||
// this.map.minDistance = size*0.75;
|
||||
|
|
@ -333,6 +335,11 @@ class Application {
|
|||
|
||||
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) {
|
||||
e.preventDefault();
|
||||
this.navigation.classList.toggle("active");
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ const webpack = require('webpack'); //e.g. for iusing DefinePlugin
|
|||
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
||||
const TerserPlugin = require('terser-webpack-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
|
||||
|
|
@ -34,7 +33,7 @@ module.exports = {
|
|||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 10000,
|
||||
name: 'fonts/[name].[ext]'
|
||||
name: 'webfonts/[name].[ext]'
|
||||
}
|
||||
},
|
||||
// {
|
||||
|
|
@ -62,7 +61,7 @@ module.exports = {
|
|||
},
|
||||
|
||||
{
|
||||
test: /\.(less|css)$/,
|
||||
test: /\.(scss|css)$/,
|
||||
use: [
|
||||
{
|
||||
loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
|
|
@ -72,14 +71,17 @@ module.exports = {
|
|||
// hmr: process.env.NODE_ENV === 'development',
|
||||
// },
|
||||
},
|
||||
// Translates CSS into CommonJS
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
},
|
||||
'resolve-url-loader',
|
||||
// Compiles Sass to CSS
|
||||
{
|
||||
loader: "less-loader",
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
|
|
@ -121,6 +123,7 @@ module.exports = {
|
|||
|
||||
plugins: [
|
||||
|
||||
|
||||
new webpack.DefinePlugin({ // Remove this plugin if you don't plan to define any global constants
|
||||
ENVIRONMENT: JSON.stringify(process.env.NODE_ENV),
|
||||
CONSTANT_VALUE: JSON.stringify(process.env.CONSTANT_VALUE),
|
||||
|
|
@ -140,6 +143,7 @@ module.exports = {
|
|||
// paths: glob.sync(__dirname + '/*.html'),
|
||||
// minimize: true,
|
||||
// }),
|
||||
|
||||
// new webpack.HotModuleReplacementPlugin(),
|
||||
],
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user