Added dropdowns
This commit is contained in:
Kenneth Jao
parent
7ce57e85a0
commit
d09f1f0ee2
@ -1,19 +1,22 @@
|
||||
/* Layout Elements and General Formatting */
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
color: white;
|
||||
display: grid;
|
||||
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
color: white;
|
||||
font-family: 'Open Sans Condensed', sans-serif;
|
||||
|
||||
grid-template-columns: 13% auto;
|
||||
grid-template-rows: 8% auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,p {
|
||||
@ -21,23 +24,28 @@ h1,h2,h3,h4,h5,p {
|
||||
}
|
||||
|
||||
.transition {
|
||||
-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
-moz-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
|
||||
-moz-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
-ms-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
}
|
||||
|
||||
#header1 {
|
||||
display: grid;
|
||||
|
||||
background-color: #F47922;
|
||||
|
||||
text-align: center;
|
||||
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
background-color: #F47922;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
#header1 h1 {
|
||||
margin: auto 0 auto 0;
|
||||
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@ -46,22 +54,26 @@ h1,h2,h3,h4,h5,p {
|
||||
}
|
||||
|
||||
#header2 {
|
||||
background-color: #524948;
|
||||
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
background-color: #524948;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
background-color: #524948;
|
||||
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
background-color: #524948;
|
||||
}
|
||||
|
||||
.navi {
|
||||
width: 100%;
|
||||
height: 6vh;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
|
||||
height: 6vh;
|
||||
width: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
grid-template-columns: 1fr 3fr 7fr;
|
||||
}
|
||||
|
||||
@ -70,53 +82,158 @@ h1,h2,h3,h4,h5,p {
|
||||
}
|
||||
|
||||
.navi i {
|
||||
grid-column: 2;
|
||||
text-align: center;
|
||||
margin: auto 0 auto 0;
|
||||
|
||||
font-size: 130%;
|
||||
text-align: center;
|
||||
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.navi p {
|
||||
grid-column: 3;
|
||||
margin: auto 0 auto 0;
|
||||
|
||||
font-size: 110%;
|
||||
|
||||
grid-column: 3;
|
||||
}
|
||||
|
||||
#mainContainer {
|
||||
overflow-y: auto;
|
||||
padding: 2vh;
|
||||
|
||||
background-color: #F8F3F0;
|
||||
|
||||
font-family: 'Saira Condensed', sans-serif;
|
||||
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
padding: 2vh;
|
||||
background-color: #F8F3F0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #FEFEFE;
|
||||
box-shadow: 1px 1px 1px 1px #000;
|
||||
/* Dropdown */
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
||||
border-left: 5px solid #F88A3C;
|
||||
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: auto 0%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.dropdown .button {
|
||||
display: grid;
|
||||
|
||||
padding-left: 2%;
|
||||
margin: auto 0 auto 0;
|
||||
|
||||
font-size: 170%;
|
||||
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
grid-template-columns: 14fr 1fr;
|
||||
grid-template-rows: 100%;
|
||||
}
|
||||
|
||||
.dropdown .button p {
|
||||
font-weight: 300;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.dropdown .button i {
|
||||
margin: auto 0 auto 0;
|
||||
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.dropdown .opCont {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
|
||||
width: 100%;
|
||||
border-radius: 2px;
|
||||
|
||||
background-color: #FEFEFE;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
|
||||
overflow-y: auto;
|
||||
max-height: 30vh;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
.dropdown .opCont p {
|
||||
padding: 2% 0 2% 4%;
|
||||
|
||||
font-size: 130%;
|
||||
}
|
||||
|
||||
.dropdown .opCont p:hover {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Main Body */
|
||||
|
||||
#home, #dataValues, #files, #updates {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
|
||||
grid-gap: 2vh;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 2fr 4fr 4fr;
|
||||
transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
}
|
||||
|
||||
.card {
|
||||
display: grid;
|
||||
|
||||
border-radius: 2px;
|
||||
|
||||
background-color: #FEFEFE;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
|
||||
color: black;
|
||||
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 6fr 11fr;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
width: 35%;
|
||||
margin: auto 0 auto 2%;
|
||||
|
||||
font-weight: 300;
|
||||
border-bottom: 1px solid #D5D5D5;
|
||||
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#home {
|
||||
display: grid;
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -125,6 +242,15 @@ h1,h2,h3,h4,h5,p {
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
#langSelect .dropdown {
|
||||
height: 50%;
|
||||
width: 85%;
|
||||
margin: auto 0 auto 5%;
|
||||
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
#dataInfo {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
|
||||
@ -2,6 +2,7 @@ var navSelect = "home";
|
||||
var serverURL = "http://localhost:5000";
|
||||
var data;
|
||||
|
||||
|
||||
var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function].
|
||||
["home", "Home", "home"],
|
||||
["bar-chart", "Data Values", "dataValues"],
|
||||
@ -9,27 +10,34 @@ var navi = [ // Array containing navigation items in form [Font-Awesome class na
|
||||
["bell", "Updates and Progress", "updates"]
|
||||
];
|
||||
|
||||
for (var i = 0; i < navi.length; i++) { // Create navigation tabs.
|
||||
var side = document.getElementById("sidebar");
|
||||
var div = document.createElement("div");
|
||||
div.className = "navi transition";
|
||||
div.setAttribute("option", navi[i][2]);
|
||||
div.onclick = function() {
|
||||
var op = this.getAttribute("option");
|
||||
if (navSelect === op) return;
|
||||
updateMain(op);
|
||||
};
|
||||
var ic = document.createElement("i");
|
||||
ic.className = "fa fa-" + navi[i][0];
|
||||
ic["aria-hidden"] = true;
|
||||
var p = document.createElement("p");
|
||||
p.appendChild(document.createTextNode(navi[i][1]));
|
||||
div.appendChild(ic);
|
||||
div.appendChild(p);
|
||||
side.appendChild(div);
|
||||
}
|
||||
var dropOp = {
|
||||
//Insert correct
|
||||
};
|
||||
|
||||
updateNav(navSelect);
|
||||
|
||||
var dropOpStore = {};
|
||||
|
||||
function createNav() {
|
||||
for (var i = 0; i < navi.length; i++) { // Create navigation tabs.
|
||||
var side = document.getElementById("sidebar");
|
||||
var div = document.createElement("div");
|
||||
div.className = "navi transition";
|
||||
div.setAttribute("option", navi[i][2]);
|
||||
div.onclick = function() {
|
||||
var op = this.getAttribute("option");
|
||||
if (navSelect === op) return;
|
||||
updateMain(op);
|
||||
};
|
||||
var ic = document.createElement("i");
|
||||
ic.className = "fa fa-" + navi[i][0];
|
||||
ic["aria-hidden"] = true;
|
||||
var p = document.createElement("p");
|
||||
p.appendChild(document.createTextNode(navi[i][1]));
|
||||
div.appendChild(ic);
|
||||
div.appendChild(p);
|
||||
side.appendChild(div);
|
||||
}
|
||||
}
|
||||
|
||||
function updateMain(op) {
|
||||
updateNav(op);
|
||||
@ -61,6 +69,8 @@ function getData() {
|
||||
.then(
|
||||
function success(incoming) {
|
||||
data = incoming;
|
||||
generateDropOp();
|
||||
createDrop();
|
||||
console.log(data);
|
||||
},
|
||||
function error(e) {
|
||||
@ -74,3 +84,77 @@ function language(language) {
|
||||
return element.name === language;
|
||||
});
|
||||
}
|
||||
|
||||
function generateDropOp() {
|
||||
dropOp["langSelect"] = ["Select language..."].concat(data.languages);
|
||||
}
|
||||
|
||||
function createDrop() {
|
||||
var dropButtons = document.getElementsByClassName("dropdown");
|
||||
for(var i = 0; i < dropButtons.length; i++) {
|
||||
var div = document.createElement("div");
|
||||
div.className = "button";
|
||||
var p = document.createElement("p");
|
||||
var op = dropButtons[i].getAttribute("option");
|
||||
p.appendChild(document.createTextNode(dropOp[op][0]));
|
||||
var ic = document.createElement("i");
|
||||
ic.className = "fa fa-angle-down";
|
||||
ic["aria-hidden"] = true;
|
||||
div.appendChild(p);
|
||||
div.appendChild(ic);
|
||||
var div2 = document.createElement("div");
|
||||
div2.className = "opCont transition";
|
||||
for(var j = 1; j < dropOp[op].length; j++) {
|
||||
var p2 = document.createElement("p");
|
||||
p2.className = "transition";
|
||||
p2.onclick = function(e) {
|
||||
e.stopPropagation();
|
||||
dropOpStore[op] = this.textContent;
|
||||
dropOpUpdate(op);
|
||||
let opCont = this.parentNode;
|
||||
opCont.style.opacity = "0";
|
||||
setTimeout(function() {
|
||||
opCont.style.display = "none";
|
||||
}, 300);
|
||||
};
|
||||
p2.appendChild(document.createTextNode(dropOp[op][j]));
|
||||
div2.appendChild(p2);
|
||||
}
|
||||
div.onclick = function(e) {
|
||||
e.stopPropagation();
|
||||
let opCont = this.nextElementSibling;
|
||||
if(opCont.style.display === "block") {
|
||||
opCont.style.opacity = "0";
|
||||
setTimeout(function() {
|
||||
opCont.style.display = "none";
|
||||
}, 300);
|
||||
} else {
|
||||
opCont.style.display = "block";
|
||||
setTimeout(function() {
|
||||
opCont.style.opacity = "1";
|
||||
}, 30);
|
||||
}
|
||||
};
|
||||
dropButtons[i].appendChild(div);
|
||||
dropButtons[i].appendChild(div2);
|
||||
}
|
||||
}
|
||||
|
||||
function dropOpUpdate(op) {
|
||||
var dropdown = document.querySelectorAll(".dropdown[option="+op+"] .button p")[0];
|
||||
dropdown.textContent = dropOpStore[op];
|
||||
}
|
||||
|
||||
document.onclick = function(event) {
|
||||
for(var i = 0 ; i < document.getElementsByClassName("dropdown").length; i++) {
|
||||
var opCont = document.querySelectorAll(".dropdown .opCont")[i];
|
||||
opCont.style.opacity = "0";
|
||||
setTimeout(function() {
|
||||
opCont.style.display = "none";
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
getData();
|
||||
createNav();
|
||||
updateNav(navSelect);
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<link rel="icon" href="/static/resources/favicon.ico?v=2">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Saira+Condensed:300,400" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script src="{{ url_for('static', filename='velocity.min.js') }}"></script>
|
||||
@ -24,6 +25,9 @@
|
||||
<div id="mainContainer">
|
||||
<div id="home" class="optionContainer">
|
||||
<div id="langSelect" class="card">
|
||||
<h2>Language</h2>
|
||||
<div option="langSelect" class="dropdown transition">
|
||||
</div>
|
||||
</div>
|
||||
<div id="dataInfo" class="card">
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user