Tooloop/Caramel-CRM
2
0
Fork 0
Code Issues 61 Pull Requests Projects 3 Releases Wiki Activity

Design improvements

Browse Source
This commit is contained in:
Daniel Stock
2025-12-04 16:33:08 +01:00
parent 6b93742fcd
commit c74d8ecf2a
2 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/pages/Dashboard.vue
+28 -16
View File
@@ -94,36 +94,48 @@ const todos = ref<Todo[]>([])
<!-- <h3 class="mb-4 font-bold text-md">Verspätet</h3> -->
<!-- TODO: make TodoList component -->
<ul class="flex flex-col">
<ul>
<li v-for="todo in todos"
class="grid grid-cols-[calc(var(--spacing)_*_6)_auto] gap-y-0 gap-x-2 items-start border-b-1 last:border-0 border-foreground/20 py-2.5 pl-1 pr-2">
class="flex gap-3 items-baseline border-b-1 last:border-0 border-foreground/20 py-2.5 pl-1 pr-2">
<!-- TODO: make Todo component -->
<!-- Check mark -->
<div
class="mt-1 row-span-2 w-5 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary-foreground border-1 flex items-center justify-center">
class="relative top-0.75 shrink-0 h-4 aspect-square rounded-full border-muted-foreground has-[input:checked]:border-primary-foreground border flex items-center justify-center">
<div
class="w-3.5 relative aspect-square rounded-full bg-transparent has-[input:checked]:bg-primary-foreground">
class="absolute inset-[2px] rounded-full bg-transparent has-[input:checked]:bg-primary-foreground">
<input type="checkbox" class="absolute -inset-2 opacity-0"
:checked="todo.status?.toLowerCase() == 'completed'">
:checked="todo.status?.toLowerCase() == 'completed'" :id="todo.id">
</div>
</div>
<div class="flex items-center gap-2">
<span class="my-0 px-0 text-base! h-6 border-0 outline-0 shadow-none"
<!-- Text -->
<div class="grow overflow-hidden truncate">
<!-- Priority -->
<span v-if="todo.priority < 5 && todo.priority > 0"
class="mr-2 text-destructive">!!!</span>
<span v-if="todo.priority == 5" class="mr-2 text-warning-foreground">!!</span>
<span v-if="todo.priority > 5" class="mr-2 text-muted-foreground">!</span>
<!-- Title -->
<label :for="todo.id" class="my-0 px-0 text-base! border-0 outline-0 shadow-none"
:class="{ 'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed' }">{{
todo.title
}}</span>
<div class="grow"></div>
<div class="text-muted-foreground">
<PhoneCall v-if="todo.type?.name === 'phoneCall'" stroke-width="1.5" :size="18" />
<ClipboardCheck v-else-if="todo.type?.name === 'todo'" stroke-width="1.5" :size="18" />
<Mail v-else-if="todo.type?.name === 'mail'" stroke-width="1.5" :size="18" />
}}</label>
<!-- Date -->
<div class="text-sm text-muted-foreground flex gap-3 items-center mt-1">
<span v-if="todo.dueDate">{{ toLocalDate(todo.dueDate) }}</span>
<Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
</div>
</div>
<div class="text-sm text-muted-foreground flex gap-3 items-center">
<span v-if="todo.dueDate">{{ toLocalDate(todo.dueDate)}}</span>
<Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
<!-- Icon -->
<div class="relative top-0.75 text-muted-foreground shrink-0">
<PhoneCall v-if="todo.type?.name === 'phoneCall'" stroke-width="1.5" :size="18" />
<ClipboardCheck v-else-if="todo.type?.name === 'todo'" stroke-width="1.5" :size="18" />
<Mail v-else-if="todo.type?.name === 'mail'" stroke-width="1.5" :size="18" />
</div>
</li>
</ul>