added a way to show archived posts
All checks were successful
Web/pipeline/head This commit looks good
All checks were successful
Web/pipeline/head This commit looks good
This commit is contained in:
parent
e7d49c1454
commit
4920725c29
3 changed files with 30 additions and 4 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>';
|
||||||
list.append(p);
|
if (obj.archived) {
|
||||||
|
archive.append(p);
|
||||||
|
} else {
|
||||||
|
list.append(p);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue