diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css index a68c01f..1e031df 100644 --- a/SmearcarDB/static/index.css +++ b/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; diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js index 1ee476c..5a89097 100644 --- a/SmearcarDB/static/index.js +++ b/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) { diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html index bcaa1c1..92ad66f 100644 --- a/SmearcarDB/templates/index.html +++ b/SmearcarDB/templates/index.html @@ -30,8 +30,13 @@