Merge pull request #5837 from Laravel-Backpack/fix-ui

Fix UI

Author: pxpm

src/resources/assets/css/common.css

@@ -1,5 +1,7 @@
 :root {
     --table-row-hover: #f2f1ff;
+    --select2-selected-item-background: #7c69ef;
+    --select2-selected-item-color: #fff;
 }
 
 .sidebar .nav-dropdown-items .nav-dropdown {
@@ -941,8 +943,8 @@ div.dt-scroll-body {
 }
 
 .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
-    background-color: #3875d7;
-    color: #fff;
+    background-color: var(--select2-selected-item-background);
+    color: var(--select2-selected-item-color);
 }
 
 .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
@@ -1339,3 +1341,7 @@ div.dt-scroll-body {
         grid-column: span 12 / span 12;
     }
 }
+
+.dt-container .crud_bulk_actions_checkbox, .dt-container table.dataTable .crud_bulk_actions_checkbox {
+    margin: 0 0.6rem 0 0.45rem;
+}

src/resources/views/crud/components/datatable/datatable.blade.php

@@ -2,7 +2,7 @@
     // Define the table ID - use the provided tableId or default to 'crudTable'
     $tableId = $tableId ?? 'crudTable';
 @endphp
-<section class="header-operation datatable-header container-fluid animated fadeIn d-flex mb-2 align-items-baseline d-print-none" bp-section="page-header">
+<section class="header-operation datatable-header animated fadeIn d-flex mb-2 align-items-baseline d-print-none" bp-section="page-header">
           <h1 class="text-capitalize mb-0" bp-section="page-heading">{!! $crud->getHeading() ?? $crud->entity_name_plural !!}</h1>
           <p class="ms-2 ml-2 mb-0" id="datatable_info_stack_{{$tableId}}" bp-section="page-subheading">{!! $crud->getSubheading() ?? '' !!}</p>
         </section>

src/resources/views/crud/components/datatable/datatable_logic.blade.php

@@ -309,7 +309,7 @@ functionsToRunOnDataTablesDrawEvent: [],
             topStart: null,
             topEnd: null,
             bottomEnd: null,
-            bottomStart: null,
+            bottomStart: 'info',
             bottom: config.exportButtons ? [
                 'pageLength',
                 {
@@ -813,7 +813,7 @@ function resizeCrudTableColumnWidths() {
     let shouldUpdateUrl = event.detail.shouldUpdateUrl;
     let debounce = event.detail.debounce;
     
-    updateDatatablesOnFilterChange(filterName, filterValue, filterValue || shouldUpdateUrl, debounce, tableId);
+    updateDatatablesOnFilterChange(filterName, filterValue, shouldUpdateUrl, debounce, tableId);
 });
 
 // Update the updateDatatablesOnFilterChange function to support multiple tables
@@ -837,7 +837,7 @@ function updateDatatablesOnFilterChange(filterName, filterValue, shouldUpdateUrl
     
     // Update the browser URL if needed
     if (shouldUpdateUrl) {
-        tableConfig.updateUrl(newUrl);
+        window.crud.updateUrl(newUrl);
     }
     
     // Reload the table with the new URL if needed

src/resources/views/crud/inc/filters_navbar.blade.php

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-filters mb-0 py-0 shadow-none" componentId="{{ $componentId ?? '' }}">
+<nav class="navbar navbar-expand-lg navbar-filters mb-0 py-0 shadow-none" data-component-id="{{ $componentId ?? '' }}">
     {{-- Brand and toggle get grouped for better mobile display --}}
     <a class="nav-item d-none d-lg-block my-auto"><span class="la la-filter"></span></a>
     <button class="navbar-toggler ms-3"

src/resources/views/crud/list.blade.php

@@ -18,7 +18,7 @@
     {{-- THE ACTUAL CONTENT --}}
     <div class="{{ $crud->getListContentClass() }}">
 
-      <x-backpack::datatable :controller="$controller" :crud="$crud" />
+      <x-backpack::datatable :controller="$controller" :crud="$crud" :modifiesUrl="true" />
 
     </div>