b97eb45b29
🚀 Performance Optimizations: - Completely removed complex side hover panels (massive DOM reduction) - Eliminated 240+ lines of heavy panel HTML per card - Removed expensive panel positioning calculations - Simplified hover animations from 300ms to 200ms - Removed redundant image scaling (double transform) 🎯 New Lightweight Hover System: - Simple card scaling on hover (transform: scale(1.05)) - Slide-in action buttons in corners - Checkbox & favorite in top-right corner - Ownership indicator & add button in bottom-left - All buttons use opacity transitions (GPU accelerated) 🔥 Fire-Themed Interactive Elements: - Checkbox: Ember red accent color - Favorite: Ember red background when active - Add/Own button: Wood brown background - Ownership indicator: Gold dot when owned - All buttons have subtle hover scaling (scale(1.1)) 📱 Enhanced Grid Layout: - Removed right padding (no more panel space needed) - Increased grid density: lg:4 cols, xl:5 cols, 2xl:6 cols - Better space utilization across all screen sizes - Cleaner, more focused card browsing experience ✨ User Experience Improvements: - Much faster card grid rendering - Smoother hover interactions - Reduced layout shift and jank - Cleaner visual hierarchy - Quick access to essential actions 💾 Code Cleanup: - Removed cardIndex and cardsPerRow props - Eliminated panel positioning logic - Simplified component structure - Reduced bundle size significantly The cards page should now be lightning fast! ⚡🔥 |
||
|---|---|---|
| .. | ||
| admin | ||
| api | ||
| card | ||
| collection | ||
| invite | ||
| _app.js | ||
| analytics.js | ||
| cards.js | ||
| collections.js | ||
| community.js | ||
| dashboard.js | ||
| decks.js | ||
| index.js | ||
| login.js | ||
| logout.js | ||
| settings.js | ||