From ba49f613340b0bc6c5fb156f5db9980e5cefa9c8 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Sat, 20 Jan 2018 21:35:29 -0500 Subject: [PATCH] added jquery, animations, favicon --- SmearcarDB/static/index.css | 63 +++++++++++++++++++++--- SmearcarDB/static/index.js | 42 ++++++++++++++-- SmearcarDB/static/resources/favicon.ico | Bin 0 -> 15086 bytes SmearcarDB/templates/index.html | 38 +++++++++++++- 4 files changed, 129 insertions(+), 14 deletions(-) create mode 100644 SmearcarDB/static/resources/favicon.ico diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css index 6e5289a..07ff414 100644 --- a/SmearcarDB/static/index.css +++ b/SmearcarDB/static/index.css @@ -1,3 +1,4 @@ +/* Layout Elements and General Formatting */ html { width: 100%; height: 100%; @@ -12,17 +13,18 @@ body { display: grid; grid-template-columns: 13% auto; grid-template-rows: 8% auto; + overflow: hidden; } h1,h2,h3,h4,h5,p { margin: 0; } -.colorFade { - -webkit-transition: background-color 0.3s ease; - -moz-transition: background-color 0.3s ease; - -ms-transition: background-color 0.3s ease; - transition: background-color 0.3s ease; +.transition { + -webkit-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 { @@ -64,7 +66,7 @@ h1,h2,h3,h4,h5,p { } .navi:hover { - background-color: rgba(255,255,255,0.1); + background-color: rgba(255,255,255,0.1) !important; } .navi i { @@ -83,5 +85,52 @@ h1,h2,h3,h4,h5,p { #mainContainer { grid-column: 2; grid-row: 2; - background-color: #FEFEFF; + padding: 2vh; + background-color: #F8F3F0; + overflow-y: auto; } + +.card { + background-color: #FEFEFE; + box-shadow: 1px 1px 1px 1px #000; + border-radius: 2px; + 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); +} + +.card:hover { + box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); +} + +/* Main Body */ + +#home, #dataValues, #files, #updates { + width: 100%; + height: 100%; + display: none; + opacity: 0; + grid-gap: 2vh; + grid-template-columns: 1fr 1fr; + grid-template-rows: 2fr 4fr 4fr; + transition: opacity 0.3s cubic-bezier(.25,.8,.25,1); +} + +#home { + display: grid; + opacity: 1; +} + +#langSelect { + grid-column: 1; + grid-row: 1; +} + +#dataInfo { + grid-column: 2; + grid-row: 1; +} + +#dataTable { + grid-column: 1 / 3; + grid-row: 2; +} \ No newline at end of file diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js index 36a85b0..a35e8ca 100644 --- a/SmearcarDB/static/index.js +++ b/SmearcarDB/static/index.js @@ -1,13 +1,22 @@ -var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text]. - ["bar-chart", "Data Values"], - ["database", "Database and Files"], - ["bell", "Updates and Progress"] +var navSelect = "home"; + +var navi = [ // Array containing navigation items in form [Font-Awesome class name, Display Text, Onclick function]. + ["home", "Home", "home"], + ["bar-chart", "Data Values", "dataValues"], + ["database", "Database and Files", "files"], + ["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 colorFade"; + 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; @@ -18,3 +27,26 @@ for(var i = 0; i < navi.length; i++) { // Create navigation tabs. side.appendChild(div); } +updateNav(navSelect); + +function updateMain(op) { + updateNav(op); + document.getElementById(navSelect).style.opacity = "0"; + setTimeout(function() { + document.getElementById(navSelect).style.display = "none"; + document.getElementById(op).style.display = "grid"; + setTimeout(function() { + document.getElementById(op).style.opacity = "1"; + }, 30); + navSelect = op; + }, 300); +} + +function updateNav(op) { + var oldNav = document.querySelectorAll("[option="+navSelect+"]")[0]; + var newNav = document.querySelectorAll("[option="+op+"]")[0]; + oldNav.style.backgroundColor = "rgba(0,0,0,0)"; + oldNav.style.color = "white"; + newNav.style.backgroundColor = "#F8F3F0"; + newNav.style.color = "#F47922"; +} diff --git a/SmearcarDB/static/resources/favicon.ico b/SmearcarDB/static/resources/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..5bcf53de2fc7b56e413967d8f189529a79e9ed08 GIT binary patch literal 15086 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 literal 0 HcmV?d00001 diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html index 09d338b..bd05af7 100644 --- a/SmearcarDB/templates/index.html +++ b/SmearcarDB/templates/index.html @@ -3,10 +3,13 @@ SmearcarDB - + + + +
@@ -17,8 +20,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- \ No newline at end of file