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/css/app.css
+14 -7
View File
@@ -42,6 +42,9 @@ @theme inline {
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
@@ -136,6 +139,8 @@ :root {
--destructive-foreground: hsl(0 0% 98%);
--success: var(--color-lime-400);
--success-foreground: var(--color-foreground);
--warning: var(--color-amber-300);
--warning-foreground: var(--color-amber-900);
--border: hsl(0 0% 92.8%);
--input: var(--color-zinc-100);
--ring: hsl(0 0% 3.9%);
@@ -158,7 +163,7 @@ :root {
--status-draft: var(--color-gray-100);
--status-sent: var(--color-sky-400);
--status-paid: var(--color-lime-500);
--status-due: var(--color-amber-300);
--status-due: var(--color-warning);
--status-reminded: var(--color-destructive);
--scrollbar-thumb: --alpha(black / 20%);
--scrollbar-track: transparent;
@@ -168,22 +173,24 @@ .dark {
--background: var(--color-neutral-800);
--foreground: var(--color-neutral-300);
--card: var(--color-neutral-800);
--card-foreground: hsl(0 0% 98%);
--card-foreground: var(--color-neutral-300);
/* --popover: hsl(0 0% 3.9%); */
--popover: var(--color-neutral-900);
--popover-foreground: hsl(0 0% 98%);
--popover-foreground: var(--color-neutral-300);
--primary: var(--color-orange-300);
--primary-foreground: var(--color-orange-400);
--secondary: hsl(0 0% 14.9%);
--secondary-foreground: hsl(0 0% 98%);
--secondary-foreground: var(--color-neutral-300);
--muted: var(--color-neutral-700);
--muted-foreground: var(--color-neutral-400);
--muted-foreground: var(--color-neutral-500);
--accent: oklch(25% 0 0);
--accent-foreground: hsl(0 0% 98%);
--accent-foreground: var(--color-neutral-300);
--destructive: var(--color-red-600);
--destructive-foreground: var(--color-red-200);
--success: var(--color-lime-900);
--success-foreground: var(--color-lime-400);
--warning: var(--color-amber-900);
--warning-foreground: var(--color-amber-400);
--border: var(--color-neutral-700);
--input: var(--color-neutral-700);
--ring: var(--color-neutral-500);
@@ -205,7 +212,7 @@ .dark {
--status-draft: var(--color-zinc-500);
--status-sent: var(--color-sky-700);
--status-paid: var(--color-lime-700);
--status-due: var(--color-amber-900);
--status-due: var(--color-warning);
--status-reminded: var(--color-destructive-foreground);
--scrollbar-thumb: --alpha(white / 35%);
}
resources/js/pages/Dashboard.vue
+27 -15
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">
}}</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>
<!-- 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>
</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" />
</div>
</li>
</ul>