- scss framework bulma
This commit is contained in:
Arno Kaimbacher
parent
60a361fd6a
commit
885947ee31
225
index.html
225
index.html
|
|
@ -41,131 +41,146 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
|
||||||
|
<div class="navbar-brand">
|
||||||
<header class="header">
|
<a class="" href="http://www.europe-geology.eu/onshore-geology/geological-map/" target="_blank">
|
||||||
<nav class="navigation" role="navigation">
|
<!-- <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"> -->
|
||||||
<a href="#" id="menu-icon" class="menu-icon active">
|
<img src="images/egdi_logo.svg" height="51">
|
||||||
<i class="fa fa-bars"></i>
|
|
||||||
</a>
|
</a>
|
||||||
<div class="row">
|
<a role="button" id="menu-icon" class="navbar-burger" aria-label="menu" aria-expanded="false"
|
||||||
<div class="logo two columns">
|
data-target="navbarBasicExample">
|
||||||
<a class="navbar-brand" href="http://www.europe-geology.eu/onshore-geology/geological-map/"
|
<span aria-hidden="true"></span>
|
||||||
target="_blank">
|
<span aria-hidden="true"></span>
|
||||||
<img src="images/egdi_logo.svg" height="51">
|
<span aria-hidden="true"></span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div id="navbarBasicExample" class="navbar-menu">
|
||||||
|
<div class="navbar-start">
|
||||||
|
<span id='map-title' class="navbar-item">
|
||||||
|
</span>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Documentation
|
||||||
|
</a>
|
||||||
|
<div class="navbar-item has-dropdown is-hoverable">
|
||||||
|
<a class="navbar-link">
|
||||||
|
More
|
||||||
</a>
|
</a>
|
||||||
</div>
|
<div class="navbar-dropdown">
|
||||||
<div id='map-title' class="four columns">
|
<a id="menu-about-icon" class="navbar-item">
|
||||||
</div>
|
About
|
||||||
<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>
|
</a>
|
||||||
</li> -->
|
<a class="navbar-item">
|
||||||
<li>
|
Contact
|
||||||
<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>
|
</a>
|
||||||
</li>
|
<hr class="navbar-divider">
|
||||||
</ul>
|
<a class="navbar-item">
|
||||||
|
Report an issue
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
|
<div class="navbar-end">
|
||||||
<section id="app" class='main u-full-width'>
|
<div class="navbar-item">
|
||||||
|
<div class="buttons">
|
||||||
<!-- <Modal v-if="isModalVisible" @close="closeModal">
|
<!-- <a class="button is-primary">
|
||||||
<template slot="header">
|
<strong>Sign up</strong>
|
||||||
Test
|
</a> -->
|
||||||
</template>
|
<a class="button is-light">
|
||||||
<template slot="body">
|
Log in
|
||||||
Mit dem Setzen des Hakens bestätige ich hiermit
|
</a>
|
||||||
<ol type="1">
|
</div>
|
||||||
<li>
|
|
||||||
die Data Policy von Tethys RDR sowie die Terms & Conditions von Tethys
|
|
||||||
gelesen und verstanden zu haben
|
|
||||||
</li>
|
|
||||||
<li>das Einverständnis aller Co-Autoren über die bevorstehende Datenpublikation schriftlich
|
|
||||||
eingeholt zu haben</li>
|
|
||||||
<li>sowohl mit der Data Policy als auch mit den Terms & Conditions einverstanden zu sein</li>
|
|
||||||
</ol>
|
|
||||||
</template>
|
|
||||||
</Modal> -->
|
|
||||||
|
|
||||||
<div class="canvas-area eight columns">
|
|
||||||
<div id="div-map">
|
|
||||||
<div id="webgl" class="mapDesktop">
|
|
||||||
<!-- <canvas id="imgCanvas" class="img-canvas">
|
|
||||||
Canvas Not supported in your browser... Sorry!
|
|
||||||
</canvas> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<div class="input-area four columns">
|
<section id="app" class="hero">
|
||||||
|
<div class="hero-body">
|
||||||
|
<!-- <div class="container is-fluid"> -->
|
||||||
|
|
||||||
<div class="row">
|
<div class="main columns">
|
||||||
<div class="twelve columns">
|
|
||||||
|
|
||||||
<ul class="tab-nav">
|
|
||||||
<li class="metadata-link">
|
|
||||||
<span class="remove-check button active" name="#one">GEOLOGY</span>
|
|
||||||
</li>
|
|
||||||
<li class="file-link">
|
|
||||||
<span class="remove-check button" name="#two">ANALYSIS</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<!-- HTML markup for tab content: Tab panes -->
|
|
||||||
<div class="tab-content">
|
|
||||||
<div class="tab-pane content-metadata active" id="one">
|
|
||||||
<div id="layer-control-parent-id"></div>
|
|
||||||
</div>
|
|
||||||
<div class="tab-pane content-file" id="two">
|
|
||||||
<h5 class="section-heading">Download Map Image</h5>
|
|
||||||
<!-- <label for="topText">Top Text:</label>
|
|
||||||
<input type="text" id="topText" class="form-control">
|
|
||||||
|
|
||||||
<label for="bottomText">Bottom Text:</label>
|
|
||||||
<input type="text" id="bottomText" class="form-control"> -->
|
|
||||||
|
|
||||||
|
|
||||||
<a class="button button-primary" type="submit" id="btnDownloadCanvasImage"
|
|
||||||
download="file.png">Download</a>
|
|
||||||
|
|
||||||
<div class="panel-section section-view">
|
|
||||||
<div class="feature-wrapper feature-slicer inline-block">
|
|
||||||
<div id="slicer-control"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel-section section-functions">
|
|
||||||
<h5>Functions</h5>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" id="chkGrid" autocomplete="off" checked>
|
|
||||||
<span class="label-body">set visibility of coordinate grid</span>
|
|
||||||
</label>
|
|
||||||
<i class="fas fa-info-circle" @click="showModal" style="font-size:24px"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div class="canvas-area is-8 column">
|
||||||
|
<div id="div-map">
|
||||||
|
<div id="webgl" class="mapDesktop">
|
||||||
|
<!-- <canvas id="imgCanvas" class="img-canvas">
|
||||||
|
Canvas Not supported in your browser... Sorry!
|
||||||
|
</canvas> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- End of HTML markup for tab content: Tab panes -->
|
|
||||||
|
|
||||||
|
<div class="input-area is-4 column">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div id="div-tabs" class="column">
|
||||||
|
|
||||||
|
<div class="tabs">
|
||||||
|
<ul class="tab-nav">
|
||||||
|
<li class="metadata-link is-active" name="#one">
|
||||||
|
<a>
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fas fa-image" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
<span>Geology</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="file-link" name="#two">
|
||||||
|
<a>
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-tasks" aria-hidden="true"></i>
|
||||||
|
</span>
|
||||||
|
<span>Analysis</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="tab-content">
|
||||||
|
<div class="tab-pane content-metadata active" id="one">
|
||||||
|
<div id="layer-control-parent-id"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane content-file" id="two">
|
||||||
|
<h5 class="section-heading">Download Map Image</h5>
|
||||||
|
|
||||||
|
|
||||||
|
<a class="button is-light" type="submit" id="btnDownloadCanvasImage"
|
||||||
|
download="file.png">Download</a>
|
||||||
|
|
||||||
|
<div class="panel-section section-view">
|
||||||
|
<div class="feature-wrapper feature-slicer inline-block">
|
||||||
|
<div id="slicer-control"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-section section-functions">
|
||||||
|
<h5>Functions</h5>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="chkGrid" autocomplete="off" checked>
|
||||||
|
<span class="label-body">set visibility of coordinate grid</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- </div> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="dist/main.js"></script>
|
<script src="dist/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
||||||
172
index_old.html
Normal file
172
index_old.html
Normal file
|
|
@ -0,0 +1,172 @@
|
||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<!-- Basic Page Needs
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<title>GeotiefExplore</title>
|
||||||
|
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> -->
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<!-- <link href="content/img/favicon.ico" rel="shortcut icon" type="image/x-icon" /> -->
|
||||||
|
<meta name="description" content="3D viewer Geological Survey of Austria">
|
||||||
|
<meta name="author" content="Arno Kaimbacher">
|
||||||
|
|
||||||
|
<!-- Mobile Specific Metas
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
|
||||||
|
<!-- FONT
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
|
||||||
|
<!-- CSS
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<!-- <link type="text/css" rel="stylesheet" href="normalize.css" /> -->
|
||||||
|
<!-- <link rel="stylesheet" href="src/css/page.css?v=1.0"> -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="dist/main.css" />
|
||||||
|
|
||||||
|
<!-- Favicon
|
||||||
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
|
<link rel="icon" type="image/png" href="images/favicon/favicon.ico" />
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="images/favicon/site.webmanifest">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="header">
|
||||||
|
<nav class="navigation" role="navigation">
|
||||||
|
<a href="#" id="menu-icon" class="menu-icon active">
|
||||||
|
<i class="fa fa-bars"></i>
|
||||||
|
</a>
|
||||||
|
<div class="row">
|
||||||
|
<div class="logo two columns">
|
||||||
|
<a class="navbar-brand" href="http://www.europe-geology.eu/onshore-geology/geological-map/"
|
||||||
|
target="_blank">
|
||||||
|
<img src="images/egdi_logo.svg" height="51">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div id='map-title' class="four columns">
|
||||||
|
</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>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
|
||||||
|
<section id="app" class='main u-full-width'>
|
||||||
|
|
||||||
|
<!-- <Modal v-if="isModalVisible" @close="closeModal">
|
||||||
|
<template slot="header">
|
||||||
|
Test
|
||||||
|
</template>
|
||||||
|
<template slot="body">
|
||||||
|
Mit dem Setzen des Hakens bestätige ich hiermit
|
||||||
|
<ol type="1">
|
||||||
|
<li>
|
||||||
|
die Data Policy von Tethys RDR sowie die Terms & Conditions von Tethys
|
||||||
|
gelesen und verstanden zu haben
|
||||||
|
</li>
|
||||||
|
<li>das Einverständnis aller Co-Autoren über die bevorstehende Datenpublikation schriftlich
|
||||||
|
eingeholt zu haben</li>
|
||||||
|
<li>sowohl mit der Data Policy als auch mit den Terms & Conditions einverstanden zu sein</li>
|
||||||
|
</ol>
|
||||||
|
</template>
|
||||||
|
</Modal> -->
|
||||||
|
|
||||||
|
<div class="canvas-area eight columns">
|
||||||
|
<div id="div-map">
|
||||||
|
<div id="webgl" class="mapDesktop">
|
||||||
|
<!-- <canvas id="imgCanvas" class="img-canvas">
|
||||||
|
Canvas Not supported in your browser... Sorry!
|
||||||
|
</canvas> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="input-area four columns">
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="twelve columns">
|
||||||
|
|
||||||
|
<ul class="tab-nav">
|
||||||
|
<li class="metadata-link">
|
||||||
|
<span class="remove-check button active" name="#one">GEOLOGY</span>
|
||||||
|
</li>
|
||||||
|
<li class="file-link">
|
||||||
|
<span class="remove-check button" name="#two">ANALYSIS</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- HTML markup for tab content: Tab panes -->
|
||||||
|
<div class="tab-content">
|
||||||
|
<div class="tab-pane content-metadata active" id="one">
|
||||||
|
<div id="layer-control-parent-id"></div>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane content-file" id="two">
|
||||||
|
<h5 class="section-heading">Download Map Image</h5>
|
||||||
|
<!-- <label for="topText">Top Text:</label>
|
||||||
|
<input type="text" id="topText" class="form-control">
|
||||||
|
|
||||||
|
<label for="bottomText">Bottom Text:</label>
|
||||||
|
<input type="text" id="bottomText" class="form-control"> -->
|
||||||
|
|
||||||
|
|
||||||
|
<a class="button button-primary" type="submit" id="btnDownloadCanvasImage"
|
||||||
|
download="file.png">Download</a>
|
||||||
|
|
||||||
|
<div class="panel-section section-view">
|
||||||
|
<div class="feature-wrapper feature-slicer inline-block">
|
||||||
|
<div id="slicer-control"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel-section section-functions">
|
||||||
|
<h5>Functions</h5>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" id="chkGrid" autocomplete="off" checked>
|
||||||
|
<span class="label-body">set visibility of coordinate grid</span>
|
||||||
|
</label>
|
||||||
|
<i class="fas fa-info-circle" @click="showModal" style="font-size:24px"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- End of HTML markup for tab content: Tab panes -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script src="dist/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
11
package-lock.json
generated
11
package-lock.json
generated
|
|
@ -10,6 +10,7 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": "^5.15.2",
|
"@fortawesome/fontawesome-free": "^5.15.2",
|
||||||
|
"bulma": "^0.9.2",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"proj4": "^2.6.3",
|
"proj4": "^2.6.3",
|
||||||
|
|
@ -1955,6 +1956,11 @@
|
||||||
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
|
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
|
||||||
"dev": true
|
"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": {
|
"node_modules/call-bind": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
|
||||||
|
|
@ -8212,6 +8218,11 @@
|
||||||
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
|
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
|
||||||
"dev": true
|
"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": {
|
"call-bind": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
"main": "dist/main.js",
|
"main": "dist/main.js",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fortawesome/fontawesome-free": "^5.15.2",
|
"@fortawesome/fontawesome-free": "^5.15.2",
|
||||||
|
"bulma": "^0.9.2",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"proj4": "^2.6.3",
|
"proj4": "^2.6.3",
|
||||||
|
|
|
||||||
296
src/css/page_bulma.scss
Normal file
296
src/css/page_bulma.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
@ -26,7 +26,7 @@ import { ShowModal } from './components/ShowModal';
|
||||||
import { Selection } from './clip/Selection';
|
import { Selection } from './clip/Selection';
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
|
|
||||||
import '../css/page.scss'; /* style loader will import it */
|
import '../css/page_bulma.scss'; /* style loader will import it */
|
||||||
|
|
||||||
class Application {
|
class Application {
|
||||||
|
|
||||||
|
|
@ -398,17 +398,36 @@ class Application {
|
||||||
this.dialog.show();
|
this.dialog.show();
|
||||||
}, this);
|
}, 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");
|
||||||
}, this);
|
// }, this);
|
||||||
|
|
||||||
var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li span.button'));
|
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'));
|
||||||
|
|
||||||
tabButtons.map(function (button) {
|
tabButtons.map(function (button) {
|
||||||
button.addEventListener('click', function () {
|
button.addEventListener('click', function () {
|
||||||
document.querySelector('li span.active.button').classList.remove('active');
|
document.querySelector('li.is-active').classList.remove('is-active');
|
||||||
button.classList.add('active');
|
button.classList.add('is-active');
|
||||||
|
|
||||||
document.querySelector('.tab-pane.active').classList.remove('active');
|
document.querySelector('.tab-pane.active').classList.remove('active');
|
||||||
document.querySelector(button.getAttribute('name')).classList.add('active');
|
document.querySelector(button.getAttribute('name')).classList.add('active');
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user