refactor(frontend) : make page headers and filters sticky across all pages
Wrap title + filters in a sticky container (top-8 sm:top-12, z-20, bg-white) on all pages for consistent scroll behavior. Also fix SidebarTimer icon visibility when sidebar is collapsed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,17 +1,18 @@
|
||||
<template>
|
||||
<div class="flex min-h-0 flex-1 flex-col">
|
||||
<div ref="pageHeaderEl" class="flex-shrink-0 pb-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-2xl font-bold text-primary-500">Suivi des temps</h1>
|
||||
<div ref="pageHeaderEl" class="sticky top-8 z-20 flex-shrink-0 bg-white pb-4 sm:top-12">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<h1 class="text-xl font-bold text-primary-500 sm:text-2xl">Suivi des temps</h1>
|
||||
<button
|
||||
class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-600 transition"
|
||||
class="shrink-0 rounded-md bg-primary-500 px-3 py-2 text-xs font-semibold text-white hover:bg-primary-600 transition sm:px-4 sm:text-sm"
|
||||
@click="openCreateDrawer()"
|
||||
>
|
||||
+ Ajouter une Activité
|
||||
<span class="hidden sm:inline">+ Ajouter une Activité</span>
|
||||
<span class="sm:hidden">+ Activité</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative z-30 mt-4 flex items-center gap-4">
|
||||
<div class="relative z-30 mt-4 flex flex-wrap items-center gap-3 sm:gap-4">
|
||||
<h2 class="text-lg font-bold text-orange-500">
|
||||
{{ currentMonthLabel }}
|
||||
</h2>
|
||||
@@ -37,7 +38,7 @@
|
||||
<MalioSelect
|
||||
v-model="selectedUserId"
|
||||
:options="userOptions"
|
||||
min-width="!w-44"
|
||||
min-width="!w-36 sm:!w-44"
|
||||
text-field="text-sm"
|
||||
text-value="text-sm"
|
||||
label="User"
|
||||
@@ -49,7 +50,7 @@
|
||||
:options="projectOptions"
|
||||
empty-option-label="Tous"
|
||||
label="Projet"
|
||||
min-width="!w-44"
|
||||
min-width="!w-36 sm:!w-44"
|
||||
text-field="text-sm"
|
||||
text-value="text-sm"
|
||||
/>
|
||||
@@ -59,7 +60,7 @@
|
||||
:options="tagOptions"
|
||||
empty-option-label="Tous"
|
||||
label="Tag"
|
||||
min-width="!w-44"
|
||||
min-width="!w-36 sm:!w-44"
|
||||
text-field="text-sm"
|
||||
text-value="text-sm"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user