services/mtg-online-drafter
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Synchronize art crop display threshold to 200px and enforce square aspect ratio for art crop thumbnails in grid and stack views.

Browse Source
This commit is contained in:
Daniele Viti
2025-12-17 01:34:57 +01:00
parent 4ad0cd6fdc
commit ca2efb5cd7
5 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/client/src/components/PackCard.tsx
View File

@@ -100,14 +100,14 @@ export const PackCard: React.FC<PackCardProps> = ({ pack, viewMode, cardWidth =
{viewMode === 'grid' && (
<div className="flex flex-wrap gap-3">
{pack.cards.map((card) => {
const useArtCrop = cardWidth < 170 && !!card.imageArtCrop;
const useArtCrop = cardWidth < 200 && !!card.imageArtCrop;
const displayImage = useArtCrop ? card.imageArtCrop : card.image;
return (
<CardHoverWrapper key={card.id} card={card} preventPreview={cardWidth >= 200}>
<div style={{ width: cardWidth }} className="relative group bg-slate-900 rounded-lg shrink-0">
{/* Visual Card */}
<div className={`relative aspect-[2.5/3.5] overflow-hidden rounded-lg shadow-xl border transition-all duration-200 group-hover:ring-2 group-hover:ring-purple-400 group-hover:shadow-purple-500/30 cursor-pointer ${isFoil(card) ? 'border-purple-400 shadow-purple-500/20' : 'border-slate-800'}`}>
<div className={`relative ${useArtCrop ? 'aspect-square' : 'aspect-[2.5/3.5]'} overflow-hidden rounded-lg shadow-xl border transition-all duration-200 group-hover:ring-2 group-hover:ring-purple-400 group-hover:shadow-purple-500/30 cursor-pointer ${isFoil(card) ? 'border-purple-400 shadow-purple-500/20' : 'border-slate-800'}`}>
{isFoil(card) && <FoilOverlay />}
{isFoil(card) && <div className="absolute top-1 right-1 z-30 text-[10px] font-bold text-white bg-purple-600/80 px-1 rounded backdrop-blur-sm">FOIL</div>}

6
src/client/src/components/StackView.tsx
View File

@@ -73,7 +73,7 @@ export const StackView: React.FC<StackViewProps> = ({ cards, cardWidth = 150 })
// Margin calculation: Negative margin to pull up next cards.
// To show a "strip" of say 35px at the top of each card.
const isLast = index === catCards.length - 1;
const useArtCrop = cardWidth < 170 && !!card.imageArtCrop;
const useArtCrop = cardWidth < 200 && !!card.imageArtCrop;
const displayImage = useArtCrop ? card.imageArtCrop : card.image;
return (
@@ -83,8 +83,8 @@ export const StackView: React.FC<StackViewProps> = ({ cards, cardWidth = 150 })
style={{
// Aspect ratio is maintained by image or div dimensions
// With overlap, we just render them one after another with negative margin
marginBottom: isLast ? '0' : '-125%', // Negative margin to show header
aspectRatio: '2.5/3.5'
marginBottom: isLast ? '0' : (useArtCrop ? '-85%' : '-125%'), // Negative margin to show header. Square cards need less negative margin.
aspectRatio: useArtCrop ? '1/1' : '2.5/3.5'
}}
>
<img src={displayImage} alt={card.name} className="w-full h-full object-cover" />