From 1a3a3f9ed657f09c36e82bf3ca6a605c1638de95 Mon Sep 17 00:00:00 2001 From: Kenneth Jao Date: Fri, 26 Jan 2018 17:50:53 -0500 Subject: [PATCH] Home page post function, css/animation changes --- SmearcarDB/static/index.css | 33 +++++++++++---- SmearcarDB/static/index.js | 72 ++++++++++++++++++++++++++------- SmearcarDB/templates/index.html | 10 +---- 3 files changed, 85 insertions(+), 30 deletions(-) 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 @@
-
-
-
-
-
-
@@ -40,12 +34,12 @@

Info

-
+

Data

-
+