refactor(ui) : improve styling, layout and responsive across all components
Rework CSS theme (app.css), navbar layout, dashboard page, machine detail, catalog pages, and various form/display components for better consistency and mobile responsiveness. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="fields.length"
|
||||
class="mt-4 pt-4 border-t border-gray-200"
|
||||
class="mt-4 pt-4 border-t border-base-200"
|
||||
>
|
||||
<h5 class="text-sm font-medium text-gray-700 mb-3">
|
||||
<h5 class="text-sm font-medium text-base-content/80 mb-3">
|
||||
Champs personnalisés
|
||||
</h5>
|
||||
<div :class="layoutClass">
|
||||
|
||||
@@ -63,13 +63,13 @@
|
||||
|
||||
<!-- Table (always shown when there are filterable columns, even during loading or with 0 rows) -->
|
||||
<template v-else>
|
||||
<div class="overflow-x-auto overflow-y-clip relative">
|
||||
<div class="overflow-x-auto overflow-y-clip relative rounded-lg border border-base-300/40">
|
||||
<!-- Loading overlay (keeps table & filter inputs visible) -->
|
||||
<div
|
||||
v-if="loading && hasFilterableColumns"
|
||||
class="absolute inset-0 bg-base-100/50 z-10 flex items-center justify-center"
|
||||
class="absolute inset-0 bg-base-100/60 backdrop-blur-[1px] z-10 flex items-center justify-center"
|
||||
>
|
||||
<span class="loading loading-spinner" aria-hidden="true" />
|
||||
<span class="loading loading-spinner text-primary" aria-hidden="true" />
|
||||
</div>
|
||||
<table :class="['table table-sm md:table-md', tableClass]">
|
||||
<thead>
|
||||
@@ -175,7 +175,7 @@
|
||||
</tr>
|
||||
<!-- Expanded row -->
|
||||
<tr v-if="expandable && isExpanded(row)">
|
||||
<td :colspan="columns.length + 1" class="bg-base-200/50 p-4">
|
||||
<td :colspan="columns.length + 1" class="bg-base-200/30 p-4 border-t border-base-200/80">
|
||||
<slot name="row-expanded" :row="row" :index="idx" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -9,11 +9,11 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-500">
|
||||
<p class="text-sm text-base-content/50">
|
||||
{{ labels.description }}
|
||||
</p>
|
||||
|
||||
<div v-if="requirements.length === 0" class="text-sm text-gray-500 bg-base-200/60 rounded-md p-4">
|
||||
<div v-if="requirements.length === 0" class="text-sm text-base-content/50 bg-base-200/60 rounded-md p-4">
|
||||
{{ labels.emptyState }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -41,11 +41,11 @@
|
||||
v-if="openDropdown"
|
||||
class="absolute z-30 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg"
|
||||
>
|
||||
<div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-gray-500">
|
||||
<div v-if="loading" class="flex items-center gap-2 px-3 py-2 text-xs text-base-content/50">
|
||||
<span class="loading loading-spinner loading-xs" />
|
||||
Recherche en cours…
|
||||
</div>
|
||||
<div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-gray-500">
|
||||
<div v-else-if="displayedOptions.length === 0" class="px-3 py-2 text-xs text-base-content/50">
|
||||
{{ emptyText }}
|
||||
</div>
|
||||
<ul v-else class="flex flex-col">
|
||||
@@ -69,7 +69,7 @@
|
||||
{{ resolveLabel(option) }}
|
||||
</slot>
|
||||
</span>
|
||||
<span v-if="resolveDescription(option)" class="text-xs text-gray-500">
|
||||
<span v-if="resolveDescription(option)" class="text-xs text-base-content/50">
|
||||
<slot name="option-description" :option="option">
|
||||
{{ resolveDescription(option) }}
|
||||
</slot>
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
<!-- Empty state: component variant -->
|
||||
<p
|
||||
v-if="variant === 'component' && showEmptyState && !customFields.length && !pieces.length && !products.length && !subcomponents.length"
|
||||
class="text-xs text-gray-500"
|
||||
class="text-xs text-base-content/50"
|
||||
>
|
||||
Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user