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: var(--success);
--color-success-foreground: var(--success-foreground); --color-success-foreground: var(--success-foreground);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-border: var(--border); --color-border: var(--border);
--color-input: var(--input); --color-input: var(--input);
--color-ring: var(--ring); --color-ring: var(--ring);
@@ -136,6 +139,8 @@ :root {
--destructive-foreground: hsl(0 0% 98%); --destructive-foreground: hsl(0 0% 98%);
--success: var(--color-lime-400); --success: var(--color-lime-400);
--success-foreground: var(--color-foreground); --success-foreground: var(--color-foreground);
--warning: var(--color-amber-300);
--warning-foreground: var(--color-amber-900);
--border: hsl(0 0% 92.8%); --border: hsl(0 0% 92.8%);
--input: var(--color-zinc-100); --input: var(--color-zinc-100);
--ring: hsl(0 0% 3.9%); --ring: hsl(0 0% 3.9%);
@@ -158,7 +163,7 @@ :root {
--status-draft: var(--color-gray-100); --status-draft: var(--color-gray-100);
--status-sent: var(--color-sky-400); --status-sent: var(--color-sky-400);
--status-paid: var(--color-lime-500); --status-paid: var(--color-lime-500);
--status-due: var(--color-amber-300); --status-due: var(--color-warning);
--status-reminded: var(--color-destructive); --status-reminded: var(--color-destructive);
--scrollbar-thumb: --alpha(black / 20%); --scrollbar-thumb: --alpha(black / 20%);
--scrollbar-track: transparent; --scrollbar-track: transparent;
@@ -168,22 +173,24 @@ .dark {
--background: var(--color-neutral-800); --background: var(--color-neutral-800);
--foreground: var(--color-neutral-300); --foreground: var(--color-neutral-300);
--card: var(--color-neutral-800); --card: var(--color-neutral-800);
--card-foreground: hsl(0 0% 98%); --card-foreground: var(--color-neutral-300);
/* --popover: hsl(0 0% 3.9%); */ /* --popover: hsl(0 0% 3.9%); */
--popover: var(--color-neutral-900); --popover: var(--color-neutral-900);
--popover-foreground: hsl(0 0% 98%); --popover-foreground: var(--color-neutral-300);
--primary: var(--color-orange-300); --primary: var(--color-orange-300);
--primary-foreground: var(--color-orange-400); --primary-foreground: var(--color-orange-400);
--secondary: hsl(0 0% 14.9%); --secondary: hsl(0 0% 14.9%);
--secondary-foreground: hsl(0 0% 98%); --secondary-foreground: var(--color-neutral-300);
--muted: var(--color-neutral-700); --muted: var(--color-neutral-700);
--muted-foreground: var(--color-neutral-400); --muted-foreground: var(--color-neutral-500);
--accent: oklch(25% 0 0); --accent: oklch(25% 0 0);
--accent-foreground: hsl(0 0% 98%); --accent-foreground: var(--color-neutral-300);
--destructive: var(--color-red-600); --destructive: var(--color-red-600);
--destructive-foreground: var(--color-red-200); --destructive-foreground: var(--color-red-200);
--success: var(--color-lime-900); --success: var(--color-lime-900);
--success-foreground: var(--color-lime-400); --success-foreground: var(--color-lime-400);
--warning: var(--color-amber-900);
--warning-foreground: var(--color-amber-400);
--border: var(--color-neutral-700); --border: var(--color-neutral-700);
--input: var(--color-neutral-700); --input: var(--color-neutral-700);
--ring: var(--color-neutral-500); --ring: var(--color-neutral-500);
@@ -205,7 +212,7 @@ .dark {
--status-draft: var(--color-zinc-500); --status-draft: var(--color-zinc-500);
--status-sent: var(--color-sky-700); --status-sent: var(--color-sky-700);
--status-paid: var(--color-lime-700); --status-paid: var(--color-lime-700);
--status-due: var(--color-amber-900); --status-due: var(--color-warning);
--status-reminded: var(--color-destructive-foreground); --status-reminded: var(--color-destructive-foreground);
--scrollbar-thumb: --alpha(white / 35%); --scrollbar-thumb: --alpha(white / 35%);
} }
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> --> <!-- <h3 class="mb-4 font-bold text-md">Verspätet</h3> -->
<!-- TODO: make TodoList component --> <!-- TODO: make TodoList component -->
<ul class="flex flex-col"> <ul>
<li v-for="todo in todos" <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 --> <!-- TODO: make Todo component -->
<!-- Check mark -->
<div <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 <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" <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> </div>
<div class="flex items-center gap-2"> <!-- Text -->
<span class="my-0 px-0 text-base! h-6 border-0 outline-0 shadow-none" <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' }">{{ :class="{ 'line-through text-muted-foreground': todo.status?.toLowerCase() == 'completed' }">{{
todo.title todo.title
}}</span> }}</label>
<div class="grow"></div>
<div class="text-muted-foreground"> <!-- Date -->
<PhoneCall v-if="todo.type?.name === 'phoneCall'" stroke-width="1.5" :size="18" /> <div class="text-sm text-muted-foreground flex gap-3 items-center mt-1">
<ClipboardCheck v-else-if="todo.type?.name === 'todo'" stroke-width="1.5" :size="18" /> <span v-if="todo.dueDate">{{ toLocalDate(todo.dueDate) }}</span>
<Mail v-else-if="todo.type?.name === 'mail'" stroke-width="1.5" :size="18" /> <Repeat v-if="todo.recurring" stroke-width="2" :size="14" />
</div> </div>
</div> </div>
<div class="text-sm text-muted-foreground flex gap-3 items-center"> <!-- Icon -->
<span v-if="todo.dueDate">{{ toLocalDate(todo.dueDate)}}</span> <div class="relative top-0.75 text-muted-foreground shrink-0">
<Repeat v-if="todo.recurring" stroke-width="2" :size="14" /> <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>
</li> </li>
</ul> </ul>