michi.vonah/website-v3
1
0
Fork 0
mirror of https://github.com/michivonah/website-v3.git synced 2025-12-22 21:36:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

change projects section philosophy + fix bug with load more btn

Browse source
This commit is contained in:
Michi 2025-04-05 17:51:53 +02:00
parent ebe56d70a9
commit 0fe7cfa463
5 changed files with 47 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

18
static/main.js
View file

@ -228,15 +228,27 @@ async function loadMoreContent(wrapperSelector, amount, endpoint = "https://api.
// just for debugging purposes
//console.log(`children: ${wrapper.childElementCount} limit: ${amount} page: ${page}`);
const hideLoadMoreButton = () => {
document.querySelector(btnSelector).classList.add('hidden');
};
// error validation -> only load more content when page num is valid
if (page % 1 == 0){
loader.classList.remove('hidden');
await showProjects('.project-list', await loadContent(endpoint, amount, page));
const content = await loadContent(endpoint, amount, page);
if(Array.isArray(content) && content.length === 0){
console.log("No more projects available");
// hide button if no more content is available
hideLoadMoreButton();
}
else{
// show projects
await showProjects('.project-list', content);
}
loader.classList.add('hidden');
}
else{
// hide button if no more content is available
document.querySelector(btnSelector).classList.add('hidden');
hideLoadMoreButton();
}
}

14
static/style.css
View file

@ -411,8 +411,14 @@ nav.small .nav-links a:last-child:focus{
/* PROJECTS */
.projects{
margin-top: 30px;
text-align: center;
scroll-margin-top: calc(var(--navSmallHeight) + 20px);
scroll-margin-top: calc(var(--navSmallHeight) + 10px);
}
.projects-intro{
padding: 0 10px;
box-sizing: border-box;
}
.tag-filter{
@ -427,6 +433,10 @@ nav.small .nav-links a:last-child:focus{
}
.tag-filter.hidden{
display: none;
}
.tag{
background: var(--color);
color: var(--primary);
@ -457,7 +467,7 @@ nav.small .nav-links a:last-child:focus{
}
.project-list{
padding: 20px 0;
padding: 10px 0 20px 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;