diff --git a/resources/views/admin/show.blade.php b/resources/views/admin/show.blade.php index b6e33f56..925f6aeb 100755 --- a/resources/views/admin/show.blade.php +++ b/resources/views/admin/show.blade.php @@ -145,7 +145,9 @@ foreach ($data as $employee) { max-width: 350px; display: flex; gap: 0.35rem; - overflow-x: auto; + overflow: visible; + position: relative; + z-index: 50; padding: 0.45rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface-tabs); @@ -158,6 +160,40 @@ foreach ($data as $employee) { display: none; } + .ui-month-more { + position: relative; + flex-shrink: 0; + z-index: 60; + } + + .ui-month-more-menu { + position: absolute; + top: calc(100% + 0.35rem); + right: 0; + left: auto; + z-index: 100; + min-width: 9rem; + max-height: 16rem; + overflow-y: auto; + padding: 0.35rem; + border-radius: 0.75rem; + background: var(--surface-panel, #fff); + border: 1px solid var(--border-glass, #e5e7eb); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); + display: flex; + flex-direction: column; + gap: 0.15rem; + } + + .ui-month-more-menu.hidden { + display: none !important; + } + + .ui-month-more-item { + width: 100%; + text-align: right; + } + .month-tab { flex-shrink: 0; padding: 0.5rem 0.85rem; @@ -190,6 +226,8 @@ foreach ($data as $employee) { border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: var(--shadow-soft); overflow: hidden; + position: relative; + z-index: 1; } .attendance-table { @@ -283,27 +321,51 @@ foreach ($data as $employee) { رکورد ترددی برای این شخص ثبت نشده است. @else -
- @foreach(array_keys($recordsGrouped) as $month) - @php - $monthLabel = $month; - if (preg_match('/^(\d{4})-(\d{2})$/', (string) $month, $mm)) { - try { - $jj = new Jalalian((int) $mm[1], (int) $mm[2], 1); - $monthLabel = ((int) $mm[1] === (int) $currentJalaliYear) - ? $jj->format('%B') - : $jj->format('%B') . ' ' . $mm[1]; - } catch (\Throwable $e) { - $monthLabel = $month; - } + @php + $allMonthKeys = array_keys($recordsGrouped); + $recentMonthKeys = array_slice($allMonthKeys, 0, 3); + $olderMonthKeys = array_slice($allMonthKeys, 3); + $monthLabelOf = function ($month) use ($currentJalaliYear) { + if (preg_match('/^(\d{4})-(\d{2})$/', (string) $month, $mm)) { + try { + $jj = new Jalalian((int) $mm[1], (int) $mm[2], 1); + return ((int) $mm[1] === (int) $currentJalaliYear) + ? $jj->format('%B') + : $jj->format('%B') . ' ' . $mm[1]; + } catch (\Throwable $e) { + return $month; } - @endphp + } + + return $month; + }; + @endphp +
+ @foreach($recentMonthKeys as $month) @endforeach + + @if(!empty($olderMonthKeys)) +
+ + +
+ @endif
@foreach($recordsGrouped as $month => $records) @@ -382,6 +444,30 @@ foreach ($data as $employee) { } } + function toggleAdminMonthMore(evt, menuId) { + if (evt) evt.stopPropagation(); + document.querySelectorAll('.ui-month-more-menu').forEach(menu => { + if (menu.id !== menuId) menu.classList.add('hidden'); + }); + const menu = document.getElementById(menuId); + if (menu) menu.classList.toggle('hidden'); + } + + function closeAdminMonthMore(menuId) { + const menu = document.getElementById(menuId); + if (menu) menu.classList.add('hidden'); + } + + document.addEventListener('click', function () { + document.querySelectorAll('.ui-month-more-menu').forEach(menu => menu.classList.add('hidden')); + }); + + document.querySelectorAll('.ui-month-more-menu').forEach(menu => { + menu.addEventListener('click', function (e) { + e.stopPropagation(); + }); + }); + document.addEventListener('DOMContentLoaded', function () { const firstEmployeeBtn = document.querySelector('.emp-btn'); if (firstEmployeeBtn) { diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php index c0843b14..d4315a16 100755 --- a/resources/views/app.blade.php +++ b/resources/views/app.blade.php @@ -932,7 +932,9 @@ .ui-month-tabs { display: flex; gap: 0.35rem; - overflow-x: auto; + overflow: visible; + position: relative; + z-index: 50; max-width: 350px; width: 100%; padding: 0.45rem; @@ -950,13 +952,15 @@ .ui-month-more { position: relative; flex-shrink: 0; + z-index: 60; } .ui-month-more-menu { position: absolute; top: calc(100% + 0.35rem); - left: 0; - z-index: 40; + right: 0; + left: auto; + z-index: 100; min-width: 9rem; max-height: 16rem; overflow-y: auto; @@ -964,14 +968,14 @@ border-radius: 0.75rem; background: var(--surface-panel, #fff); border: 1px solid var(--border-glass, #e5e7eb); - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; gap: 0.15rem; } .ui-month-more-menu.hidden { - display: none; + display: none !important; } .ui-month-more-item { @@ -1015,6 +1019,8 @@ border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: var(--shadow-soft); overflow: hidden; + position: relative; + z-index: 1; color: var(--text-primary); } diff --git a/resources/views/attendance/index.blade.php b/resources/views/attendance/index.blade.php index b3f15d9e..8cb81bcc 100755 --- a/resources/views/attendance/index.blade.php +++ b/resources/views/attendance/index.blade.php @@ -147,8 +147,8 @@ if (!empty($user->tasks)) {
-
-
+
+
@@ -815,6 +815,10 @@ if (!empty($user->tasks)) { } } + document.getElementById('month-more-menu')?.addEventListener('click', function (e) { + e.stopPropagation(); + }); + document.addEventListener('click', function () { closeMonthMore(); });