From b147323d042a6525774fb981ca2c6ac5fba848f0 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Sun, 22 Mar 2015 15:38:23 -0400
Subject: [PATCH] mobile optimizations for home, category, and topic list views

---
 less/categories.less                        |  7 +++
 templates/categories.tpl                    | 38 +++++++--------
 templates/partials/category/subcategory.tpl | 54 ++++++++++-----------
 templates/partials/topics_list.tpl          |  2 +-
 4 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/less/categories.less b/less/categories.less
index 101d6ea..b7152f3 100644
--- a/less/categories.less
+++ b/less/categories.less
@@ -36,6 +36,13 @@
 				text-overflow: ellipsis;
 				width: 85%;
 			}
+
+			@media (max-width: @screen-lg-min) {
+				h1 {
+					width: 95%;
+					margin-left: 0;
+				}
+			}
 		}
 
 		.card {
diff --git a/templates/categories.tpl b/templates/categories.tpl
index 01531ce..defa933 100644
--- a/templates/categories.tpl
+++ b/templates/categories.tpl
@@ -5,8 +5,8 @@
 	<li data-cid="{categories.cid}" data-numRecentReplies="{categories.numRecentReplies}" class="row clearfix">
 		<meta itemprop="name" content="{categories.name}">
 
-		<div class="col-md-7 col-sm-12 col-xs-12 content">
-			<div class="icon pull-left" style="{function.generateCategoryBackground}">
+		<div class="col-md-7 col-sm-9 col-xs-11 content">
+			<div class="icon hidden-sm hidden-xs pull-left" style="{function.generateCategoryBackground}">
 				<i class="fa fa-fw {categories.icon}"></i>
 			</div>
 
@@ -16,25 +16,23 @@
 			</h1>
 		</div>
 
-		<div class="hidden-sm hidden-xs">
-			<!-- IF !categories.link -->
-			<div class="col-md-1 stats">
-				<span class="{categories.unread-class}">{categories.post_count}</span><br />
-				<small>Posts</small>
-			</div>
-			<div class="col-md-1 stats">
-				<span class="{categories.unread-class}">{categories.topic_count}</span><br />
-				<small>Topics</small>
-			</div>
-			<div class="col-md-3">
-				<!-- IMPORT partials/categories/lastpost.tpl -->
-			</div>
-			<!-- ELSE -->
-			<div class="col-md-4">
-
-			</div>
-			<!-- ENDIF !categories.link -->
+		<!-- IF !categories.link -->
+		<div class="col-md-1 hidden-sm hidden-xs stats">
+			<span class="{categories.unread-class}">{categories.post_count}</span><br />
+			<small>Posts</small>
+		</div>
+		<div class="col-md-1 hidden-sm hidden-xs stats">
+			<span class="{categories.unread-class}">{categories.topic_count}</span><br />
+			<small>Topics</small>
+		</div>
+		<div class="col-md-3 col-sm-3 col-xs-1">
+			<!-- IMPORT partials/categories/lastpost.tpl -->
+		</div>
+		<!-- ELSE -->
+		<div class="col-md-3 col-sm-3 col-xs-1">
+			<div class="card" style="border-color: {categories.bgColor}"></div>
 		</div>
+		<!-- ENDIF !categories.link -->
 	</li>
 	<!-- END categories -->
 </ul>
\ No newline at end of file
diff --git a/templates/partials/category/subcategory.tpl b/templates/partials/category/subcategory.tpl
index 5fcd52f..39087e8 100644
--- a/templates/partials/category/subcategory.tpl
+++ b/templates/partials/category/subcategory.tpl
@@ -6,8 +6,8 @@
 		<li data-cid="{children.cid}" data-numRecentReplies="{children.numRecentReplies}" class="row clearfix">
 			<meta itemprop="name" content="{children.name}">
 
-			<div class="col-md-7 col-sm-12 col-xs-12 content">
-				<div class="icon pull-left" style="{function.generateCategoryBackground}">
+			<div class="col-md-7 col-sm-9 col-xs-11 content">
+				<div class="icon hidden-sm hidden-xs pull-left" style="{function.generateCategoryBackground}">
 					<i class="fa fa-fw {children.icon}"></i>
 				</div>
 
@@ -23,36 +23,34 @@
 				</h1>
 			</div>
 
-			<div class="hidden-sm hidden-xs">
-				<!-- IF !children.link -->
-				<div class="col-md-1 stats">
-					<span class="{children.unread-class}">{children.topic_count}</span><br />
-					<small>Topics</small>
-				</div>
-				<div class="col-md-1 stats">
-					<span class="{children.unread-class}">{children.post_count}</span><br />
-					<small>Posts</small>
-				</div>
-				<div class="col-md-3">
-					<!-- BEGIN posts -->
-					<!-- IF @first -->
-					<div class="card" style="border-color: {children.bgColor}">
-						<p>
-							<strong>{children.posts.user.username}</strong> <small class="timeago" title="{children.posts.relativeTime}"></small>
-						</p>
-						<div class="post-content">
-							{children.posts.content}
-						</div>
+			<!-- IF !children.link -->
+			<div class="col-md-1 hidden-sm hidden-xs stats">
+				<span class="{children.unread-class}">{children.topic_count}</span><br />
+				<small>Topics</small>
+			</div>
+			<div class="col-md-1 hidden-sm hidden-xs stats">
+				<span class="{children.unread-class}">{children.post_count}</span><br />
+				<small>Posts</small>
+			</div>
+			<div class="col-md-3 col-sm-3 col-xs-1">
+				<!-- BEGIN posts -->
+				<!-- IF @first -->
+				<div class="card" style="border-color: {children.bgColor}">
+					<p>
+						<strong>{children.posts.user.username}</strong> <small class="timeago" title="{children.posts.relativeTime}"></small>
+					</p>
+					<div class="post-content">
+						{children.posts.content}
 					</div>
-					<!-- ENDIF @first -->
-					<!-- END posts -->
 				</div>
-				<!-- ELSE -->
-				<div class="col-md-4">
+				<!-- ENDIF @first -->
+				<!-- END posts -->
+			</div>
+			<!-- ELSE -->
+			<div class="col-md-4">
 
-				</div>
-				<!-- ENDIF !children.link -->
 			</div>
+			<!-- ENDIF !children.link -->
 		</li>
 		<!-- END children -->
 	</ul>
diff --git a/templates/partials/topics_list.tpl b/templates/partials/topics_list.tpl
index c1de336..3653fe2 100644
--- a/templates/partials/topics_list.tpl
+++ b/templates/partials/topics_list.tpl
@@ -5,7 +5,7 @@
 		<meta itemprop="name" content="{topics.title}">
 
 		<div class="col-md-7 col-sm-9 col-xs-11 content">
-			<div class="avatar pull-left">
+			<div class="avatar hidden-sm hidden-xs pull-left">
 				<!-- IF showSelect -->
 					<div class="select fa-square-o">
 						<img src="{topics.user.picture}" class="img-circle user-img" />