rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

🎨 Redesigned Card Hover with Side Information Panel

Browse source 
✨ New Side Panel Design:
- Information panel slides out from the right side of cards
- 500ms hover delay to prevent accidental triggers
- 320px wide panel with comprehensive card details
- Smooth slide-in animation with backdrop blur effect

🎯 TCG-Specific Information:
- MTG: Mana cost, Power/Toughness, Colors with proper styling
- Pokemon: HP display with yellow highlighting
- Lorcana: Ink cost, Strength/Willpower stats
- Oracle text/description for all card types

🌙 Dark Theme Support:
- Full dark mode styling for all panel elements
- Dark-aware color schemes for TCG-specific badges
- Proper contrast ratios for accessibility

⚡ Enhanced Features:
- Structured layout: Header, Body, Footer sections
- Grid-based action buttons with tooltips
- Copy card info functionality
- Responsive design (hidden on mobile/tablet)
- Better grid spacing with right padding for panels

🎨 Professional Polish:
- Backdrop blur effects for depth
- Smooth transitions with proper easing
- Z-index management for layering
- Reduced grid columns to accommodate panels

Perfect for detailed card inspection! 🃏✨
This commit is contained in:
Randall Stillwell 2025-07-25 23:55:54 -05:00
parent a6602eab87
commit 1387ecaccb
3 changed files with 233 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

284
components/CardItem.js
View file

@ -134,7 +134,7 @@ export default function CardItem({
<div className={`relative bg-white rounded-xl border transition-all duration-300 overflow-hidden ${ <div className={`relative bg-white rounded-xl border transition-all duration-300 overflow-hidden ${
isSelected isSelected
? 'border-purple-500 shadow-xl ring-2 ring-purple-200' ? 'border-purple-500 shadow-xl ring-2 ring-purple-200'
: 'border-gray-200 group-hover:border-gray-300' : 'border-gray-200 group-hover:border-gray-300 group-hover:shadow-lg'
}`}> }`}>
{/* Selection Checkbox */} {/* Selection Checkbox */}
<div className="absolute top-3 left-3 z-20"> <div className="absolute top-3 left-3 z-20">
@ -187,113 +187,219 @@ export default function CardItem({
</div> </div>
</div> </div>
{/* Sliding Information Panel */} {/* Side Hover Panel */}
<div className={`card-slide-panel absolute inset-0 bg-white rounded-xl border border-gray-200 shadow-xl transition-all duration-300 ease-out z-10 ${ <div className={`card-side-panel absolute left-full top-0 ml-2 w-80 h-full transition-all duration-300 ease-out z-30 ${
isSelected isSelected
? 'translate-y-2 opacity-100' ? 'opacity-100 translate-x-0 pointer-events-auto'
: 'translate-y-0 opacity-0 group-hover:translate-y-2 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto' : 'opacity-0 translate-x-2 pointer-events-none group-hover:opacity-100 group-hover:translate-x-0 group-hover:pointer-events-auto delay-300 group-hover:delay-500'
}`}> }`}>
{/* Card Info Content */} <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-2xl h-full overflow-hidden">
<div className="p-4 h-full flex flex-col justify-between"> {/* Panel Header */}
{/* Top Section - Card Details */} <div className="p-4 border-b border-gray-200 dark:border-gray-700">
<div> <div className="flex items-start justify-between mb-2">
<div className="flex items-start justify-between mb-3"> <h3 className="font-bold text-gray-900 dark:text-white text-lg leading-tight pr-2">
<h3 className="font-bold text-gray-900 text-sm leading-tight line-clamp-2 flex-1 mr-2">
{card.name} {card.name}
</h3> </h3>
<span className="text-xl font-bold text-green-600 flex-shrink-0"> <span className="text-2xl font-bold text-green-600 dark:text-green-400 flex-shrink-0">
${card.market_price} ${card.market_price}
</span> </span>
</div> </div>
<div className="space-y-1 mb-4"> {/* TCG-Specific Info */}
<p className="text-sm text-gray-700 font-medium">{card.set_name}</p> {card.game === 'MTG' && (
<p className="text-sm text-gray-600">{card.rarity} • {card.card_type}</p> <div className="flex items-center space-x-3 mb-2">
</div> {card.mana_cost && (
<div className="flex items-center space-x-1">
<span className="text-sm text-gray-600 dark:text-gray-400">Cost:</span>
<span className="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded text-sm font-mono">
{card.mana_cost}
</span>
</div>
)}
{card.power && card.toughness && (
<div className="flex items-center space-x-1">
<span className="text-sm text-gray-600 dark:text-gray-400">P/T:</span>
<span className="px-2 py-1 bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 rounded text-sm font-bold">
{card.power}/{card.toughness}
</span>
</div>
)}
</div>
)}
{/* Game Badge */} {card.game === 'Pokemon' && card.power && (
<div className="mb-4"> <div className="flex items-center space-x-3 mb-2">
<span className="px-3 py-1 text-sm font-medium rounded-full bg-blue-100 text-blue-800"> <div className="flex items-center space-x-1">
<span className="text-sm text-gray-600 dark:text-gray-400">HP:</span>
<span className="px-2 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded text-sm font-bold">
{card.power}
</span>
</div>
</div>
)}
{card.game === 'Lorcana' && card.cmc && (
<div className="flex items-center space-x-3 mb-2">
<div className="flex items-center space-x-1">
<span className="text-sm text-gray-600 dark:text-gray-400">Cost:</span>
<span className="px-2 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded text-sm font-bold">
{card.cmc}
</span>
</div>
{card.power && card.toughness && (
<div className="flex items-center space-x-1">
<span className="text-sm text-gray-600 dark:text-gray-400">Str/Will:</span>
<span className="px-2 py-1 bg-amber-100 dark:bg-amber-900 text-amber-800 dark:text-amber-200 rounded text-sm font-bold">
{card.power}/{card.toughness}
</span>
</div>
)}
</div>
)}
<div className="flex items-center space-x-2">
<span className="px-2 py-1 text-sm font-medium rounded-full bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
{card.game} {card.game}
</span> </span>
<span className="text-sm text-gray-600 dark:text-gray-400">{card.set_name}</span>
</div> </div>
</div> </div>
{/* Bottom Section - Actions */} {/* Panel Body */}
<div className="space-y-3"> <div className="p-4 flex-1 overflow-y-auto">
{/* Primary Actions */} <div className="space-y-4">
<div className="grid grid-cols-2 gap-2"> {/* Card Details */}
<button <div>
onClick={(e) => { <div className="grid grid-cols-2 gap-4 mb-4">
e.stopPropagation(); <div>
onAddToCollection([card]); <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Rarity</span>
}} <p className="text-sm text-gray-900 dark:text-white font-medium">{card.rarity}</p>
className="flex items-center justify-center space-x-2 px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium" </div>
> <div>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Type</span>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> <p className="text-sm text-gray-900 dark:text-white font-medium">{card.card_type}</p>
</svg> </div>
<span>Collection</span> </div>
</button>
<button {/* Oracle Text */}
onClick={(e) => { {card.oracle_text && (
e.stopPropagation(); <div className="mb-4">
onAddToDeck([card]); <span className="text-sm font-medium text-gray-500 dark:text-gray-400">Description</span>
}} <p className="text-sm text-gray-700 dark:text-gray-300 mt-1 leading-relaxed">
className="flex items-center justify-center space-x-2 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium" {card.oracle_text}
> </p>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> </div>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> )}
</svg>
<span>Deck</span> {/* Colors for MTG */}
</button> {card.game === 'MTG' && card.colors && card.colors.length > 0 && (
<div className="mb-4">
<span className="text-sm font-medium text-gray-500 dark:text-gray-400">Colors</span>
<div className="flex flex-wrap gap-1 mt-1">
{card.colors.map((color, index) => (
<span key={index} className="px-2 py-1 text-xs rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
{color}
</span>
))}
</div>
</div>
)}
</div>
</div> </div>
</div>
{/* Secondary Actions */} {/* Panel Footer - Actions */}
<div className="grid grid-cols-3 gap-2"> <div className="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
<button <div className="space-y-3">
onClick={(e) => { {/* Primary Actions */}
e.stopPropagation(); <div className="grid grid-cols-2 gap-2">
// Mark as owned functionality <button
alert('Mark as owned (coming soon)'); onClick={(e) => {
}} e.stopPropagation();
className="flex items-center justify-center px-2 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition-colors text-xs font-medium" onAddToCollection([card]);
> }}
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> className="flex items-center justify-center space-x-2 px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors text-sm font-medium"
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /> >
</svg> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
</button> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
</svg>
<span>Collection</span>
</button>
<button <button
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
onToggleFavorite(card); onAddToDeck([card]);
}} }}
className={`flex items-center justify-center px-2 py-2 rounded-lg transition-colors text-xs font-medium ${ className="flex items-center justify-center space-x-2 px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors text-sm font-medium"
isFavorited >
? 'bg-red-100 text-red-700 hover:bg-red-200' <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
: 'bg-gray-100 text-gray-700 hover:bg-gray-200' <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
}`} </svg>
> <span>Deck</span>
<svg className="w-4 h-4" fill={isFavorited ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24"> </button>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /> </div>
</svg>
</button>
<button {/* Secondary Actions */}
onClick={(e) => { <div className="grid grid-cols-4 gap-2">
e.stopPropagation(); <button
// View details functionality onClick={(e) => {
window.open(`/card/${card.id}`, '_blank'); e.stopPropagation();
}} alert('Mark as owned (coming soon)');
className="flex items-center justify-center px-2 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-xs font-medium" }}
> className="flex items-center justify-center p-2 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300 rounded-lg hover:bg-purple-200 dark:hover:bg-purple-800 transition-colors"
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> title="Mark as Owned"
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> >
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /> <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
</svg> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</button> </svg>
</button>
<button
onClick={(e) => {
e.stopPropagation();
onToggleFavorite(card);
}}
className={`flex items-center justify-center p-2 rounded-lg transition-colors ${
isFavorited
? 'bg-red-100 dark:bg-red-900 text-red-700 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-800'
: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
}`}
title="Toggle Favorite"
>
<svg className="w-4 h-4" fill={isFavorited ? "currentColor" : "none"} stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</button>
<button
onClick={(e) => {
e.stopPropagation();
window.open(`/card/${card.id}`, '_blank');
}}
className="flex items-center justify-center p-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
title="View Details"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
<button
onClick={(e) => {
e.stopPropagation();
navigator.clipboard.writeText(`${card.name} - ${card.set_name}`);
// Could add a toast notification here
}}
className="flex items-center justify-center p-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
title="Copy Card Info"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>

2
pages/cards.js
View file

@ -699,7 +699,7 @@ export default function Cards() {
</div> </div>
) : ( ) : (
<> <>
<div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-8 p-8' : 'space-y-4 p-6'}> <div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-8 p-8 pr-96' : 'space-y-4 p-6'}>
{cards.map(card => ( {cards.map(card => (
<CardItem <CardItem
key={card.id} key={card.id}

52
styles/globals.css
View file

@ -335,7 +335,7 @@ body {
0 0 60px rgba(168, 85, 247, 0.1); 0 0 60px rgba(168, 85, 247, 0.1);
} }
/* Card Sliding Effect Styles */ /* Card Hover Panel Styles */
.card-item-container { .card-item-container {
position: relative; position: relative;
} }
@ -348,11 +348,6 @@ body {
z-index: 60; z-index: 60;
} }
/* Smooth transitions for card interactions */
.card-slide-panel {
transform-origin: top center;
}
/* Ensure proper layering during animations */ /* Ensure proper layering during animations */
.card-grid-container { .card-grid-container {
position: relative; position: relative;
@ -364,13 +359,40 @@ body {
user-select: none; user-select: none;
} }
/* Add subtle backdrop blur effect for sliding panels */ /* Side panel specific styles */
.card-slide-panel::before { .card-side-panel {
content: ''; transform-origin: left center;
position: absolute; backdrop-filter: blur(8px);
inset: 0; }
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(2px); /* Responsive adjustments for side panels */
border-radius: inherit; @media (max-width: 1280px) {
z-index: -1; .card-side-panel {
width: 16rem; /* w-64 */
}
}
@media (max-width: 1024px) {
.card-side-panel {
display: none; /* Hide panels on smaller screens */
}
}
/* Dark mode improvements */
@media (prefers-color-scheme: dark) {
.card-side-panel {
backdrop-filter: blur(8px) brightness(0.8);
}
}
/* Smooth panel transitions */
.card-panel-enter {
opacity: 0;
transform: translateX(8px);
}
.card-panel-enter-active {
opacity: 1;
transform: translateX(0);
transition: all 300ms ease-out;
} }