Merge pull request #5719 from Laravel-Backpack/separate-responsive-controls-from-first-column

Separate responsive controls from first column contents

Author: pxpm

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 = '<div class="dtr-control d-none cursor-pointer"></div>';
+            $row_items[0] = $responsiveTableTrigger.$row_items[0];
+        }
+
         return $row_items;
     }
 

src/resources/assets/css/common.css

@@ -94,18 +94,22 @@ 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 .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;
     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;

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 ) {
@@ -377,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');
              }
         } );

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');

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)

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'] !!}
                   </th>
@@ -122,7 +122,7 @@ class="{{ backpack_theme_config('classes.table') ?? 'table table-striped table-h
                   <th>
                     {{-- 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'] !!}
                   </th>