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/TaskDetail.tsx
+5 -5
View File
@@ -107,7 +107,7 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
/>
{/* Properties Bar */}
<div class="flex flex-row items-center gap-1.5 sm:gap-4 mt-2 text-sm overflow-x-auto no-scrollbar flex-nowrap">
<div class="flex flex-wrap items-center gap-1.5 sm:gap-4 mt-2 text-sm">
{/* Priority */}
<div class="flex items-center gap-1 group shrink-0">
<span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 hidden sm:inline">Priority</span>
@@ -224,19 +224,19 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
</div>
{/* Tags Row */}
<div class="flex items-center gap-2 mt-4 overflow-x-auto no-scrollbar pb-1">
<div class="flex flex-wrap items-center gap-2 mt-4 pb-1">
<span class="text-[10px] uppercase font-bold tracking-wider text-muted-foreground/70 shrink-0">Tags</span>
<div class="flex items-center gap-1.5 min-w-0">
<div class="flex flex-wrap items-center gap-1.5 min-w-0">
<TagPicker
selectedTags={props.task.tags || []}
onTagsChange={updateTags}
/>
<div class="flex items-center gap-1.5 flex-nowrap overflow-x-auto no-scrollbar">
<div class="flex flex-wrap items-center gap-1.5">
<For each={props.task.tags || []}>
{(tag) => (
<Badge
variant="secondary"
class="h-7 px-2 text-xs gap-1 bg-muted/40 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap"
class="h-7 px-2 text-xs gap-1 bg-muted/40 border-border/50 hover:bg-destructive/10 hover:border-destructive/30 cursor-pointer group/tag transition-all whitespace-nowrap shrink-0"
onClick={() => updateTags((props.task.tags || []).filter(t => t !== tag))}
>
<div class={cn("w-1.5 h-1.5 rounded-full transition-colors group-hover/tag:bg-destructive", (store.tagDefinitions?.[tag] ?? 5) > 5 ? "bg-green-500" : (store.tagDefinitions?.[tag] ?? 5) < 5 ? "bg-red-500" : "bg-gray-400")} />