From d2d4438db50e54b9ad61731b5d92d01bd057309c Mon Sep 17 00:00:00 2001
From: Vjacheslav Trushkin <cyberalien@gmail.com>
Date: Tue, 22 Oct 2013 00:11:48 +0300
Subject: [PATCH] [ticket/11956] Adjustments to responsive topiclist lists

Changes behavior of topiclist lists on mobile devices.
Shows/hides certain elements in each row to present all
important information to visitor on mobile devices, such
as last post when viewing forum instead of first post.

Also fixes topiclist layout bug in drafts.html

PHPBB3-11956
---
 phpBB/styles/prosilver/template/drafts.html   |  3 +
 phpBB/styles/prosilver/template/forum_fn.js   | 76 +++++++++++++++++++
 .../prosilver/template/forumlist_body.html    | 10 +++
 .../styles/prosilver/template/mcp_forum.html  | 10 ++-
 .../styles/prosilver/template/mcp_front.html  |  6 +-
 .../styles/prosilver/template/mcp_queue.html  |  2 +-
 .../prosilver/template/mcp_reports.html       |  7 ++
 .../prosilver/template/ucp_attachments.html   |  2 +-
 .../prosilver/template/ucp_groups_manage.html |  2 +-
 .../template/ucp_main_bookmarks.html          | 10 ++-
 .../prosilver/template/ucp_main_drafts.html   |  4 +
 .../prosilver/template/ucp_main_front.html    |  9 ++-
 .../template/ucp_main_subscribed.html         | 21 ++++-
 .../prosilver/template/ucp_pm_viewfolder.html |  2 +-
 .../prosilver/template/viewforum_body.html    | 15 +++-
 phpBB/styles/prosilver/theme/responsive.css   | 28 ++-----
 16 files changed, 170 insertions(+), 37 deletions(-)

diff --git a/phpBB/styles/prosilver/template/drafts.html b/phpBB/styles/prosilver/template/drafts.html
index 7620f2374c..4b2e1bf0c6 100644
--- a/phpBB/styles/prosilver/template/drafts.html
+++ b/phpBB/styles/prosilver/template/drafts.html
@@ -32,6 +32,9 @@
 					<!-- IF not S_PRIVMSGS --><!-- IF draftrow.S_LINK_TOPIC -->{L_TOPIC}{L_COLON} <a href="{draftrow.U_VIEW}">{draftrow.TITLE}</a>
 					<!-- ELSEIF draftrow.S_LINK_FORUM -->{L_FORUM}{L_COLON} <a href="{draftrow.U_VIEW}">{draftrow.TITLE}</a>
 					<!-- ELSE -->{L_NO_TOPIC_FORUM}<!-- ENDIF --><!-- ENDIF -->
+					<div class="responsive-show" style="display: none;">
+						{L_SAVE_DATE}{L_COLON} <strong>{draftrow.DATE}</strong>
+					</div>
 				</div>
 			</dt>
 			<dd class="info"><span>{draftrow.DATE}</span></dd>
diff --git a/phpBB/styles/prosilver/template/forum_fn.js b/phpBB/styles/prosilver/template/forum_fn.js
index b71ff45a27..a425e9e1ad 100644
--- a/phpBB/styles/prosilver/template/forum_fn.js
+++ b/phpBB/styles/prosilver/template/forum_fn.js
@@ -536,6 +536,82 @@ function insert_single_user(formId, user)
 			$(window).resize(check);
 		});
 
+		// Responsive topic lists
+		$('.topiclist.responsive-show-all > li > dl').each(function() {
+			var $this = $(this),
+				block = $this.find('dt .responsive-show:last-child'),
+				first = true;
+
+			if (!block.length) {
+				$this.find('dt > .list-inner').append('<div class="responsive-show" style="display:none;" />');
+				block = $this.find('dt .responsive-show:last-child');
+			}
+			else {
+				first = (block.text().trim().length == 0);
+			}
+
+			$this.find('dd').not('.mark').each(function() {
+				var column = $(this),
+					children = column.children(),
+					html = column.html();
+
+				if (children.length == 1 && children.text() == column.text()) {
+					html = children.html();
+				}
+
+				block.append((first ? '' : '<br />') + html);
+
+				first = false;
+			});
+		});
+
+		$('.topiclist.responsive-show-columns').each(function() {
+			var list = $(this),
+				headers = [],
+				headersLength = 0;
+
+			list.prev('.topiclist').find('li.header dd').not('.mark').each(function() {
+				headers.push($(this).text());
+				headersLength ++;
+			});
+
+			if (!headersLength) {
+				return;
+			}
+
+			list.find('dl').each(function() {
+				var $this = $(this),
+					block = $this.find('dt .responsive-show:last-child'),
+					first = true;
+
+				if (!block.length) {
+					$this.find('dt > .list-inner').append('<div class="responsive-show" style="display:none;" />');
+					block = $this.find('dt .responsive-show:last-child');
+				}
+				else {
+					first = (block.text().trim().length == 0);
+				}
+
+				$this.find('dd').not('.mark').each(function(i) {
+					var column = $(this),
+						children = column.children(),
+						html = column.html();
+
+					if (children.length == 1 && children.text() == column.text()) {
+						html = children.html();
+					}
+
+					if (i < headersLength) {
+						html = headers[i] + ': <strong>' + html + '</strong>';
+					}
+
+					block.append((first ? '' : '<br />') + html);
+
+					first = false;
+				});
+			});
+		});
+
 		// Responsive tables
 		$('table.table1').not('.not-responsive').each(function() {
 			var $this = $(this),
diff --git a/phpBB/styles/prosilver/template/forumlist_body.html b/phpBB/styles/prosilver/template/forumlist_body.html
index 9fb6b3d951..f9019b4fe3 100644
--- a/phpBB/styles/prosilver/template/forumlist_body.html
+++ b/phpBB/styles/prosilver/template/forumlist_body.html
@@ -42,6 +42,16 @@
 								<a href="{forumrow.subforum.U_SUBFORUM}" class="subforum<!-- IF forumrow.subforum.S_UNREAD --> unread<!-- ELSE --> read<!-- ENDIF -->" title="<!-- IF forumrow.subforum.UNREAD -->{L_UNREAD_POSTS}<!-- ELSE -->{L_NO_UNREAD_POSTS}<!-- ENDIF -->">{forumrow.subforum.SUBFORUM_NAME}</a><!-- IF not forumrow.subforum.S_LAST_ROW -->,<!-- ENDIF -->
 							<!-- END subforum -->
 						<!-- ENDIF -->
+
+						<!-- IF not S_IS_BOT -->
+						<div class="responsive-show" style="display: none;">
+							<!-- IF forumrow.CLICKS -->
+								{L_REDIRECTS}{L_COLON} <strong>{forumrow.CLICKS}</strong>
+							<!-- ELSEIF not forumrow.S_IS_LINK and forumrow.TOPICS -->
+								{L_TOPICS}{L_COLON} <strong>{forumrow.TOPICS}</strong>
+							<!-- ENDIF -->
+						</div>
+						<!-- ENDIF -->
 					</div>
 				</dt>
 				<!-- IF forumrow.CLICKS -->
diff --git a/phpBB/styles/prosilver/template/mcp_forum.html b/phpBB/styles/prosilver/template/mcp_forum.html
index e5dcb94855..4090d979b2 100644
--- a/phpBB/styles/prosilver/template/mcp_forum.html
+++ b/phpBB/styles/prosilver/template/mcp_forum.html
@@ -63,7 +63,15 @@
 						</ul>
 					</div>
 					<!-- ENDIF -->
-					<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
+					<div class="responsive-hide">
+						<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
+						{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
+					</div>
+					<div class="responsive-show" style="display: none;">
+						<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
+						{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL} &laquo; {topicrow.LAST_POST_TIME}<br />
+						{L_REPLIES}{L_COLON} <strong>{topicrow.REPLIES}</strong>
+					</div>
 
 					</div>
 				</dt>
diff --git a/phpBB/styles/prosilver/template/mcp_front.html b/phpBB/styles/prosilver/template/mcp_front.html
index 402cfe029a..6826b0af52 100644
--- a/phpBB/styles/prosilver/template/mcp_front.html
+++ b/phpBB/styles/prosilver/template/mcp_front.html
@@ -21,7 +21,7 @@
 					</dl>
 				</li>
 			</ul>
-			<ul class="topiclist cplist missing-column">
+			<ul class="topiclist cplist missing-column responsive-show-all">
 
 			<!-- BEGIN unapproved -->
 			<li class="row<!-- IF unapproved.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
@@ -75,7 +75,7 @@
 					</dl>
 				</li>
 			</ul>
-			<ul class="topiclist cplist two-long-columns">
+			<ul class="topiclist cplist two-long-columns responsive-show-all">
 
 			<!-- BEGIN report -->
 			<li class="row<!-- IF report.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
@@ -116,7 +116,7 @@
 					</dl>
 				</li>
 			</ul>
-			<ul class="topiclist cplist two-long-columns">
+			<ul class="topiclist cplist two-long-columns responsive-show-all">
 
 			<!-- BEGIN pm_report -->
 			<li class="row<!-- IF pm_report.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
diff --git a/phpBB/styles/prosilver/template/mcp_queue.html b/phpBB/styles/prosilver/template/mcp_queue.html
index c2d39eff98..461d5982db 100644
--- a/phpBB/styles/prosilver/template/mcp_queue.html
+++ b/phpBB/styles/prosilver/template/mcp_queue.html
@@ -35,7 +35,7 @@
 				</dl>
 			</li>
 			</ul>
-			<ul class="topiclist cplist missing-column">
+			<ul class="topiclist cplist missing-column responsive-show-all">
 
 		<!-- BEGIN postrow -->
 
diff --git a/phpBB/styles/prosilver/template/mcp_reports.html b/phpBB/styles/prosilver/template/mcp_reports.html
index 902744fe25..ffa82d5e0e 100644
--- a/phpBB/styles/prosilver/template/mcp_reports.html
+++ b/phpBB/styles/prosilver/template/mcp_reports.html
@@ -48,6 +48,9 @@
 							<a href="{postrow.U_VIEW_DETAILS}" class="topictitle">{postrow.PM_SUBJECT}</a> {postrow.ATTACH_ICON_IMG}<br />
 							<span>{L_MESSAGE_BY_AUTHOR} {postrow.PM_AUTHOR_FULL} &raquo; {postrow.PM_TIME}</span><br />
 							<span>{L_MESSAGE_TO} {postrow.RECIPIENTS}</span>
+							<div class="responsive-show" style="display: none;">
+								{L_REPORTER}{L_COLON} {postrow.REPORTER_FULL} &laquo; {postrow.REPORT_TIME}
+							</div>
 						</div>
 					</dt>
 					<dd class="moderation">
@@ -58,6 +61,10 @@
 						<div class="list-inner">
 							<a href="{postrow.U_VIEW_DETAILS}" class="topictitle">{postrow.POST_SUBJECT}</a> {postrow.ATTACH_ICON_IMG}<br />
 							<span>{L_POSTED} {L_POST_BY_AUTHOR} {postrow.POST_AUTHOR_FULL} &raquo; {postrow.POST_TIME}</span>
+							<div class="responsive-show" style="display: none;">
+								{L_REPORTER}{L_COLON} {postrow.REPORTER_FULL} &laquo; {postrow.REPORT_TIME}<br />
+								<!-- IF postrow.U_VIEWFORUM -->{L_FORUM}{L_COLON} <a href="{postrow.U_VIEWFORUM}">{postrow.FORUM_NAME}</a><!-- ELSE -->{postrow.FORUM_NAME}<!-- ENDIF -->
+							</div>
 						</div>
 					</dt>
 					<dd class="moderation">
diff --git a/phpBB/styles/prosilver/template/ucp_attachments.html b/phpBB/styles/prosilver/template/ucp_attachments.html
index feb04278dc..ed39e80c12 100644
--- a/phpBB/styles/prosilver/template/ucp_attachments.html
+++ b/phpBB/styles/prosilver/template/ucp_attachments.html
@@ -31,7 +31,7 @@
 				</dl>
 			</li>
 		</ul>
-		<ul class="topiclist cplist">
+		<ul class="topiclist cplist responsive-show-columns">
 
 		<!-- BEGIN attachrow -->
 		<li class="row<!-- IF attachrow.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
diff --git a/phpBB/styles/prosilver/template/ucp_groups_manage.html b/phpBB/styles/prosilver/template/ucp_groups_manage.html
index a785d18082..3053330f61 100644
--- a/phpBB/styles/prosilver/template/ucp_groups_manage.html
+++ b/phpBB/styles/prosilver/template/ucp_groups_manage.html
@@ -214,7 +214,7 @@
 				</dl>
 			</li>
 		</ul>
-		<ul class="topiclist cplist two-long-columns">
+		<ul class="topiclist cplist two-long-columns responsive-show-all">
 
 		<!-- BEGIN leader -->
 		<li class="row<!-- IF attachrow.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
diff --git a/phpBB/styles/prosilver/template/ucp_main_bookmarks.html b/phpBB/styles/prosilver/template/ucp_main_bookmarks.html
index 017fadad77..477b06249e 100644
--- a/phpBB/styles/prosilver/template/ucp_main_bookmarks.html
+++ b/phpBB/styles/prosilver/template/ucp_main_bookmarks.html
@@ -54,7 +54,15 @@
 							</ul>
 						</div>
 						<!-- ENDIF -->
-						<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
+						<div class="responsive-hide">
+							<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
+							{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
+						</div>
+						<div class="responsive-show" style="display: none;">
+							<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
+							{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL} &laquo;
+							<a href="{topicrow.U_LAST_POST}">{topicrow.LAST_POST_TIME}</a>
+						</div>
 					</div>
 				</dt>
 				<dd class="lastpost"><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}
diff --git a/phpBB/styles/prosilver/template/ucp_main_drafts.html b/phpBB/styles/prosilver/template/ucp_main_drafts.html
index 723186e20c..52ad5b503b 100644
--- a/phpBB/styles/prosilver/template/ucp_main_drafts.html
+++ b/phpBB/styles/prosilver/template/ucp_main_drafts.html
@@ -45,6 +45,10 @@
 							<!-- ELSEIF draftrow.S_LINK_FORUM -->{L_FORUM}{L_COLON} <a href="{draftrow.U_VIEW}">{draftrow.TITLE}</a>
 							<!-- ELSEIF S_PRIVMSGS -->
 							<!-- ELSE -->{L_NO_TOPIC_FORUM}<!-- ENDIF -->
+							<div class="responsive-show" style="display: none;">
+								{L_SAVE_DATE}{L_COLON} <strong>{draftrow.DATE}</strong><br />
+								<!-- IF draftrow.U_INSERT --><a href="{draftrow.U_INSERT}">{L_LOAD_DRAFT}</a> &bull; <!-- ENDIF --><a href="{draftrow.U_VIEW_EDIT}">{L_VIEW_EDIT}</a>
+							</div>
 						</div>
 					</dt>
 					<dd class="info"><span>{draftrow.DATE}<br /><!-- IF draftrow.U_INSERT --><a href="{draftrow.U_INSERT}">{L_LOAD_DRAFT}</a> &bull; <!-- ENDIF --><a href="{draftrow.U_VIEW_EDIT}">{L_VIEW_EDIT}</a></span></dd>
diff --git a/phpBB/styles/prosilver/template/ucp_main_front.html b/phpBB/styles/prosilver/template/ucp_main_front.html
index 1e26e43772..fa3291cd6c 100644
--- a/phpBB/styles/prosilver/template/ucp_main_front.html
+++ b/phpBB/styles/prosilver/template/ucp_main_front.html
@@ -31,7 +31,14 @@
 							</ul>
 						</div>
 						<!-- ENDIF -->
-						<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
+						<div class="responsive-hide">
+							<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
+							{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
+						</div>
+						<div class="responsive-show" style="display: none;">
+							<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
+							{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL} &laquo; <a href="{topicrow.U_LAST_POST}">{topicrow.LAST_POST_TIME}</a>
+						</div>
 					</div>
 				</dt>
 				<dd class="lastpost"><span>{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}
diff --git a/phpBB/styles/prosilver/template/ucp_main_subscribed.html b/phpBB/styles/prosilver/template/ucp_main_subscribed.html
index 90fa76cefc..7344a4af1a 100755
--- a/phpBB/styles/prosilver/template/ucp_main_subscribed.html
+++ b/phpBB/styles/prosilver/template/ucp_main_subscribed.html
@@ -23,7 +23,17 @@
 	<!-- BEGIN forumrow -->
 		<li class="row<!-- IF forumrow.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF -->">
 			<dl class="icon {forumrow.FORUM_IMG_STYLE}">
-				<dt><div class="list-inner"><a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />{forumrow.FORUM_DESC}</div></dt>
+				<dt>
+					<div class="list-inner">
+						<a href="{forumrow.U_VIEWFORUM}" class="forumtitle">{forumrow.FORUM_NAME}</a><br />
+						{forumrow.FORUM_DESC}
+						<!-- IF forumrow.LAST_POST_TIME -->
+						<div class="responsive-show" style="display: none;">
+							{L_LAST_POST} {L_POST_BY_AUTHOR} {forumrow.LAST_POST_AUTHOR_FULL} &laquo; <a href="{topicrow.U_LAST_POST}">{forumrow.LAST_POST_TIME}</a>
+						</div>
+						<!-- ENDIF -->
+					</div>
+				</dt>
 				<dd class="lastpost"><!-- IF forumrow.LAST_POST_TIME --><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {forumrow.LAST_POST_AUTHOR_FULL}
 					<a href="{topicrow.U_LAST_POST}">{LAST_POST_IMG}</a> <br />{forumrow.LAST_POST_TIME}</span>
 					<!-- ELSE -->{L_NO_POSTS}<br />&nbsp;<!-- ENDIF -->
@@ -79,7 +89,14 @@
 							</ul>
 						</div>
 						<!-- ENDIF -->
-						<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
+						<div class="responsive-hide">
+							<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
+							{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
+						</div>
+						<div class="responsive-show" style="display: none;">
+							<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
+							{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL} &laquo; <a href="{topicrow.U_LAST_POST}">{topicrow.LAST_POST_TIME}</a>
+						</div>
 					</div>
 				</dt>
 				<dd class="lastpost"><span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL}
diff --git a/phpBB/styles/prosilver/template/ucp_pm_viewfolder.html b/phpBB/styles/prosilver/template/ucp_pm_viewfolder.html
index 9cbff64a6a..a1012689f0 100644
--- a/phpBB/styles/prosilver/template/ucp_pm_viewfolder.html
+++ b/phpBB/styles/prosilver/template/ucp_pm_viewfolder.html
@@ -53,7 +53,7 @@
 				</dl>
 			</li>
 		</ul>
-		<ul class="topiclist cplist pmlist <!-- IF S_SHOW_RECIPIENTS -->missing-column<!-- ELSE -->two-columns<!-- ENDIF -->">
+		<ul class="topiclist cplist pmlist responsive-show-all <!-- IF S_SHOW_RECIPIENTS -->missing-column<!-- ELSE -->two-columns<!-- ENDIF -->">
 
 		<!-- BEGIN messagerow -->
 			<li class="row<!-- IF messagerow.S_ROW_COUNT is odd --> bg1<!-- ELSE --> bg2<!-- ENDIF --><!-- IF messagerow.PM_CLASS --> {messagerow.PM_CLASS}<!-- ENDIF -->">
diff --git a/phpBB/styles/prosilver/template/viewforum_body.html b/phpBB/styles/prosilver/template/viewforum_body.html
index 04dc00aae2..360d9ae789 100644
--- a/phpBB/styles/prosilver/template/viewforum_body.html
+++ b/phpBB/styles/prosilver/template/viewforum_body.html
@@ -163,8 +163,19 @@
 							</ul>
 						</div>
 						<!-- ENDIF -->
-						<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
-						<!-- IF topicrow.S_POST_GLOBAL and FORUM_ID != topicrow.FORUM_ID --> &raquo; {L_IN} <a href="{topicrow.U_VIEW_FORUM}">{topicrow.FORUM_NAME}</a><!-- ENDIF -->
+						<div class="responsive-hide">
+							<!-- IF topicrow.ATTACH_ICON_IMG -->{topicrow.ATTACH_ICON_IMG} <!-- ENDIF -->
+							{L_POST_BY_AUTHOR} {topicrow.TOPIC_AUTHOR_FULL} &raquo; {topicrow.FIRST_POST_TIME}
+							<!-- IF topicrow.S_POST_GLOBAL and FORUM_ID != topicrow.FORUM_ID --> &raquo; {L_IN} <a href="{topicrow.U_VIEW_FORUM}">{topicrow.FORUM_NAME}</a><!-- ENDIF -->
+						</div>
+						<!-- IF not S_IS_BOT -->
+						<div class="responsive-show" style="display: none;">
+							{L_LAST_POST} {L_POST_BY_AUTHOR} {topicrow.LAST_POST_AUTHOR_FULL} &laquo; <a href="{topicrow.U_LAST_POST}">{topicrow.LAST_POST_TIME}</a>
+							<!-- IF topicrow.S_POST_GLOBAL and FORUM_ID != topicrow.FORUM_ID --><br />{L_POSTED} {L_IN} <a href="{topicrow.U_VIEW_FORUM}">{topicrow.FORUM_NAME}</a><!-- ENDIF -->
+							<!-- IF topicrow.REPLIES --><br />{L_REPLIES}{L_COLON} <strong>{topicrow.REPLIES}</strong><!-- ENDIF -->
+						</div>
+						<!-- ENDIF -->
+
 						<!-- EVENT topiclist_row_append -->
 					</div>
 				</dt>
diff --git a/phpBB/styles/prosilver/theme/responsive.css b/phpBB/styles/prosilver/theme/responsive.css
index 83233bf6aa..322f11e291 100644
--- a/phpBB/styles/prosilver/theme/responsive.css
+++ b/phpBB/styles/prosilver/theme/responsive.css
@@ -133,35 +133,12 @@ ul.topiclist.forums dt, ul.topiclist.topics dt {
 }
 ul.topiclist.forums dt .list-inner, ul.topiclist.topics dt .list-inner {
 	margin-right: 250px;
-	padding-bottom: 18px;
 }
 
 ul.topiclist.forums dd.lastpost, ul.topiclist.topics dd.lastpost {
 	display: block;
 }
 
-ul.topiclist.forums dd.topics, ul.topiclist.topics dd.posts {
-	display: block;
-	position: absolute;
-	left: 45px;
-	right: 0;
-	bottom: 0;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	min-height: 0;
-	height: auto;
-	border-width: 0;
-	margin: 0;
-	padding: 5px 0;
-	width: auto;
-	min-width: 0;
-	text-align: left;
-	font-weight: bold;
-	font-size: 1.2em;
-	line-height: 1em;
-}
-
 ul.topiclist dd.mark {
 	display: block;
 	position: absolute;
@@ -196,6 +173,11 @@ ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn {
 	}
 }
 
+li.row .responsive-show strong {
+	font-weight: bold;
+	color: inherit;
+}
+
 /* Notifications list
 ----------------------------------------*/
 @media only screen and (max-width: 350px), only screen and (max-device-width: 350px)