fix : layout style client + admin
This commit is contained in:
@@ -9,7 +9,7 @@
|
|||||||
v-bind="{ ariaLabel: t('commercial.clients.edit.back') }"
|
v-bind="{ ariaLabel: t('commercial.clients.edit.back') }"
|
||||||
@click="goBack"
|
@click="goBack"
|
||||||
/>
|
/>
|
||||||
<h1 class="text-[30px] font-bold text-m-primary">{{ headerTitle }}</h1>
|
<h1 class="text-[30px] font-semibold text-m-primary">{{ headerTitle }}</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Etats de chargement / introuvable. -->
|
<!-- Etats de chargement / introuvable. -->
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
v-bind="{ ariaLabel: t('commercial.clients.consultation.back') }"
|
v-bind="{ ariaLabel: t('commercial.clients.consultation.back') }"
|
||||||
@click="goBack"
|
@click="goBack"
|
||||||
/>
|
/>
|
||||||
<h1 class="text-[30px] font-bold text-m-primary">{{ headerTitle }}</h1>
|
<h1 class="text-[30px] font-semibold text-m-primary">{{ headerTitle }}</h1>
|
||||||
|
|
||||||
<!-- gap-12 = 48px : meme espacement que Ajouter / Filtres du repertoire. -->
|
<!-- gap-12 = 48px : meme espacement que Ajouter / Filtres du repertoire. -->
|
||||||
<div class="ml-auto flex items-center gap-12">
|
<div class="ml-auto flex items-center gap-12">
|
||||||
|
|||||||
@@ -39,7 +39,7 @@
|
|||||||
:per-page="itemsPerPage"
|
:per-page="itemsPerPage"
|
||||||
:per-page-options="itemsPerPageOptions"
|
:per-page-options="itemsPerPageOptions"
|
||||||
row-clickable
|
row-clickable
|
||||||
table-class="table-fixed clients-table"
|
table-class="table-fixed"
|
||||||
:empty-message="t('commercial.clients.empty')"
|
:empty-message="t('commercial.clients.empty')"
|
||||||
@row-click="onRowClick"
|
@row-click="onRowClick"
|
||||||
@update:page="goToPage"
|
@update:page="goToPage"
|
||||||
@@ -56,7 +56,7 @@
|
|||||||
<span
|
<span
|
||||||
v-for="site in (item.sites as ClientSite[])"
|
v-for="site in (item.sites as ClientSite[])"
|
||||||
:key="site.id"
|
:key="site.id"
|
||||||
class="inline-flex items-center rounded-full px-2 py-0.5 text-sm font-medium text-white"
|
class="inline-flex items-center rounded-full px-2 py-0.5 font-medium text-white"
|
||||||
:style="{ backgroundColor: site.color }"
|
:style="{ backgroundColor: site.color }"
|
||||||
>
|
>
|
||||||
{{ site.name }}
|
{{ site.name }}
|
||||||
@@ -419,25 +419,3 @@ onMounted(() => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/*
|
|
||||||
* Surcharge du style par defaut de MalioDataTable pour le repertoire client :
|
|
||||||
* le composant rend les titres de colonne et le corps en bleu (text-m-primary),
|
|
||||||
* en 20px (titres) / 18px (corps). Demande : titres NOIRS a 16px, corps NOIR a 14px.
|
|
||||||
* Les badges de site (text-white / text-xs) gardent leur style propre (plus
|
|
||||||
* specifique sur leur span).
|
|
||||||
*/
|
|
||||||
:deep(.clients-table thead th) {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.clients-table thead th span) {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.clients-table tbody td) {
|
|
||||||
color: #000;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
v-bind="{ ariaLabel: t('commercial.clients.form.back') }"
|
v-bind="{ ariaLabel: t('commercial.clients.form.back') }"
|
||||||
@click="goBack"
|
@click="goBack"
|
||||||
/>
|
/>
|
||||||
<h1 class="text-[32px] font-bold text-m-primary">{{ t('commercial.clients.form.title') }}</h1>
|
<h1 class="text-[30px] font-semibold text-m-primary">{{ t('commercial.clients.form.title') }}</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ── Formulaire principal (pre-onglets) ─────────────────────────────
|
<!-- ── Formulaire principal (pre-onglets) ─────────────────────────────
|
||||||
|
|||||||
@@ -30,7 +30,7 @@
|
|||||||
>
|
>
|
||||||
<template #cell-action="{ item }">
|
<template #cell-action="{ item }">
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
|
class="inline-flex items-center rounded-full px-2 py-0.5 font-medium"
|
||||||
:class="actionBadgeClass(item.action as string)"
|
:class="actionBadgeClass(item.action as string)"
|
||||||
>
|
>
|
||||||
{{ t(`audit.action.${item.action}`) }}
|
{{ t(`audit.action.${item.action}`) }}
|
||||||
@@ -38,15 +38,14 @@
|
|||||||
</template>
|
</template>
|
||||||
<template #cell-entityType="{ item }">
|
<template #cell-entityType="{ item }">
|
||||||
<span
|
<span
|
||||||
class="text-xs"
|
|
||||||
:title="item.entityType as string"
|
:title="item.entityType as string"
|
||||||
>{{ formatEntityType(item.entityType as string) }}</span>
|
>{{ formatEntityType(item.entityType as string) }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #cell-entityId="{ item }">
|
<template #cell-entityId="{ item }">
|
||||||
<span class="font-mono text-xs">{{ item.entityId }}</span>
|
<span>{{ item.entityId }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #cell-summary="{ item }">
|
<template #cell-summary="{ item }">
|
||||||
<span class="text-xs text-gray-600">{{ item.summary }}</span>
|
<span class="text-gray-600">{{ item.summary }}</span>
|
||||||
</template>
|
</template>
|
||||||
</MalioDataTable>
|
</MalioDataTable>
|
||||||
|
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
@update:per-page="setItemsPerPage"
|
@update:per-page="setItemsPerPage"
|
||||||
>
|
>
|
||||||
<template #cell-code="{ item }">
|
<template #cell-code="{ item }">
|
||||||
<span class="font-mono text-xs">{{ item.code }}</span>
|
<span>{{ item.code }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #cell-permissions="{ item }">
|
<template #cell-permissions="{ item }">
|
||||||
{{ item.permissions }}
|
{{ item.permissions }}
|
||||||
@@ -36,7 +36,7 @@
|
|||||||
<template #cell-system="{ item }">
|
<template #cell-system="{ item }">
|
||||||
<span
|
<span
|
||||||
v-if="item.isSystem"
|
v-if="item.isSystem"
|
||||||
class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800"
|
class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 font-medium text-blue-800"
|
||||||
>
|
>
|
||||||
{{ t('admin.roles.table.system') }}
|
{{ t('admin.roles.table.system') }}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
<template #cell-admin="{ item }">
|
<template #cell-admin="{ item }">
|
||||||
<span
|
<span
|
||||||
v-if="item.admin"
|
v-if="item.admin"
|
||||||
class="inline-flex items-center rounded-full bg-purple-100 px-2.5 py-0.5 text-xs font-medium text-purple-800"
|
class="inline-flex items-center rounded-full bg-purple-100 px-2.5 py-0.5 font-medium text-purple-800"
|
||||||
>
|
>
|
||||||
{{ t('admin.users.table.admin') }}
|
{{ t('admin.users.table.admin') }}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -62,7 +62,7 @@
|
|||||||
<MalioInputText
|
<MalioInputText
|
||||||
v-model="form.color"
|
v-model="form.color"
|
||||||
placeholder="#RRGGBB"
|
placeholder="#RRGGBB"
|
||||||
input-class="w-full font-mono"
|
input-class="w-full"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<!-- pb-4 sur le wrapper : simule le slot message du
|
<!-- pb-4 sur le wrapper : simule le slot message du
|
||||||
|
|||||||
@@ -33,11 +33,11 @@
|
|||||||
:style="{ backgroundColor: item.color }"
|
:style="{ backgroundColor: item.color }"
|
||||||
class="inline-block size-5 rounded-full border border-neutral-200"
|
class="inline-block size-5 rounded-full border border-neutral-200"
|
||||||
/>
|
/>
|
||||||
<span class="font-mono text-xs">{{ item.color }}</span>
|
<span>{{ item.color }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template #cell-fullAddress="{ item }">
|
<template #cell-fullAddress="{ item }">
|
||||||
<span class="line-clamp-2 text-xs text-neutral-600">
|
<span class="line-clamp-2 text-neutral-600">
|
||||||
{{ item.fullAddress }}
|
{{ item.fullAddress }}
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Generated
+4
-4
@@ -7,7 +7,7 @@
|
|||||||
"name": "starseed-frontend",
|
"name": "starseed-frontend",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@malio/layer-ui": "^1.7.6",
|
"@malio/layer-ui": "^1.7.7",
|
||||||
"@nuxt/icon": "^2.2.1",
|
"@nuxt/icon": "^2.2.1",
|
||||||
"@nuxtjs/i18n": "^10.2.3",
|
"@nuxtjs/i18n": "^10.2.3",
|
||||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||||
@@ -1847,9 +1847,9 @@
|
|||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/@malio/layer-ui": {
|
"node_modules/@malio/layer-ui": {
|
||||||
"version": "1.7.6",
|
"version": "1.7.7",
|
||||||
"resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.6/layer-ui-1.7.6.tgz",
|
"resolved": "https://gitea.malio.fr/api/packages/MALIO-DEV/npm/%40malio%2Flayer-ui/-/1.7.7/layer-ui-1.7.7.tgz",
|
||||||
"integrity": "sha512-ZyukXUPZo0lfXFJr2rxYc1Z+eBQOJQnth6GusewZKmyDXkW3T/khD80ZoE2S7r1jBqzgqiBwr4byrg/wfJ8fbg==",
|
"integrity": "sha512-MLHDtOzUxcCwIBGWj4FcUMLQTExtGD29uLvpU+IA6qr7gCj9kZ9fGZDu76LXxuJJdfBwzZmenuZioE7Z1qQUUw==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nuxt/icon": "^2.2.1",
|
"@nuxt/icon": "^2.2.1",
|
||||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||||
|
|||||||
@@ -17,7 +17,7 @@
|
|||||||
"test:e2e:ui": "playwright test --ui"
|
"test:e2e:ui": "playwright test --ui"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@malio/layer-ui": "^1.7.6",
|
"@malio/layer-ui": "^1.7.7",
|
||||||
"@nuxt/icon": "^2.2.1",
|
"@nuxt/icon": "^2.2.1",
|
||||||
"@nuxtjs/i18n": "^10.2.3",
|
"@nuxtjs/i18n": "^10.2.3",
|
||||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr v-for="(diff, field) in updateDiff" :key="field" class="border-t border-gray-200">
|
<tr v-for="(diff, field) in updateDiff" :key="field" class="border-t border-gray-200">
|
||||||
<td class="px-2 py-1 font-mono">{{ field }}</td>
|
<td class="px-2 py-1">{{ field }}</td>
|
||||||
<td class="px-2 py-1 text-red-700">{{ formatValue(diff.old) }}</td>
|
<td class="px-2 py-1 text-red-700">{{ formatValue(diff.old) }}</td>
|
||||||
<td class="px-2 py-1 text-green-700">{{ formatValue(diff.new) }}</td>
|
<td class="px-2 py-1 text-green-700">{{ formatValue(diff.new) }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
{ added: [ids], removed: [ids] } → affiche + et - sur
|
{ added: [ids], removed: [ids] } → affiche + et - sur
|
||||||
la meme ligne pour garder une colonne field unique. -->
|
la meme ligne pour garder une colonne field unique. -->
|
||||||
<tr v-for="(diff, field) in collectionDiff" :key="`col-${field}`" class="border-t border-gray-200">
|
<tr v-for="(diff, field) in collectionDiff" :key="`col-${field}`" class="border-t border-gray-200">
|
||||||
<td class="px-2 py-1 font-mono">{{ field }}</td>
|
<td class="px-2 py-1">{{ field }}</td>
|
||||||
<td class="px-2 py-1 text-red-700">
|
<td class="px-2 py-1 text-red-700">
|
||||||
<span v-if="diff.removed.length">− {{ diff.removed.join(', ') }}</span>
|
<span v-if="diff.removed.length">− {{ diff.removed.join(', ') }}</span>
|
||||||
<span v-else class="text-gray-400">∅</span>
|
<span v-else class="text-gray-400">∅</span>
|
||||||
@@ -47,7 +47,7 @@
|
|||||||
|
|
||||||
<div v-else class="space-y-1">
|
<div v-else class="space-y-1">
|
||||||
<div v-for="(value, key) in entry.changes" :key="key" class="flex gap-2">
|
<div v-for="(value, key) in entry.changes" :key="key" class="flex gap-2">
|
||||||
<span class="font-mono text-xs text-gray-600">{{ key }}:</span>
|
<span class="text-xs text-gray-600">{{ key }}:</span>
|
||||||
<span class="text-xs">{{ formatValue(value) }}</span>
|
<span class="text-xs">{{ formatValue(value) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user