[ticket/11957] Responsive ACP tables

PHPBB3-11957

phpBB/adm/style/acp_main.html

@@ -78,7 +78,7 @@
 
 	<!-- EVENT acp_main_notice_after -->
 
-	<table cellspacing="1">
+	<table cellspacing="1" class="two-columns no-header" data-no-responsive-header="true">
 		<caption>{L_FORUM_STATS}</caption>
 		<col class="col1" /><col class="col2" /><col class="col1" /><col class="col2" />
 	<thead>

phpBB/adm/style/admin.css

@@ -754,6 +754,104 @@ td.name {
 	color: #BC2A4D;
 }
 
+@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
+{
+	table.responsive, table.responsive tbody, table.responsive tr, table.responsive td {
+		display: block;
+	}
+
+	table.responsive thead, table.responsive th, table.responsive colgroup {
+		display: none;
+	}
+
+	table.responsive.show-header thead, table.responsive.show-header th:first-child, table.responsive caption {
+		display: block;
+		width: auto !important;
+		text-align: left !important;
+		margin: 0;
+	}
+
+	table.responsive {
+		background: transparent none;
+		border-width: 0;
+	}
+
+	table.responsive caption {
+		padding: 3px 4px;
+		color: #FFFFFF;
+		background: #70AED3 url("../images/gradient2b.gif") bottom left repeat-x;
+		border-top: 1px solid #6DACD2;
+		border-bottom: 1px solid #327AA5;
+		text-align: left;
+		font-size: 0.75em;
+		font-weight: bold;
+		text-transform: uppercase;
+	}
+
+	table.responsive.show-header th:first-child span.rank-img, table.responsive.no-caption caption, table.responsive.no-header thead {
+		display: none;
+	}
+
+	table.responsive tr {
+		margin: 2px 0;
+		border: 1px solid #CCCFD3;
+		background-color: #FFFFFF;
+		padding: 1px 1px 0;
+		overflow: hidden;
+	}
+
+	table.responsive tr.row1 td { background-color: #F9F9F9; }
+	table.responsive tr.row2 td { background-color: #DCEBFE; }
+	table.responsive tr.row3 td { background-color: #DBDFE2; }
+	table.responsive tr.row4 td { background-color: #E4E8EB; }
+	table.responsive tr.col1 td { background-color: #DCEBFE; }
+	table.responsive tr.col2 td { background-color: #F9F9F9; }
+	table.responsive tr.row1a td { background-color: #F9F9F9; }
+	table.responsive tr.row1b td { background-color: #F6F6F6; }
+	table.responsive tr.row2a td { background-color: #E7EEF4; }
+	table.responsive tr.row2b td { background-color: #E3EBF2; }
+
+	table.responsive td {
+		width: auto !important;
+		text-align: left !important;
+		padding: 4px;
+		margin-bottom: 1px;
+	}
+
+	table.responsive td.empty {
+		display: none !important;
+	}
+
+	table.responsive td > dfn {
+		display: inline-block !important;
+	}
+
+	table.responsive td > dfn:after {
+		content: ':';
+		padding-right: 5px;
+	}
+
+	table.responsive.two-columns td {
+		width: 50% !important;
+		float: left;
+		-moz-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
+	table.responsive.two-columns td:nth-child(2n+1) {
+		clear: left;
+	}
+
+	table.responsive span.rank-img {
+		float: none;
+		padding-right: 5px;
+	}
+
+	table.responsive#memberlist td:first-child input[type="checkbox"] {
+		float: right;
+	}
+}
+
 /* General form styles
 ----------------------------------------*/
 fieldset {

phpBB/adm/style/admin.js

@@ -36,6 +36,103 @@ function parse_document(container)
 			blocks.filter(':first').addClass('active');
 		}
 	});
+
+	/**
+	* Responsive tables
+	*/
+	container.find('table').not('.not-responsive').each(function() {
+		var $this = $(this),
+			th = $this.find('thead > tr > th'),
+			columns = th.length,
+			headers = [],
+			totalHeaders = 0,
+			i, headersLength;
+
+		// Find columns
+		$this.find('colgroup:first').children().each(function(i) {
+			var column = $(this);
+			if (column.hasClass('col1')) {
+				$this.find('td:nth-child(' + (i + 1) + ')').addClass('col1');
+			}
+			if (column.hasClass('col2')) {
+				$this.find('td:nth-child(' + (i + 1) + ')').addClass('col2');
+			}
+		});
+
+		// Find each header
+		if (!$this.data('no-responsive-header'))
+		{
+			th.each(function(column) {
+				var cell = $(this),
+					colspan = parseInt(cell.attr('colspan')),
+					dfn = cell.attr('data-dfn'),
+					text = dfn ? dfn : cell.text();
+
+				colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan;
+
+				for (i=0; i<colspan; i++) {
+					headers.push(text);
+				}
+				totalHeaders ++;
+
+				if (dfn && !column) {
+					$this.addClass('show-header');
+				}
+			});
+		}
+		
+		headersLength = headers.length;
+
+		// Add header text to each cell as <dfn>
+		$this.addClass('responsive');
+
+		if (totalHeaders < 2) {
+			$this.addClass('show-header');
+			return;
+		}
+
+		$this.find('tbody > tr').each(function() {
+			var row = $(this),
+				cells = row.children('td'),
+				column = 0;
+
+			if (cells.length == 1) {
+				row.addClass('big-column');
+				return;
+			}
+
+			cells.each(function() {
+				var cell = $(this),
+					colspan = parseInt(cell.attr('colspan')),
+					text = cell.text().trim();
+
+				if (headersLength <= column) {
+					return;
+				}
+
+				if (text.length && text !== '-') {
+					cell.prepend('<dfn style="display: none;">' + headers[column] + '</dfn>');
+				}
+				else {
+					cell.addClass('empty');
+				}
+
+				colspan = isNaN(colspan) || colspan < 1 ? 1 : colspan;
+				column += colspan;
+			});
+		});
+	});
+
+	/**
+	* Hide empty responsive tables
+	*/
+	container.find('table.responsive > tbody').each(function() {
+		var items = $(this).children('tr');
+		if (items.length == 0)
+		{
+			$(this).parent('table:first').addClass('responsive-hide');
+		}
+	});
 }
 
 /**