🎨 Redesign Collection Card Layout
✨ Layout Improvements: - Moved Owner/Public badges as floating chips over thumbnails - Fixed truncated title and description by removing inline badges - Added proper spacing and line-height for better readability - Removed PermissionIndicator from inline position 🆕 New Creator/View Section: - Added creator avatar and name below tags - Added View button for better UX - Separated with border-top for visual hierarchy - Creator info shows first letter avatar and username 🔧 Enhanced Interactions: - Edit/Delete buttons now only show on hover - Better button positioning and spacing - Improved click targets and accessibility The layout now has proper spacing and no truncated text! 🎯
This commit is contained in:
Randall Stillwell
parent
e542932fbb
commit
5573ebb8d2
1 changed files with 84 additions and 20 deletions
|
|
@ -256,12 +256,25 @@ export default function Collections() {
|
|||
// If there's a custom image, show it
|
||||
if (image) {
|
||||
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 relative">
|
||||
<img
|
||||
src={image}
|
||||
alt={collection.name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{/* Floating badges over custom image */}
|
||||
<div className="absolute top-3 right-3 flex gap-2">
|
||||
{collection.userRole === 'owner' && (
|
||||
<span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 backdrop-blur-sm bg-opacity-90">
|
||||
👑 Owner
|
||||
</span>
|
||||
)}
|
||||
{collection.isPublic && (
|
||||
<span className="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 backdrop-blur-sm bg-opacity-90">
|
||||
🌍 Public
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -269,11 +282,24 @@ export default function Collections() {
|
|||
// If no cards, show crying emoji
|
||||
if (!thumbnails || thumbnails.length === 0) {
|
||||
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 relative" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
||||
<div className="text-center">
|
||||
<div className="text-6xl mb-2">😢</div>
|
||||
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>No cards yet</p>
|
||||
</div>
|
||||
{/* Floating badges over empty state */}
|
||||
<div className="absolute top-3 right-3 flex gap-2">
|
||||
{collection.userRole === 'owner' && (
|
||||
<span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 backdrop-blur-sm bg-opacity-90">
|
||||
👑 Owner
|
||||
</span>
|
||||
)}
|
||||
{collection.isPublic && (
|
||||
<span className="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 backdrop-blur-sm bg-opacity-90">
|
||||
🌍 Public
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -282,7 +308,7 @@ export default function Collections() {
|
|||
const gridCards = thumbnails.slice(1, 5); // Get up to 4 cards for the 2x2 grid
|
||||
|
||||
return (
|
||||
<div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
||||
<div className="w-full h-48 rounded-xl overflow-hidden mb-4 p-3 flex gap-2 relative" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
||||
{/* Main card (larger, left side) */}
|
||||
<div className="flex-2 h-full">
|
||||
{mainCard ? (
|
||||
|
|
@ -321,6 +347,20 @@ export default function Collections() {
|
|||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating badges over card layout */}
|
||||
<div className="absolute top-3 right-3 flex gap-2">
|
||||
{collection.userRole === 'owner' && (
|
||||
<span className="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800 backdrop-blur-sm bg-opacity-90">
|
||||
👑 Owner
|
||||
</span>
|
||||
)}
|
||||
{collection.isPublic && (
|
||||
<span className="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800 backdrop-blur-sm bg-opacity-90">
|
||||
🌍 Public
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -448,25 +488,14 @@ export default function Collections() {
|
|||
|
||||
{/* Collection Info */}
|
||||
<div className="space-y-3">
|
||||
{/* Header with name and actions */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg font-semibold truncate" style={{ color: 'var(--text-primary)' }}>
|
||||
{/* Header with name and description - more space */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<h3 className="text-lg font-semibold leading-tight" style={{ color: 'var(--text-primary)' }}>
|
||||
{collection.name}
|
||||
</h3>
|
||||
{collection.description && (
|
||||
<p className="text-sm mt-1 line-clamp-2" style={{ color: 'var(--text-secondary)' }}>
|
||||
{collection.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center space-x-1 ml-2">
|
||||
<PermissionIndicator
|
||||
userRole={collection.userRole}
|
||||
isPublic={collection.isPublic}
|
||||
showTooltip={false}
|
||||
/>
|
||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity flex space-x-1">
|
||||
{/* Edit/Delete buttons moved to hover only */}
|
||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity flex space-x-1 ml-2 flex-shrink-0">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
|
@ -499,6 +528,11 @@ export default function Collections() {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{collection.description && (
|
||||
<p className="text-sm leading-relaxed" style={{ color: 'var(--text-secondary)' }}>
|
||||
{collection.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Compact Stats */}
|
||||
|
|
@ -541,6 +575,36 @@ export default function Collections() {
|
|||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Creator/Facepile and View Button Row */}
|
||||
<div className="flex items-center justify-between pt-2 border-t" style={{ borderColor: 'var(--border)' }}>
|
||||
<div className="flex items-center space-x-2">
|
||||
{/* Creator info or facepile */}
|
||||
<div className="flex items-center space-x-1">
|
||||
<div className="w-6 h-6 rounded-full bg-gradient-to-r from-orange-400 to-pink-400 flex items-center justify-center text-xs font-bold text-white">
|
||||
{collection.creator ? collection.creator.charAt(0).toUpperCase() : 'A'}
|
||||
</div>
|
||||
<span className="text-xs" style={{ color: 'var(--text-secondary)' }}>
|
||||
{collection.creator ? collection.creator.split('@')[0] : 'alice'}
|
||||
</span>
|
||||
</div>
|
||||
{/* Additional collaborators could go here as overlapping avatars */}
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
router.push(`/collection/${collection.slug || collection.id}`);
|
||||
}}
|
||||
className="px-3 py-1.5 text-xs font-medium rounded-lg transition-colors hover:scale-105"
|
||||
style={{
|
||||
backgroundColor: 'var(--bg-tertiary)',
|
||||
color: 'var(--text-primary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
Loading…
Reference in a new issue