Change dummy series thumbnail stack pattern to cube-thingy

elan-ev · Nov 14, 2024 · b42d436 · b42d436
1 parent 22f3765
commit b42d436
Showing 1 changed file with 88 additions and 60 deletions.
diff --git a/frontend/src/routes/Search.tsx b/frontend/src/routes/Search.tsx
@@ -884,69 +884,97 @@ const SearchSeries: React.FC<SeriesItem> = ({
 
 type ThumbnailStackProps = Pick<SeriesItem, "title" | "thumbnails">
 
-const ThumbnailStack: React.FC<ThumbnailStackProps> = ({ thumbnails, title }) => (
-    <div css={{
-        zIndex: 0,
-        margin: "0 auto",
-        width: "70%",
-        display: "grid",
-        gridAutoColumns: "1fr",
-        "> div": {
-            position: "relative",
-            borderRadius: 8,
-            // The outline needs to be in a pseudo element as otherwise, it is
-            // hidden behind the img for some reason.
-            "::after": {
-                content: "''",
-                position: "absolute",
-                inset: 0,
+const ThumbnailStack: React.FC<ThumbnailStackProps> = ({ thumbnails, title }) => {
+    const isDarkScheme = useColorScheme().scheme === "dark";
+
+    return (
+        <div css={{
+            zIndex: 0,
+            margin: "0 auto",
+            width: "70%",
+            display: "grid",
+            gridAutoColumns: "1fr",
+            "> div": {
+                position: "relative",
                 borderRadius: 8,
-                outline: `2px solid ${COLORS.neutral70}`,
-                outlineOffset: -2,
+                // The outline needs to be in a pseudo element as otherwise, it is
+                // hidden behind the img for some reason.
+                "::after": {
+                    content: "''",
+                    position: "absolute",
+                    inset: 0,
+                    borderRadius: 8,
+                    outline: `2px solid ${COLORS.neutral70}`,
+                    outlineOffset: -2,
+                },
             },
+            "> div:not(:last-child)": {
+                boxShadow: "3px -2px 6px rgba(0, 0, 0, 40%)",
+            },
+            "> div:nth-child(1)": {
+                zIndex: 3,
+                gridColumn: "1 / span 10",
+                gridRow: "3 / span 10",
+            },
+            "> div:nth-child(2)": {
+                zIndex: 2,
+                gridColumn: "2 / span 10",
+                gridRow: "2 / span 10",
+            },
+            "> div:nth-child(3)": {
+                zIndex: 1,
+                gridColumn: "3 / span 10",
+                gridRow: "1 / span 10",
+            },
+        }}>
+            {thumbnails.slice(0, 3).map((info, idx) => <div key={idx}>
+                <SeriesThumbnail {...{ info, title }} />
+            </div>)}
+            {/* Add fake thumbnails to always have 3. The visual image of 3 things behind each other
+                is more important than actually showing the correct number of thumbnails. */}
+            {[...Array(Math.max(0, 3 - thumbnails.length))].map((_, idx) => (
+                <div key={"dummy" + idx}>
+                    <DummySeriesStackThumbnail isDark={isDarkScheme} />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+const DummySeriesStackThumbnail: React.FC<{ isDark: boolean }> = ({ isDark }) => (
+    <ThumbnailOverlayContainer css={{
+        // Pattern from https://css-pattern.com/overlapping-cubes/,
+        // MIT licensed: https://github.com/Afif13/CSS-Pattern
+        "--s": "40px",
+        ...isDark ? {
+            "--c1": "#2c2c2c",
+            "--c2": "#292929",
+            "--c3": "#262626",
+        } : {
+            "--c1": "#e8e8e8",
+            "--c2": "#e3e3e3",
+            "--c3": "#dddddd",
         },
-        "> div:not(:last-child)": {
-            boxShadow: "3px -2px 6px rgba(0, 0, 0, 40%)",
-        },
-        "> div:nth-child(1)": {
-            zIndex: 3,
-            gridColumn: "1 / span 10",
-            gridRow: "3 / span 10",
-        },
-        "> div:nth-child(2)": {
-            zIndex: 2,
-            gridColumn: "2 / span 10",
-            gridRow: "2 / span 10",
-        },
-        "> div:nth-child(3)": {
-            zIndex: 1,
-            gridColumn: "3 / span 10",
-            gridRow: "1 / span 10",
-        },
-    }}>
-        {thumbnails.slice(0, 3).map((info, idx) => <div key={idx}>
-            <SeriesThumbnail {...{ info, title }} />
-        </div>)}
-        {/* Add fake thumbnails to always have 3. The visual image of 3 things behind each other
-            is more important than actually showing the correct number of thumbnails. */}
-        {[...Array(Math.max(0, 3 - thumbnails.length))].map((_, idx) => <div key={"dummy" + idx}>
-            <ThumbnailOverlayContainer css={{
-                // Pattern from https://css-pattern.com/lines-dots/, MIT licensed:
-                // https://github.com/Afif13/CSS-Pattern
-                "--s": "24px", // Size
-                "--c1": COLORS.neutral25,
-                "--c2": COLORS.neutral20,
-
-                "--c": "#0000 71%, var(--c1) 0 79%, #0000 0",
-                "--_s": "calc(var(--s)/2)/calc(2*var(--s)) calc(2*var(--s))",
-                background: `
-                    linear-gradient(45deg,var(--c)) calc(var(--s)/-2) var(--_s),
-                    linear-gradient(135deg,var(--c)) calc(var(--s)/2) var(--_s),
-                    radial-gradient(var(--c1) 35%,var(--c2) 37%) 0 0/var(--s) var(--s)
-                `,
-            }} />
-        </div>)}
-    </div>
+
+        "--_g": "0 120deg,#0000 0",
+        background: `
+            conic-gradient(             at calc(250%/3) calc(100%/3),
+                var(--c3) var(--_g)),
+            conic-gradient(from -120deg at calc( 50%/3) calc(100%/3),
+                var(--c2) var(--_g)),
+            conic-gradient(from  120deg at calc(100%/3) calc(250%/3),
+                var(--c1) var(--_g)),
+            conic-gradient(from  120deg at calc(200%/3) calc(250%/3),
+                var(--c1) var(--_g)),
+            conic-gradient(from -180deg at calc(100%/3) 50%,
+                var(--c2)  60deg,var(--c1) var(--_g)),
+            conic-gradient(from   60deg at calc(200%/3) 50%,
+                var(--c1)  60deg,var(--c3) var(--_g)),
+            conic-gradient(from  -60deg at 50% calc(100%/3),
+                var(--c1) 120deg,var(--c2) 0 240deg,var(--c3) 0)
+        `,
+        backgroundSize: "calc(var(--s)*sqrt(3)) var(--s)",
+    }} />
 );
 
 type SeriesThumbnailProps = {