From ad69559c1eea236e0502d18881db5ec6c22a18a9 Mon Sep 17 00:00:00 2001
From: gmemstr <bladesimmer@gmail.com>
Date: Sat, 12 Aug 2017 00:24:57 -0700
Subject: [PATCH] New styling, add date to podcast entry and preapend instead
 of append

Played around with some simple styles that look slightly better, using the Muli font (*gasp* not roboto?!). Did a hacky date conversion thing for the frontend so I can nicely display the date beside the episode title, thinking of making it convert it to something like "24th of May, 2097" if possible. Also, importantly, newest episodes appear first thanks to insertBefore()
---
 assets/index.html        | 24 ++++++++++++++++++++----
 assets/static/styles.css | 21 +++++++++++++--------
 2 files changed, 33 insertions(+), 12 deletions(-)
diff --git a/assets/index.html b/assets/index.html
index 1afeb35..95561c4 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -4,9 +4,10 @@
     <meta charset="UTF-8">
     <title>CMS Loading</title>
     <link rel="stylesheet" href="/assets/styles.css">
-
+        <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
+    <div class="container">
     <h1 id="title" class="title">Loading</h1>
 
 <div id="podcasts">
@@ -15,24 +16,39 @@
 <footer>
     <p>White Rabbit licensed under the GPLv3 | <a href="/rss">RSS</a> <a href="/json">JSON</a></p>
 </footer>
+</div>
 <script>
 get("/json", function(data){
     json = JSON.parse(data);
     document.title = json.title;
     document.getElementById("title").innerHTML = json.title;
 
+    // Iterate through JSON 
     for (i=0;i<=json.items.length; i++){
         var div = document.createElement('div');
         div.className = 'podcast';
-        // Todo: Add audio element (must modify feeds fork first!)
-        div.innerHTML = '<h3>'+json.items[i].title+'</h3><p>'+json.items[i].summary+'</p>'+
+
+        // Hacky date workaround - convert our Go date outpus to unix timestamp,
+        // then convert that into a string
+        date = new Date(Date.parse(json.items[i].date_published))
+        month = date.getMonth()+1;
+        datestring = date.getDate() + "/" + month + "/" + date.getFullYear();
+
+        // Build div for podcast entry
+        div.innerHTML = '<h3>'+json.items[i].title+' <small>'+datestring+'</small></h3><p>'+json.items[i].summary+'</p>'+
         '<audio controls><source src="'+json.items[i].url+'">';
 
+        // We can safely do this because of how the Go code actually
+        // generates the .json file - it's consistent 
+        // Preappend so newest is at the top
         var element = document.getElementById("podcasts");
-        element.appendChild(div);
+        element.insertBefore(div, element.firstChild);
     }
 });
 
+// Wrap xmlHttp into smaller function, I like
+// to include this function whenever I need to
+// do such a thing
 function get(url, callback) {
     var xmlHttp = new XMLHttpRequest();
     xmlHttp.onreadystatechange = function() { 
diff --git a/assets/static/styles.css b/assets/static/styles.css
index 0a59d53..30d65fb 100644
--- a/assets/static/styles.css
+++ b/assets/static/styles.css
@@ -1,13 +1,18 @@
+@import url('https://fonts.googleapis.com/css?family=Muli');
+
 body {
-    background-color: #f9f9f9;
-    font-family: monospace;
+	font-family: 'Muli', sans-serif;
+}
+h1,h2,h3,h4,h5 {
+	font-weight: 400;
+}
+.container {
+  margin: 0 auto;
+  padding: 0 2.0rem;
+  position: relative;
+  width: 60vw;
 }
 
 .podcast {
-    background-color: white;
-    padding:5%;
-}
-
-label {
-	display: block;
+	width:70%;
 }
\ No newline at end of file
