MALIO-DEV/Lesstime
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

fix(task) : cartes responsive — troncature badges, max 2 tags + « +N », titre line-clamp

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-05-21 09:40:35 +02:00
parent 0f7c815c0d
commit c16ddeb9f8
1 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/components/task/TaskCard.vue
View File

@@ -27,7 +27,7 @@
:title="$t('clientTicket.linkedTooltip', { number: 'CT-' + String(task.clientTicket.number).padStart(3, '0') })" :title="$t('clientTicket.linkedTooltip', { number: 'CT-' + String(task.clientTicket.number).padStart(3, '0') })"
/> />
</div> </div>
<h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4> <h4 class="line-clamp-2 text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
</div> </div>
<MalioButtonIcon <MalioButtonIcon
:icon="isTimerOnTask ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'" :icon="isTimerOnTask ? 'mdi:stop-circle-outline' : 'mdi:play-circle-outline'"
@@ -39,33 +39,41 @@
/> />
</div> </div>
<div class="mt-2 flex items-center gap-1.5"> <div class="mt-2 flex min-w-0 items-center gap-1.5">
<span <span
v-if="showStatusBadge && task.status" v-if="showStatusBadge && task.status"
class="rounded-full px-2 py-0.5 text-xs font-semibold text-white" class="shrink-0 max-w-[7rem] truncate rounded-full px-2 py-0.5 text-xs font-semibold text-white"
:style="{ backgroundColor: task.status.color }" :style="{ backgroundColor: task.status.color }"
> >
{{ task.status.label }} {{ task.status.label }}
</span> </span>
<span <span
v-if="task.priority" v-if="task.priority"
class="rounded-full px-2 py-0.5 text-xs font-semibold text-white" class="shrink-0 max-w-[7rem] truncate rounded-full px-2 py-0.5 text-xs font-semibold text-white"
:style="{ backgroundColor: task.priority.color }" :style="{ backgroundColor: task.priority.color }"
> >
{{ task.priority.label }} {{ task.priority.label }}
</span> </span>
<span <span
v-for="tag in task.tags" v-for="tag in task.tags.slice(0, 2)"
:key="tag.id" :key="tag.id"
class="rounded-full px-2 py-0.5 text-xs font-semibold text-white" class="shrink-0 max-w-[7rem] truncate rounded-full px-2 py-0.5 text-xs font-semibold text-white"
:style="{ backgroundColor: tag.color }" :style="{ backgroundColor: tag.color }"
:title="tag.label"
> >
{{ tag.label }} {{ tag.label }}
</span> </span>
<span
v-if="task.tags.length > 2"
class="shrink-0 rounded-full bg-neutral-200 px-2 py-0.5 text-xs font-semibold text-neutral-600"
:title="task.tags.slice(2).map(t => t.label).join(', ')"
>
+{{ task.tags.length - 2 }}
</span>
<!-- Deadline badge --> <!-- Deadline badge -->
<span <span
v-if="task.deadline" v-if="task.deadline"
class="rounded-full px-2 py-0.5 text-xs font-semibold text-white" class="shrink-0 max-w-[7rem] truncate rounded-full px-2 py-0.5 text-xs font-semibold text-white"
:style="{ backgroundColor: deadlineColor }" :style="{ backgroundColor: deadlineColor }"
:title="task.deadline" :title="task.deadline"
> >