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(
<Base isDev={ENVIRONMENT == "dev"}>
<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) => (
<YearPhotos
year={year}

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

@ -620,6 +620,12 @@
.h-full {
height: 100%;
}
.min-h-\[228px\] {
min-height: 228px;
}
.min-h-screen {
min-height: 100vh;
}
.w-16 {
width: calc(var(--spacing) * 16);
}
@ -629,6 +635,9 @@
.w-full {
width: 100%;
}
.flex-1 {
flex: 1;
}
.border-collapse {
border-collapse: collapse;
}
@ -647,18 +656,12 @@
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.gap-1 {
gap: calc(var(--spacing) * 1);
}
.gap-2 {
gap: calc(var(--spacing) * 2);
}
@ -668,9 +671,6 @@
.overflow-x-auto {
overflow-x: auto;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
.rounded-lg {
border-radius: var(--radius-lg);
}
@ -732,15 +732,9 @@
.p-4 {
padding: calc(var(--spacing) * 4);
}
.px-3 {
padding-inline: calc(var(--spacing) * 3);
}
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.px-8 {
padding-inline: calc(var(--spacing) * 8);
}
.py-1 {
padding-block: calc(var(--spacing) * 1);
}
@ -769,12 +763,6 @@
.text-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 {
color: var(--color-white);
}
@ -804,11 +792,6 @@
align-items: center;
}
}
.md\:justify-between {
@media (width >= 48rem) {
justify-content: space-between;
}
}
.md\:gap-2 {
@media (width >= 48rem) {
gap: calc(var(--spacing) * 2);
@ -824,30 +807,12 @@
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 {
@media (width >= 64rem) {
font-size: var(--text-sm);
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 {
@media (width >= 80rem) {
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]);
}
}
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>
</head>
<body className="bg-[#121B2C] text-white">
<body className="bg-[#121B2C] text-white min-h-screen flex flex-col">
<Header />
{children}
<Footer />

22
generate/templates/YearPhotos.tsx
View file

@ -29,7 +29,7 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
return (
<a
href={image.image}
className={`w-full h-full hidden relative ${
className={`w-full h-full hidden relative min-h-[228px] ${
aspectRatio < 0.95
? ""
: aspectRatio > 1.05
@ -38,11 +38,11 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
}`}
key={`${year}-${image.id}`}
data-slide-name={image.id}
data-src={image.thumbnail[2048]}
data-srcset={`${image.thumbnail[512]} 480w, ${image.thumbnail[1024]} 1440w, ${image.thumbnail[2048]} 2001w`}
data-sizes="(max-width: 1000x) 480px,
(max-width: 2000px) 1440px,
2001px"
data-src={image.thumbnail[1024]}
data-srcset={`${image.thumbnail[512]} 512w, ${image.thumbnail[1024]} 1024w, ${image.thumbnail[2048]} 2048w`}
data-sizes="(max-width: 1281x) 512px,
(max-width: 2400px) 1024px,
2048px"
data-download-url={image.image}
data-type="image"
data-tags={image.tags.join(",")}
@ -61,15 +61,15 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
>
<img
src={image.thumbnail[512]}
srcSet={`${image.thumbnail[512]} 480w, ${image.thumbnail[1024]} 1440w, ${image.thumbnail[2048]} 2001w`}
sizes="(max-width: 1000px) 480px,
(max-width: 2000px) 1440px,
2001px"
srcSet={`${image.thumbnail[512]} 512w, ${image.thumbnail[1024]} 1024w, ${image.thumbnail[2048]} 2048w`}
sizes="(max-width: 1281px) 512px,
(max-width: 2400px) 1024px,
2048px"
className="w-full h-full object-cover rounded-sm"
loading="lazy"
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>
{image.width}x{image.height}