From 86934e1ac7854a7bd48ef1e0803ef16cc1d107a3 Mon Sep 17 00:00:00 2001
From: barisusakli <barisusakli@gmail.com>
Date: Sun, 4 Oct 2015 18:38:58 -0400
Subject: [PATCH] mobile  tweaks

---
 less/categories.less               | 23 ++++++++++++++++-----
 less/category.less                 |  7 +++++--
 less/topic.less                    |  4 ----
 templates/category.tpl             |  6 +++---
 templates/partials/post_bar.tpl    |  6 ++----
 templates/partials/topic/post.tpl  |  3 +--
 templates/partials/topics_list.tpl | 32 ++++++++++++++++++++----------
 templates/recent.tpl               |  2 +-
 templates/topic.tpl                |  4 +++-
 templates/unread.tpl               |  2 +-
 10 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/less/categories.less b/less/categories.less
index 0134b87..da467c0 100644
--- a/less/categories.less
+++ b/less/categories.less
@@ -4,11 +4,20 @@
 
 	> li {
 
-		margin-bottom: 20px;
+		padding-top: 10px;
+		padding-bottom: 10px;
+
+		@media (max-width: @screen-xs-max) {
+			border-top: 1px solid #eee;
+			&:last-child {
+				border-bottom: 1px solid #eee;
+			};
+		}
+
 		min-height: 53px;
 
 		.content {
-			margin-top: 7px;
+			padding-right: 0px;
 
 			.icon {
 				font-size: 17px;
@@ -28,7 +37,7 @@
 			}
 
 			h2 {
-				font-size: 20px;
+				font-size: 18px;
 				line-height: 22px;
 				margin: 0;
 				margin-left: 62px;
@@ -57,6 +66,10 @@
 			}
 		}
 
+		.mobile-stat {
+			padding-left: 0px;
+		}
+
 		.card {
 			border-left: 4px solid #ccc;
 			text-align: left;
@@ -70,8 +83,8 @@
 
 			img {
 				border-radius: 50%;
-				width: 30px;
-				height: 30px;
+				width: 24px;
+				height: 24px;
 			}
 
 			p {
diff --git a/less/category.less b/less/category.less
index 9a50a09..ce0b8c3 100644
--- a/less/category.less
+++ b/less/category.less
@@ -1,4 +1,9 @@
 .category {
+
+	.topic-list {
+		margin-top: 10px;
+	}
+
 	> ul {
 		> li {
 			list-style: none;
@@ -88,8 +93,6 @@
 			font-weight: bold;
 		}
 	}
-
-
 }
 
 .category, .categories, .subcategory {
diff --git a/less/topic.less b/less/topic.less
index 45af3c1..b30222e 100644
--- a/less/topic.less
+++ b/less/topic.less
@@ -89,10 +89,6 @@
 		margin-top: -5px;
 	}
 
-	.topic-main-buttons a.btn {
-		margin-left: 20px;
-	}
-
 	.title {
 		p {
 			margin-bottom: 4px;
diff --git a/templates/category.tpl b/templates/category.tpl
index c861836..9c103c7 100644
--- a/templates/category.tpl
+++ b/templates/category.tpl
@@ -2,7 +2,7 @@
 	<!-- IMPORT partials/breadcrumbs.tpl -->
 	<!-- IMPORT partials/category/subcategory.tpl -->
 
-	<!-- IF children.length --><hr /><!-- ENDIF children.length -->
+	<!-- IF children.length --><hr class="hidden-xs"/><!-- ENDIF children.length -->
 
 	<div class="clearfix">
 		<!-- IF privileges.topics:create -->
@@ -20,9 +20,9 @@
 		</span>
 	</div>
 
-	<hr />
+	<hr class="hidden-xs" />
 
-	<p>{name}</p>
+	<p class="hidden-xs">{name}</p>
 
 	<!-- IF !topics.length -->
 	<div class="alert alert-warning" id="category-no-topics">
diff --git a/templates/partials/post_bar.tpl b/templates/partials/post_bar.tpl
index 6f7df54..ade430d 100644
--- a/templates/partials/post_bar.tpl
+++ b/templates/partials/post_bar.tpl
@@ -1,11 +1,11 @@
 <div class="clearfix">
-	<span class="tags">
+	<div class="tags pull-left">
 		<!-- BEGIN tags -->
 		<a href="{config.relative_path}/tags/{tags.value}">
 		<span class="tag-item" data-tag="{tags.value}" style="<!-- IF tags.color -->color: {tags.color};<!-- ENDIF tags.color --><!-- IF tags.bgColor -->background-color: {tags.bgColor};<!-- ENDIF tags.bgColor -->">{tags.value}</span>
 		<span class="tag-topic-count human-readable-number" title="{tags.score}">{tags.score}</span></a>
 		<!-- END tags -->
-	</span>
+	</div>
 
 	<div class="topic-main-buttons pull-right">
 		<span class="loading-indicator btn pull-left hidden" done="0">
@@ -14,8 +14,6 @@
 
 		<!-- IMPORT partials/topic/stats.tpl -->
 
-		<br class="visible-xs"/>
-
 		<!-- IMPORT partials/topic/reply-button.tpl -->
 
 		<!-- IMPORT partials/topic/watch.tpl -->
diff --git a/templates/partials/topic/post.tpl b/templates/partials/topic/post.tpl
index c8efe5a..2f3453f 100644
--- a/templates/partials/topic/post.tpl
+++ b/templates/partials/topic/post.tpl
@@ -24,7 +24,7 @@
 				<a component="post/reply" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!--ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
 				<a component="post/quote" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!--ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
 				<!-- IF posts.toPid -->
-				<button component="post/parent" class="btn btn-xs btn-default" data-topid="{posts.toPid}"><i class="fa fa-reply"></i> @{posts.parent.username} <i class="fa fa-caret-down"></i></button>
+				<button component="post/parent" class="btn btn-xs btn-default" data-topid="{posts.toPid}"><i class="fa fa-reply"></i> @{posts.parent.username}</button>
 				<!-- ENDIF posts.toPid -->
 			</span>
 			<span>
@@ -64,5 +64,4 @@
 <div component="post/signature" data-uid="{posts.user.uid}" class="post-signature">{posts.user.signature}</div>
 <!-- ENDIF posts.user.signature -->
 
-
 <hr />
diff --git a/templates/partials/topics_list.tpl b/templates/partials/topics_list.tpl
index 38c36b5..6cc4b5c 100644
--- a/templates/partials/topics_list.tpl
+++ b/templates/partials/topics_list.tpl
@@ -1,10 +1,10 @@
-<ul component="category" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}">
+<ul component="category" class="topic-list" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}">
 	<meta itemprop="itemListOrder" content="descending">
 	<!-- BEGIN topics -->
 	<li component="category/topic" class="row clearfix {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
 		<meta itemprop="name" content="{function.stripTags, title}">
 
-		<div class="col-md-7 col-sm-9 col-xs-12 content">
+		<div class="col-md-7 col-sm-9 col-xs-10 content">
 			<div class="avatar pull-left">
 				<!-- IF showSelect -->
 					<div class="select fa-square-o">
@@ -33,39 +33,49 @@
 				</small>
 				<!-- ENDIF !template.category -->
 
-				<span class="tag-list">
+				<span class="tag-list hidden-xs">
 					<!-- BEGIN tags -->
 					<a href="{config.relative_path}/tags/{topics.tags.value}"><span class="tag" style="<!-- IF topics.tags.color -->color: {topics.tags.color};<!-- ENDIF topics.tags.color --><!-- IF topics.tags.bgColor -->background-color: {topics.tags.bgColor};<!-- ENDIF topics.tags.bgColor -->">{topics.tags.value}</span></a>
 					<!-- END tags -->
 					<!-- IF topics.tags.length --><small>&bull;</small><!-- ENDIF topics.tags.length -->
 				</span>
 
-				<small>[[global:posted_ago, <span class="timeago" title="{topics.relativeTime}"></span>]]</small>
-
-				<small class="clearfix"><span class="visible-xs"><span class="pull-right"><i class="fa fa-pencil"></i> {topics.postcount} &bull; <a href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"><i class="fa fa-arrow-circle-right"></i></a></span>
-				</span></small>
+				<small class="hidden-xs"><span class="timeago" title="{topics.relativeTime}"></span></small>
+				<small class="visible-xs-inline">
+				<!-- IF topics.teaser.timestamp -->
+				<span class="timeago" title="{topics.teaser.timestamp}"></span>
+				<!-- ELSE -->
+				<span class="timeago" title="{topics.relativeTime}"></span>
+				<!-- ENDIF topics.teaser.timestamp -->
+				</small>
 			</h2>
 		</div>
 
+		<div class="mobile-stat col-xs-2 visible-xs text-right">
+			<span class="human-readable-number">{topics.postcount}</span> <a href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"><i class="fa fa-arrow-circle-right"></i></a>
+		</div>
+
 		<div class="col-md-1 hidden-sm hidden-xs stats">
 			<span class="human-readable-number" title="{topics.postcount}">{topics.postcount}</span><br />
 			<small>[[global:posts]]</small>
 		</div>
+
 		<div class="col-md-1 hidden-sm hidden-xs stats">
 			<span class="human-readable-number" title="{topics.viewcount}">{topics.viewcount}</span><br />
 			<small>[[global:views]]</small>
 		</div>
+
 		<div class="col-md-3 col-sm-3 teaser hidden-xs">
 			<div class="card" style="border-color: {topics.category.bgColor}">
 				<!-- IF topics.unreplied -->
-				<p class="hidden-xs">
+				<p>
 					[[category:no_replies]]
 				</p>
 				<!-- ELSE -->
-				<p class="hidden-xs">
-					<strong>{topics.teaser.user.username}</strong>
+				<p>
+					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}"><img title="{topics.teaser.user.username}" class="user-img" src="{topics.teaser.user.picture}" /></a>
 					<a class="permalink" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
-						<small class="timeago" title="{topics.teaser.timestamp}"></small>
+						<span class="timeago" title="{topics.teaser.timestamp}"></span>
 					</a>
 				</p>
 				<div class="post-content">
diff --git a/templates/recent.tpl b/templates/recent.tpl
index 9452275..b5a82be 100644
--- a/templates/recent.tpl
+++ b/templates/recent.tpl
@@ -13,7 +13,7 @@
 		</div>
 	</div>
 
-	<hr />
+	<hr class="hidden-xs"/>
 
 	<div class="category">
 		<!-- IF !topics.length -->
diff --git a/templates/topic.tpl b/templates/topic.tpl
index 0c95544..c035c01 100644
--- a/templates/topic.tpl
+++ b/templates/topic.tpl
@@ -1,7 +1,7 @@
 <div class="topic">
 	<!-- IMPORT partials/breadcrumbs.tpl -->
 
-	<h1 component="post/header" itemprop="name">
+	<h1 component="post/header" class="hidden-xs" itemprop="name">
 
 		<i class="fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"></i> <i class="fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->"></i> <span class="topic-title" component="topic/title">{title}</span>
 
@@ -17,6 +17,8 @@
 
 	<div component="topic/deleted/message" class="alert alert-warning<!-- IF !deleted --> hidden<!-- ENDIF !deleted -->">[[topic:deleted_message]]</div>
 
+	<hr class="visible-xs" />
+
 	<ul component="topic" class="posts" data-tid="{tid}">
 		<!-- BEGIN posts -->
 			<li component="post" class="<!-- IF posts.deleted -->deleted<!-- ENDIF posts.deleted -->" <!-- IMPORT partials/data/topic.tpl -->>
diff --git a/templates/unread.tpl b/templates/unread.tpl
index 5ac1f99..4d7d285 100644
--- a/templates/unread.tpl
+++ b/templates/unread.tpl
@@ -45,7 +45,7 @@
 		</div>
 	</div>
 
-	<hr />
+	<hr class="hidden-xs"/>
 
 	<div class="category">
 		<div id="category-no-topics" class="alert alert-warning <!-- IF topics.length -->hidden<!-- ENDIF topics.length -->">[[unread:no_unread_topics]]</div>