Added dropdowns

SmearcarDB/static/index.css

@@ -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);  
+	-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-	-moz-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 {
+/* Dropdown */
-	background-color: #FEFEFE;
+
-	box-shadow: 1px 1px 1px 1px #000;
+.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 {
+.dropdown .opCont p {
-	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+	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;

SmearcarDB/static/index.js

@@ -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 dropOp = {
-    var side = document.getElementById("sidebar");
+    //Insert correct   
-    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);
-}
 
-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);

SmearcarDB/templates/index.html

@@ -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>