Ellpeck/Web
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

added a way to show archived posts
All checks were successful
Web/pipeline/head This commit looks good
Details

Browse source
This commit is contained in:
Ell 2020-09-30 00:24:37 +02:00
parent e7d49c1454
commit 4920725c29
3 changed files with 30 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -166,6 +166,10 @@
<div id="blog-list"> <div id="blog-list">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em> <em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div> </div>
<button type="button" class="btn btn-link" id="blog-archive-button">Show archived posts</button>
<div id="blog-archive">
<em>The content that should be here is dynamically generated. Please enable JavaScript if you see this.</em>
</div>
<script src="scripts/blog.js"></script> <script src="scripts/blog.js"></script>
</div> </div>
</div> </div>

15
scripts/blog.js
View file

@ -1,15 +1,20 @@
$("#blog-archive-button").on("click", function () {
let archive = $('#blog-archive');
archive.toggle();
$(this).html((archive.is(":visible") ? "Hide" : "Show") + " archived posts");
});
$.ajax({ $.ajax({
dataType: "json", dataType: "json",
url: "blog/posts.json", url: "blog/posts.json",
cache: false, cache: false,
success: function (json) { success: function (json) {
let list = $('#blog-list'); let list = $('#blog-list');
let archive = $('#blog-archive');
list.html(""); list.html("");
archive.html("");
for (let i = json.length - 1; i >= 0; i--) { for (let i = json.length - 1; i >= 0; i--) {
var obj = json[i]; var obj = json[i];
if (obj.archived)
continue;
let p = ""; let p = "";
p += '<div class="card bg-light blog-entry rounded-0">'; p += '<div class="card bg-light blog-entry rounded-0">';
p += '<div class="card-body">'; p += '<div class="card-body">';
@ -17,7 +22,11 @@ $.ajax({
p += '<div class="card-text text-muted blog-summary">' + obj.summary + '</div>'; p += '<div class="card-text text-muted blog-summary">' + obj.summary + '</div>';
p += '<span class="text-muted project-status">' + obj.date + "</span>"; p += '<span class="text-muted project-status">' + obj.date + "</span>";
p += '</div></div>'; p += '</div></div>';
if (obj.archived) {
archive.append(p);
} else {
list.append(p); list.append(p);
} }
} }
}
}); });

13
style/style.css
View file

@ -72,6 +72,19 @@ body {
text-align: center; text-align: center;
} }
#blog-archive-button {
display: block;
position: relative;
margin-top: 20px;
margin-left: auto;
margin-right: 0;
padding: 0;
}
#blog-archive {
display: none;
}
.anchor { .anchor {
display: block; display: block;
position: relative; position: relative;