From 7982abc487c5c762d0e518ed82ed37d654468f90 Mon Sep 17 00:00:00 2001 From: pxpm Date: Tue, 19 Nov 2024 18:50:45 +0000 Subject: [PATCH 1/9] separate responsive table trigger from first column content --- src/app/Library/CrudPanel/Traits/Search.php | 5 +++++ src/resources/assets/css/common.css | 8 ++++---- src/resources/views/crud/inc/datatables_logic.blade.php | 4 +++- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/app/Library/CrudPanel/Traits/Search.php b/src/app/Library/CrudPanel/Traits/Search.php index 04c807ea59..6c5570868b 100644 --- a/src/app/Library/CrudPanel/Traits/Search.php +++ b/src/app/Library/CrudPanel/Traits/Search.php @@ -288,6 +288,11 @@ public function getRowViews($entry, $rowNumber = false) $row_items[0] = $details_row_button.$row_items[0]; } + if($this->getResponsiveTable()) { + $responsiveTableTrigger = \View::make('crud::columns.inc.responsive_table_trigger', ['entry' => $entry])->render(); + $row_items[0] = $responsiveTableTrigger.$row_items[0]; + } + return $row_items; } diff --git a/src/resources/assets/css/common.css b/src/resources/assets/css/common.css index 81024c8a5b..56fbf93ca9 100644 --- a/src/resources/assets/css/common.css +++ b/src/resources/assets/css/common.css @@ -94,18 +94,18 @@ form .select2.select2-container { margin-top: 0 !important; } -#crudTable_wrapper #crudTable.dtr-inline.collapsed > tbody > tr > .dtr-control:before, -#crudTable_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr > .dtr-control:before { +#crudTable_wrapper #crudTable.dtr-none > tbody > tr > td > div.dtr-control:before, +#crudTable_wrapper table.dataTable.dtr-none > tbody > tr > td > div.dtr-control:before { background-color: transparent; color: #636161; font-family: "Line Awesome Free"; font-weight: 900; - width: 16px; + width: 1rem; content: "\f142"; font-size: 21px; box-shadow: none; border: none; - display: inline; + display: inline-block; position: relative; top: 0; left: 0; diff --git a/src/resources/views/crud/inc/datatables_logic.blade.php b/src/resources/views/crud/inc/datatables_logic.blade.php index dc3f488f2e..77deb7e98b 100644 --- a/src/resources/views/crud/inc/datatables_logic.blade.php +++ b/src/resources/views/crud/inc/datatables_logic.blade.php @@ -155,7 +155,9 @@ functionsToRunOnDataTablesDrawEvent: [], // return data[0]; return ''; } - } ), + }), + type: 'none', + target: '.dtr-control', renderer: function ( api, rowIdx, columns ) { var data = $.map( columns, function ( col, i ) { From e217227db694cdcf59ff71a90eacb36c9fcd6bf7 Mon Sep 17 00:00:00 2001 From: StyleCI Bot Date: Tue, 19 Nov 2024 18:51:10 +0000 Subject: [PATCH 2/9] Apply fixes from StyleCI [ci skip] [skip ci] --- src/app/Library/CrudPanel/Traits/Search.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/Library/CrudPanel/Traits/Search.php b/src/app/Library/CrudPanel/Traits/Search.php index 6c5570868b..3da5933ea7 100644 --- a/src/app/Library/CrudPanel/Traits/Search.php +++ b/src/app/Library/CrudPanel/Traits/Search.php @@ -288,7 +288,7 @@ public function getRowViews($entry, $rowNumber = false) $row_items[0] = $details_row_button.$row_items[0]; } - if($this->getResponsiveTable()) { + if ($this->getResponsiveTable()) { $responsiveTableTrigger = \View::make('crud::columns.inc.responsive_table_trigger', ['entry' => $entry])->render(); $row_items[0] = $responsiveTableTrigger.$row_items[0]; } From a08eebb1196cbb3e477c61d42529840f61e33b7a Mon Sep 17 00:00:00 2001 From: pxpm Date: Tue, 19 Nov 2024 19:12:02 +0000 Subject: [PATCH 3/9] separate functionality --- src/app/Library/CrudPanel/Traits/Search.php | 5 +++-- src/resources/views/crud/inc/datatables_logic.blade.php | 1 + src/resources/views/crud/inc/details_row_logic.blade.php | 2 +- src/resources/views/crud/list.blade.php | 4 ++-- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/app/Library/CrudPanel/Traits/Search.php b/src/app/Library/CrudPanel/Traits/Search.php index 3da5933ea7..60526ecf5e 100644 --- a/src/app/Library/CrudPanel/Traits/Search.php +++ b/src/app/Library/CrudPanel/Traits/Search.php @@ -272,6 +272,7 @@ public function getRowViews($entry, $rowNumber = false) ->render(); } + // add the bulk actions checkbox to the first column if ($this->getOperationSetting('bulkActions')) { $bulk_actions_checkbox = \View::make('crud::columns.inc.bulk_actions_checkbox', ['entry' => $entry])->render(); @@ -288,8 +289,8 @@ public function getRowViews($entry, $rowNumber = false) $row_items[0] = $details_row_button.$row_items[0]; } - if ($this->getResponsiveTable()) { - $responsiveTableTrigger = \View::make('crud::columns.inc.responsive_table_trigger', ['entry' => $entry])->render(); + if($this->getResponsiveTable()) { + $responsiveTableTrigger = '
'; $row_items[0] = $responsiveTableTrigger.$row_items[0]; } diff --git a/src/resources/views/crud/inc/datatables_logic.blade.php b/src/resources/views/crud/inc/datatables_logic.blade.php index 77deb7e98b..2610b58886 100644 --- a/src/resources/views/crud/inc/datatables_logic.blade.php +++ b/src/resources/views/crud/inc/datatables_logic.blade.php @@ -105,6 +105,7 @@ functionsToRunOnDataTablesDrawEvent: [], } }, responsiveToggle: function(dt) { + console.log(dt.table().header()); $(dt.table().header()).find('th').toggleClass('all'); dt.responsive.rebuild(); dt.responsive.recalc(); diff --git a/src/resources/views/crud/inc/details_row_logic.blade.php b/src/resources/views/crud/inc/details_row_logic.blade.php index f335e571e8..fdf1e56366 100644 --- a/src/resources/views/crud/inc/details_row_logic.blade.php +++ b/src/resources/views/crud/inc/details_row_logic.blade.php @@ -13,7 +13,7 @@ function registerDetailsRowButtonAction() { // Add event listener for opening and closing details $('#crudTable tbody td .details-control').on('click', function (e) { - e.stopPropagation(); + e.stopPropagation(); var tr = $(this).closest('tr'); var btn = $(this).find('.details-row-button'); diff --git a/src/resources/views/crud/list.blade.php b/src/resources/views/crud/list.blade.php index 93ad711f6e..c0d3333dec 100644 --- a/src/resources/views/crud/list.blade.php +++ b/src/resources/views/crud/list.blade.php @@ -98,7 +98,7 @@ class="{{ backpack_theme_config('classes.table') ?? 'table table-striped table-h > {{-- Bulk checkbox --}} @if($loop->first && $crud->getOperationSetting('bulkActions')) - {!! View::make('crud::columns.inc.bulk_actions_checkbox')->render() !!} + {!! View::make('crud::columns.inc.bulk_actions_checkbox')->render() !!} @endif {!! $column['label'] !!} @@ -122,7 +122,7 @@ class="{{ backpack_theme_config('classes.table') ?? 'table table-striped table-h {{-- Bulk checkbox --}} @if($loop->first && $crud->getOperationSetting('bulkActions')) - {!! View::make('crud::columns.inc.bulk_actions_checkbox')->render() !!} + {!! View::make('crud::columns.inc.bulk_actions_checkbox')->render() !!} @endif {!! $column['label'] !!} From 8014d5a5590cee6f48d23b2f61be95010bc29455 Mon Sep 17 00:00:00 2001 From: StyleCI Bot Date: Tue, 19 Nov 2024 19:12:14 +0000 Subject: [PATCH 4/9] Apply fixes from StyleCI [ci skip] [skip ci] --- src/app/Library/CrudPanel/Traits/Search.php | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/Library/CrudPanel/Traits/Search.php b/src/app/Library/CrudPanel/Traits/Search.php index 60526ecf5e..8e4eac1cb5 100644 --- a/src/app/Library/CrudPanel/Traits/Search.php +++ b/src/app/Library/CrudPanel/Traits/Search.php @@ -272,7 +272,6 @@ public function getRowViews($entry, $rowNumber = false) ->render(); } - // add the bulk actions checkbox to the first column if ($this->getOperationSetting('bulkActions')) { $bulk_actions_checkbox = \View::make('crud::columns.inc.bulk_actions_checkbox', ['entry' => $entry])->render(); @@ -289,7 +288,7 @@ public function getRowViews($entry, $rowNumber = false) $row_items[0] = $details_row_button.$row_items[0]; } - if($this->getResponsiveTable()) { + if ($this->getResponsiveTable()) { $responsiveTableTrigger = '
'; $row_items[0] = $responsiveTableTrigger.$row_items[0]; } From eacc0f2618f3032b6a311d2da14713a53ec55a8b Mon Sep 17 00:00:00 2001 From: Pedro Martins Date: Tue, 19 Nov 2024 19:12:31 +0000 Subject: [PATCH 5/9] Update src/resources/views/crud/inc/datatables_logic.blade.php --- src/resources/views/crud/inc/datatables_logic.blade.php | 1 - 1 file changed, 1 deletion(-) diff --git a/src/resources/views/crud/inc/datatables_logic.blade.php b/src/resources/views/crud/inc/datatables_logic.blade.php index 2610b58886..77deb7e98b 100644 --- a/src/resources/views/crud/inc/datatables_logic.blade.php +++ b/src/resources/views/crud/inc/datatables_logic.blade.php @@ -105,7 +105,6 @@ functionsToRunOnDataTablesDrawEvent: [], } }, responsiveToggle: function(dt) { - console.log(dt.table().header()); $(dt.table().header()).find('th').toggleClass('all'); dt.responsive.rebuild(); dt.responsive.recalc(); From 14b2122d71182d1dcbe5353f9c127824a5012038 Mon Sep 17 00:00:00 2001 From: pxpm Date: Wed, 20 Nov 2024 10:44:29 +0000 Subject: [PATCH 6/9] add cursor pointer and close the div --- src/app/Library/CrudPanel/Traits/Search.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/Library/CrudPanel/Traits/Search.php b/src/app/Library/CrudPanel/Traits/Search.php index 8e4eac1cb5..e0f5839275 100644 --- a/src/app/Library/CrudPanel/Traits/Search.php +++ b/src/app/Library/CrudPanel/Traits/Search.php @@ -289,7 +289,7 @@ public function getRowViews($entry, $rowNumber = false) } if ($this->getResponsiveTable()) { - $responsiveTableTrigger = '
'; + $responsiveTableTrigger = '
'; $row_items[0] = $responsiveTableTrigger.$row_items[0]; } From f9ed0c7a35fbf52eb82ad6000fb1ba0ba97aebcf Mon Sep 17 00:00:00 2001 From: pxpm Date: Wed, 20 Nov 2024 12:17:44 +0000 Subject: [PATCH 7/9] make the responsive toggle hidden by default --- src/app/Library/CrudPanel/Traits/Search.php | 2 +- src/resources/views/crud/inc/datatables_logic.blade.php | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/Library/CrudPanel/Traits/Search.php b/src/app/Library/CrudPanel/Traits/Search.php index e0f5839275..92fe3c62c4 100644 --- a/src/app/Library/CrudPanel/Traits/Search.php +++ b/src/app/Library/CrudPanel/Traits/Search.php @@ -289,7 +289,7 @@ public function getRowViews($entry, $rowNumber = false) } if ($this->getResponsiveTable()) { - $responsiveTableTrigger = '
'; + $responsiveTableTrigger = '
'; $row_items[0] = $responsiveTableTrigger.$row_items[0]; } diff --git a/src/resources/views/crud/inc/datatables_logic.blade.php b/src/resources/views/crud/inc/datatables_logic.blade.php index 77deb7e98b..683ef8e01e 100644 --- a/src/resources/views/crud/inc/datatables_logic.blade.php +++ b/src/resources/views/crud/inc/datatables_logic.blade.php @@ -379,8 +379,11 @@ functionsToRunOnDataTablesDrawEvent: [], // the table should have the has-hidden-columns class crud.table.on( 'responsive-resize', function ( e, datatable, columns ) { if (crud.table.responsive.hasHidden()) { - $("#crudTable").removeClass('has-hidden-columns').addClass('has-hidden-columns'); + $('.dtr-control').removeClass('d-none'); + $('.dtr-control').addClass('d-inline'); + $("#crudTable").removeClass('has-hidden-columns').addClass('has-hidden-columns'); } else { + $('.dtr-control').removeClass('d-none').removeClass('d-inline').addClass('d-none'); $("#crudTable").removeClass('has-hidden-columns'); } } ); From 79b38cfb5af4284cf29b76b9dcb903128b64cf58 Mon Sep 17 00:00:00 2001 From: pxpm Date: Wed, 20 Nov 2024 12:18:04 +0000 Subject: [PATCH 8/9] align the bulk checkboxes on all themes --- src/resources/assets/css/common.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/resources/assets/css/common.css b/src/resources/assets/css/common.css index 56fbf93ca9..7c6b25d53d 100644 --- a/src/resources/assets/css/common.css +++ b/src/resources/assets/css/common.css @@ -94,6 +94,10 @@ form .select2.select2-container { margin-top: 0 !important; } +#crudTable_wrapper #crudTable .crud_bulk_actions_line_checkbox { + vertical-align: text-top; +} + #crudTable_wrapper #crudTable.dtr-none > tbody > tr > td > div.dtr-control:before, #crudTable_wrapper table.dataTable.dtr-none > tbody > tr > td > div.dtr-control:before { background-color: transparent; From 51600367b10c6497ad99684977c522a8ae571356 Mon Sep 17 00:00:00 2001 From: pxpm Date: Wed, 20 Nov 2024 14:23:44 +0000 Subject: [PATCH 9/9] conditionally wrap the callonce function --- src/resources/views/crud/inc/filters_navbar.blade.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/resources/views/crud/inc/filters_navbar.blade.php b/src/resources/views/crud/inc/filters_navbar.blade.php index 6a6fd5284e..437661e80b 100644 --- a/src/resources/views/crud/inc/filters_navbar.blade.php +++ b/src/resources/views/crud/inc/filters_navbar.blade.php @@ -85,13 +85,15 @@ function updateDatatablesOnFilterChange(filterName, filterValue, update_url = fa * * FROM: https://stackoverflow.com/questions/27787768/debounce-function-in-jquery */ - function callFunctionOnce(func, within = 300, timerId = null) { + if(typeof callFunctionOnce !== 'function') { + function callFunctionOnce(func, within = 300, timerId = null) { window.callOnceTimers = window.callOnceTimers || {}; timerId = timerId || func; if (window.callOnceTimers[timerId]) { clearTimeout(window.callOnceTimers[timerId]); } window.callOnceTimers[timerId] = setTimeout(func, within); + } } function refreshDatatablesOnFilterChange(url)