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

feat(ui) : add site colors, dark mode toggle and card styling improvements

Browse Source 
- Site color field with color picker in create/edit modals
- Dark mode theme (mytheme-dark) with toggle in navbar
- Stronger site color visibility on cards (gradient, top border, badges)
- Bigger action buttons (btn-sm) on machine cards
- White card backgrounds with proper dark mode support

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Matthieu
2026-03-09 15:51:29 +01:00
parent 7e67b124f3
commit b0124c11ba
24 changed files with 697 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/pages/index.vue
View File

@@ -102,19 +102,26 @@
<div
v-for="site in filteredSites"
:key="site.id"
class="card bg-base-100 shadow-sm overflow-hidden"
class="card site-card shadow-md overflow-hidden"
:style="{
borderTop: site.color ? `4px solid ${site.color}` : '4px solid transparent',
background: site.color ? `linear-gradient(160deg, ${site.color}30 0%, ${site.color}08 40%, var(--color-base-100) 100%)` : undefined,
}"
>
<div class="card-body">
<!-- Site Header -->
<div class="flex items-start justify-between gap-4">
<div class="flex items-start gap-4">
<div
class="w-11 h-11 rounded-xl bg-primary/10 grid place-items-center shrink-0"
class="w-11 h-11 rounded-xl grid place-items-center shrink-0"
:style="{ backgroundColor: site.color ? site.color + '40' : 'oklch(var(--p) / 0.1)', border: site.color ? `2px solid ${site.color}60` : 'none' }"
>
<IconLucideMapPin class="w-5 h-5 text-primary" aria-hidden="true" />
<IconLucideMapPin class="w-5 h-5" :style="{ color: site.color || 'oklch(var(--p))' }" aria-hidden="true" />
</div>
<div class="min-w-0">
<h3 class="text-lg font-bold text-base-content tracking-tight">
<h3
class="text-lg font-bold tracking-tight text-base-content"
>
{{ site.name }}
</h3>
<div class="flex flex-wrap gap-x-4 gap-y-1 mt-1.5 text-sm text-base-content/50">
@@ -134,7 +141,11 @@
</div>
</div>
<div class="flex items-center gap-2 shrink-0">
<span class="badge badge-primary badge-sm font-semibold">
<span
class="badge font-bold"
:style="site.color ? { backgroundColor: site.color + '30', color: site.color, borderColor: site.color + '50' } : {}"
:class="!site.color ? 'badge-primary' : ''"
>
{{ site.machines?.length || 0 }}
</span>
<button
@@ -163,7 +174,7 @@
<div
v-for="machine in site.machines"
:key="machine.id"
class="group flex flex-col rounded-xl border border-base-300/40 bg-base-200/30 hover:bg-base-200/60 hover:border-primary/20 transition-all cursor-pointer p-4"
class="group flex flex-col rounded-xl border border-base-300/40 bg-base-100 shadow-sm hover:shadow-md hover:border-primary/20 transition-all cursor-pointer p-4"
@click="viewMachineDetails(machine)"
>
<div class="flex items-center justify-between mb-2">
@@ -180,21 +191,21 @@
<div class="mt-auto pt-3 flex items-center justify-end gap-2">
<button
v-if="canEdit"
class="btn btn-ghost btn-xs"
class="btn btn-ghost btn-sm"
@click.stop="editMachine(machine)"
>
Modifier
</button>
<button
v-if="canEdit"
class="btn btn-ghost btn-xs text-error"
class="btn btn-ghost btn-sm text-error"
@click.stop="confirmDeleteMachine(machine)"
>
Supprimer
</button>
<NuxtLink
:to="`/machine/${machine.id}`"
class="btn btn-primary btn-xs"
class="btn btn-primary btn-sm"
@click.stop
>
Détails