started work on mobile ux

Author: tabacitu

src/app/Library/CrudPanel/Traits/Columns.php

@@ -366,6 +366,7 @@ public function makeSureColumnHasNeededAttributes($column)
         $column = $this->makeSureColumnHasLabel($column);
         $column = $this->makeSureColumnHasType($column);
         $column = $this->makeSureColumnHasKey($column);
+        $column = $this->makeSureColumnHasPriority($column);
         $column = $this->makeSureColumnHasModel($column);
 
         // check if the column exists in the database (as a db column)
@@ -387,6 +388,21 @@ public function makeSureColumnHasNeededAttributes($column)
         return $column;
     }
 
+    /**
+     * Count the number of columns added so far.
+     *
+     * It will not take into account the action 
+     * columns (columns with buttons, checkbox).
+     * 
+     * @return integer
+     */
+    public function countColumnsWithoutActions()
+    {
+        return collect($this->columns())->filter(function ($column, $key) {
+            return !isset($column['hasActions']) || $column['hasActions'] == false;
+        })->count();
+    }
+
     /**
      * Create and return a CrudColumn object for that column name.
      *

src/app/Library/CrudPanel/Traits/ColumnsProtectedMethods.php

@@ -18,15 +18,23 @@ protected function addColumnToOperationSettings($column)
         $allColumns = Arr::add($allColumns, $column['key'], $column);
 
         $this->setOperationSetting('columns', $allColumns);
+    }
 
-        // make sure the column has a priority in terms of visibility
-        // if no priority has been defined, use the order in the array plus one
-        if (! array_key_exists('priority', $column)) {
-            $position_in_columns_array = (int) array_search($column['key'], array_keys($this->columns()));
-            $allColumns[$column['key']]['priority'] = $position_in_columns_array + 1;
-        }
 
-        $this->setOperationSetting('columns', $allColumns);
+    /**
+     * If a column priority has not been defined, provide a default one.
+     *
+     * @param array $column Column definition array.
+     * @return array         Proper array defining the column.
+     */
+    protected function makeSureColumnHasPriority($column)
+    {
+        $columns_count = $this->countColumnsWithoutActions();
+        $assumed_priority = $columns_count ? $columns_count : 0;
+
+        $column['priority'] = $column['priority'] ?? $assumed_priority;
+
+        return $column;
     }
 
     /**

src/app/Library/CrudPanel/Traits/Read.php

@@ -143,26 +143,28 @@ public function enableBulkActions()
             'type'            => 'checkbox',
             'name'            => 'bulk_actions',
             'label'           => ' <input type="checkbox" class="crud_bulk_actions_main_checkbox" style="width: 16px; height: 16px;" />',
-            'priority'        => 1,
+            'priority'        => $this->getActionsColumnPriority(),
             'searchLogic'     => false,
             'orderable'       => false,
             'visibleInTable'  => true,
             'visibleInModal'  => false,
             'visibleInExport' => false,
             'visibleInShow'   => false,
+            'hasActions'      => true,
         ])->makeFirstColumn();
 
         $this->addColumn([
             'type'            => 'custom_html',
             'name'            => 'blank_first_column',
             'label'           => ' ',
-            'priority'        => 1,
+            'priority'        => $this->getActionsColumnPriority(),
             'searchLogic'     => false,
             'orderable'       => false,
             'visibleInTabel'  => true,
             'visibleInModal'  => false,
             'visibleInExport' => false,
             'visibleInShow'   => false,
+            'hasActions'      => true,
         ])->makeFirstColumn();
     }
 

src/public/packages/backpack/crud/css/list.css

@@ -54,7 +54,8 @@
 	}
 
   /*  DataTables Loading State Visual Improvements  */
-
+	table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td.dtr-control:before, 
+	table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th.dtr-control:before,
 	#crudTable.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
 	#crudTable.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
 		background-color: transparent;

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

@@ -111,7 +111,8 @@ function moveExportButtonsToTopRight() {
         }
       })
       $(".dt-buttons").appendTo($('#datatable_button_stack' ));
-      $('.dt-buttons').addClass('d-sm-inline-block')
+      $('.dt-buttons').addClass('d-xs-block')
+                      .addClass('d-sm-inline-block')
                       .addClass('d-md-inline-block')
                       .addClass('d-lg-inline-block');
     }

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

@@ -74,33 +74,24 @@
                       data-visible-in-modal="false"
                       data-visible-in-export="true"
                       data-force-export="true"
-
                     @else
-
                       data-visible-in-table="{{var_export($column['visibleInTable'] ?? false)}}"
                       data-visible="{{var_export($column['visibleInTable'] ?? true)}}"
                       data-can-be-visible-in-table="true"
                       data-visible-in-modal="{{var_export($column['visibleInModal'] ?? true)}}"
-                      @if(isset($column['visibleInExport']))
-                        @if($column['visibleInExport'] === false)
-                          data-visible-in-export="false"
-                          data-force-export="false"
-                        @else
-                          data-visible-in-export="true"
-                          data-force-export="true"
-                        @endif
-                      @else
-                        data-visible-in-export="true"
-                        data-force-export="false"
-                      @endif
+                      data-visible-in-export="{{var_export($column['visibleInExport'] ?? true)}}"
+                      data-force-export="{{var_export($column['visibleInExport'] ?? true)}}"
                     @endif
                   >
                     {!! $column['label'] !!}
                   </th>
                 @endforeach
 
                 @if ( $crud->buttons()->where('stack', 'line')->count() )
-                  <th data-orderable="false" data-priority="{{ $crud->getActionsColumnPriority() }}" data-visible-in-export="false">{{ trans('backpack::crud.actions') }}</th>
+                  <th data-orderable="false" 
+                      data-priority="{{ $crud->getActionsColumnPriority() }}" 
+                      data-visible-in-export="false"
+                      >{{ trans('backpack::crud.actions') }}</th>
                 @endif
               </tr>
             </thead>