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

Merge pull request #3227 from mervekaraman/master 

Dashboard slider style
This commit is contained in:
Cüneyt Şentürk 2024-10-31 14:58:23 +03:00 committed by GitHub
parent 3fdc71b3ca d29dd11a44
commit c3ec7d143c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 49 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
resources/assets/js/mixins/global.js vendored
View File

@ -258,8 +258,34 @@ export default {
}
}
//swiper slider for long tabs items
const slider = document.getElementById('dashboard-slider');
const scrollLeft = document.getElementById('dashboard-left');
const scrollRight = document.getElementById('dashboard-right');
scrollLeft.addEventListener('click', () => scrollToItem('left'));
scrollRight.addEventListener('click', () => scrollToItem('right'));
function scrollToItem(direction) {
const visibleItems = Array.from(slider.children);
const sliderRect = slider.getBoundingClientRect();
const currentIndex = visibleItems.findIndex(item => {
const itemRect = item.getBoundingClientRect();
return itemRect.left >= sliderRect.left && itemRect.right <= sliderRect.right;
});
const nextIndex = direction === 'right' ? currentIndex + 1 : currentIndex - 1;
if (nextIndex >= 0 && nextIndex < visibleItems.length) {
const nextItem = visibleItems[nextIndex];
slider.scrollBy({ left: nextItem.getBoundingClientRect().left - sliderRect.left, behavior: 'smooth' });
}
}
// Dashboard slider
},
methods: {
// Check Default set notify > store / update action
checkNotify: function () {

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

@ -106,31 +106,29 @@
@endsection
<x-slot name="content">
<div class="justify-between items-start border-b pt-8 grid sm:grid-cols-12">
<div class="space-x-10 col-span-9 -mx-8">
<x-tabs active="show-dashboard-switch-{{ $dashboard->id }}" class="mt-1">
<x-slot name="navs">
@foreach ($user_dashboards as $user_dashboard)
<li
class="relative flex-auto px-4 text-sm text-center pb-2 cursor-pointer transition-all whitespace-nowrap tabs-link"
id="show-dashboard-switch-{{ $user_dashboard->id }}"
data-id="show-dashboard-switch-{{ $user_dashboard->id }}"
data-tabs="{{ $user_dashboard->id }}"
data-tabs-slide
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'"
>
<a href="{{ route('dashboards.switch', $user_dashboard->id) }}">
{{ $user_dashboard->name }}
</a>
</li>
@endforeach
</x-slot>
<x-slot name="content"></x-slot>
</x-tabs>
<div class="flex flex-col lg:flex-row justify-between items-start border-b pt-8">
<div class="flex w-9/12">
<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>
</div>
<div class="col-span-3 ml-6 text-right">
<div class="flex flex-col lg:flex-row col-span-3 ml-6 text-right">
@can('create-common-widgets')
<x-button
type="button"
@ -145,7 +143,7 @@
@endcan
@can('create-common-dashboards')
<x-link href="{{ route('dashboards.create') }}" override="class" class="relative flex-auto px-3 pb-2.5 h-8 text-purple text-sm font-medium tabs-link" id="show-more-actions-new-dashboard">
<x-link href="{{ route('dashboards.create') }}" override="class" class="relative flex-auto px-3 pt-1 h-8 text-purple text-sm font-medium tabs-link" id="show-more-actions-new-dashboard">
{{ trans('general.title.new', ['type' => trans_choice('general.dashboards', 1)]) }}
</x-link>
@endcan
@ -160,4 +158,4 @@
</x-slot>
<x-script folder="common" file="dashboards" />
</x-layouts.admin>
</x-layouts.admin>