feat(ui) : add site colors, dark mode toggle and card styling improvements
- 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:
@@ -65,7 +65,11 @@
|
||||
<div
|
||||
v-for="machine in filteredMachines"
|
||||
:key="machine.id"
|
||||
class="card bg-base-100 shadow-sm hover:shadow-xl transition-shadow cursor-pointer"
|
||||
class="card site-card shadow-md hover:shadow-xl transition-shadow cursor-pointer overflow-hidden"
|
||||
:style="{
|
||||
borderTop: machine.site?.color ? `4px solid ${machine.site.color}` : '4px solid transparent',
|
||||
background: machine.site?.color ? `linear-gradient(160deg, ${machine.site.color}30 0%, ${machine.site.color}08 40%, var(--color-base-100) 100%)` : undefined,
|
||||
}"
|
||||
@click="viewMachineDetails(machine)"
|
||||
>
|
||||
<div class="card-body flex flex-col">
|
||||
@@ -77,8 +81,11 @@
|
||||
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<IconLucideMapPin class="w-4 h-4 text-blue-500" aria-hidden="true" />
|
||||
<span class="text-gray-600">{{ machine.site?.name || 'Site inconnu' }}</span>
|
||||
<IconLucideMapPin class="w-4 h-4" :style="{ color: machine.site?.color || '#3b82f6' }" aria-hidden="true" />
|
||||
<span
|
||||
class="font-bold text-sm px-2.5 py-1 rounded-lg text-base-content"
|
||||
:style="machine.site?.color ? { backgroundColor: machine.site.color + '30', border: `1px solid ${machine.site.color}40` } : {}"
|
||||
>{{ machine.site?.name || 'Site inconnu' }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="machine.reference" class="flex items-center gap-2">
|
||||
@@ -88,13 +95,13 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-auto pt-3 flex items-center justify-end gap-2">
|
||||
<button v-if="canEdit" class="btn btn-ghost btn-xs" @click.stop="editMachine(machine)">
|
||||
<button v-if="canEdit" class="btn btn-ghost btn-sm" @click.stop="editMachine(machine)">
|
||||
Modifier
|
||||
</button>
|
||||
<button v-if="canEdit" class="btn btn-ghost btn-xs text-error" @click.stop="confirmDeleteMachine(machine)">
|
||||
<button v-if="canEdit" 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">
|
||||
<NuxtLink :to="`/machine/${machine.id}`" class="btn btn-primary btn-sm">
|
||||
Détails
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user