display info section

SmearcarDB/static/index.css

@@ -23,6 +23,11 @@ h1,h2,h3,h4,h5,p {
 	margin: 0;
 }
 
+a {
+	text-decoration: none;
+	color: #2EA8FF;
+}
+
 .transition {
 	-webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
@@ -212,8 +217,8 @@ h1,h2,h3,h4,h5,p {
 
 	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
 
-	grid-template-columns: 1fr;
-	grid-template-rows: 6fr 11fr;
+	grid-template-columns: 100%;
+	grid-template-rows: 6vh auto;
 }
 
 .card:hover {
@@ -222,7 +227,7 @@ h1,h2,h3,h4,h5,p {
 
 .card h2 {
 	width: 35%;
-	margin: auto 0 auto 2%;
+	margin: auto 0 auto 2vh;
 
 	font-weight: 300;
 	border-bottom: 1px solid #D5D5D5;
@@ -231,6 +236,11 @@ h1,h2,h3,h4,h5,p {
 	grid-row: 1;
 }
 
+.card > div {
+	grid-column: 1;
+	grid-row: 2;
+}
+
 #home {
 	display: grid;
 
@@ -246,9 +256,6 @@ h1,h2,h3,h4,h5,p {
 	height: 50%;
 	width: 85%;
 	margin: auto 0 auto 5%;
-
-	grid-column: 1;
-	grid-row: 2;
 }
 
 #dataInfo {
@@ -256,6 +263,11 @@ h1,h2,h3,h4,h5,p {
 	grid-row: 1;
 }
 
+#langInfoCont {
+	font-size: 150%;
+	margin-left: 4vh;
+}
+
 #dataTable {
 	grid-column: 1 / 3;
 	grid-row: 2;

SmearcarDB/static/index.js

@@ -81,11 +81,28 @@ function getData() {
 function language(language) {
     return data.values.filter(function(element) {
         return element.name === language;
-    });
+    })[0];
 }
 
-function generateDropOp() {
-    dropOp["langSelect"] = ["Select language..."].concat(data.languages);
+function generateDropOp() { // For options that change based on data.
+    dropOp["langSelect"] = [function() {
+        var info = document.getElementById("langInfoCont");
+        while(info.firstChild) {
+            info.removeChild(info.firstChild);
+        }
+        var p = document.createElement("p")
+        var p2 = document.createElement("p2");
+        var a = document.createElement("a");
+        var langInfo = language(dropOpStore["langSelect"]);
+        p.appendChild(document.createTextNode("Type: " + langInfo.type));
+        p2.appendChild(document.createTextNode("Source: "));
+        a.href = langInfo.source;
+        srcText = (langInfo.source.length > 60) ? langInfo.source.substring(0,langInfo.source.length-3) + "..." : langInfo.source;
+        a.appendChild(document.createTextNode(srcText));
+        p2.appendChild(a);
+        info.appendChild(p);
+        info.appendChild(p2);
+    }].concat(["Select language..."].concat(data.languages));
 }
 
 function createDrop() {
@@ -95,7 +112,7 @@ function createDrop() {
         div.className = "button";
         var p = document.createElement("p");
         var op = dropButtons[i].getAttribute("option");
-        p.appendChild(document.createTextNode(dropOp[op][0]));
+        p.appendChild(document.createTextNode(dropOp[op][1]));
         var ic = document.createElement("i");
         ic.className = "fa fa-angle-down";
         ic["aria-hidden"] = true;
@@ -103,7 +120,7 @@ function createDrop() {
         div.appendChild(ic);
         var div2 = document.createElement("div");
         div2.className = "opCont transition";
-        for(var j = 1; j < dropOp[op].length; j++) {
+        for(var j = 2; j < dropOp[op].length; j++) {
             var p2 = document.createElement("p");
             p2.className = "transition";
             p2.onclick = function(e) {
@@ -142,6 +159,8 @@ function createDrop() {
 function dropOpUpdate(op) {
     var dropdown = document.querySelectorAll(".dropdown[option="+op+"] .button p")[0];
     dropdown.textContent = dropOpStore[op];
+    console.log("hi");
+    (dropOp[op][0])();
 }
 
 document.onclick = function(event) {

SmearcarDB/templates/index.html

@@ -30,8 +30,13 @@
                 </div>
             </div>
             <div id="dataInfo" class="card">
+                <h2>Info</h2>
+                <div id="langInfoCont">
+                    
+                </div>
             </div>
             <div id="dataTable" class="card">
+                <h2>Data</h2>
             </div>
         </div>
         <div id="dataValues" class="optionContainer">