Home page post function, css/animation changes

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 {
+.card > h2 {
-	width: 35%;
 	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 {
+.card > p {
-	display: grid;
+	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 {

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";
+            // Generate data box material.
-        }, 400);
+            
-        // Generate data box material.
+            var phonemes = Object.keys(langInfo.phonemes);
-        var dataBox = document.getElementById("dataTableCont");
+            
-        var phonemes = Object.keys(langInfo.phonemes);
-        dataBox.style.opacity = "0";
-        setTimeout(function() {
             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! <a target='_blank' href='https://google.com'>Link</a> This link should work.<br> 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);

SmearcarDB/templates/index.html

@@ -25,12 +25,6 @@
     </div>
     <div id="mainContainer">
         <div id="home" class="optionContainer">
-            <div id="roles" class="card">
-            </div>
-            <div id="about" class="card">
-            </div>
-            <div id="tasks">
-            </div>
         </div>
         <div id="dataValues" class="optionContainer">
             <div id="langSelect" class="card">
@@ -40,12 +34,12 @@
             </div>
             <div id="dataInfo" class="card">
                 <h2>Info</h2>
-                <div id="langInfoCont">
+                <div id="langInfoCont" class="transition">
                 </div>
             </div>
             <div id="dataTable" class="card">
                 <h2>Data</h2>
-                <div id="dataTableCont">
+                <div id="dataTableCont" class="transition">
                 </div>
             </div>
         </div>