🖼️ Update Collection Thumbnails to Card Layout Design
✨ New Thumbnail Design: - Clean white card boxes representing collection cards - Main card (2/3 width) + 4 smaller cards in 2x2 grid (1/3 width) - Subtle borders and shadows for card-like appearance - Consistent rounded corners (lg for main, md for grid cards) 🎨 Visual Improvements: - Background uses --bg-tertiary for consistent theming - White card containers with --border colored borders - Proper padding (p-3) and gap spacing (gap-2) - Shadow-sm for subtle depth on card boxes 😢 Enhanced Placeholder: - Crying emoji (😢) when no cards or thumbnails exist - Larger emoji size (text-6xl) for better visibility - 'No cards yet' message for user guidance 🔧 Technical Updates: - Removed rarity glow effects and overlays for cleaner look - Simplified card rendering with focus on layout structure - Consistent implementation across both pages: - /collections (My Collections) - /community/collections (Community Collections) 📱 User Experience: - Clear visual representation of collection contents - Custom thumbnails still override card layout when uploaded - Empty card slots show as clean white boxes - Maintains responsive design and accessibility The thumbnail design now matches the mockup perfectly! 🎯
This commit is contained in:
Randall Stillwell
parent
e5f629f8e2
commit
00e3a3a902
2 changed files with 37 additions and 61 deletions
|
|
@ -249,6 +249,7 @@ export default function Collections() {
|
||||||
return new Date(dateString).toLocaleDateString();
|
return new Date(dateString).toLocaleDateString();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Collection thumbnail component
|
||||||
const CollectionThumbnail = ({ collection }) => {
|
const CollectionThumbnail = ({ collection }) => {
|
||||||
const { thumbnails = [], image } = collection;
|
const { thumbnails = [], image } = collection;
|
||||||
|
|
||||||
|
|
@ -265,69 +266,56 @@ export default function Collections() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// If no thumbnails available, show placeholder
|
// If no thumbnails available, show crying emoji placeholder
|
||||||
if (!thumbnails || thumbnails.length === 0) {
|
if (!thumbnails || thumbnails.length === 0) {
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
<div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-4xl mb-2">📦</div>
|
<div className="text-6xl mb-2">😢</div>
|
||||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>No cards yet</p>
|
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>No cards yet</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show main card (rarest) and grid of 4 others
|
// Show card layout with white boxes
|
||||||
const mainCard = thumbnails[0]; // Rarest card
|
const mainCard = thumbnails[0]; // Featured card (largest)
|
||||||
const gridCards = thumbnails.slice(1, 5); // Next 4 cards
|
const gridCards = thumbnails.slice(1, 5); // Up to 4 additional cards
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-48 rounded-xl overflow-hidden mb-4 flex gap-2">
|
<div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
||||||
{/* Main card (rarest) - takes up 2/3 of the space */}
|
{/* Main card (left side - 2/3 width) */}
|
||||||
<div className="flex-2 h-full relative group">
|
<div className="flex-2 h-full">
|
||||||
{mainCard ? (
|
{mainCard ? (
|
||||||
<div className="relative h-full">
|
<div className="w-full h-full bg-white rounded-lg overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
|
||||||
<img
|
<img
|
||||||
src={mainCard.image_url || mainCard.stock_image_url || '/placeholder-card.png'}
|
src={mainCard.image_url || mainCard.stock_image_url}
|
||||||
alt={mainCard.name}
|
alt={mainCard.name}
|
||||||
className="w-full h-full object-cover rounded-lg"
|
className="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
{/* Rarity glow effect */}
|
|
||||||
<div className={`absolute inset-0 rounded-lg rarity-glow-${mainCard.rarity?.toLowerCase() || 'common'}`}></div>
|
|
||||||
{/* Card name overlay */}
|
|
||||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2 rounded-b-lg">
|
|
||||||
<p className="text-white text-xs font-medium truncate">{mainCard.name}</p>
|
|
||||||
<p className="text-white/80 text-xs capitalize">{mainCard.rarity}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="w-full h-full bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
<div className="w-full h-full bg-white rounded-lg border" style={{ borderColor: 'var(--border)' }}></div>
|
||||||
<span className="text-gray-400 text-xs">No image</span>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Grid of 4 other cards - takes up 1/3 of the space */}
|
{/* Grid of smaller cards (right side - 1/3 width) */}
|
||||||
<div className="flex-1 h-full">
|
<div className="flex-1 h-full">
|
||||||
<div className="grid grid-cols-2 gap-1 h-full">
|
<div className="grid grid-cols-2 gap-2 h-full">
|
||||||
{Array.from({ length: 4 }).map((_, index) => {
|
{Array.from({ length: 4 }).map((_, index) => {
|
||||||
const card = gridCards[index];
|
const card = gridCards[index];
|
||||||
return (
|
return (
|
||||||
<div key={index} className="relative group">
|
<div key={index} className="relative">
|
||||||
{card ? (
|
{card ? (
|
||||||
<div className="relative h-full">
|
<div className="w-full h-full bg-white rounded-md overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
|
||||||
<img
|
<img
|
||||||
src={card.image_url || card.stock_image_url || '/placeholder-card.png'}
|
src={card.image_url || card.stock_image_url}
|
||||||
alt={card.name}
|
alt={card.name}
|
||||||
className="w-full h-full object-cover rounded"
|
className="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
{/* Subtle rarity glow for grid cards */}
|
|
||||||
<div className={`absolute inset-0 rounded rarity-glow-${card.rarity?.toLowerCase() || 'common'} opacity-50`}></div>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="w-full h-full bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
|
<div className="w-full h-full bg-white rounded-md border" style={{ borderColor: 'var(--border)' }}></div>
|
||||||
<span className="text-gray-300 text-xs">+</span>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -122,7 +122,7 @@ export default function CommunityCollections() {
|
||||||
// If collection has a custom hero image, use it
|
// If collection has a custom hero image, use it
|
||||||
if (image) {
|
if (image) {
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-48 rounded-xl overflow-hidden mb-4">
|
<div className="w-full h-48 rounded-xl overflow-hidden mb-4" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
||||||
<img
|
<img
|
||||||
src={image}
|
src={image}
|
||||||
alt={collection.name}
|
alt={collection.name}
|
||||||
|
|
@ -132,68 +132,56 @@ export default function CommunityCollections() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// If no thumbnails available, show placeholder
|
// If no thumbnails available, show crying emoji placeholder
|
||||||
if (!thumbnails || thumbnails.length === 0) {
|
if (!thumbnails || thumbnails.length === 0) {
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
<div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<div className="text-4xl mb-2">📦</div>
|
<div className="text-6xl mb-2">😢</div>
|
||||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>No cards yet</p>
|
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>No cards yet</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show main card (rarest) and grid of 4 others
|
// Show card layout with white boxes
|
||||||
const mainCard = thumbnails[0]; // Rarest card
|
const mainCard = thumbnails[0]; // Featured card (largest)
|
||||||
const gridCards = thumbnails.slice(1, 5); // Next 4 cards
|
const gridCards = thumbnails.slice(1, 5); // Up to 4 additional cards
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-48 rounded-xl overflow-hidden mb-4 flex gap-2">
|
<div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
||||||
{/* Main card (rarest) - takes up 2/3 of the space */}
|
{/* Main card (left side - 2/3 width) */}
|
||||||
<div className="flex-2 h-full relative group">
|
<div className="flex-2 h-full">
|
||||||
{mainCard ? (
|
{mainCard ? (
|
||||||
<div className="w-full h-full relative">
|
<div className="w-full h-full bg-white rounded-lg overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
|
||||||
<img
|
<img
|
||||||
src={mainCard.image_url || mainCard.stock_image_url}
|
src={mainCard.image_url || mainCard.stock_image_url}
|
||||||
alt={mainCard.name}
|
alt={mainCard.name}
|
||||||
className="w-full h-full object-cover"
|
className="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
{/* Rarity glow effect */}
|
|
||||||
<div className={`absolute inset-0 rarity-glow-${mainCard.rarity?.toLowerCase()}`}></div>
|
|
||||||
{/* Card name overlay */}
|
|
||||||
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
|
|
||||||
<p className="text-white text-xs font-medium truncate">{mainCard.name}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="w-full h-full flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
<div className="w-full h-full bg-white rounded-lg border" style={{ borderColor: 'var(--border)' }}></div>
|
||||||
<div className="text-2xl">🃏</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Grid of 4 other cards - takes up 1/3 of the space */}
|
{/* Grid of smaller cards (right side - 1/3 width) */}
|
||||||
<div className="flex-1 h-full">
|
<div className="flex-1 h-full">
|
||||||
<div className="grid grid-cols-2 gap-1 h-full">
|
<div className="grid grid-cols-2 gap-2 h-full">
|
||||||
{Array.from({ length: 4 }).map((_, index) => {
|
{Array.from({ length: 4 }).map((_, index) => {
|
||||||
const card = gridCards[index];
|
const card = gridCards[index];
|
||||||
return (
|
return (
|
||||||
<div key={index} className="relative">
|
<div key={index} className="relative">
|
||||||
{card ? (
|
{card ? (
|
||||||
<div className="w-full h-full relative">
|
<div className="w-full h-full bg-white rounded-md overflow-hidden shadow-sm border" style={{ borderColor: 'var(--border)' }}>
|
||||||
<img
|
<img
|
||||||
src={card.image_url || card.stock_image_url}
|
src={card.image_url || card.stock_image_url}
|
||||||
alt={card.name}
|
alt={card.name}
|
||||||
className="w-full h-full object-cover rounded"
|
className="w-full h-full object-cover"
|
||||||
/>
|
/>
|
||||||
{/* Subtle rarity glow */}
|
|
||||||
<div className={`absolute inset-0 rarity-glow-${card.rarity?.toLowerCase()} opacity-50 rounded`}></div>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="w-full h-full flex items-center justify-center rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
<div className="w-full h-full bg-white rounded-md border" style={{ borderColor: 'var(--border)' }}></div>
|
||||||
<div className="text-lg opacity-50">🃏</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue