Radiquum/radiquum.github.io--photos
1
0
Fork 0
mirror of https://github.com/Radiquum/photos.git synced 2025-04-05 15:54:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix/generator: visible overlay when images weren't loaded

Browse source
This commit is contained in:
Kentai Radiquum 2025-02-23 01:43:10 +05:00
parent 39eafb1739
commit 0efe83047c
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 30 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
generate/build.tsx
View file

@ -123,7 +123,7 @@ Object.keys(items).forEach((year) => {
const html = renderToString( const html = renderToString(
<Base isDev={ENVIRONMENT == "dev"}> <Base isDev={ENVIRONMENT == "dev"}>
<Tags tags={tags} /> <Tags tags={tags} />
<div className="container mx-auto p-4 flex flex-col gap-4"> <div className="container mx-auto p-4 flex flex-col gap-4 flex-1">
{Object.keys(items).sort().reverse().map((year) => ( {Object.keys(items).sort().reverse().map((year) => (
<YearPhotos <YearPhotos
year={year} year={year}

53
generate/static/css/tailwind.css
View file

@ -620,6 +620,12 @@
.h-full { .h-full {
height: 100%; height: 100%;
} }
.min-h-\[228px\] {
min-height: 228px;
}
.min-h-screen {
min-height: 100vh;
}
.w-16 { .w-16 {
width: calc(var(--spacing) * 16); width: calc(var(--spacing) * 16);
} }
@ -629,6 +635,9 @@
.w-full { .w-full {
width: 100%; width: 100%;
} }
.flex-1 {
flex: 1;
}
.border-collapse { .border-collapse {
border-collapse: collapse; border-collapse: collapse;
} }
@ -647,18 +656,12 @@
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
.flex-row {
flex-direction: row;
}
.items-center { .items-center {
align-items: center; align-items: center;
} }
.justify-between { .justify-between {
justify-content: space-between; justify-content: space-between;
} }
.gap-1 {
gap: calc(var(--spacing) * 1);
}
.gap-2 { .gap-2 {
gap: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 2);
} }
@ -668,9 +671,6 @@
.overflow-x-auto { .overflow-x-auto {
overflow-x: auto; overflow-x: auto;
} }
.rounded-full {
border-radius: calc(infinity * 1px);
}
.rounded-lg { .rounded-lg {
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
} }
@ -732,15 +732,9 @@
.p-4 { .p-4 {
padding: calc(var(--spacing) * 4); padding: calc(var(--spacing) * 4);
} }
.px-3 {
padding-inline: calc(var(--spacing) * 3);
}
.px-4 { .px-4 {
padding-inline: calc(var(--spacing) * 4); padding-inline: calc(var(--spacing) * 4);
} }
.px-8 {
padding-inline: calc(var(--spacing) * 8);
}
.py-1 { .py-1 {
padding-block: calc(var(--spacing) * 1); padding-block: calc(var(--spacing) * 1);
} }
@ -769,12 +763,6 @@
.text-gray-200 { .text-gray-200 {
color: var(--color-gray-200); color: var(--color-gray-200);
} }
.text-gray-300 {
color: var(--color-gray-300);
}
.text-gray-400 {
color: var(--color-gray-400);
}
.text-white { .text-white {
color: var(--color-white); color: var(--color-white);
} }
@ -804,11 +792,6 @@
align-items: center; align-items: center;
} }
} }
.md\:justify-between {
@media (width >= 48rem) {
justify-content: space-between;
}
}
.md\:gap-2 { .md\:gap-2 {
@media (width >= 48rem) { @media (width >= 48rem) {
gap: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 2);
@ -824,30 +807,12 @@
grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-columns: repeat(5, minmax(0, 1fr));
} }
} }
.lg\:text-base {
@media (width >= 64rem) {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
}
}
.lg\:text-lg {
@media (width >= 64rem) {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
}
}
.lg\:text-sm { .lg\:text-sm {
@media (width >= 64rem) { @media (width >= 64rem) {
font-size: var(--text-sm); font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height)); line-height: var(--tw-leading, var(--text-sm--line-height));
} }
} }
.lg\:text-xl {
@media (width >= 64rem) {
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
}
.xl\:grid-cols-7 { .xl\:grid-cols-7 {
@media (width >= 80rem) { @media (width >= 80rem) {
grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-columns: repeat(7, minmax(0, 1fr));

8
generate/static/js/initGalleries.js
View file

@ -31,6 +31,14 @@ Images.forEach((item) => {
availableTags.push(imTags[i]); availableTags.push(imTags[i]);
} }
} }
if (item.querySelector("img").height > 0) {
item.querySelector("[data-overlay]").classList.remove("invisible");
} else {
item.querySelector("img").addEventListener("load", () => {
item.querySelector("[data-overlay]").classList.remove("invisible");
this.removeEventListener("load", this);
});
}
} }
}); });

2
generate/templates/Base.tsx
View file

@ -65,7 +65,7 @@ export default function Base({ children, isDev }: BaseProps) {
<script defer data-domain="radiquum.wah.su/photos" data-api="https://a.wah.su/api/event" src="https://a.wah.su/js/script.js"></script> <script defer data-domain="radiquum.wah.su/photos" data-api="https://a.wah.su/api/event" src="https://a.wah.su/js/script.js"></script>
</head> </head>
<body className="bg-[#121B2C] text-white"> <body className="bg-[#121B2C] text-white min-h-screen flex flex-col">
<Header /> <Header />
{children} {children}
<Footer /> <Footer />

22
generate/templates/YearPhotos.tsx
View file

@ -29,7 +29,7 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
return ( return (
<a <a
href={image.image} href={image.image}
className={`w-full h-full hidden relative ${ className={`w-full h-full hidden relative min-h-[228px] ${
aspectRatio < 0.95 aspectRatio < 0.95
? "" ? ""
: aspectRatio > 1.05 : aspectRatio > 1.05
@ -38,11 +38,11 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
}`} }`}
key={`${year}-${image.id}`} key={`${year}-${image.id}`}
data-slide-name={image.id} data-slide-name={image.id}
data-src={image.thumbnail[2048]} data-src={image.thumbnail[1024]}
data-srcset={`${image.thumbnail[512]} 480w, ${image.thumbnail[1024]} 1440w, ${image.thumbnail[2048]} 2001w`} data-srcset={`${image.thumbnail[512]} 512w, ${image.thumbnail[1024]} 1024w, ${image.thumbnail[2048]} 2048w`}
data-sizes="(max-width: 1000x) 480px, data-sizes="(max-width: 1281x) 512px,
(max-width: 2000px) 1440px, (max-width: 2400px) 1024px,
2001px" 2048px"
data-download-url={image.image} data-download-url={image.image}
data-type="image" data-type="image"
data-tags={image.tags.join(",")} data-tags={image.tags.join(",")}
@ -61,15 +61,15 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
> >
<img <img
src={image.thumbnail[512]} src={image.thumbnail[512]}
srcSet={`${image.thumbnail[512]} 480w, ${image.thumbnail[1024]} 1440w, ${image.thumbnail[2048]} 2001w`} srcSet={`${image.thumbnail[512]} 512w, ${image.thumbnail[1024]} 1024w, ${image.thumbnail[2048]} 2048w`}
sizes="(max-width: 1000px) 480px, sizes="(max-width: 1281px) 512px,
(max-width: 2000px) 1440px, (max-width: 2400px) 1024px,
2001px" 2048px"
className="w-full h-full object-cover rounded-sm" className="w-full h-full object-cover rounded-sm"
loading="lazy" loading="lazy"
alt={image.alt} alt={image.alt}
/> />
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/75 to-95% to-transparent pt-8 p-2"> <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/75 to-95% to-transparent pt-8 p-2 invisible" data-overlay="true">
<div className="flex flex-col md:flex-row md:items-center md:gap-2 text-gray-200 text-xs lg:text-sm"> <div className="flex flex-col md:flex-row md:items-center md:gap-2 text-gray-200 text-xs lg:text-sm">
<div> <div>
{image.width}x{image.height} {image.width}x{image.height}