mirror of
https://github.com/gmemstr/pogo.git
synced 2024-09-19 17:21:10 +01:00
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()
This commit is contained in:
parent
862253fe5a
commit
ad69559c1e
|
@ -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() {
|
||||
|
|
|
@ -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%;
|
||||
}
|
Loading…
Reference in a new issue