update datatable
This commit is contained in:
pbao9
@@ -4,55 +4,55 @@
|
||||
<link href="{{ asset($css) }}" rel="stylesheet" />
|
||||
@endforeach
|
||||
@endpush
|
||||
@section('breadcrumb')
|
||||
@php
|
||||
$breadcrumbItems = [
|
||||
['label' => 'Modules',],
|
||||
['label' => 'Package vCenter', 'url' => route('package.datacenter.index')],
|
||||
['label' => 'Datacenter', 'active' => true],
|
||||
];
|
||||
@endphp
|
||||
<x-admin-breadcrumb :items="$breadcrumbItems" />
|
||||
@endsection
|
||||
@section("content")
|
||||
@if(auth()->guard('admins')->user()->can("add module vcenter"))
|
||||
<div class="card card-outline card-primary">
|
||||
<form action="{{ route('package.datacenter.store') }}" method="post">
|
||||
@csrf
|
||||
<div class="card-body">
|
||||
<x-module.v-center :model="null" />
|
||||
@section('breadcrumb')
|
||||
@php
|
||||
$breadcrumbItems = [
|
||||
['label' => 'Modules',],
|
||||
['label' => 'Package vCenter', 'url' => route('package.datacenter.index')],
|
||||
['label' => 'Datacenter', 'active' => true],
|
||||
];
|
||||
@endphp
|
||||
<x-admin-breadcrumb :items="$breadcrumbItems" />
|
||||
@endsection
|
||||
@section("content")
|
||||
@if(auth()->guard('admins')->user()->can("add module vcenter"))
|
||||
<div class="card card-outline card-primary">
|
||||
<form action="{{ route('package.datacenter.store') }}" method="post">
|
||||
@csrf
|
||||
<div class="card-body">
|
||||
<x-module.v-center :model="null" />
|
||||
|
||||
{{--Name--}}
|
||||
<div class="row form-group align-items-center mb-0">
|
||||
<label for="name" class="col-md-3 text-right">Name</label>
|
||||
<div class="col-md-9 p-1 bg-customer">
|
||||
<input type="text" id="name" name="name" placeholder="" value="" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
{{--Datacenter ID--}}
|
||||
<div class="row form-group align-items-center mb-0">
|
||||
<label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
|
||||
<div class="col-md-9 p-1 bg-customer">
|
||||
<input type="text" id="datacenter_id" name="datacenter_id" placeholder="" value=""
|
||||
class="form-control">
|
||||
</div>
|
||||
{{--Name--}}
|
||||
<div class="row form-group align-items-center mb-0">
|
||||
<label for="name" class="col-md-3 text-right">Name</label>
|
||||
<div class="col-md-9 p-1 bg-customer">
|
||||
<input type="text" id="name" name="name" placeholder="" value="" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
|
||||
<button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
|
||||
{{--Datacenter ID--}}
|
||||
<div class="row form-group align-items-center mb-0">
|
||||
<label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
|
||||
<div class="col-md-9 p-1 bg-customer">
|
||||
<input type="text" id="datacenter_id" name="datacenter_id" placeholder="" value=""
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@else
|
||||
<div class="alert alert-danger alert-dismissible">
|
||||
<h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
|
||||
management department</h5>
|
||||
</div>
|
||||
@endif
|
||||
@endsection
|
||||
@push('plugin-scripts')
|
||||
@foreach (config('assets.datatable.js') as $js)
|
||||
<script src="{{ asset($js) }}"></script>
|
||||
@endforeach
|
||||
@endpush
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
|
||||
<button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@else
|
||||
<div class="alert alert-danger alert-dismissible">
|
||||
<h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
|
||||
management department</h5>
|
||||
</div>
|
||||
@endif
|
||||
@endsection
|
||||
@push('plugin-scripts')
|
||||
@foreach (config('assets.datatable.js') as $js)
|
||||
<script src="{{ asset($js) }}"></script>
|
||||
@endforeach
|
||||
@endpush
|
||||
@@ -1,60 +1,61 @@
|
||||
@extends("administrator.layout.master")
|
||||
@push('plugin-styles')
|
||||
<link href="{{ asset('build/plugins/select2/select2.min.css') }}" rel="stylesheet" />
|
||||
@foreach (config('assets.datatable.css') as $css)
|
||||
<link href="{{ asset($css) }}" rel="stylesheet" />
|
||||
@endforeach
|
||||
@endpush
|
||||
@section('breadcrumb')
|
||||
@php
|
||||
$breadcrumbItems = [
|
||||
['label' => 'Modules'],
|
||||
['label' => 'Package vCenter'],
|
||||
['label' => 'Datacenter', 'active' => true],
|
||||
];
|
||||
@endphp
|
||||
<x-admin-breadcrumb :items="$breadcrumbItems" />
|
||||
@endsection
|
||||
@section("content")
|
||||
@if(auth()->guard('admins')->user()->can("add module vcenter"))
|
||||
<div class="card card-outline card-primary">
|
||||
<form action="{{ route('package.datacenter.update', ['id' => $datacenter->id]) }}" method="post">
|
||||
@csrf
|
||||
@method('put')
|
||||
<div class="card-body">
|
||||
<x-module.v-center :model="$datacenter" />
|
||||
{{--Name--}}
|
||||
<div class="row form-group align-items-center mb-0">
|
||||
<label for="name" class="col-md-3 text-right">Name</label>
|
||||
<div class="col-md-9 p-1 bg-customer">
|
||||
<input type="text" id="name" name="name" placeholder="" value="{{$datacenter->name}}"
|
||||
class="form-control">
|
||||
@section('breadcrumb')
|
||||
@php
|
||||
$breadcrumbItems = [
|
||||
['label' => 'Modules',],
|
||||
['label' => 'Package vCenter', 'url' => route('package.datacenter.index')],
|
||||
['label' => 'Datacenter'],
|
||||
['label' => 'Edit', 'active' => true],
|
||||
];
|
||||
@endphp
|
||||
<x-admin-breadcrumb :items="$breadcrumbItems" />
|
||||
@endsection
|
||||
@section("content")
|
||||
@if(auth()->guard('admins')->user()->can("add module vcenter"))
|
||||
<div class="card card-outline card-primary">
|
||||
<form action="{{ route('package.datacenter.update', ['id' => $datacenter->id]) }}" method="post">
|
||||
@csrf
|
||||
@method('put')
|
||||
<div class="card-body">
|
||||
<x-module.v-center :model="$datacenter" />
|
||||
{{--Name--}}
|
||||
<div class="row form-group align-items-center mb-0">
|
||||
<label for="name" class="col-md-3 text-right">Name</label>
|
||||
<div class="col-md-9 p-1 bg-customer">
|
||||
<input type="text" id="name" name="name" placeholder="" value="{{$datacenter->name}}"
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
{{--Datacenter ID--}}
|
||||
<div class="row form-group align-items-center mb-0">
|
||||
<label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
|
||||
<div class="col-md-9 p-1 bg-customer">
|
||||
<input type="text" id="datacenter_id" name="datacenter_id" placeholder=""
|
||||
value="{{$datacenter->datacenter_id}}" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{--Datacenter ID--}}
|
||||
<div class="row form-group align-items-center mb-0">
|
||||
<label for="datacenter_id" class="col-md-3 text-right">Datacenter ID</label>
|
||||
<div class="col-md-9 p-1 bg-customer">
|
||||
<input type="text" id="datacenter_id" name="datacenter_id" placeholder=""
|
||||
value="{{$datacenter->datacenter_id}}" class="form-control">
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
|
||||
<button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="{{ route('package.datacenter.index') }}" class="btn btn-outline-secondary">Trở về</a>
|
||||
<button type="submit" class="btn btn-outline-primary">Lưu dữ liệu</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@else
|
||||
<div class="alert alert-danger alert-dismissible">
|
||||
<h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
|
||||
management department</h5>
|
||||
</div>
|
||||
@endif
|
||||
@endsection
|
||||
|
||||
|
||||
@push('plugin-scripts')
|
||||
<script src="{{ asset('build/plugins/jquery/jquery.min.js') }}"></script>
|
||||
<script src="{{ asset('build/plugins/select2/select2.min.js') }}"></script>
|
||||
<script src="{{ asset('build/plugins/datatables.net/dataTables.min.js') }}"></script>
|
||||
<script src="{{ asset('build/plugins/datatables.net-bs5/dataTables.bootstrap5.min.js') }}"></script>
|
||||
@endpush
|
||||
</form>
|
||||
</div>
|
||||
@else
|
||||
<div class="alert alert-danger alert-dismissible">
|
||||
<h5 class="mb-0"><i class="icon fas fa-ban"></i> Access Denied - You are not assigned to any Module vCenter
|
||||
management department</h5>
|
||||
</div>
|
||||
@endif
|
||||
@endsection
|
||||
|
||||
@push('plugin-scripts')
|
||||
@foreach (config('assets.datatable.js') as $js)
|
||||
<script src="{{ asset($js) }}"></script>
|
||||
@endforeach
|
||||
@endpush
|
||||
@@ -17,7 +17,7 @@ $breadcrumbItems = [
|
||||
@endsection
|
||||
@section('content')
|
||||
@if (auth()->guard('admins')->user()->can('manager package module'))
|
||||
<div class="card card-primary card-outline rounded-4">
|
||||
<div class="card card-primary card-outline rounded-3 border-primary-subtle">
|
||||
<div class="card-header d-flex justify-content-end gap-2">
|
||||
@include('administrator.pages.block.Sync.Datacenter')
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@props(['items' => []])
|
||||
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb bg-white shadow-sm p-3 rounded-4 d-flex align-items-center mb-4">
|
||||
<ol class="breadcrumb bg-white shadow-sm p-3 rounded-3 d-flex align-items-center mb-4">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="{{ route('dashboard') }}"
|
||||
class="d-flex align-items-center text-muted text-decoration-none transition-colors hover-text-primary">
|
||||
|
||||
@@ -1,95 +1,256 @@
|
||||
@props(['id', 'columns', 'ajax'])
|
||||
|
||||
@php
|
||||
$dtColumns = collect($columns)->map(function ($c) {
|
||||
return [
|
||||
'data' => $c['key'],
|
||||
'name' => $c['key'],
|
||||
'orderable' => $c['orderable'] ?? true,
|
||||
'searchable' => $c['searchable'] ?? true,
|
||||
];
|
||||
})->values();
|
||||
$dtColumns = collect($columns)->map(function ($c) {
|
||||
return [
|
||||
'data' => $c['key'],
|
||||
'name' => $c['key'],
|
||||
'orderable' => $c['orderable'] ?? true,
|
||||
'searchable' => $c['searchable'] ?? true,
|
||||
'className' => $c['className'] ?? '',
|
||||
];
|
||||
})->values();
|
||||
@endphp
|
||||
<table id="{{ $id }}" class="table table-hover table-bordered w-100 align-middle my-3">
|
||||
<thead>
|
||||
<tr>
|
||||
@foreach($columns as $col)
|
||||
<th>{{ $col['label'] }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
<tr>
|
||||
@foreach($columns as $col)
|
||||
<th>
|
||||
@if(($col['searchable'] ?? true))
|
||||
<input type="text" class="form-control form-control-sm column-search" placeholder="Search {{ $col['label'] }}"
|
||||
data-column="{{ $loop->index }}">
|
||||
@endif
|
||||
</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
@push('custom-scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
$.fn.DataTable.ext.pager.numbers_length = 7;
|
||||
<div class="data-table-wrapper rounded-3 overflow-hidden border border-light">
|
||||
<table id="{{ $id }}" class="table table-hover align-middle mb-0 bg-white"
|
||||
style="width:100%; border-collapse: separate; border-spacing: 0;">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
@foreach($columns as $col)
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-3 py-3 border-bottom"
|
||||
style="font-size: 0.75rem; letter-spacing: 0.5px;">
|
||||
{{ $col['label'] }}
|
||||
</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
<tr class="filter-row bg-light">
|
||||
@foreach($columns as $col)
|
||||
<th class="p-2 border-bottom">
|
||||
@if(($col['searchable'] ?? true))
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-white border-end-0 ps-2 pe-2 text-muted border-light">
|
||||
<i data-lucide="search" style="font-size: 0.75rem;"></i>
|
||||
</span>
|
||||
<input type="text"
|
||||
class="form-control form-control-sm border-start-0 ps-0 column-search shadow-none border-light bg-white"
|
||||
placeholder="Filter..." data-column="{{ $loop->index }}" style="font-size: 0.8125rem;">
|
||||
</div>
|
||||
@endif
|
||||
</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{-- DataTables will populate this --}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@push('custom-scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
$.fn.DataTable.ext.pager.numbers_length = 7;
|
||||
|
||||
var table = $('#{{ $id }}').DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: '{{ $ajax }}',
|
||||
columns: @json($dtColumns),
|
||||
orderCellsTop: true,
|
||||
fixedHeader: true,
|
||||
pagingType: 'full_numbers',
|
||||
language: {
|
||||
searchPlaceholder: "Search records",
|
||||
search: "",
|
||||
lengthMenu: "_MENU_",
|
||||
},
|
||||
dom: "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
|
||||
"<'row mt-3 align-items-center'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-end gap-2'lp>>",
|
||||
initComplete: function () {
|
||||
// Initialize select2 for length menu
|
||||
$('.dataTables_length select').select2({
|
||||
var table = $('#{{ $id }}').DataTable({
|
||||
processing: true,
|
||||
serverSide: true,
|
||||
ajax: '{{ $ajax }}',
|
||||
columns: @json($dtColumns),
|
||||
orderCellsTop: true,
|
||||
fixedHeader: false,
|
||||
pagingType: 'full_numbers',
|
||||
language: {
|
||||
processing: '<div class="spinner-border text-primary" role="status" style="width: 2rem; height: 2rem;"><span class="visually-hidden">Loading...</span></div>',
|
||||
searchPlaceholder: "Search...",
|
||||
search: "",
|
||||
lengthMenu: "_MENU_",
|
||||
info: "Showing <span class='fw-bold'>_START_</span> to <span class='fw-bold'>_END_</span> of <span class='fw-bold'>_TOTAL_</span> entries",
|
||||
paginate: {
|
||||
first: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevrons-left" width="16" height="16"></i></span>',
|
||||
last: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevrons-right" width="16" height="16"></i></span>',
|
||||
next: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevron-right" width="16" height="16"></i></span>',
|
||||
previous: '<span class="d-flex align-items-center justify-content-center"><i data-lucide="chevron-left" width="16" height="16"></i></span>'
|
||||
},
|
||||
zeroRecords: "No matching records found",
|
||||
emptyTable: "No data available in table"
|
||||
},
|
||||
dom: "<'row p-3'<'col-sm-12'tr>>" +
|
||||
"<'row px-3 pb-3 pt-1 align-items-center'<'col-sm-12 col-md-5 text-muted small'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-end gap-2'lp>>",
|
||||
initComplete: function () {
|
||||
// Initialize select2 with custom styling
|
||||
$('.dataTables_length select').select2({
|
||||
minimumResultsForSearch: Infinity,
|
||||
width: '60px'
|
||||
});
|
||||
|
||||
// Apply the search
|
||||
this.api().columns().every(function () {
|
||||
var that = this;
|
||||
$('input', this.header()).on('keyup change clear', function () {
|
||||
if (that.search() !== this.value) {
|
||||
that
|
||||
.search(this.value)
|
||||
.draw();
|
||||
}
|
||||
width: '80px',
|
||||
dropdownCssClass: 'small-select-dropdown',
|
||||
selectionCssClass: 'small-select-selection'
|
||||
});
|
||||
});
|
||||
},
|
||||
drawCallback: function() {
|
||||
if ($('.dataTables_length select').data('select2')) {
|
||||
$('.dataTables_length select').select2('destroy');
|
||||
}
|
||||
$('.dataTables_length select').select2({
|
||||
minimumResultsForSearch: Infinity,
|
||||
width: '60px'
|
||||
});
|
||||
if (window.lucide) {
|
||||
lucide.createIcons();
|
||||
|
||||
// Debounced search for column inputs
|
||||
this.api().columns().every(function () {
|
||||
var that = this;
|
||||
$('input', this.header()).on('keyup change clear', function () {
|
||||
if (that.search() !== this.value) {
|
||||
that.search(this.value).draw();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
drawCallback: function () {
|
||||
// Re-initialize Select2 on draw (if lost)
|
||||
if ($('.dataTables_length select').data('select2')) {
|
||||
$('.dataTables_length select').select2('destroy');
|
||||
}
|
||||
$('.dataTables_length select').select2({
|
||||
minimumResultsForSearch: Infinity,
|
||||
width: '80px'
|
||||
});
|
||||
|
||||
// Re-initialize icons with slight delay to ensuring DOM is ready
|
||||
setTimeout(function () {
|
||||
if (window.lucide) {
|
||||
lucide.createIcons();
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Prevent sorting when clicking on the input
|
||||
$('#{{ $id }} thead tr:eq(1) th').on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
// Prevent sorting when clicking on the input
|
||||
$('#{{ $id }} thead tr:eq(1) th').on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// Custom search logic for the individual inputs
|
||||
$('#{{ $id }} .column-search').on('keyup change', function () {
|
||||
var columnIndex = $(this).data('column');
|
||||
table.column(columnIndex).search(this.value).draw();
|
||||
// External trigger for column search (redundant but kept for manual binding if needed)
|
||||
$('#{{ $id }} .column-search').on('keyup change', function () {
|
||||
var columnIndex = $(this).data('column');
|
||||
table.column(columnIndex).search(this.value).draw();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Custom SAAS DataTable Styles */
|
||||
.data-table-wrapper {
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pagination button.page-link {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.data-table-wrapper .table thead th {
|
||||
border-color: #f1f5f9 !important;
|
||||
font-family: 'Inter', sans-serif;
|
||||
vertical-align: middle;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
background-color: #f8f9fa;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* Sticky for second row (filter inputs) if present */
|
||||
.data-table-wrapper .table thead tr:nth-child(2) th {
|
||||
top: 45px;
|
||||
/* Adjust based on typical header height */
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.data-table-wrapper .input-group-text {
|
||||
color: #94a3b8;
|
||||
/* Slate 400 */
|
||||
}
|
||||
|
||||
.data-table-wrapper .form-control::placeholder {
|
||||
color: #cbd5e1;
|
||||
/* Slate 300 */
|
||||
}
|
||||
|
||||
.dataTables_wrapper .pagination .page-item .page-link {
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
margin: 0 2px;
|
||||
color: #64748b;
|
||||
padding: 0;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 38px;
|
||||
min-width: 38px;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .pagination .page-item.active .page-link {
|
||||
background-color: #0f172a;
|
||||
/* Slate 900 or Primary Color */
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
border-color: #0f172a;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .pagination .page-item.disabled .page-link {
|
||||
color: #cbd5e1;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .pagination .page-item:not(.active) .page-link:hover {
|
||||
background-color: #f8fafc;
|
||||
color: #0f172a;
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
/* Select2 Customization for Table Length */
|
||||
.dataTables_length {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 6px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single:focus {
|
||||
border-color: #94a3b8;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
color: #475569;
|
||||
font-size: 0.8125rem;
|
||||
padding-left: 10px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/* Processing Indicator with improved look - Centered */
|
||||
div.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%);
|
||||
width: auto !important;
|
||||
margin: 0 !important;
|
||||
padding: 1rem 2rem;
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #e2e8f0;
|
||||
color: #0f172a;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user