📱 Implement Mobile-First Responsive Design
🎯 Mobile Slide-In Navigation: - Added mobile menu button with hamburger icon - Implemented slide-in sidebar with smooth transitions - Added mobile overlay with click-to-close functionality - Mobile menu auto-closes when navigating to new pages - Proper z-index layering for mobile interactions 🃏 Smart Card Panel Positioning: - Panels now open on opposite side for right-edge cards - Added cardIndex and cardsPerRow props to CardItem - Dynamic positioning based on card's position in grid - Prevents panels from extending off-screen edges - Maintains hover functionality on desktop 📱 Mobile-Optimized Bulk Actions: - Toolbar now spans full width on mobile devices - Icon-only buttons on mobile, full labels on desktop - Responsive spacing and padding adjustments - Improved touch targets for mobile interaction - Maintains functionality across all screen sizes 🎨 Enhanced Grid Layout: - Improved mobile grid: 2 columns with tighter spacing - Better space utilization on all device sizes - Responsive gap spacing that adapts to screen size - Optimized padding for mobile vs desktop - Cards now fill available space properly ✅ Cross-Device Experience: - Mobile: Slide-in nav, icon-only actions, 2-column grid - Tablet: Responsive layout with appropriate spacing - Desktop: Full sidebar, labeled actions, hover panels - Large screens: Maximum columns with side panel space The app now provides an optimal mobile experience while maintaining desktop functionality! ��💻🖥️
This commit is contained in:
Randall Stillwell
parent
787c6ddd4f
commit
48d1b1b5f9
4 changed files with 105 additions and 33 deletions
|
|
@ -42,51 +42,52 @@ export default function BulkSelectionToolbar({
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-50">
|
||||
<div className="bg-white rounded-xl shadow-2xl border border-gray-200 px-6 py-4 flex items-center space-x-4 min-w-96">
|
||||
<div className="fixed bottom-4 left-4 right-4 sm:bottom-6 sm:left-1/2 sm:right-auto sm:transform sm:-translate-x-1/2 z-50">
|
||||
<div className="bg-white rounded-xl shadow-2xl border border-gray-200 px-3 sm:px-6 py-3 sm:py-4 flex items-center justify-between sm:justify-start sm:space-x-4 sm:min-w-96">
|
||||
{/* Selection Count */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center">
|
||||
<span className="text-white text-sm font-bold">{selectedCount}</span>
|
||||
</div>
|
||||
<span className="text-gray-700 font-medium">
|
||||
{selectedCount} card{selectedCount !== 1 ? 's' : ''} selected
|
||||
<span className="text-gray-700 font-medium text-sm sm:text-base">
|
||||
<span className="hidden sm:inline">{selectedCount} card{selectedCount !== 1 ? 's' : ''} selected</span>
|
||||
<span className="sm:hidden">{selectedCount}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="h-6 w-px bg-gray-300"></div>
|
||||
{/* Divider - Hidden on mobile */}
|
||||
<div className="hidden sm:block h-6 w-px bg-gray-300"></div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex items-center space-x-1 sm:space-x-2">
|
||||
<button
|
||||
onClick={handleAddToCollection}
|
||||
className="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium flex items-center space-x-1 transition-colors"
|
||||
className="px-2 sm:px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium flex items-center space-x-1 transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
<span className="hidden sm:inline">Collection</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleAddToDeck}
|
||||
className="px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium flex items-center space-x-1 transition-colors"
|
||||
className="px-2 sm:px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium flex items-center space-x-1 transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<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>
|
||||
<span className="hidden sm:inline">Deck</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleMarkAsOwned}
|
||||
className="px-3 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium flex items-center space-x-1 transition-colors"
|
||||
className="px-2 sm:px-3 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 text-sm font-medium flex items-center space-x-1 transition-colors"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Own</span>
|
||||
<span className="hidden sm:inline">Own</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@ export default function CardItem({
|
|||
onAddToCollection,
|
||||
onAddToDeck,
|
||||
onToggleFavorite,
|
||||
isFavorited = false
|
||||
isFavorited = false,
|
||||
cardIndex = 0,
|
||||
cardsPerRow = 4
|
||||
}) {
|
||||
const [imageError, setImageError] = useState(false);
|
||||
const router = useRouter();
|
||||
|
|
@ -75,6 +77,10 @@ export default function CardItem({
|
|||
|
||||
const rarityEffects = getRarityEffects(card.rarity);
|
||||
|
||||
// Determine panel position based on card position in row
|
||||
const isRightSide = (cardIndex % cardsPerRow) >= Math.floor(cardsPerRow / 2);
|
||||
const panelPosition = isRightSide ? 'right' : 'left';
|
||||
|
||||
if (viewMode === 'list') {
|
||||
return (
|
||||
<div
|
||||
|
|
@ -253,8 +259,14 @@ export default function CardItem({
|
|||
</div>
|
||||
|
||||
{/* Side Hover Panel */}
|
||||
<div className={`card-side-panel absolute left-full top-0 ml-2 w-80 h-full transition-all duration-300 ease-out z-30 ${
|
||||
'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'
|
||||
<div className={`card-side-panel absolute ${
|
||||
panelPosition === 'right'
|
||||
? 'right-full top-0 mr-2'
|
||||
: 'left-full top-0 ml-2'
|
||||
} w-80 h-full transition-all duration-300 ease-out z-30 ${
|
||||
panelPosition === 'right'
|
||||
? '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'
|
||||
: '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'
|
||||
}`}>
|
||||
<div className={`bg-white dark:bg-gray-800 rounded-xl border shadow-2xl h-full overflow-hidden ${
|
||||
rarityEffects.border !== 'border-gray-200'
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
|
|||
const router = useRouter();
|
||||
const { theme, toggleTheme } = useTheme();
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
const navigation = [
|
||||
{ name: 'Dashboard', href: '/dashboard', icon: 'grid', active: router.pathname === '/dashboard' },
|
||||
|
|
@ -87,10 +88,52 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
|
|||
|
||||
return (
|
||||
<div className="flex h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(true)}
|
||||
className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-lg shadow-lg"
|
||||
style={{ backgroundColor: 'var(--bg-secondary)', color: 'var(--text-primary)' }}
|
||||
>
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Mobile Overlay */}
|
||||
{isMobileMenuOpen && (
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 bg-black bg-opacity-50 z-40"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Left Sidebar */}
|
||||
<div className="w-64 shadow-lg" style={{ backgroundColor: 'var(--bg-secondary)', borderRight: '1px solid var(--border)' }}>
|
||||
<div className={`
|
||||
fixed lg:static inset-y-0 left-0 z-50 w-64 shadow-lg transform transition-transform duration-300 ease-in-out
|
||||
${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
|
||||
`} style={{ backgroundColor: 'var(--bg-secondary)', borderRight: '1px solid var(--border)' }}>
|
||||
<div className="p-4 h-full flex flex-col">
|
||||
<div className="flex items-center mb-8">
|
||||
{/* Mobile Close Button */}
|
||||
<div className="lg:hidden flex justify-between items-center mb-4">
|
||||
<div className="flex items-center">
|
||||
<div className="w-10 h-10 logo-container mr-3">
|
||||
<span className="text-white font-bold text-sm">TCG</span>
|
||||
</div>
|
||||
<h1 className="text-xl font-bold" style={{ color: 'var(--text-primary)' }}>TCG Vault</h1>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="p-2 rounded-lg"
|
||||
style={{ color: 'var(--text-secondary)' }}
|
||||
>
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Desktop Header */}
|
||||
<div className="hidden lg:flex items-center mb-8">
|
||||
<div className="w-10 h-10 logo-container mr-3">
|
||||
<span className="text-white font-bold text-sm">TCG</span>
|
||||
</div>
|
||||
|
|
@ -110,6 +153,7 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
|
|||
backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3">{getIcon(item.icon)}</span>
|
||||
|
|
@ -178,6 +222,7 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
|
|||
backgroundColor: item.active ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: item.active ? 'var(--text-primary)' : 'var(--text-secondary)'
|
||||
}}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<span className="mr-3">{getIcon(item.icon)}</span>
|
||||
<span className="text-sm font-medium">{item.name}</span>
|
||||
|
|
@ -190,7 +235,7 @@ export default function Layout({ children, user = { email: 'me@randallstillwell.
|
|||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<div className="flex-1 flex flex-col lg:ml-0">
|
||||
{/* Top Header - Only show search on dashboard */}
|
||||
{showSearch && (
|
||||
<header className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
|
||||
|
|
|
|||
|
|
@ -816,8 +816,19 @@ export default function Cards() {
|
|||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 sm:gap-6 lg:gap-8 p-4 sm:p-6 lg:p-8 lg:pr-96' : 'space-y-4 p-6'}>
|
||||
{cards.map(card => (
|
||||
<div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-3 sm:gap-4 lg:gap-6 p-3 sm:p-4 lg:p-6 xl:p-8 lg:pr-96' : 'space-y-4 p-6'}>
|
||||
{cards.map((card, index) => {
|
||||
// Calculate cards per row based on current breakpoint
|
||||
const getCardsPerRow = () => {
|
||||
if (window.innerWidth >= 1536) return 5; // 2xl
|
||||
if (window.innerWidth >= 1280) return 4; // xl
|
||||
if (window.innerWidth >= 1024) return 3; // lg
|
||||
if (window.innerWidth >= 768) return 4; // md
|
||||
if (window.innerWidth >= 640) return 3; // sm
|
||||
return 2; // base
|
||||
};
|
||||
|
||||
return (
|
||||
<CardItem
|
||||
key={card.id}
|
||||
card={card}
|
||||
|
|
@ -828,8 +839,11 @@ export default function Cards() {
|
|||
onAddToDeck={handleBulkAddToDeck}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
isFavorited={favoritedCards.has(card.id)}
|
||||
cardIndex={index}
|
||||
cardsPerRow={getCardsPerRow()}
|
||||
/>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Infinite Scroll Loading Indicator */}
|
||||
|
|
|
|||
Loading…
Reference in a new issue