Admin/Todo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign ItemCard with smaller height and right-aligned priority

Browse Source 
- Reduced padding from p-4/p-5 to p-3/p-3.5 for more compact cards
- Moved priority badge to the right side next to title
- Changed items-start to items-center for better alignment
- Description now limited to 1 line instead of 2
- Metadata section only shows if there's a due date or tags
- Cleaner, more compact layout
This commit is contained in:
Paul Bailey
2025-12-03 00:49:10 +00:00
parent bdff38c9a5
commit 6c5f2fbc1e
1 changed files with 48 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
components/ItemCard.tsx
View File

@@ -33,24 +33,33 @@ function ItemCard({ item, listId }: ItemCardProps) {
const priorityColor = priorityColors[item.priority as keyof typeof priorityColors] || priorityColors.medium
return (
<div className="bg-white rounded-lg border border-gray-200 p-4 sm:p-5 hover:shadow-md active:shadow-lg transition-all group">
<div className="flex items-start gap-3 sm:gap-4">
<div className="bg-white rounded-lg border border-gray-200 p-3 sm:p-3.5 hover:shadow-md active:shadow-lg transition-all group">
<div className="flex items-center gap-2 sm:gap-3">
{/* Completion Toggle */}
<div className="pt-0.5 sm:pt-1 flex-shrink-0">
<div className="flex-shrink-0">
<ToggleItemButton itemId={item.id} completed={item.completed} variant="icon" />
</div>
{/* Content */}
<div className="flex-1 min-w-0">
<Link href={`/list/${listId}/item/${item.id}`} className="block">
<h3 className={`font-medium mb-1 text-sm sm:text-base ${
item.completed ? 'text-gray-500 line-through' : 'text-gray-900'
}`}>
{item.title}
</h3>
<div className="flex items-center justify-between gap-2">
<h3 className={`font-medium text-sm sm:text-base ${
item.completed ? 'text-gray-500 line-through' : 'text-gray-900'
}`}>
{item.title}
</h3>
{/* Priority Badge - moved to right */}
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium border flex-shrink-0 ${priorityColor}`}>
<AlertCircle size={12} className="flex-shrink-0" />
<span className="hidden xs:inline sm:inline">{item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}</span>
<span className="xs:hidden sm:hidden">{item.priority.charAt(0).toUpperCase()}</span>
</span>
</div>
{item.description && (
<p className={`text-xs sm:text-sm mb-2 line-clamp-2 ${
<p className={`text-xs sm:text-sm mt-1 line-clamp-1 ${
item.completed ? 'text-gray-400' : 'text-gray-600'
}`}>
{item.description}
@@ -58,42 +67,37 @@ function ItemCard({ item, listId }: ItemCardProps) {
)}
{/* Metadata */}
<div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mt-2">
{/* Priority Badge */}
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium border ${priorityColor}`}>
<AlertCircle size={12} className="flex-shrink-0" />
<span className="hidden xs:inline sm:inline">{item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}</span>
<span className="xs:hidden sm:hidden">{item.priority.charAt(0).toUpperCase()}</span>
</span>
{/* Due Date */}
{item.dueDate && (
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs whitespace-nowrap ${
isOverdue
? 'bg-red-100 text-red-700 border border-red-200 font-semibold'
: 'bg-gray-100 text-gray-700'
}`}>
<Calendar size={12} className="flex-shrink-0" />
{new Date(item.dueDate).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
})}
{isOverdue && <span className="hidden sm:inline"> (Overdue)</span>}
{isOverdue && <span className="sm:hidden">!</span>}
</span>
)}
{/* Tags */}
{tags.length > 0 && (
<div className="inline-flex items-center gap-1">
<Tag size={12} className="text-gray-400 flex-shrink-0" />
<span className="text-xs text-gray-600 truncate max-w-[120px] sm:max-w-none">
{tags.slice(0, 2).join(', ')}
{tags.length > 2 && ` +${tags.length - 2}`}
{(item.dueDate || tags.length > 0) && (
<div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mt-1.5">
{/* Due Date */}
{item.dueDate && (
<span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs whitespace-nowrap ${
isOverdue
? 'bg-red-100 text-red-700 border border-red-200 font-semibold'
: 'bg-gray-100 text-gray-700'
}`}>
<Calendar size={12} className="flex-shrink-0" />
{new Date(item.dueDate).toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
})}
{isOverdue && <span className="hidden sm:inline"> (Overdue)</span>}
{isOverdue && <span className="sm:hidden">!</span>}
</span>
</div>
)}
</div>
)}
{/* Tags */}
{tags.length > 0 && (
<div className="inline-flex items-center gap-1">
<Tag size={12} className="text-gray-400 flex-shrink-0" />
<span className="text-xs text-gray-600 truncate max-w-[120px] sm:max-w-none">
{tags.slice(0, 2).join(', ')}
{tags.length > 2 && ` +${tags.length - 2}`}
</span>
</div>
)}
</div>
)}
</Link>
</div>