fix : layout style
This commit is contained in:
@@ -2,7 +2,9 @@
|
|||||||
Valeurs en dur issues de la maquette Figma (design Starseed) :
|
Valeurs en dur issues de la maquette Figma (design Starseed) :
|
||||||
- sidebar depliee : 232px (w-[232px], repli laisse par defaut 72px)
|
- sidebar depliee : 232px (w-[232px], repli laisse par defaut 72px)
|
||||||
- marge horizontale du contenu sur desktop : 170px (xl:px-[170px])
|
- marge horizontale du contenu sur desktop : 170px (xl:px-[170px])
|
||||||
- bande blanche sticky sous la navbar : 47px (h-[47px])
|
La marge haute du contenu (44px) vit desormais DANS l'entete (PageHeader,
|
||||||
|
pt-11) et non sur le <main> : sinon, l'entete etant sticky, ce padding
|
||||||
|
laissait un trou blanc entre le SiteSelector et l'entete.
|
||||||
A faire evoluer uniquement avec une mise a jour de maquette.
|
A faire evoluer uniquement avec une mise a jour de maquette.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@@ -25,9 +27,6 @@
|
|||||||
<SiteSelector v-if="showSiteSelector"/>
|
<SiteSelector v-if="showSiteSelector"/>
|
||||||
<main
|
<main
|
||||||
class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-10 sm:px-6 lg:px-12 xl:px-11">
|
class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-10 sm:px-6 lg:px-12 xl:px-11">
|
||||||
<div
|
|
||||||
aria-hidden="true"
|
|
||||||
class="pointer-events-none sticky top-0 z-30 h-11 flex-shrink-0 bg-white"/>
|
|
||||||
<slot/>
|
<slot/>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- En-tete : retour repertoire + nom du client. -->
|
<!-- En-tete : retour repertoire + nom du client. -->
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3 pt-11">
|
||||||
<MalioButtonIcon
|
<MalioButtonIcon
|
||||||
icon="mdi:arrow-left-bold"
|
icon="mdi:arrow-left-bold"
|
||||||
icon-size="24"
|
icon-size="24"
|
||||||
@@ -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-[32px] font-bold text-m-primary">{{ headerTitle }}</h1>
|
<h1 class="text-[30px] font-bold text-m-primary">{{ headerTitle }}</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Etats de chargement / introuvable. -->
|
<!-- Etats de chargement / introuvable. -->
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- En-tete : retour repertoire + nom du client + actions (Modifier / Archiver|Restaurer). -->
|
<!-- En-tete : retour repertoire + nom du client + actions (Modifier / Archiver|Restaurer). -->
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3 pt-11">
|
||||||
<MalioButtonIcon
|
<MalioButtonIcon
|
||||||
icon="mdi:arrow-left-bold"
|
icon="mdi:arrow-left-bold"
|
||||||
icon-size="24"
|
icon-size="24"
|
||||||
@@ -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-[32px] font-bold text-m-primary">{{ headerTitle }}</h1>
|
<h1 class="text-[30px] font-bold 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">
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
{{ t('commercial.clients.title') }}
|
{{ t('commercial.clients.title') }}
|
||||||
<template #actions>
|
<template #actions>
|
||||||
<!-- gap-12 = 48px d'espacement entre Ajouter et Filtres. -->
|
<!-- gap-12 = 48px d'espacement entre Ajouter et Filtres. -->
|
||||||
<div class="flex items-center gap-12">
|
<div class="flex items-center gap-8">
|
||||||
<MalioButton
|
<MalioButton
|
||||||
v-if="canManage"
|
v-if="canManage"
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
@@ -21,8 +21,8 @@
|
|||||||
:label="filterButtonLabel"
|
:label="filterButtonLabel"
|
||||||
icon-name="mdi:tune"
|
icon-name="mdi:tune"
|
||||||
icon-position="left"
|
icon-position="left"
|
||||||
icon-size="24"
|
icon-size="20"
|
||||||
button-class="w-[184px] justify-start gap-4 text-black"
|
button-class="w-[180px] justify-start gap-4 text-black"
|
||||||
@click="openFilters"
|
@click="openFilters"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</MalioDataTable>
|
</MalioDataTable>
|
||||||
|
|
||||||
<div class="flex justify-center mt-6">
|
<div class="flex justify-center mt-4">
|
||||||
<MalioButton
|
<MalioButton
|
||||||
v-if="canView"
|
v-if="canView"
|
||||||
variant="primary"
|
variant="primary"
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- En-tete : retour vers le repertoire + titre. -->
|
<!-- En-tete : retour vers le repertoire + titre. -->
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3 pt-11">
|
||||||
<MalioButtonIcon
|
<MalioButtonIcon
|
||||||
icon="mdi:arrow-left-bold"
|
icon="mdi:arrow-left-bold"
|
||||||
icon-size="24"
|
icon-size="24"
|
||||||
|
|||||||
@@ -1,8 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- Entete de page standard : source unique du style des titres.
|
<!-- Entete de page standard : source unique du style des titres.
|
||||||
Slot par defaut = texte du titre, slot #actions = boutons a droite. -->
|
Slot par defaut = texte du titre, slot #actions = boutons a droite.
|
||||||
<div class="mb-[44px] flex items-center justify-between gap-4">
|
Sticky en haut du <main> scrollable : reste visible au scroll. Fond blanc
|
||||||
<h1 class="text-[32px] font-semibold text-primary-500">
|
+ pt-11/pb-[34px] (au lieu de marges) pour que le contenu defilant soit
|
||||||
|
masque sous l'entete (espaces haut ET bas compris) et que l'entete soit
|
||||||
|
collee sous le SiteSelector sans trou. pt-11 = 44px, la marge haute
|
||||||
|
d'origine. z-20 < drawers/modales. -->
|
||||||
|
<div class="sticky top-0 z-20 flex items-center justify-between gap-4 bg-white pt-11 pb-[34px]">
|
||||||
|
<h1 class="text-[30px] font-semibold text-primary-500">
|
||||||
<slot/>
|
<slot/>
|
||||||
</h1>
|
</h1>
|
||||||
<div v-if="$slots.actions" class="shrink-0">
|
<div v-if="$slots.actions" class="shrink-0">
|
||||||
|
|||||||
Reference in New Issue
Block a user