feat: increase gallery grid from 4 to 5 columns per row on desktopfeat: increase gallery grid from 4 to 5 columns per row on desktop

2026-02-25 19:11:23 +01:00
parent 5c97488e80
commit 0032aec02f
131 changed files with 15674 additions and 597 deletions
--- a/resources/js/components/viewer/ArtworkViewer.jsx
+++ b/resources/js/components/viewer/ArtworkViewer.jsx
@@ -0,0 +1,96 @@
+/**
+ * ArtworkViewer
+ *
+ * Fullscreen image modal. Opens on image click or keyboard F.
+ * Controls: ESC to close, click outside to close.
+ */
+import React, { useEffect, useRef } from 'react';
+
+export default function ArtworkViewer({ isOpen, onClose, artwork, presentLg, presentXl }) {
+  const dialogRef = useRef(null);
+
+  // Resolve best quality source
+  const imgSrc =
+    presentXl?.url ||
+    presentLg?.url ||
+    artwork?.thumbs?.xl?.url ||
+    artwork?.thumbs?.lg?.url ||
+    artwork?.thumb ||
+    null;
+
+  // ESC to close
+  useEffect(() => {
+    if (!isOpen) return;
+    function onKey(e) {
+      if (e.key === 'Escape') onClose();
+    }
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [isOpen, onClose]);
+
+  // Lock scroll while open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      // Focus the dialog for accessibility
+      requestAnimationFrame(() => dialogRef.current?.focus());
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  if (!isOpen || !imgSrc) return null;
+
+  return (
+    <div
+      ref={dialogRef}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Fullscreen artwork viewer"
+      tabIndex={-1}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm outline-none"
+      onClick={onClose}
+    >
+      {/* Close button */}
+      <button
+        className="absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-black/60 text-white/70 ring-1 ring-white/15 transition-colors hover:bg-black/80 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+        onClick={onClose}
+        aria-label="Close viewer (Esc)"
+        type="button"
+      >
+        <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+
+      {/* Image — stopPropagation so clicking image doesn't close modal */}
+      <img
+        src={imgSrc}
+        alt={artwork?.title ?? 'Artwork'}
+        className="max-h-[90vh] max-w-[90vw] rounded-xl object-contain shadow-2xl shadow-black/60 select-none"
+        onClick={(e) => e.stopPropagation()}
+        draggable={false}
+        loading="eager"
+        decoding="async"
+      />
+
+      {/* Title / author footer */}
+      {artwork?.title && (
+        <div
+          className="absolute bottom-5 left-1/2 -translate-x-1/2 max-w-[70vw] truncate rounded-lg bg-black/65 px-4 py-2 text-center text-sm text-white backdrop-blur-sm"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {artwork.title}
+        </div>
+      )}
+
+      {/* ESC hint */}
+      <span className="pointer-events-none absolute bottom-5 right-5 text-xs text-white/30 select-none">
+        ESC to close
+      </span>
+    </div>
+  );
+}