Skip to content

Separate responsive controls from first column contents #5719

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pxpm merged 9 commits into from
Nov 20, 2024
Merged

Separate responsive controls from first column contents #5719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7982abc
separate responsive table trigger from first column content
pxpm Nov 19, 2024
e217227
Apply fixes from StyleCI
StyleCIBot Nov 19, 2024
a08eebb
separate functionality
pxpm Nov 19, 2024
8014d5a
Apply fixes from StyleCI
StyleCIBot Nov 19, 2024
eacc0f2
Update src/resources/views/crud/inc/datatables_logic.blade.php
pxpm Nov 19, 2024
14b2122
add cursor pointer and close the div
pxpm Nov 20, 2024
f9ed0c7
make the responsive toggle hidden by default
pxpm Nov 20, 2024
79b38cf
align the bulk checkboxes on all themes
pxpm Nov 20, 2024
5160036
conditionally wrap the callonce function
pxpm Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/app/Library/CrudPanel/Traits/Search.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
12 changes: 8 additions & 4 deletions src/resources/assets/css/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
9 changes: 7 additions & 2 deletions src/resources/views/crud/inc/datatables_logic.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand Down Expand Up @@ -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');
}
} );
Expand Down
2 changes: 1 addition & 1 deletion src/resources/views/crud/inc/details_row_logic.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down
4 changes: 3 additions & 1 deletion src/resources/views/crud/inc/filters_navbar.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions src/resources/views/crud/list.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down