- scss framework bulma
This commit is contained in:
Arno Kaimbacher
parent
60a361fd6a
commit
885947ee31
145
index.html
145
index.html
|
|
@ -41,64 +41,67 @@
|
|||
</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">
|
||||
<nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="" href="http://www.europe-geology.eu/onshore-geology/geological-map/" target="_blank">
|
||||
<!-- <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"> -->
|
||||
<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 role="button" id="menu-icon" class="navbar-burger" aria-label="menu" aria-expanded="false"
|
||||
data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></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>
|
||||
</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>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link">
|
||||
More
|
||||
</a>
|
||||
<div class="navbar-dropdown">
|
||||
<a id="menu-about-icon" class="navbar-item">
|
||||
About
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Contact
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item">
|
||||
Report an issue
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<!-- <a class="button is-primary">
|
||||
<strong>Sign up</strong>
|
||||
</a> -->
|
||||
<a class="button is-light">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section id="app" class="hero">
|
||||
<div class="hero-body">
|
||||
<!-- <div class="container is-fluid"> -->
|
||||
|
||||
<section id="app" class='main u-full-width'>
|
||||
<div class="main columns">
|
||||
|
||||
<!-- <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 class="canvas-area is-8 column">
|
||||
<div id="div-map">
|
||||
<div id="webgl" class="mapDesktop">
|
||||
<!-- <canvas id="imgCanvas" class="img-canvas">
|
||||
|
|
@ -108,35 +111,41 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-area four columns">
|
||||
<div class="input-area is-4 column">
|
||||
|
||||
<div class="row">
|
||||
<div class="twelve columns">
|
||||
|
||||
<div class="columns">
|
||||
<div id="div-tabs" class="column">
|
||||
|
||||
<div class="tabs">
|
||||
<ul class="tab-nav">
|
||||
<li class="metadata-link">
|
||||
<span class="remove-check button active" name="#one">GEOLOGY</span>
|
||||
<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">
|
||||
<span class="remove-check button" name="#two">ANALYSIS</span>
|
||||
<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>
|
||||
|
||||
<!-- 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"
|
||||
<a class="button is-light" type="submit" id="btnDownloadCanvasImage"
|
||||
download="file.png">Download</a>
|
||||
|
||||
<div class="panel-section section-view">
|
||||
|
|
@ -151,21 +160,27 @@
|
|||
<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>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<script src="dist/main.js"></script>
|
||||
</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",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.2",
|
||||
"bulma": "^0.9.2",
|
||||
"lodash": "^4.17.21",
|
||||
"normalize.css": "^8.0.1",
|
||||
"proj4": "^2.6.3",
|
||||
|
|
@ -1955,6 +1956,11 @@
|
|||
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/bulma": {
|
||||
"version": "0.9.2",
|
||||
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz",
|
||||
"integrity": "sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A=="
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
|
||||
|
|
@ -8212,6 +8218,11 @@
|
|||
"integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
|
||||
"dev": true
|
||||
},
|
||||
"bulma": {
|
||||
"version": "0.9.2",
|
||||
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz",
|
||||
"integrity": "sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A=="
|
||||
},
|
||||
"call-bind": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
"main": "dist/main.js",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.2",
|
||||
"bulma": "^0.9.2",
|
||||
"lodash": "^4.17.21",
|
||||
"normalize.css": "^8.0.1",
|
||||
"proj4": "^2.6.3",
|
||||
|
|
|
|||
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 _ from "lodash";
|
||||
|
||||
import '../css/page.scss'; /* style loader will import it */
|
||||
import '../css/page_bulma.scss'; /* style loader will import it */
|
||||
|
||||
class Application {
|
||||
|
||||
|
|
@ -398,17 +398,36 @@ class Application {
|
|||
this.dialog.show();
|
||||
}, this);
|
||||
|
||||
domEvent.on(this.menuIcon, 'click', function (e) {
|
||||
e.preventDefault();
|
||||
this.navigation.classList.toggle("active");
|
||||
}, this);
|
||||
// domEvent.on(this.menuIcon, 'click', function (e) {
|
||||
// e.preventDefault();
|
||||
// this.navigation.classList.toggle("active");
|
||||
// }, this);
|
||||
|
||||
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) {
|
||||
button.addEventListener('click', function () {
|
||||
document.querySelector('li span.active.button').classList.remove('active');
|
||||
button.classList.add('active');
|
||||
document.querySelector('li.is-active').classList.remove('is-active');
|
||||
button.classList.add('is-active');
|
||||
|
||||
document.querySelector('.tab-pane.active').classList.remove('active');
|
||||
document.querySelector(button.getAttribute('name')).classList.add('active');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user