waqas
/
Akaunting
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dashboard slider styling..

This commit is contained in:
Cüneyt Şentürk 2024-11-22 17:44:25 +00:00
parent b57b74c227
commit 68e576e60d
2 changed files with 59 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
resources/assets/js/views/common/dashboards.js vendored
View File

@ -77,6 +77,19 @@ const dashboard = new Vue({
scrollRight.addEventListener('click', () => scrollToItem('right'));
function scrollToItem(direction) {
if (direction == 'right') {
scrollLeft.classList.add('text-purple');
scrollLeft.classList.remove('text-purple-200');
scrollLeft.removeAttribute('disabled');
}
if (direction == 'left') {
scrollRight.classList.add('text-purple');
scrollRight.classList.remove('text-purple-200');
scrollRight.removeAttribute('disabled');
}
const visibleItems = Array.from(slider.children);
const sliderRect = slider.getBoundingClientRect();
@ -88,10 +101,29 @@ const dashboard = new Vue({
const nextIndex = direction === 'right' ? currentIndex + 1 : currentIndex - 1;
if (nextIndex == 0) {
scrollLeft.classList.add('text-purple-200');
scrollLeft.classList.remove('text-purple');
scrollLeft.setAttribute('disabled', 'disabled');
}
if (nextIndex >= 0 && nextIndex < visibleItems.length) {
const nextItem = visibleItems[nextIndex];
slider.scrollBy({ left: nextItem.getBoundingClientRect().left - sliderRect.left, behavior: 'smooth' });
slider.scrollBy({
left: nextItem.getBoundingClientRect().left - sliderRect.left,
behavior: 'smooth'
});
}
const tolerance = 5; // Pixel tolerance
if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - tolerance) {
scrollRight.classList.add('text-purple-200');
scrollRight.classList.remove('text-purple');
scrollRight.setAttribute('disabled', 'disabled');
}
}
@ -101,6 +133,7 @@ const dashboard = new Vue({
if (sliderWidth <= 850) {
slider.parentElement.classList.remove('w-9/12', 'w-8/12');
scrollLeft.classList.add('hidden');
scrollRight.classList.add('hidden');
} else {

44
resources/views/common/dashboards/show.blade.php
View File

@ -114,24 +114,30 @@
<x-slot name="content">
<div class="flex flex-col lg:flex-row justify-between items-start border-b pt-8">
<div class="flex">
<button type="button" id="dashboard-left" class="material-icons-outlined text-purple bg-body -mr-3">chevron_left</button>
<div id="dashboard-slider" class="flex space-x-10 overflow-scroll hide-scroll-bar">
@foreach ($user_dashboards as $user_dashboard)
<li
id="show-dashboard-switch-{{ $user_dashboard->id }}"
class="relative flex-auto px-4 text-sm text-center pb-2 pt-1 cursor-pointer transition-all whitespace-nowrap list-none tabs-link"
x-bind:class="active != 'show-dashboard-switch-{{ $user_dashboard->id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
style="margin-left:10px !important;"
>
<a href="{{ route('dashboards.switch', $user_dashboard->id) }}">
{{ $user_dashboard->name }}
</a>
</li>
@endforeach
</div>
<button type="button" id="dashboard-right" class="material-icons-outlined text-purple bg-body mr-1">chevron_right</button>
@if ($user_dashboards->count() > 1)
<button type="button" id="dashboard-left" disabled="disabled" class="material-icons-outlined text-purple-200 bg-body -mr-3 mr-1">chevron_left</button>
<div id="dashboard-slider" class="flex space-x-10 overflow-scroll hide-scroll-bar">
@foreach ($user_dashboards as $user_dashboard)
<li
id="show-dashboard-switch-{{ $user_dashboard->id }}"
class="relative flex-auto px-2 text-sm text-center pb-2 pt-1 cursor-pointer transition-all whitespace-nowrap list-none tabs-link"
x-bind:class="active != 'show-dashboard-switch-{{ $user_dashboard->id }}' ? 'text-black' : 'active-tabs text-purple border-purple transition-all after:absolute after:w-full after:h-0.5 after:left-0 after:right-0 after:bottom-0 after:bg-purple after:rounded-tl-md after:rounded-tr-md'"
@if ($loop->first)
style="margin-left:0px !important;"
@else
style="margin-left:10px !important;"
@endif
>
<a href="{{ route('dashboards.switch', $user_dashboard->id) }}">
{{ $user_dashboard->name }}
</a>
</li>
@endforeach
</div>
<button type="button" id="dashboard-right" class="material-icons-outlined text-purple bg-body ml-1 mr-1">chevron_right</button>
@endif
</div>
<div class="flex col-span-3 ml-6 text-right">
@ -164,4 +170,4 @@
</x-slot>
<x-script folder="common" file="dashboards" />
</x-layouts.admin>
</x-layouts.admin>