Reworked the memberlist to use classes in responsive-mode

Signed-off-by: emanuele <emanuele45@gmail.com>
emanuele45 · Mar 15, 2014 · 59e10ff · 59e10ff
1 parent 0dca159
commit 59e10ff
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 29 deletions.
diff --git a/sources/controllers/Memberlist.controller.php b/sources/controllers/Memberlist.controller.php
@@ -71,29 +71,31 @@ public function action_index()
 		$context['columns'] = array(
 			'online' => array(
 				'label' => $txt['status'],
-				'width' => 60,
+				'class' => 'status',
 				'sort' => array(
 					'down' => allowedTo('moderate_forum') ? 'IFNULL(lo.log_time, 1) ASC, real_name ASC' : 'CASE WHEN mem.show_online THEN IFNULL(lo.log_time, 1) ELSE 1 END ASC, real_name ASC',
 					'up' => allowedTo('moderate_forum') ? 'IFNULL(lo.log_time, 1) DESC, real_name DESC' : 'CASE WHEN mem.show_online THEN IFNULL(lo.log_time, 1) ELSE 1 END DESC, real_name DESC'
 				),
 			),
 			'real_name' => array(
 				'label' => $txt['username'],
-				'class' => "lefttext",
+				'class' => 'lefttext username',
 				'sort' => array(
 					'down' => 'mem.real_name DESC',
 					'up' => 'mem.real_name ASC'
 				),
 			),
 			'email_address' => array(
 				'label' => $txt['email'],
+				'class' => 'email',
 				'sort' => array(
 					'down' => allowedTo('moderate_forum') ? 'mem.email_address DESC' : 'mem.hide_email DESC, mem.email_address DESC',
 					'up' => allowedTo('moderate_forum') ? 'mem.email_address ASC' : 'mem.hide_email ASC, mem.email_address ASC'
 				),
 			),
 			'website_url' => array(
 				'label' => $txt['website'],
+				'class' => 'website',
 				'link_with' => 'website',
 				'sort' => array(
 					'down' => 'LENGTH(mem.website_url) > 0 ASC, IFNULL(mem.website_url, 1=1) DESC, mem.website_url DESC',
@@ -102,22 +104,23 @@ public function action_index()
 			),
 			'id_group' => array(
 				'label' => $txt['position'],
-				'class' => "lefttext",
+				'class' => 'lefttext group',
 				'sort' => array(
 					'down' => 'IFNULL(mg.group_name, 1=1) DESC, mg.group_name DESC',
 					'up' => 'IFNULL(mg.group_name, 1=1) ASC, mg.group_name ASC'
 				),
 			),
 			'date_registered' => array(
 				'label' => $txt['date_registered'],
-				'class' => "lefttext",
+				'class' => 'lefttext date_registered',
 				'sort' => array(
 					'down' => 'mem.date_registered DESC',
 					'up' => 'mem.date_registered ASC'
 				),
 			),
 			'posts' => array(
 				'label' => $txt['posts'],
+				'class' => 'posts',
 				'default_sort_rev' => true,
 				'sort' => array(
 					'down' => 'mem.posts DESC',
@@ -257,6 +260,8 @@ public function action_mlall()
 
 			$context['columns'][$col]['link'] = '<a href="' . $context['columns'][$col]['href'] . '" rel="nofollow">' . $context['columns'][$col]['label'] . '</a>';
 			$context['columns'][$col]['selected'] = $_REQUEST['sort'] == $col;
+			if ($context['columns'][$col]['selected'])
+				$context['columns'][$col]['class'] .= ' selected';
 		}
 
 		// Are we sorting the results

diff --git a/sources/subs/Memberlist.subs.php b/sources/subs/Memberlist.subs.php
@@ -57,6 +57,7 @@ function ml_CustomProfile()
 		// Load the standard column info
 		$context['custom_profile_fields']['columns'][$curField] = array(
 			'label' => $row['field_name'],
+			'class' => $row['field_name'],
 			'type' => $row['field_type'],
 			'bbc' => !empty($row['bbc']),
 			'enclose' => $row['enclose'],

diff --git a/themes/default/Memberlist.template.php b/themes/default/Memberlist.template.php
@@ -85,13 +85,13 @@ function template_memberlist()
 		// This is a selected column, so underline it or some such.
 		if ($column['selected'])
 			echo '
-					<div ', isset($column['class']) ? ' class="' . $column['class'] . '"' : '', ' style="width: auto; white-space: nowrap">
+					<div class="' . $column['class'] . '">
 						<a href="' . $column['href'] . '" rel="nofollow">' . $column['label'] . '</a><img class="sort" src="' . $settings['images_url'] . '/sort_' . $context['sort_direction'] . '.png" alt="" />
 					</div>';
 		// This is just some column... show the link and be done with it.
 		else
 			echo '
-					<div ', isset($column['class']) ? ' class="' . $column['class'] . '"' : '', isset($column['width']) ? ' style="width:' . $column['width'] . '"' : '', '>
+					<div class="' . $column['class'] . '">
 						', $column['link'], '
 					</div>';
 	}
@@ -120,29 +120,31 @@ function template_memberlist()
 			{
 				if (isset($member[$column]))
 				{
+					echo '
+					<div class="' . $values['class'] . '">';
+
 					if ($column == 'online')
 					{
 						echo '
-					<div>
-						', $context['can_send_pm'] ? '<a href="' . $member['online']['href'] . '" title="' . $member['online']['text'] . '">' : '', $settings['use_image_buttons'] ? '<img src="' . $member['online']['image_href'] . '" alt="' . $member['online']['text'] . '" class="centericon" />' : $member['online']['label'], $context['can_send_pm'] ? '</a>' : '', '
-					</div>';
-						continue;
+						', $context['can_send_pm'] ? '<a href="' . $member['online']['href'] . '" title="' . $member['online']['text'] . '">' : '', $settings['use_image_buttons'] ? '<img src="' . $member['online']['image_href'] . '" alt="' . $member['online']['text'] . '" class="centericon" />' : $member['online']['label'], $context['can_send_pm'] ? '</a>' : '';
 					}
 					elseif ($column == 'email_address')
 					{
 						echo '
-					<div>', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><img src="' . $settings['images_url'] . '/profile/email_sm.png" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></a>', '</div>';
-						continue;
+					', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><img src="' . $settings['images_url'] . '/profile/email_sm.png" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></a>';
 					}
 					else
 						echo '
-					<div>', $member[$column], '</div>';
+					', $member[$column];
+
+					echo '
+					</div>';
 				}
 				// Any custom fields on display?
 				elseif (!empty($context['custom_profile_fields']['columns']) && isset($context['custom_profile_fields']['columns'][$column]))
 				{
 					echo '
-					<div>', $member['options'][substr($column, 5)], '</div>';
+					<div class="' . $values['class'] . '">', $member['options'][substr($column, 5)], '</div>';
 				}
 			}
 

diff --git a/themes/default/css/_besocial/index_besocial.css b/themes/default/css/_besocial/index_besocial.css
@@ -37,6 +37,7 @@
 /*
 /*		$HELP................Help pages, help icons and pop-ups, tooltips.
 /*		$SEARCH..............Search pages, including memberlist search.
+/*		$MEMBERLIST..........The memberlist table.
 /*		$LOGIN...............Login and registration, maintenance mode.
 /*
 /*		$ERRORS..............Error messages.
@@ -1346,7 +1347,7 @@ span.views_text {
 		background-color: #f6f6f6;
 		margin-bottom: 5px !important;
 	}
-	.mlist li div:nth-child(n+5) {
+	.mlist li div.posts {
 		border-right: 1px solid #ccc;
 	}
 }
@@ -1506,12 +1507,9 @@ span.views_text {
 	#search_form * {
 		float: none;
 	}
-	.mlist li div:nth-child(n+4) {
-		border-right: 1px solid #ccc;
-	}
 }
 @media screen and (max-width: 30em) {
-	.mlist li div:nth-child(n+3) {
+	.mlist li .group {
 		border-right: 1px solid #ccc;
 	}
 }
diff --git a/themes/default/css/_light/index_light.css b/themes/default/css/_light/index_light.css
@@ -33,6 +33,7 @@
 /*
 /*		$HELP................Help pages, help icons and pop-ups, tooltips.
 /*		$SEARCH..............Search pages, including memberlist search.
+/*		$MEMBERLIST..........The memberlist table.
 /*		$LOGIN...............Login and registration, maintenance mode.
 /*
 /*		$ERRORS..............Error messages.
@@ -1815,7 +1816,7 @@ div.bbc_footnotes .meaction{
 	.listlevel1#button_profile .linklevel1 {
 		min-width: 0.5em;
 	}
-	.mlist li div:nth-child(n+5) {
+	.mlist li div.posts {
 		border-right: 1px solid #ccc;
 	}
 }
@@ -1884,12 +1885,9 @@ div.bbc_footnotes .meaction{
 	.subsections:hover .linklevel1:after {
 		content: "";
 	}
-	.mlist li div:nth-child(n+4) {
-		border-right: 1px solid #ccc;
-	}
 }
 @media screen and (max-width: 30em) {
-	.mlist li div:nth-child(n+3) {
+	.mlist li .group {
 		border-right: 1px solid #ccc;
 	}
 }
diff --git a/themes/default/css/index.css b/themes/default/css/index.css
@@ -19,7 +19,7 @@
 /*		$BUTTONS.............Most button strips.
 /*		$PAGELINKS...........Page navigation links.
 /*
-/*		$TABLES..............Generic tables (memberlist, error log, etc.).
+/*		$TABLES..............Generic tables (error log, etc.).
 /*		$SETTINGS............Generic lists for settings pages.
 /*		$BOARDS..............Board index, sub-boards, and message index.
 /*
@@ -34,6 +34,7 @@
 /*
 /*		$HELP................Help pages, help icons and pop-ups, tooltips.
 /*		$SEARCH..............Search pages, including memberlist search.
+/*		$MEMBERLIST..........The memberlist table.
 /*		$LOGIN...............Login and registration, maintenance mode.
 /*
 /*		$ERRORS..............Error messages.
@@ -3749,6 +3750,13 @@ a.help .icon {
 #memberlist>.content {
 	padding: 12px 0;
 }
+#memberlist .status {
+	width: 60px;
+}
+#memberlist .selected {
+	width: auto;
+	white-space: nowrap
+}
 #memberlist_search, #memberlist>.content>.submitbutton {
 	margin: 0 auto;
 	width: 32em;
@@ -4185,15 +4193,17 @@ a.help .icon {
 	#list_mentions .listaction {
 		display: none;
 	}
-	.mlist li div:nth-child(n+6) {
+	.mlist li div:nth-child(n+6), .mlist li .email {
 		display: none;
 	}
+	.mlist li div.posts {
+		display: table-cell;
+	}
 	.sticky_row .topic_info:before, .locked_row .topic_info:before, .locked_row.sticky_row .topic_info:before {
 		margin-right: -18px;
 	}
 	.topic_name, .topic_starter {
 		margin-right: 18px;
-	}
 }
 /* This one does 540 and smaller screens at default font size. */
 @media screen and (max-width: 33.750em) {
@@ -4552,7 +4562,7 @@ a.help .icon {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
-	.mlist li div:nth-child(n+5) {
+	.mlist li .website, .mlist li .date_registered {
 		display: none;
 	}
 }
@@ -4564,7 +4574,7 @@ a.help .icon {
 	.quickbuttons .modified {
 		display: none;
 	}
-	.mlist li div:nth-child(n+4) {
+	.mlist li div.posts {
 		display: none;
 	}
 }