👁️
fix sizing on load on mobile
+16
-9
+3
-3
src/components/CardImage.tsx
+3
-3
src/components/CardImage.tsx
···
78
78
}
79
79
};
80
80
81
-
const baseClassName = `${className ?? ""} rounded-[4.75%/3.5%]`;
81
+
const baseClassName = `${className ?? ""} rounded-[4.75%/3.5%] aspect-[5/7]`;
82
82
83
83
if (!flippable) {
84
84
return (
···
159
159
/**
160
160
* Loading placeholder for card thumbnails
161
161
*/
162
-
export function CardSkeleton() {
162
+
export function CardSkeleton({ className }: { className?: string }) {
163
163
return (
164
164
<div
165
-
className="aspect-[5/7] rounded-[4.75%/3.5%] bg-gray-200 dark:bg-zinc-700 animate-pulse"
165
+
className={`aspect-[5/7] rounded-[4.75%/3.5%] bg-gray-200 dark:bg-zinc-700 animate-pulse ${className ?? ""}`}
166
166
style={{ backgroundImage: PLACEHOLDER_STRIPES }}
167
167
/>
168
168
);
+13
-6
src/routes/card/$id.tsx
+13
-6
src/routes/card/$id.tsx
···
1
1
import { useQueries, useQuery } from "@tanstack/react-query";
2
2
import { createFileRoute, Link } from "@tanstack/react-router";
3
3
import { useEffect, useRef, useState } from "react";
4
-
import { CardImage } from "@/components/CardImage";
4
+
import { CardImage, CardSkeleton } from "@/components/CardImage";
5
5
import { CommentsPanel } from "@/components/comments";
6
6
import { ManaCost } from "@/components/ManaCost";
7
7
import { OracleText } from "@/components/OracleText";
···
226
226
return (
227
227
<div className="min-h-screen bg-white dark:bg-zinc-900">
228
228
<div className="max-w-7xl mx-auto px-6 py-8">
229
-
<div className="flex items-center justify-center py-20">
230
-
<p className="text-gray-600 dark:text-zinc-300 text-lg">
231
-
Loading card...
232
-
</p>
229
+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
230
+
<div className="sticky top-0 z-10 bg-white dark:bg-zinc-900 py-4 -mx-6 px-6 lg:mx-0 lg:px-0 lg:py-0 lg:bg-transparent lg:dark:bg-transparent lg:top-8 flex justify-center lg:justify-end">
231
+
<CardSkeleton className="h-[50vh] lg:h-[80vh] shadow-[0_8px_30px_rgba(0,0,0,0.4)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.8)]" />
232
+
</div>
233
+
<div className="space-y-6 min-w-0">
234
+
<div className="space-y-3">
235
+
<div className="h-9 w-64 bg-gray-200 dark:bg-zinc-700 rounded animate-pulse" />
236
+
<div className="h-6 w-48 bg-gray-200 dark:bg-zinc-700 rounded animate-pulse" />
237
+
</div>
238
+
<div className="h-32 bg-gray-100 dark:bg-zinc-800 rounded-lg animate-pulse" />
239
+
</div>
233
240
</div>
234
241
</div>
235
242
</div>
···
263
270
<CardImage
264
271
card={displayCard}
265
272
size="large"
266
-
className="shadow-[0_8px_30px_rgba(0,0,0,0.4)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.8)] max-w-full h-auto max-h-[50vh] lg:max-h-[80vh] object-contain"
273
+
className="shadow-[0_8px_30px_rgba(0,0,0,0.4)] dark:shadow-[0_8px_30px_rgba(0,0,0,0.8)] h-[50vh] lg:h-[80vh]"
267
274
/>
268
275
</div>
269
276