Made Person Header sticky

MGeurts · Jan 4, 2025 · a7e0ff7 · a7e0ff7
1 parent 3742296
commit a7e0ff7
Show file tree

Hide file tree

Showing 17 changed files with 51 additions and 18 deletions.
diff --git a/resources/views/back/people/add/child.blade.php b/resources/views/back/people/add/child.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.add_child') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/add/father.blade.php b/resources/views/back/people/add/father.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.add_father') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/add/mother.blade.php b/resources/views/back/people/add/mother.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.add_mother') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/add/partner.blade.php b/resources/views/back/people/add/partner.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.add_relationship') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/ancestors.blade.php b/resources/views/back/people/ancestors.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.ancestors') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5">
         <div class="md:min-w-max md:max-w-sm">
             <div class="overflow-x-auto">
                 <livewire:people.ancestors :person="$person" />

diff --git a/resources/views/back/people/chart.blade.php b/resources/views/back/people/chart.blade.php
@@ -7,10 +7,11 @@
         {{ __('app.family_chart') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5">
-        {{-- heading --}}
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5">
         {{-- chart --}}
         <div class="flex flex-col rounded bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 text-neutral-800 dark:text-neutral-50">
             <div class="flex flex-col p-2 text-lg font-medium border-b-2 rounded-t h-14 min-h-min border-neutral-100 dark:border-neutral-600 dark:text-neutral-50">

diff --git a/resources/views/back/people/datasheet.blade.php b/resources/views/back/people/datasheet.blade.php
@@ -7,9 +7,11 @@
         {{ __('app.datasheet') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <livewire:people.datasheet :person="$person" />
     </div>
 </x-app-layout>
diff --git a/resources/views/back/people/descendants.blade.php b/resources/views/back/people/descendants.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.descendants') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5">
         <div class="md:min-w-max md:max-w-sm">
             <div class="overflow-x-auto">
                 <livewire:people.descendants :person="$person" />

diff --git a/resources/views/back/people/edit/contact.blade.php b/resources/views/back/people/edit/contact.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.edit_contact') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/edit/death.blade.php b/resources/views/back/people/edit/death.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.edit_death') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/edit/family.blade.php b/resources/views/back/people/edit/family.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.edit_family') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/edit/files.blade.php b/resources/views/back/people/edit/files.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.files') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/edit/partner.blade.php b/resources/views/back/people/edit/partner.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.edit_relationship') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/edit/photos.blade.php b/resources/views/back/people/edit/photos.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.photos') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/edit/profile.blade.php b/resources/views/back/people/edit/profile.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.edit_profile') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/history.blade.php b/resources/views/back/people/history.blade.php
@@ -7,9 +7,11 @@
         {{ __('app.history') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 min-w-100 md:max-w-max">
                 <livewire:people.profile :person="$person" />

diff --git a/resources/views/back/people/show.blade.php b/resources/views/back/people/show.blade.php
@@ -7,9 +7,11 @@
         {{ __('person.profile') }}
     </x-slot>
 
-    <div class="w-full p-2 space-y-5 overflow-x-auto">
+    <div class="p-2 pb-5 sticky top-[6.5rem] z-40 bg-gray-100 dark:bg-gray-900">
         <livewire:people.heading :person="$person" />
+    </div>
 
+    <div class="w-full p-2 space-y-5 overflow-x-auto">
         <div class="flex flex-wrap gap-5">
             <div class="flex flex-col flex-grow gap-5 md:max-w-max">
                 <livewire:people.profile :person="$person" />