Dashboard slider issues resolved

This commit is contained in:
merve karaman 2024-11-08 12:39:21 +03:00 committed by GitHub
parent d29dd11a44
commit 83137705c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 5 deletions

View File

@ -281,11 +281,34 @@ export default {
slider.scrollBy({ left: nextItem.getBoundingClientRect().left - sliderRect.left, behavior: 'smooth' });
}
}
function updateSlider() {
const sliderWidth = slider.clientWidth;
const windowWidth = window.innerWidth;
if (sliderWidth <= 850) {
slider.parentElement.classList.remove('w-9/12', 'w-8/12');
scrollLeft.classList.add('hidden');
scrollRight.classList.add('hidden');
} else {
if (windowWidth < 1396) {
slider.parentElement.classList.remove('w-9/12');
slider.parentElement.classList.add('w-8/12');
} else {
slider.parentElement.classList.remove('w-8/12');
slider.parentElement.classList.add('w-9/12');
}
scrollLeft.classList.remove('hidden');
scrollRight.classList.remove('hidden');
}
}
updateSlider();
window.addEventListener('resize', updateSlider);
// Dashboard slider
},
methods: {
// Check Default set notify > store / update action
checkNotify: function () {

View File

@ -107,7 +107,7 @@
<x-slot name="content">
<div class="flex flex-col lg:flex-row justify-between items-start border-b pt-8">
<div class="flex w-9/12">
<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">
@ -128,7 +128,7 @@
<button type="button" id="dashboard-right" class="material-icons-outlined text-purple bg-body mr-1">chevron_right</button>
</div>
<div class="flex flex-col lg:flex-row col-span-3 ml-6 text-right">
<div class="flex col-span-3 ml-6 text-right">
@can('create-common-widgets')
<x-button
type="button"
@ -143,7 +143,7 @@
@endcan
@can('create-common-dashboards')
<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">
<x-link href="{{ route('dashboards.create') }}" override="class" class="relative flex-auto px-3 pb-2.5 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