Skip to content

fix: Homepage counters grid layout and alignment fixes #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
WeatherGod3218 merged 2 commits into from
Oct 21, 2026
Merged

fix: Homepage counters grid layout and alignment fixes #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
815076a
fix: Make counters on the index page a grid O_o and fix alignment for…
NickJ-7010 Oct 21, 2026
19a6b73
fix: Observer fix by @weather
NickJ-7010 Oct 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion templates/counter.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<span class="description"><i>reported by: <span class="reset-user"></span></i></span>
</div>
</div>
<div class="col">
<div class="col align-content-center">
<div class="text-center my-auto">
<span class="days-since fw-bold display-3"></span>
<span class="description d-block">Day(s) Ago</span>
Expand Down
45 changes: 26 additions & 19 deletions templates/index.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{{ define "index.tmpl"}}
{{ template "header.tmpl" . }}
<template id="counter-card-template">
<li class="p-1">
<a class="text-center list-group-item list-group-item-action p-3" href="#">
<li class="col p-1">
<a class="h-100 align-content-center text-center list-group-item list-group-item-action p-3" href="#">
<span class="fs-5 counter-title"></span>
<br/>
<span class="days-since fw-bold display-1 timestamp"> </span>
Expand All @@ -19,8 +19,8 @@
<br/>
<input class="form-control w-75 mx-auto" type="text" placeholder= "Find Counters">
<br/>
<div>
<ul id="counter-list" class="counter-list list-group list-unstyled text-wrap text-break"></ul>
<div class="container">
<ul id="counter-list" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-0 counter-list list-group list-unstyled flex-row"></ul>
</div>
<div id="scroll-sentinel" style="height:1px"></div> {{/* hi storemcloud! */}}
<script>
Expand All @@ -41,20 +41,13 @@
};
}

const sentinel = document.getElementById("scroll-sentinel");
const template = document.getElementById("counter-card-template");
const list = document.getElementById("counter-list");
let loading = false;
let done = false;
let timestamp = null

function clearCounters() {
list.replaceChildren();
timestamp = null;
done = false;
loading = false;
observer.observe(document.getElementById("scroll-sentinel"));
loadMore();
}

function renderCounter(c) {
const li = template.content.firstElementChild.cloneNode(true);
Expand Down Expand Up @@ -97,9 +90,27 @@
console.error("Error loading more:", err);
} finally {
loading = false;
if (!done) {
observer.unobserve(sentinel);
observer.observe(sentinel);
}
}
}

const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) loadMore();
}, { rootMargin: "300px" });
observer.observe(sentinel);

function clearCounters() {
list.replaceChildren();
timestamp = null;
done = false;
loading = false;
observer.observe(sentinel);
loadMore();
}

const debouncedSearch = debounce(clearCounters, 500);

document.querySelector('input').addEventListener('input', function() {
Expand All @@ -109,14 +120,10 @@
debouncedSearch()
});

const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) loadMore();
}, { rootMargin: "300px" });
observer.observe(document.getElementById("scroll-sentinel"));

})()
loadMore()
})()
</script>
</div>
</body>
</html>
{{end}}
{{end}}
Loading