ktyl
/
singularity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: genericise posts to blocks

This commit is contained in:
ktyl 2024-07-17 00:08:03 +01:00
parent 52fa5a2df5
commit b512176f19
3 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -10,8 +10,8 @@
</head>
<body>
<!-- posts are added by JavaScript so container starts empty -->
<div id="post-container"></div>
<!-- blocks are added by JavaScript so container starts empty -->
<div id="block-container"></div>
<!-- loader displays an animation before adding the next batch of posts -->
<div id="loader">

8
main.js
View File

@ -1,8 +1,7 @@
var users = [];
var posts = {};
// first, let's get all the elements we'll need from our DOM
const postContainer = document.getElementById("post-container");
const blockContainer = document.getElementById("block-container");
const postCountElem = document.getElementById("post-count");
const postTotalElem = document.getElementById("post-total");
const loader = document.getElementById("loader");
@ -66,7 +65,7 @@ class Post {
getElement() {
const postElem = document.createElement("div");
postElem.className = "post";
postElem.className = "block";
postElem.style.backgroundColor = getRandomColor();
// add a header to the post
@ -148,10 +147,9 @@ function addPosts(pageIdx) {
postCountElem.innerHTML = endRange;
const rootPosts = getRootPosts();
console.log(rootPosts);
for (let i = startRange + 1; i <= endRange; i++) {
postContainer.appendChild(rootPosts[i].getElement());
blockContainer.appendChild(rootPosts[i].getElement());
}
}

8
styles.css
View File

@ -6,7 +6,7 @@ body {
@media only screen and (min-width: 800px) {
/* For bigger than phones */
#post-container {
#block-container {
max-width: 800px;
}
@ -16,7 +16,7 @@ body {
}
#post-container {
#block-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
@ -24,14 +24,14 @@ body {
width: 100%;
}
.post {
.block {
width: calc(100% - 16px);
margin: 8px;
border-radius: 3px;
transition: all 200ms ease-in-out;
}
.post:hover {
.block:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}