MALIO-DEV/Lesstime
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

refactor(front) : composant PageHeader unifié + standardisation des titres

Browse Source 
- Nouveau composant ui/PageHeader.vue : source unique du style des titres
  (30px / semi-bold / bleu malio), sticky avec masquage du scroll, slots
  #actions et #subheader (barres de filtres/onglets collées au titre)
- Layout : marges <main> réduites (sm:px-6 lg:px-12 xl:px-11) + suppression
  du bloc-spacer sticky devenu inutile
- ~17 pages migrées vers <PageHeader>, un seul pattern partout
- Espacement titre -> contenu uniforme (30px), porté par le composant

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Autin
2026-06-25 11:47:47 +02:00
parent 386242c84d
commit 30b067afdd
19 changed files with 433 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/modules/reporting/pages/reporting.vue
+52 -53
View File
@@ -1,60 +1,59 @@
<template>
<div>
<div class="sticky top-8 z-20 bg-white pb-4 sm:top-12">
<h1 class="text-xl font-bold text-primary-500 sm:text-2xl">
{{ $t('reporting.title') }}
</h1>
<!-- Filters -->
<div class="mt-4 flex flex-wrap items-end gap-3">
<MalioSelect
v-model="selectedPeriod"
:options="periodOptions"
:label="$t('reporting.filters.period')"
group-class="!w-48"
text-field="text-sm"
text-value="text-sm"
/>
<div class="w-40">
<label class="mb-1 block text-sm font-medium text-neutral-700">
{{ $t('reporting.filters.from') }}
</label>
<MalioDate
v-model="customFrom"
:disabled="selectedPeriod !== 'custom'"
group-class="w-full"
<PageHeader>
{{ $t('reporting.title') }}
<template #subheader>
<!-- Filters -->
<div class="mt-4 flex flex-wrap items-end gap-3">
<MalioSelect
v-model="selectedPeriod"
:options="periodOptions"
:label="$t('reporting.filters.period')"
group-class="!w-48"
text-field="text-sm"
text-value="text-sm"
/>
<div class="w-40">
<label class="mb-1 block text-sm font-medium text-neutral-700">
{{ $t('reporting.filters.from') }}
</label>
<MalioDate
v-model="customFrom"
:disabled="selectedPeriod !== 'custom'"
group-class="w-full"
/>
</div>
<div class="w-40">
<label class="mb-1 block text-sm font-medium text-neutral-700">
{{ $t('reporting.filters.to') }}
</label>
<MalioDate
v-model="customTo"
:disabled="selectedPeriod !== 'custom'"
group-class="w-full"
/>
</div>
<MalioSelect
v-model="selectedProjectId"
:options="projectOptions"
:label="$t('reporting.filters.project')"
:empty-option-label="$t('reporting.filters.allProjects')"
group-class="!w-44"
text-field="text-sm"
text-value="text-sm"
/>
<MalioSelect
v-model="selectedUserId"
:options="userOptions"
:label="$t('reporting.filters.user')"
:empty-option-label="$t('reporting.filters.allUsers')"
group-class="!w-44"
text-field="text-sm"
text-value="text-sm"
/>
</div>
<div class="w-40">
<label class="mb-1 block text-sm font-medium text-neutral-700">
{{ $t('reporting.filters.to') }}
</label>
<MalioDate
v-model="customTo"
:disabled="selectedPeriod !== 'custom'"
group-class="w-full"
/>
</div>
<MalioSelect
v-model="selectedProjectId"
:options="projectOptions"
:label="$t('reporting.filters.project')"
:empty-option-label="$t('reporting.filters.allProjects')"
group-class="!w-44"
text-field="text-sm"
text-value="text-sm"
/>
<MalioSelect
v-model="selectedUserId"
:options="userOptions"
:label="$t('reporting.filters.user')"
:empty-option-label="$t('reporting.filters.allUsers')"
group-class="!w-44"
text-field="text-sm"
text-value="text-sm"
/>
</div>
</div>
</template>
</PageHeader>
<!-- Loading -->
<div v-if="isLoading" class="mt-12 flex items-center justify-center">