👁️
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix sizing on load on mobile

+16 -9
+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
··· 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