kjao/archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added jquery, animations, favicon

Browse Source
This commit is contained in:
Kenneth Jao 2018-01-20 21:35:29 -05:00
parent bcd7b5a2b7
commit ba49f61334
4 changed files with 129 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
SmearcarDB/static/index.css
View File

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

42
SmearcarDB/static/index.js
View File

@ -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";
}

BIN
SmearcarDB/static/resources/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

38
SmearcarDB/templates/index.html
View File

@ -3,10 +3,13 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>SmearcarDB</title>
<link rel="icon" href="{{ url_for('static', filename='resources/ico/favicon.png') }}">
<link rel="icon" href="{{ url_for('static', filename='resources/favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" 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>
<script src="https://use.fontawesome.com/c8d5486cd8.js"></script>
</head>
<body>
<div id="header1" class="colorFade">
@ -17,8 +20,39 @@
<div id="sidebar">
</div>
<div id="mainContainer">
<div id="home" class="optionContainer">
<div id="langSelect" class="card">
</div>
<div id="dataInfo" class="card">
</div>
<div id="dataTable" class="card">
</div>
</div>
<div id="dataValues" class="optionContainer">
<div id="langSelect" class="card">
</div>
<div id="dataInfo" class="card">
</div>
<div id="dataTable" class="card">
</div>
</div>
<div id="files" class="optionContainer">
<div id="langSelect" class="card">
</div>
<div id="dataInfo" class="card">
</div>
<div id="dataTable" class="card">
</div>
</div>
<div id="updates" class="optionContainer">
<div id="langSelect" class="card">
</div>
<div id="dataInfo" class="card">
</div>
<div id="dataTable" class="card">
</div>
</div>
</div>
</body>
<script src="{{ url_for('static', filename='index.js') }}"></script>
<script src="https://use.fontawesome.com/c8d5486cd8.js"></script>
</html>