wah.su/wahs.wah.su
1
0
Fork 0
mirror of https://github.com/wah-su/wahs.wah.su.git synced 2025-09-14 10:23:50 +05:00
Code Issues Projects Releases Packages Wiki Activity

add ""masonry"" grid view

Browse source
This commit is contained in:
Kentai Radiquum 2025-02-01 02:45:41 +05:00
parent a30c9bb445
commit b1ef537d14
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
6 changed files with 189 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,15 +10,25 @@ export default function PageNav() {
<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`}
className={`${idx > 4 ? "hidden md:block" : ""} cursor-pointer md:text-lg lg:text-xl text-gray-200`}
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 className="flex">
<div className="gap-1 hidden xl:flex">
<button className="flex justify-center items-center cursor-pointer text-gray-200" id="nav_view" data-view="grid">
<div className="material-symbols--grid-on w-8 h-8"></div>
</button>
<button className="flex justify-center items-center cursor-pointer text-gray-200" id="nav_view" data-view="masonry">
<div className="material-symbols--dashboard-rounded w-8 h-8"></div>
</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>
</div>
);
}

2
src/templates/Components/PlaceHolder.tsx
View file

@ -4,7 +4,7 @@ export default function Placeholder(props: {
return (
<a
data-type="placeholder__image"
className={`relative aspect-square min-w-48 sm:min-w-auto rounded-sm overflow-hidden ${
className={`relative aspect-square min-w-48 min-h-48 sm:min-w-auto rounded-sm overflow-hidden ${
props.isMobileHidden ? "hidden xl:block" : ""
}`}
>

2
src/templates/images.tsx
View file

@ -6,7 +6,7 @@ export default function ImagesPage() {
<PageNav />
<div
id="images_images"
className="my-4 overflow-hidden grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-4"
className="my-2 overflow-hidden grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
></div>
<PageNav />
</>