make overflow in lab & home

ranggaadithia · Nov 5, 2023 · 4b41c71 · 4b41c71
1 parent 9281f7b
commit 4b41c71
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 28 deletions.
diff --git a/resources/views/home/lab.blade.php b/resources/views/home/lab.blade.php
@@ -3,6 +3,7 @@
 @section('container')
 
 <livewire:navbar />
+<div class="mb-16"></div>
 
 <livewire:lab-schedule :lab="$lab" />
 

diff --git a/resources/views/livewire/lab-schedule.blade.php b/resources/views/livewire/lab-schedule.blade.php
@@ -1,12 +1,12 @@
 <div class="xl:flex xl:justify-center">
-    <div class="grid grid-cols-[70px,repeat(7,170px)] grid-rows-[repeat(14,50px)] mt-16">
-        <div class="row-start-[1] col-start-[1] sticky top-16 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2"></div>
+    <div class="overflow-x-scroll grid grid-cols-[70px,repeat(7,170px)] grid-rows-[repeat(14,50px)]" id="scrollContainer">
+        <div class="row-start-[1] col-start-[1] sticky top-0 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2" id="sticky1"></div>
         @php
             $col = 2;
         @endphp
         @foreach ($weekDates as $week)
         @if ($week['date'] == $today)
-        <div class="row-start-[1] col-start-[{{ $col }}] sticky top-16 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2 text-center">
+        <div class="row-start-[1] col-start-[{{ $col }}] sticky top-0 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2 text-center" id="sticky2">
             <span class="uppercase font-light text-blue-600">
                 {{ Illuminate\Support\Str::limit($week['day'], 3, '') }} 
             </span>
@@ -16,7 +16,7 @@
             </span>
         </div>
         @else
-        <div class="row-start-[1] col-start-[{{ $col }}] sticky top-16 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2 text-center">
+        <div class="row-start-[1] col-start-[{{ $col }}] sticky top-0 z-10 bg-white dark:bg-gradient-to-b dark:from-slate-600 dark:to-slate-700 border-slate-100 dark:border-black/10 bg-clip-padding text-slate-900 dark:text-slate-200 border-b text-sm font-medium py-2 text-center" id="sticky3">
             <span class="uppercase font-light">
                 {{ Illuminate\Support\Str::limit($week['day'], 3, '') }} 
             </span>
@@ -36,7 +36,7 @@
         $row = 2; // Mulai dari baris kedua
         @endphp
         @foreach ($timeMapping as $letter => $time)
-            <div class="row-start-[{{ $row }}] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r border-b text-xs text-center align-middle text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium">{{ $letter }}</div>
+            <div class="row-start-[{{ $row }}] col-start-[1] border-slate-100 dark:border-slate-200/5 border-r border-b text-xs text-center align-middle text-slate-400 uppercase sticky left-0 bg-white dark:bg-slate-800 font-medium sticky left-0">{{ $letter }}</div>
             @php
                 $col = 2;
             @endphp

diff --git a/resources/views/livewire/schedule-calendar.blade.php b/resources/views/livewire/schedule-calendar.blade.php
@@ -1,9 +1,9 @@
 
-<div class="wrapper overflow-x-scroll">
-    <table class=" mt-16 mx-auto">
+<div class="wrapper overflow-x-scroll" id="scrollContainer">
+    <table class="mt-16 mx-auto">
         <thead class="sticky top-16 transition-shadow ease-in-out duration-300 bg-white" id="thead">
             <tr class="">
-                <th class="py-2 border-r h-10 bg-white text-white sticky z-30 left-0 md:static">
+                <th class="py-2 border-r h-10 bg-white text-white sticky top-16 left-0 md:static">
                     @auth
                         @include('components.modal-button')
                     @else 
@@ -35,7 +35,7 @@
                 @endforeach
             </tr>
         </thead>
-        <tbody class="overflow-y-scroll">
+        <tbody class="">
             @foreach ($labs as $lab)
                 <tr class="text-center h-20" wire:key="{{ $lab->id }} ">
                     <td class="border px-3 lg:px-3 h-40 items-center bg-white lg:w-40" id="lab-name"
@@ -102,26 +102,7 @@
         });
 
 
-    const labs = document.querySelectorAll('[data-sticky="true"]');
 
-    labs.forEach((lab) => {
-    let isSticky = false;
-
-    window.addEventListener('scroll', () => {
-        if (window.scrollX > 0) {
-    if (!isSticky) {
-        lab.classList.add('sticky', 'left-0');
-        isSticky = true;
-    }
-} else if (window.scrollY > 0) {
-    if (isSticky) {
-        lab.classList.remove('sticky', 'left-0');
-        isSticky = false;
-    }
-}
-
-    });
-});
     </script>
 @endpush
 </div>