Files
sibedas/resources/views/bigdata-resumes/index.blade.php

104 lines
2.9 KiB
PHP

@extends('layouts.vertical', ['subtitle' => 'Laporan Pimpinan'])
@section('css')
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
<style>
/* Ensure the Grid.js container allows full scrolling */
#table-bigdata-resumes {
overflow-x: auto;
overflow-y: hidden; /* Prevent vertical scrolling */
white-space: nowrap;
max-width: 100%;
height: 100%; /* Adjust height if necessary */
}
/* Ensure Grid.js wrapper is scrollable */
.gridjs-wrapper {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
/* Make the entire scrollbar much bigger */
.gridjs-wrapper::-webkit-scrollbar {
height: 40px; /* Increase scrollbar height */
}
/* Scrollbar track (background) */
.gridjs-wrapper::-webkit-scrollbar-track {
background: #ddd;
border-radius: 20px;
}
/* Scrollbar thumb (draggable part) */
.gridjs-wrapper::-webkit-scrollbar-thumb {
background: #007bff;
border-radius: 20px;
width: 40px; /* Wider scrollbar thumb */
min-width: 40px;
}
/* Scrollbar thumb hover effect */
.gridjs-wrapper::-webkit-scrollbar-thumb:hover {
background: #0056b3;
}
/* Bigger Scrollbar Buttons */
.gridjs-wrapper::-webkit-scrollbar-button {
background: #007bff;
height: 40px; /* Force bigger button height */
width: 40px; /* Force bigger button width */
border-radius: 10px;
}
/* Left Scroll Button */
.gridjs-wrapper::-webkit-scrollbar-button:horizontal:decrement {
display: block;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15 18l-6-6 6-6"/></svg>') no-repeat center;
background-size: 30px;
width: 40px; /* Ensure button size */
height: 40px;
}
/* Right Scroll Button */
.gridjs-wrapper::-webkit-scrollbar-button:horizontal:increment {
display: block;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 18l6-6-6-6"/></svg>') no-repeat center;
background-size: 30px;
width: 40px; /* Ensure button size */
height: 40px;
}
/* Scrollbar button hover effect */
.gridjs-wrapper::-webkit-scrollbar-button:hover {
background: #0056b3;
}
</style>
@endsection
@section('content')
@include('layouts.partials/page-title', ['title' => 'Laporan', 'subtitle' => 'Laporan Pimpinan'])
<x-toast-notification />
<div class="row">
<div class="col-12">
<div class="card w-100 h-100">
<!-- <div class="card-header d-flex align-items-center">
<input type="text" class="form-control me-2 w-auto" id="search-box" />
<button id="search-btn" class="btn btn-md btn-info text-white">Cari</button>
</div> -->
<div class="card-body">
<div id="table-bigdata-resumes"></div>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
@vite(['resources/js/bigdata-resumes/index.js'])
@endsection