wah.su/wahs.wah.su
1
0
Fork 0
mirror of https://github.com/wah-su/wahs.wah.su.git synced 2025-04-05 15:54:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add selecting of how many items are visible per page

Browse source
This commit is contained in:
Kentai Radiquum 2025-02-01 01:22:51 +05:00
parent 5e30c48bac
commit a30c9bb445
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 88 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/static/tailwind.css
View file

@ -662,9 +662,6 @@
.grid-cols-\[repeat\(auto-fill\,minmax\(25\%\,1fr\)\)\] {
grid-template-columns: repeat(auto-fill,minmax(25%,1fr));
}
.grid-cols-\[repeat\(auto-fill\,minmax\(250px\,1fr\)\)\] {
grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
}
.grid-cols-\[repeat\(auto-fill\,minmax\(25vw\,1fr\)\)\] {
grid-template-columns: repeat(auto-fill,minmax(25vw,1fr));
}
@ -683,12 +680,18 @@
.grid-cols-\[repeat\(auto-fill\,minmax\(50vw\,1fr\)\)\] {
grid-template-columns: repeat(auto-fill,minmax(50vw,1fr));
}
.grid-cols-\[repeat\(auto-fill\,minmax\(250px\,1fr\)\)\] {
grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-around {
justify-content: space-around;
}
.justify-between {
justify-content: space-between;
}
@ -698,6 +701,9 @@
.gap-4 {
gap: calc(var(--spacing) * 4);
}
.gap-6 {
gap: calc(var(--spacing) * 6);
}
.overflow-hidden {
overflow: hidden;
}
@ -736,6 +742,9 @@
.object-cover {
object-fit: cover;
}
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-4 {
padding: calc(var(--spacing) * 4);
}
@ -752,16 +761,27 @@
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-xl {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
.text-\[\#140606\] {
color: #140606;
}
.text-\[\#f9ebeb\] {
color: #f9ebeb;
}
.text-orange-500 {
color: var(--color-orange-500);
}
.text-white {
color: var(--color-white);
}
@ -830,6 +850,17 @@
padding-inline: calc(var(--spacing) * 8);
}
}
.md\:block {
@media (width >= 48rem) {
display: block;
}
}
.md\:text-lg {
@media (width >= 48rem) {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
}
.lg\:text-xl {
@media (width >= 64rem) {
font-size: var(--text-xl);
@ -946,6 +977,10 @@
inherits: false;
initial-value: solid;
}
@property --tw-font-weight {
syntax: "*";
inherits: false;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;

51
src/static/utils.js
View file

@ -40,16 +40,16 @@ function setImagesPerPage(count) {
localStorage.setItem("ImagesPP", count);
}
function getImagesPerPage() {
const count = localStorage.getItem("ImagesPP");
let count = localStorage.getItem("ImagesPP");
const url = new URL(window.location.toString());
const countParam = url.searchParams.get("ImagesPP");
if (!count && !countParam) {
setImagesPerPage(24);
url.searchParams.set("ImagesPP", 24);
return Number(24);
count = Number(24);
} else if (countParam) {
return Number(countParam);
count = Number(countParam);
} else if (count) {
url.searchParams.set("ImagesPP", count);
window.history.pushState(
@ -57,10 +57,20 @@ function getImagesPerPage() {
`Wah-Collection/Images`,
`?${url.searchParams.toString()}`
);
return Number(count);
count = Number(count);
} else {
return 24;
count = 24;
}
const active = document.querySelectorAll(`[data-ipp="${count}"]`);
if (active.length > 0) {
active.forEach((item) => {
item.classList.add("underline");
item.classList.add("text-orange-500");
item.classList.add("font-bold");
});
}
return count;
}
function setOffset(offset) {
@ -79,23 +89,32 @@ function getOffset() {
}
function enableNav() {
function handleClickPrev() {
setOffset(getOffset() - getImagesPerPage())
setOffset(getOffset() - getImagesPerPage());
}
function handleClickNext() {
setOffset(getOffset() + getImagesPerPage())
setOffset(getOffset() + getImagesPerPage());
}
const nav_prev = document.querySelectorAll("#nav_prev")
const nav_next = document.querySelectorAll("#nav_next")
function handleClickIpp(ipp) {
setImagesPerPage(ipp);
const url = new URL(window.location.toString());
url.searchParams.set("ImagesPP", ipp);
window.location.href = url.href;
}
const nav_prev = document.querySelectorAll("#nav_prev");
const nav_next = document.querySelectorAll("#nav_next");
const nav_ipp = document.querySelectorAll("#nav_ipp");
nav_prev.forEach((item) => {
item.addEventListener('click', handleClickPrev)
})
item.addEventListener("click", handleClickPrev);
});
nav_next.forEach((item) => {
item.addEventListener('click', handleClickNext)
})
}
item.addEventListener("click", handleClickNext);
});
nav_ipp.forEach((item) => {
item.addEventListener("click", () => handleClickIpp(item.dataset.ipp));
});
}

18
src/templates/Components/PageNavigation.tsx
View file

@ -1,10 +1,22 @@
export default function PageNav() {
const ipp = [12,24,32,48,72,100,250,500,1000]
return (
<div className="bg-orange-800/50 rounded-sm py-2 text-white flex justify-between gap-4 items-center">
<button className="flex justify-center gap-4 items-center cursor-pointer" id="nav_prev">
<div className="bg-orange-800/50 rounded-sm p-2 text-white flex justify-between gap-4 items-center">
<button className="flex justify-center items-center cursor-pointer" id="nav_prev">
<div className="material-symbols--navigate-before w-16 h-16"></div>
</button>
<button className="flex justify-center gap-4 items-center cursor-pointer" id="nav_next">
<div className="flex gap-4">
{ipp.map((item, idx) => {
return <button key={`ipp_${item}`}
className={`${idx > 4 ? "hidden md:block" : ""} cursor-pointer md:text-lg lg:text-xl`}
id="nav_ipp"
data-ipp={item}
>{item}</button>
})}
</div>
<button className="flex justify-center items-center cursor-pointer" id="nav_next">
<div className="material-symbols--navigate-next w-16 h-16"></div>
</button>
</div>