From 03255a78c2147892bd975ef4ca4deb84c2fdf509 Mon Sep 17 00:00:00 2001
From: Allan Jardine <allan@datatables.net>
Date: Thu, 8 Jun 2023 13:07:32 +0100
Subject: [PATCH] Update: Details view clickable target styling updated to be a
 simple 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

---
 css/responsive.dataTables.scss | 90 ++++++++++++++++------------------
 js/dataTables.responsive.js    |  8 +--
 2 files changed, 45 insertions(+), 53 deletions(-)

diff --git a/css/responsive.dataTables.scss b/css/responsive.dataTables.scss
index 3850b81..dc77f56 100644
--- a/css/responsive.dataTables.scss
+++ b/css/responsive.dataTables.scss
@@ -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: "▼";
 }
 
 
@@ -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;
 			}
@@ -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;
 		}
 	}
 
@@ -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;
 			}
@@ -156,6 +122,7 @@ table.dataTable {
 				}
 
 				&:last-child {
+					padding-bottom: 0;
 					border-bottom: none;
 				}
 			}
@@ -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;
@@ -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 {
@@ -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 {
@@ -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);
+		}
+	}
+}
diff --git a/js/dataTables.responsive.js b/js/dataTables.responsive.js
index 308ee31..d479aed 100644
--- a/js/dataTables.responsive.js
+++ b/js/dataTables.responsive.js
@@ -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] );
 		};
 
@@ -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;
 			}
@@ -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;
 		}
@@ -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();
 				};
@@ -1230,6 +1228,8 @@ Responsive.display = {
 					)
 					.appendTo( 'body' );
 
+				$(row.node()).addClass( 'parent' );
+
 				$(document).on( 'keyup.dtr', function (e) {
 					if ( e.keyCode === 27 ) {
 						e.stopPropagation();