Skip to content

Commit

Permalink
Update: Details view clickable target styling updated to be a simple …
Browse files Browse the repository at this point in the history 
…arrow

Update: `parent` class it automatically added by Responsive now, when viewing a row's details. This allows styling to be performed on the row for modal view as well
New: Dark mode support for DataTables and Bootstrap (5.3+) styling
  • Loading branch information
@AllanJard
AllanJard committed Jun 8, 2023
1 parent 80db80b commit 03255a7
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 53 deletions.
90 changes: 41 additions & 49 deletions css/responsive.dataTables.scss
View file
Expand Up @@ -14,29 +14,16 @@ $close-button-background: #d33333 !default;
// Mixins
//
@mixin control() {
display: block;
position: absolute;
color: $control-button-color;
border: 0.15em solid white;
border-radius: 1em;
box-shadow: 0 0 0.2em #444;
box-sizing: content-box;
text-align: center;
text-indent: 0 !important;

// Use Courier New because it is common and consistent
font-family: 'Courier New', Courier, monospace;
line-height: 1em;
display: inline-block;
color: rgba(0, 0, 0, 0.5);
}

@mixin control-open() {
content: '+';
background-color: $open-button-background;
content: "►";
}

@mixin control-close() {
content: '-';
background-color: $close-button-background;
content: "▼";
}


Expand All @@ -60,16 +47,11 @@ table.dataTable {

> tr > td.dtr-control,
> tr > th.dtr-control {
position: relative;
padding-left: 30px;
cursor: pointer;

&:before {
top: 50%;
left: 5px;
height: $control-button-size;
width: $control-button-size;
margin-top: -$control-button-top;
margin-right: 0.5em;

@include control;
@include control-open;
}
Expand All @@ -87,16 +69,7 @@ table.dataTable {
&.dtr-inline.collapsed.compact > tbody {
> tr > td.dtr-control,
> tr > th.dtr-control {
padding-left: 27px;

&:before {
left: 4px;
height: 14px;
width: 14px;
border-radius: 14px;
line-height: 14px;
text-indent: 3px;
}
padding-left: 0.333em;
}
}

Expand All @@ -107,16 +80,9 @@ table.dataTable {
> tr > th.dtr-control,
> tr > td.control,
> tr > th.control {
position: relative;
cursor: pointer;

&:before {
top: 50%;
left: 50%;
height: 0.8em;
width: 0.8em;
margin-top: -0.5em;
margin-left: -0.5em;
@include control;
@include control-open;
}
Expand Down Expand Up @@ -156,6 +122,7 @@ table.dataTable {
}

&:last-child {
padding-bottom: 0;
border-bottom: none;
}
}
Expand Down Expand Up @@ -190,7 +157,8 @@ div.dtr-modal {
bottom: 0;
right: 0;
width: 50%;
height: 50%;
height: fit-content;
max-height: 75%;
overflow: auto;
margin: auto;
z-index: 102;
Expand All @@ -203,7 +171,11 @@ div.dtr-modal {

div.dtr-modal-content {
position: relative;
padding: 1em;
padding: 2.5em;

h2 {
margin-top: 0;
}
}

div.dtr-modal-close {
Expand All @@ -212,16 +184,10 @@ div.dtr-modal {
right: 6px;
width: 22px;
height: 22px;
border: 1px solid #eaeaea;
background-color: #f9f9f9;
text-align: center;
border-radius: 3px;
cursor: pointer;
z-index: 12;

&:hover {
background-color: #eaeaea;
}
}

div.dtr-modal-background {
Expand All @@ -242,3 +208,29 @@ div.dtr-modal {
width: 95%;
}
}


html.dark {
table.dataTable > tbody {
> tr > td.dtr-control {
&:before {
color: rgba(255, 255, 255, 0.5) !important;
}
}

> tr.child {
ul.dtr-details {
> li {
border-bottom-color: rgb(64, 67, 70);
}
}
}
}

div.dtr-modal {
div.dtr-modal-display {
background-color: rgb(33, 37, 41);
border: 1px solid rgba(255, 255, 255, 0.15);
}
}
}
8 changes: 4 additions & 4 deletions js/dataTables.responsive.js
View file
Expand Up @@ -660,6 +660,7 @@ $.extend( Responsive.prototype, {
var dt = this.s.dt;
var details = this.c.details;
var event = function (res) {
$(row.node()).toggleClass('parent', res !== false);
$(dt.table().node()).triggerHandler( 'responsive-display.dt', [dt, row, res, update] );
};

Expand Down Expand Up @@ -1167,13 +1168,11 @@ Responsive.display = {
else {
if ( ! row.child.isShown() ) {
row.child( render(), 'child' ).show();
$( row.node() ).addClass( 'parent' );

return true;
}
else {
row.child( false );
$( row.node() ).removeClass( 'parent' );

return false;
}
Expand All @@ -1184,14 +1183,12 @@ Responsive.display = {
if ( (! update && row.child.isShown()) || ! row.responsive.hasHidden() ) {
// User interaction and the row is show, or nothing to show
row.child( false );
$( row.node() ).removeClass( 'parent' );

return false;
}
else {
// Display
row.child( render(), 'child' ).show();
$( row.node() ).addClass( 'parent' );

return true;
}
Expand All @@ -1207,6 +1204,7 @@ Responsive.display = {
var close = function () {
modal.remove(); // will tidy events for us
$(document).off( 'keypress.dtr' );
$(row.node()).removeClass( 'parent' );

closeCallback();
};
Expand All @@ -1230,6 +1228,8 @@ Responsive.display = {
)
.appendTo( 'body' );

$(row.node()).addClass( 'parent' );

$(document).on( 'keyup.dtr', function (e) {
if ( e.keyCode === 27 ) {
e.stopPropagation();
Expand Down

4 comments on commit 03255a7

@chucklu
Copy link

@chucklu chucklu commented on 03255a7 Nov 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any reason that we change the control-open icon from + to ▶?

@AllanJard
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes two reasons:

  1. More consistent renderer between browsers - the plus icon used before was never pixel perfect in any browser
  2. I like the simplicity of it

If you don't like it, you are welcome to override the CSS and use whatever custom styling you like.

@chucklu
Copy link

@chucklu chucklu commented on 03255a7 Nov 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AllanJard Thanks for the quick response, I am not sure how to replace back the + icon? As there are lots of changes in this commit

I expected to override control-open and control-open class to change the the icon back, am I right?

I also tried search the icon ▶ in source code via vs code, and I find there are some hard-coded code with the icon ▶?

C:\workspace\GitHub\DataTables\Responsive\test\option\responsive.details.target.js
20,49: expect(el.getPropertyValue('content')).toBe('"▶"');
43,49: expect(el.getPropertyValue('content')).toBe('"▶"');
C:\workspace\GitHub\DataTables\Responsive\test\option\responsive.details.type.js
15,49: expect(el.getPropertyValue('content')).toBe('"▶"');
28,49: expect(el.getPropertyValue('content')).toBe('"▶"');

Will it be a problem if I just override the css class only?

@AllanJard
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those are just the tests. If you have the CSS file locally, you can replace the ▶ with +.

If you don't have it locally, override with:

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  content: '+';
}

Similar for the down arrow.

Please sign in to comment.