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

32
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 const priorityColor = priorityColors[item.priority as keyof typeof priorityColors] || priorityColors.medium
return ( 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="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-start gap-3 sm:gap-4"> <div className="flex items-center gap-2 sm:gap-3">
{/* Completion Toggle */} {/* 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" /> <ToggleItemButton itemId={item.id} completed={item.completed} variant="icon" />
</div> </div>
{/* Content */} {/* Content */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<Link href={`/list/${listId}/item/${item.id}`} className="block"> <Link href={`/list/${listId}/item/${item.id}`} className="block">
<h3 className={`font-medium mb-1 text-sm sm:text-base ${ <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.completed ? 'text-gray-500 line-through' : 'text-gray-900'
}`}> }`}>
{item.title} {item.title}
</h3> </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 && ( {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.completed ? 'text-gray-400' : 'text-gray-600'
}`}> }`}>
{item.description} {item.description}
@@ -58,17 +67,11 @@ function ItemCard({ item, listId }: ItemCardProps) {
)} )}
{/* Metadata */} {/* Metadata */}
<div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mt-2"> {(item.dueDate || tags.length > 0) && (
{/* Priority Badge */} <div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mt-1.5">
<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 */} {/* Due Date */}
{item.dueDate && ( {item.dueDate && (
<span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs whitespace-nowrap ${ <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs whitespace-nowrap ${
isOverdue isOverdue
? 'bg-red-100 text-red-700 border border-red-200 font-semibold' ? 'bg-red-100 text-red-700 border border-red-200 font-semibold'
: 'bg-gray-100 text-gray-700' : 'bg-gray-100 text-gray-700'
@@ -94,6 +97,7 @@ function ItemCard({ item, listId }: ItemCardProps) {
</div> </div>
)} )}
</div> </div>
)}
</Link> </Link>
</div> </div>