diff --git a/SmearcarDB/static/index.css b/SmearcarDB/static/index.css
index de5bd66..1e169c3 100644
--- a/SmearcarDB/static/index.css
+++ b/SmearcarDB/static/index.css
@@ -203,11 +203,17 @@ a {
grid-gap: 2vh;
}
-#home, #dataValues {
+ #dataValues {
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 5fr 2fr;
}
+#home {
+ display: block;
+
+ opacity: 1;
+}
+
.card {
display: grid;
@@ -220,7 +226,7 @@ a {
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
- grid-template-columns: 100%;
+ grid-template-columns: 35% auto 20%;
grid-template-rows: 6vh auto;
}
@@ -228,8 +234,7 @@ a {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
-.card h2 {
- width: 35%;
+.card > h2 {
margin: auto 0 auto 2vh;
font-weight: 300;
@@ -239,15 +244,27 @@ a {
grid-row: 1;
}
+.card > h3 {
+ grid-column: 3;
+ grid-row: 1;
+}
+
.card > div {
- grid-column: 1;
+ grid-column: 1 / 4;
grid-row: 2;
}
-#home {
- display: grid;
+.card > p {
+ margin: 2vh 0 2vh 4vh;
+ font-size: 120%;
+ font-weight: 300;
+ grid-column: 1 / 4;
+ grid-row: 2;
+}
- opacity: 1;
+.card > h3 {
+ margin: auto;
+ font-weight: 300;
}
#langSelect {
diff --git a/SmearcarDB/static/index.js b/SmearcarDB/static/index.js
index 8e97ca7..2f607ed 100644
--- a/SmearcarDB/static/index.js
+++ b/SmearcarDB/static/index.js
@@ -1,6 +1,7 @@
var navSelect = "home";
var serverURL = window.location.origin;
var data;
+
// var trelloInfo = {};
@@ -19,7 +20,6 @@ var dropOp = {
//Insert correct
};
-
var dropOpStore = {};
function createNav() {
@@ -44,12 +44,17 @@ function createNav() {
}
}
-function updateMain(op) {
+function updateMain(op) { // Updates the actual page.
updateNav(op);
document.getElementById(navSelect).style.opacity = "0";
setTimeout(function() {
+ console.log(op);
document.getElementById(navSelect).style.display = "none";
- document.getElementById(op).style.display = "grid";
+ if(op === "home") {
+ document.getElementById(op).style.display = "block";
+ } else {
+ document.getElementById(op).style.display = "grid";
+ }
setTimeout(function() {
document.getElementById(op).style.opacity = "1";
}, 30);
@@ -57,7 +62,7 @@ function updateMain(op) {
}, 300);
}
-function updateNav(op) {
+function updateNav(op) { // Updates the sidebar navigation.
var oldNav = document.querySelectorAll("[option=" + navSelect + "]")[0];
var newNav = document.querySelectorAll("[option=" + op + "]")[0];
oldNav.style.backgroundColor = "rgba(0,0,0,0)";
@@ -103,11 +108,13 @@ function phoneme(p) {
}
function generateDropOp() { // For options that change based on data.
- dropOp["langSelect"] = [function() {
+ dropOp["langSelect"] = [function() { // Function that occurs when change language.
// Generate info box material.
var langInfo = language(dropOpStore["langSelect"]);
var info = document.getElementById("langInfoCont");
+ var dataBox = document.getElementById("dataTableCont");
info.style.opacity = "0";
+ dataBox.style.opacity = "0";
setTimeout(function() {
while (info.firstChild) {
info.removeChild(info.firstChild);
@@ -119,7 +126,7 @@ function generateDropOp() { // For options that change based on data.
p2.appendChild(document.createTextNode("Source: "));
if(langInfo.source.length > 0) {
a.href = langInfo.source;
- srcText = (langInfo.source.length > 60) ? langInfo.source.substring(0, langInfo.source.length - 3) + "..." : langInfo.source;
+ srcText = (langInfo.source.length > 60) ? langInfo.source.substring(0, 57) + "..." : langInfo.source;
a.appendChild(document.createTextNode(srcText));
p2.appendChild(a);
} else {
@@ -127,13 +134,10 @@ function generateDropOp() { // For options that change based on data.
}
info.appendChild(p);
info.appendChild(p2);
- info.style.opacity = "1";
- }, 400);
- // Generate data box material.
- var dataBox = document.getElementById("dataTableCont");
- var phonemes = Object.keys(langInfo.phonemes);
- dataBox.style.opacity = "0";
- setTimeout(function() {
+ // Generate data box material.
+
+ var phonemes = Object.keys(langInfo.phonemes);
+
while (dataBox.firstChild) {
dataBox.removeChild(dataBox.firstChild);
}
@@ -165,8 +169,9 @@ function generateDropOp() { // For options that change based on data.
dataBox.children[tableNum].appendChild(p1);
dataBox.children[tableNum].appendChild(p2);
}
+ info.style.opacity = "1";
dataBox.style.opacity = "1";
- }, 400);
+ }, 300);
}].concat(["Select language..."].concat(data.languages));
}
@@ -237,6 +242,44 @@ document.onclick = function(event) {
}
}
+function homeCards() {
+ // GET posts from server
+ var week = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+ var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+ var examplePost = [
+ {
+ author: "Kenneth Jao",
+ title: "Test Post!",
+ content: "This is test post! Link This link should work.
Newlines work.",
+ date: new Date(2018, 0, 26, 4, 51)
+ }
+ ];
+ var home = document.getElementById("home");
+ for(var i = 0; i < examplePost.length; i++) {
+ var div = document.createElement("div");
+ div.className = "card";
+ var h2 = document.createElement("h2");
+ h2.textContent = examplePost[i].title;
+ div.appendChild(h2);
+ var h3 = document.createElement("h3");
+ var dt = examplePost[i].date;
+ var smallDate = (function() {
+ var m = (dt.getMonth()+1).toString();
+ var d = (dt.getDay()+1).toString();
+ m = (m.length === 1) ? "0" + m : m;
+ d = (d.length === 1) ? "0" + d : d;
+ return m+"/"+d+"/"+dt.getFullYear().toString();
+ })();
+ var fullDate = week[dt.getDay()] + ", " + month[dt.getMonth()] + " " + dt.getDate().toString() + ", " + dt.getFullYear().toString();
+ h3.textContent = smallDate + " | " + fullDate;
+ div.appendChild(h3);
+ var p = document.createElement("p");
+ p.innerHTML = examplePost[i].content;
+ div.appendChild(p);
+ home.appendChild(div);
+ }
+}
+
/*function getTrelloCards() {
Trello.authorize();
var cardArr, listArr, lists;
@@ -265,5 +308,6 @@ document.onclick = function(event) {
}*/
getData();
+homeCards();
createNav();
updateNav(navSelect);
diff --git a/SmearcarDB/templates/index.html b/SmearcarDB/templates/index.html
index d92239e..82e2e21 100644
--- a/SmearcarDB/templates/index.html
+++ b/SmearcarDB/templates/index.html
@@ -25,12 +25,6 @@