feat(ui) : improve mobile responsiveness — breadcrumb truncation, tabs scroll, form grids

This commit is contained in:
2026-04-04 17:25:36 +02:00
parent 7f91b30bf6
commit 5b06e2ba51
7 changed files with 89 additions and 64 deletions

View File

@@ -68,34 +68,22 @@
</div>
<!-- Empty State -->
<div v-else-if="filteredSites.length === 0" class="text-center py-16">
<div class="max-w-sm mx-auto">
<div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
<IconLucideFactory
class="w-8 h-8 text-base-content/30"
aria-hidden="true"
/>
</div>
<h3 class="text-lg font-semibold text-base-content mb-1">
Aucune machine trouvée
</h3>
<p class="text-sm text-base-content/50 mb-6">
Commencez par ajouter des sites et des machines.
</p>
<div class="flex gap-2 justify-center">
<button v-if="canEdit" class="btn btn-primary btn-sm" @click="showAddSiteModal = true">
Ajouter un site
</button>
<button
v-if="canEdit"
class="btn btn-ghost btn-sm"
@click="showAddMachineModal = true"
>
Ajouter une machine
</button>
</div>
<CommonEmptyState
v-else-if="filteredSites.length === 0"
:icon="IconLucideFactory"
title="Aucune machine trouvée"
description="Commencez par ajouter des sites et des machines."
class="py-16"
>
<div v-if="canEdit" class="flex gap-2 justify-center">
<button class="btn btn-primary btn-sm" @click="showAddSiteModal = true">
Ajouter un site
</button>
<button class="btn btn-ghost btn-sm" @click="showAddMachineModal = true">
Ajouter une machine
</button>
</div>
</div>
</CommonEmptyState>
<!-- Sites List -->
<div v-else class="space-y-5">

View File

@@ -173,18 +173,14 @@
</div>
<!-- Error State -->
<div v-else class="text-center py-12">
<div class="max-w-md mx-auto">
<div class="w-16 h-16 rounded-2xl bg-base-200 grid place-items-center mx-auto mb-5">
<IconLucideAlertTriangle class="w-8 h-8 text-base-content/30" aria-hidden="true" />
</div>
<h3 class="text-lg font-semibold text-base-content mb-1">Machine non trouvée</h3>
<p class="text-sm text-base-content/50 mb-6">La machine avec l'ID "{{ machineId }}" n'existe pas ou a été supprimée.</p>
<button type="button" class="btn btn-primary" @click="$router.back()">
Retour aux machines
</button>
</div>
</div>
<CommonEmptyState
v-else
:icon="IconLucideAlertTriangle"
title="Machine non trouvée"
:description="`La machine avec l'ID « ${machineId} » n'existe pas ou a été supprimée.`"
action-label="Retour aux machines"
@action="$router.back()"
/>
</main>
<MachinePrintSelectionModal

View File

@@ -53,20 +53,14 @@
<span class="loading loading-spinner loading-lg" />
</div>
<div v-else-if="filteredMachines.length === 0" class="text-center py-12">
<div class="max-w-md mx-auto">
<IconLucideFactory class="w-16 h-16 mx-auto text-gray-400 mb-4" aria-hidden="true" />
<h3 class="text-lg font-medium text-gray-900 mb-2">
Aucune machine trouvée
</h3>
<p class="text-gray-500 mb-4">
Commencez par ajouter votre première machine.
</p>
<NuxtLink to="/machines/new" class="btn btn-primary">
Ajouter une machine
</NuxtLink>
</div>
</div>
<CommonEmptyState
v-else-if="filteredMachines.length === 0"
:icon="IconLucideFactory"
title="Aucune machine trouvée"
description="Commencez par ajouter votre première machine."
action-label="Ajouter une machine"
action-to="/machines/new"
/>
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div