[ticket/11552] Responsive member list

Responsive member list and better responsive tables

PHPBB3-11552

phpBB/styles/prosilver/template/forum_fn.js

@@ -533,6 +533,72 @@ function insert_single_user(formId, user)
 			$(window).resize(check);
 		});
 
+		// Responsive tables
+		$('table.table1').not('.not-responsive').each(function() {
+			var $this = $(this),
+				th = $this.find('thead > tr > th'),
+				columns = th.length,
+				headers = [],
+				totalHeaders = 0,
+				i, headersLength;
+
+			// Find each header
+			th.each(function() {
+				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 ++;
+			});
+			
+			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;
+				});
+			});
+		});
+
 		// Responsive link lists
 		$('.linklist:not(.navlinks, .skip-responsive)').each(function() {
 			var $this = $(this),

phpBB/styles/prosilver/template/mcp_front.html

@@ -147,7 +147,7 @@
 
 		<h3>{L_LATEST_LOGS}</h3>
 
-		<table class="table1 responsive mcp-logs" cellspacing="0">
+		<table class="table1" cellspacing="0">
 		<thead>
 		<tr>
 			<th class="name">{L_ACTION}</th>

phpBB/styles/prosilver/template/mcp_logs.html

@@ -21,7 +21,7 @@
 		</li>
 	</ul>
 
-	<table cellspacing="1" class="table1 responsive mcp-logs-full">
+	<table cellspacing="1" class="table1">
 	<thead>
 	<tr>
 		<th>{L_USERNAME}</th>

phpBB/styles/prosilver/template/mcp_warn_front.html

@@ -33,7 +33,7 @@
 	<h3>{L_MOST_WARNINGS}</h3>
 
 	<!-- IF .highest -->
-		<table class="table1 responsive mcp-warnings" cellspacing="0">
+		<table class="table1" cellspacing="0">
 		<thead>
 			<tr>
 				<th class="name">{L_USERNAME}</th>
@@ -67,7 +67,7 @@
 	<h3>{L_LATEST_WARNINGS}</h3>
 
 	<!-- IF .latest -->
-		<table class="table1 responsive mcp-warnings" cellspacing="0">
+		<table class="table1" cellspacing="0">
 		<thead>
 			<tr>
 				<th class="name">{L_USERNAME}</th>

phpBB/styles/prosilver/template/mcp_warn_list.html

@@ -21,7 +21,7 @@
 			</li>
 		</ul>
 		
-		<table class="table1 responsive mcp-warnings" cellspacing="0">
+		<table class="table1" cellspacing="0">
 		<thead>
 			<tr>
 				<th class="name">{L_USERNAME}</th>

phpBB/styles/prosilver/template/memberlist_body.html

@@ -28,7 +28,7 @@
 		<div class="panel">
 			<div class="inner">
 
-			<ul class="linklist">
+			<ul class="linklist wrap">
 				<li>
 				<!-- IF U_FIND_MEMBER and not S_SEARCH_USER --><a href="{U_FIND_MEMBER}" id="member_search" data-alt-text="{LA_HIDE_MEMBER_SEARCH}">{L_FIND_USERNAME}</a> &bull; <!-- ELSEIF S_SEARCH_USER and U_HIDE_FIND_MEMBER and not S_IN_SEARCH_POPUP --><a href="{U_HIDE_FIND_MEMBER}" id="member_search" data-alt-text="{LA_FIND_USERNAME}">{L_HIDE_MEMBER_SEARCH}</a> &bull; <!-- ENDIF -->
 				<strong style="font-size: 0.95em;">
@@ -58,7 +58,7 @@
 		<table class="table1" cellspacing="1" id="memberlist">
 		<thead>
 		<tr>
-			<th class="name"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th>
+			<th class="name" data-dfn="{L_RANK}, <!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF -->"><span class="rank-img"><a href="{U_SORT_RANK}">{L_RANK}</a></span><a href="{U_SORT_USERNAME}"><!-- IF S_SHOW_GROUP and .memberrow -->{L_GROUP_LEADER}<!-- ELSE -->{L_USERNAME}<!-- ENDIF --></a></th>
 			<th class="posts"><a href="{U_SORT_POSTS}#memberlist">{L_POSTS}</a></th>
 			<th class="info"><a href="{U_SORT_WEBSITE}#memberlist">{L_WEBSITE}</a>{L_COMMA_SEPARATOR}<a href="{U_SORT_LOCATION}">{L_LOCATION}</a></th>
 			<th class="joined"><a href="{U_SORT_JOINED}#memberlist">{L_JOINED}</a></th>

phpBB/styles/prosilver/template/search_body.html

@@ -105,7 +105,7 @@
 	<!-- BEGIN recentsearch -->
 		<tr class="<!-- IF recentsearch.S_ROW_COUNT is even -->bg1<!-- ELSE -->bg2<!-- ENDIF -->">
 			<td><a href="{recentsearch.U_KEYWORDS}">{recentsearch.KEYWORDS}</a></td>
-			<td class="active"><span>&nbsp;{recentsearch.TIME}</span></td>
+			<td class="active">{recentsearch.TIME}</td>
 		</tr>
 	<!-- BEGINELSE -->
 		<tr class="bg1">

phpBB/styles/prosilver/theme/common.css

@@ -435,6 +435,10 @@ ul.responsive-popup li {
 	text-align: left;
 }
 
+.wrap ul.responsive-popup li {
+	white-space: normal;
+}
+
 ul.responsive-popup li:before, ul.responsive-popup li:after {
 	display: none !important;
 }
@@ -502,7 +506,7 @@ table.table1 tbody th {
 
 /* Specific column styles */
 table.table1 .name		{ text-align: left; }
-table.table1 .posts		{ text-align: center !important; width: 7%; }
+table.table1 .posts		{ text-align: center; width: 7%; }
 table.table1 .joined	{ text-align: left; width: 15%; }
 table.table1 .active	{ text-align: left; width: 15%; }
 table.table1 .mark		{ text-align: center; width: 7%; }

phpBB/styles/prosilver/theme/responsive.css

@@ -232,72 +232,50 @@ ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn {
 
 /* Responsive tables
 ----------------------------------------*/
-table.responsive, table.responsive thead, table.responsive tbody, table.responsive tr, table.responsive th, table.responsive td {
+table.responsive, table.responsive tbody, table.responsive tr, table.responsive td {
-	display: block;
-	width: auto;
-	-moz-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-table.responsive thead {
-	display: none;
-}
-
-table.responsive th {
-	display: none;
-	border-bottom-width: 0 !important;
-}
-
-table.mcp-warnings thead {
 	display: block;
 }
 
-table.mcp-warnings th:nth-child(1),
+table.responsive thead, table.responsive th {
-table.mcp-warnings th:nth-child(3) {
+	display: none;
-	display: inline;
 }
 
-table.mcp-warnings th:nth-child(1):after {
+table.responsive.show-header thead, table.responsive.show-header th:first-child {
-	content: ',';
+	display: block;
+	width: auto !important;
+	text-align: left !important;
 }
 
 table.responsive tr {
-	overflow: hidden;
+	margin: 2px 0;
-	margin: 5px 0;
 }
 
-table.mcp-logs td:nth-child(2),
+table.responsive td {
-table.mcp-warnings td:nth-child(2n + 1) {
+	width: auto !important;
-	width: 50%;
+	text-align: left !important;
-	float: left;
+	padding: 4px;
 }
 
-table.mcp-logs td:nth-child(3),
+table.responsive td.empty {
-table.mcp-warnings td:nth-child(2n) {
+	display: none !important;
-	margin-left: 50%;
-	text-align: right;
 }
 
-table.mcp-logs td:nth-child(4), table.mcp-logs td:nth-child(5),
+table.responsive td > dfn {
-table.mcp-logs-full td:nth-child(1), table.mcp-logs-full td:nth-child(2) {
+	display: inline-block !important;
-	width: 33%;
-	float: left;
 }
 
-table.mcp-logs td:nth-child(4), 
+table.responsive td > dfn:after {
-table.mcp-logs-full td:nth-child(4) {
+	content: ':';
-	clear: left;
+	padding-right: 5px;
 }
 
-table.mcp-logs td:nth-child(5),
+table.responsive span.rank-img {
-table.mcp-logs-full td:nth-child(2) {
+	float: none;
-	text-align: center;
+	padding-right: 5px;
 }
 
-table.mcp-logs td:nth-child(6),
+table.responsive#memberlist td:first-child input[type="checkbox"] {
-table.mcp-logs-full td:nth-child(3) {
+	float: right;
-	margin-left: 66%;
-	text-align: right;
 }
 
 /* Forms