arch/pogo
1
0
Fork 0
mirror of https://github.com/gmemstr/pogo.git synced 2024-09-19 17:21:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

New styling, add date to podcast entry and preapend instead of append

Browse source 
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()
This commit is contained in:
gmemstr 2017-08-12 00:24:57 -07:00
parent 862253fe5a
commit ad69559c1e
2 changed files with 33 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
assets/index.html
View file

@ -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() {

21
assets/static/styles.css
View file

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