Cardoza_Construction/TasGrid
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

added search/filter and fixed horizontal fit for mobile.

Browse Source
This commit is contained in:
Timothy Cardoza
2026-01-31 15:32:06 -06:00
parent ce58ee8fc5
commit 2c83b91e66
12 changed files with 376 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TaskCard.tsx
+20 -20
View File
@@ -24,43 +24,43 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
return (
<div
class={cn(
"group flex items-center p-4 bg-card border border-border rounded-2xl transition-all duration-300 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-0.5 cursor-pointer",
"group flex items-center p-3 sm:p-4 bg-card border border-border rounded-2xl transition-all duration-300 hover:shadow-xl hover:shadow-primary/5 hover:-translate-y-0.5 cursor-pointer w-full min-w-0 overflow-hidden",
props.task.completed && "opacity-60"
)}
onClick={() => setActiveTaskId(props.task.id)}
>
<button
onClick={(e) => { e.stopPropagation(); toggleTask(props.task.id); }}
class="mr-4 text-muted-foreground hover:text-primary transition-colors shrink-0"
class="mr-3 sm:mr-4 text-muted-foreground hover:text-primary transition-colors shrink-0"
>
{props.task.completed ? (
<CheckCircle2 class="text-green-500" size={24} />
<CheckCircle2 class="text-green-500" size={22} />
) : (
<Circle size={24} />
<Circle size={22} />
)}
</button>
<div class="flex-1 min-w-0">
<div class="flex-1 min-w-0 flex flex-col">
<h3 class={cn(
"text-base font-semibold truncate transition-all",
"text-sm sm:text-base font-semibold truncate transition-all",
props.task.completed && "line-through"
)}>
{props.task.title}
</h3>
<div class="flex items-center space-x-4 mt-1">
<div class="flex flex-wrap items-center gap-x-3 gap-y-1.5 mt-1 min-w-0">
{/* Priority */}
<div class="flex items-center gap-1.5 min-w-[32px]">
<div class="flex items-center gap-1.5 shrink-0">
<ArrowUpCircle size={12} class="text-primary opacity-60" />
<span>P{props.task.priority}</span>
<span class="text-[10px] font-medium">P{props.task.priority}</span>
</div>
{/* Tags */}
{props.task.tags && props.task.tags.length > 0 && (
<div class="flex items-center gap-1">
<div class="flex flex-wrap items-center gap-1 min-w-0">
<For each={props.task.tags}>
{(tag) => (
<Badge variant="secondary" class="h-5 px-1.5 text-[10px] gap-1 bg-muted/50 border-border/50">
<div class={cn("w-1.5 h-1.5 rounded-full", (store.tagDefinitions?.[tag] ?? 5) > 5 ? "bg-green-500" : (store.tagDefinitions?.[tag] ?? 5) < 5 ? "bg-red-500" : "bg-gray-400")} />
<Badge variant="secondary" class="h-4 px-1.5 text-[9px] gap-1 bg-muted/50 border-border/50 shrink-0">
<div class={cn("w-1 h-1 rounded-full", (store.tagDefinitions?.[tag] ?? 5) > 5 ? "bg-green-500" : (store.tagDefinitions?.[tag] ?? 5) < 5 ? "bg-red-500" : "bg-gray-400")} />
{tag}
</Badge>
)}
@@ -69,11 +69,11 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
)}
{/* Due Date + Urgency Slide-out */}
<div class="relative group/date flex items-center h-6 cursor-help">
<div class="relative group/date flex items-center h-5 cursor-help shrink-0 min-w-0">
{/* Due Date - Static Layer on Top */}
<div class="flex items-center space-x-1.5 text-[10px] font-bold text-muted-foreground uppercase tracking-wider bg-card relative z-20 pr-1">
<Clock size={12} class="text-primary/60" />
<span>{formattedDate()}</span>
<div class="flex items-center space-x-1 text-[9px] font-bold text-muted-foreground uppercase tracking-wider bg-card relative z-20 pr-1">
<Clock size={11} class="text-primary/60" />
<span class="truncate">{formattedDate()}</span>
</div>
{/* Urgency Number - Slides out from behind with fade */}
@@ -81,7 +81,7 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
"absolute left-4 top-0 bottom-0 flex items-center transition-all duration-300 ease-out z-10 opacity-0 group-hover/date:opacity-100 group-hover/date:left-full whitespace-nowrap",
urgencyColor()
)}>
<span class="text-[10px] font-bold ml-2 transition-all duration-300 transform translate-x-[-8px] group-hover/date:translate-x-0 group-hover/date:blur-none blur-[2px]">
<span class="text-[9px] font-bold ml-2 transition-all duration-300 transform translate-x-[-8px] group-hover/date:translate-x-0 group-hover/date:blur-none blur-[2px]">
Urgency {urgencyLevel()}
</span>
</div>
@@ -89,9 +89,9 @@ export const TaskCard: Component<{ task: Task }> = (props) => {
</div>
</div>
<div class="ml-4 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
<button class="p-2 hover:bg-muted rounded-full transition-colors">
<div class="w-1.5 h-1.5 bg-muted-foreground rounded-full" />
<div class="ml-2 sm:ml-4 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
<button class="p-1.5 hover:bg-muted rounded-full transition-colors">
<div class="w-1 h-1 bg-muted-foreground rounded-full" />
</button>
</div>
</div>