Hide Google consent banner and improve image display in gallery
Adds JavaScript and CSS to hide the Google consent banner. Updates the photo gallery component to use a mobile-first responsive aspect ratio for images. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1f7e7e89-a520-4970-9645-37daadc466dc Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 89d6d546-4436-4198-9d55-f2b55c9c1ccb Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/1f7e7e89-a520-4970-9645-37daadc466dc/5JDNRWP Replit-Helium-Checkpoint-Created: true
This commit is contained in:
@@ -12,6 +12,21 @@ interface GalleryImage {
|
||||
|
||||
const PAGE_SIZE = 24;
|
||||
|
||||
function useIsMobile() {
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
|
||||
useEffect(() => {
|
||||
const handler = () => setIsMobile(window.innerWidth < 768);
|
||||
window.addEventListener("resize", handler);
|
||||
return () => window.removeEventListener("resize", handler);
|
||||
}, []);
|
||||
return isMobile;
|
||||
}
|
||||
|
||||
function cloudinaryTransform(src: string, transform: string) {
|
||||
if (!src.includes("res.cloudinary.com")) return src;
|
||||
return src.replace(/\/upload\/[^/]+\//, `/upload/${transform}/`);
|
||||
}
|
||||
|
||||
function thumbUrl(src: string) {
|
||||
if (src.includes("res.cloudinary.com")) return src;
|
||||
return `/api/gallery/thumb?src=${encodeURIComponent(src)}`;
|
||||
@@ -322,7 +337,7 @@ export default function GalleryPage() {
|
||||
className="group relative rounded-lg overflow-hidden bg-card border border-card-border cursor-pointer flex flex-col"
|
||||
data-testid={`button-gallery-image-${i}`}
|
||||
>
|
||||
<div className="relative w-full" style={{ aspectRatio: "9/16" }}>
|
||||
<div className="relative w-full aspect-[16/9] md:aspect-[9/16]">
|
||||
<LazyImage
|
||||
src={thumbUrl(img.thumb)}
|
||||
alt={img.artist || img.fileName}
|
||||
|
||||
Reference in New Issue
Block a user