From 6492da0876d2a6db4f142db4fec7649a04db1340 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Thu, 16 May 2013 17:30:56 -0400
Subject: [PATCH] css some refactoring of topics and posts, made them properly
 responsive in general. added rep vote placeholders on category listing.

---
 public/css/style.less         | 139 ++++++++++++++++++++++++++++------
 public/templates/category.tpl |  14 +++-
 public/templates/topic.tpl    |  23 +++---
 3 files changed, 136 insertions(+), 40 deletions(-)

diff --git a/public/css/style.less b/public/css/style.less
index 4f2c7f3125..1d5ce86999 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -36,6 +36,12 @@ body {
 	&.composing {
 		margin-bottom: 350px;
 	}
+
+	@media (min-width: 979px) 
+	{
+		padding-top: 70px;
+	}
+
 }
 
 .none {
@@ -52,12 +58,6 @@ body {
 	vertical-align: 10%;
 }
 
-@media (min-width: 979px) 
-{	body {
-		padding-top: 70px;
-	}
-}
-
 #notification_window {
 	position: fixed;
 	right: 20px;
@@ -160,7 +160,7 @@ footer.footer {
 	a {
 		li {
 			list-style: none;
-			border-bottom: 1px solid #eee;
+			//border-bottom: 1px solid #eee;
 			margin-bottom: 10px;
 			padding-bottom: 10px;
 
@@ -180,26 +180,73 @@ footer.footer {
 		margin-left: 0;
 	}
 
+	.thread-rating {
+		color: #444;
+		text-align: center;
+		margin-top: 7px;
+
+		span {
+			display: inline-block; margin-left: 5px;
+			i {
+				padding-left: 2.4px;
+			}
+
+
+			@media (max-width: 1200px) 
+			{
+				margin-left: -1px;
+			}
+		}
+
+
+	}
 
 	.topic-row {
 		border-radius: 5px;
-		width: 100%;
 		padding-left: 20px;
 
+		small {
+			vertical-align: 2px;
+			strong {
+				color: #666;
+			}
+			color: #999;
+			font-size: 14px;
+		}
+
 		h3 {
 			padding: 0;
 			margin: 0;
 			margin-top: 4px;
-			line-height: 30px;
 			color: rgb(0, 136, 204);
+			line-height: 25px;
 
-			small {
-				vertical-align: 2px;
-				strong {
-					color: #666;
+			.topic-title {
+				width: 50%;
+				display: inline-block;
+				font-size: 20px;
+				white-space: nowrap;
+				text-overflow:ellipsis;
+				overflow: hidden;
+
+
+				.badge {
+					margin-right: 6px;
+				}
+
+				@media (max-width: 979px) 
+				{
+					width: 100%;
 				}
 			}
 		}
+
+		@media (max-width: 979px) 
+		{
+			width: 100%;
+			margin-left: 0px;
+		}
+
 	}
 
 	.latest-post {
@@ -323,6 +370,49 @@ footer.footer {
 
 
 	.main-post {
+		h3 {
+			margin: 0;
+
+			.topic-title {
+				width: 60%;
+				white-space: nowrap;
+				text-overflow:ellipsis;
+				overflow: hidden;
+				display: inline-block;
+				margin: 0;
+				padding: 0;
+				padding-top: 5px;
+				margin-bottom: -5px;
+				
+				@media (max-width: 1200px) {
+					width: 500px;
+				}
+				@media (min-width: 768px) and (max-width: 979px) {
+					width: 320px;
+				}
+				@media (max-width: 767px) { 
+					width: 75%;
+				}
+			}
+		}
+
+		.main-avatar {
+			color: white;
+			position: relative;
+			float: left;
+			margin-right: 15px;
+			margin-bottom: 0px;
+			padding-bottom: 0px;
+			text-align: center;
+			@media (max-width: 767px) { 
+				width: 20%;
+				max-width: 85px;
+			}
+			@media (max-width: 400px) { 
+				display: none;
+			}
+		}
+
 		.main-avatar:hover .hover-overlay {
 			opacity: 0.75;
 		}
@@ -340,18 +430,7 @@ footer.footer {
 			opacity: 0;
 			transition: opacity 0.3s;
 		}
-		.profile-block {
-			//height: 100px;
-		}
-		.main-avatar {
-			color: white;
-			position: relative;
-			float: left;
-			margin-right: 15px;
-			margin-bottom: 0px;
-			padding-bottom: 0px;
-			text-align: center
-		}
+
 		.post-content {
 			min-height: 80px;
 		}
@@ -602,4 +681,14 @@ a:hover {
 	span:focus {
 		outline: none;
 	}
+}
+
+
+.breadcrumb {
+	li {
+		max-width: 35%;
+		white-space: nowrap;
+		text-overflow:ellipsis;
+		overflow: hidden;
+	}
 }
\ No newline at end of file
diff --git a/public/templates/category.tpl b/public/templates/category.tpl
index c4a410b71e..827147e7c6 100644
--- a/public/templates/category.tpl
+++ b/public/templates/category.tpl
@@ -12,7 +12,13 @@
 		<!-- BEGIN topics -->
 		<a href="../../topic/{topics.slug}"><li>
 			<div class="row-fluid">
-				<div class="span12 topic-row img-polaroid">
+				<div class="span1 thread-rating hidden-phone hidden-tablet">
+					<span>
+						<i class="icon-star icon-3x"></i><br />
+						38
+					</span>
+				</div>
+				<div class="span11 topic-row img-polaroid">
 					<div class="latest-post visible-desktop">
 						<div class="pull-right">
 							<img style="width: 48px; height: 48px; /*temporary*/" src="/graph/users/{topics.recent_author}/picture" />
@@ -20,10 +26,12 @@
 						</div>
 					</div>
 					<div>
-						<h3><span class="badge {topics.badgeclass}">{topics.post_count}</span> {topics.title} <small>24<i class="icon-star"></i><br />
+						<h3><span class="topic-title"><span class="badge {topics.badgeclass}">{topics.post_count}</span>{topics.title}</span></h3>
+						<small>
 							<strong><i class="{topics.pin-icon}"></i><i class="{topics.lock-icon}"></i></strong>
 							Posted {topics.relativeTime} ago by 
-							<strong>{topics.username}</strong>.</small></h3> 
+							<strong>{topics.username}</strong>.
+						</small> 
 					</div>
 				</div>
 			</div>
diff --git a/public/templates/topic.tpl b/public/templates/topic.tpl
index 4148a7f933..4ac89dcfdc 100644
--- a/public/templates/topic.tpl
+++ b/public/templates/topic.tpl
@@ -23,24 +23,23 @@
 							<i class="icon-pencil"></i><span class="user_posts_{main_posts.uid}">8</span>
 						</div>
 					</a>
-					<h3>{topic_name} 
-						<small>
-							posted {main_posts.relativeTime} ago by <strong><a href="/users/{main_posts.username}">{main_posts.username}</a></strong>
-							<span class="{main_posts.edited-class}"><i class="icon-edit visible-phone" title="edited by {main_posts.editor} {main_posts.relativeEditTime} ago"></i></span>
-						</small>
-						<div class="pull-right" style="margin-right: 10px;">
-							<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn edit {main_posts.display_moderator_tools} hidden-phone"><i class="icon-pencil"></i></button>
-							<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn delete {main_posts.display_moderator_tools} hidden-phone"><i class="icon-trash"></i></button>
-							<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn quote hidden-phone"><i class="icon-quote-left"></i></button>
-
-							<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite hidden-phone btn"><span class="post_rep_{main_posts.pid}">Favourite {main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i></button>
+					<h3><p class="topic-title">{topic_name}</p> 
+						<div class="pull-right hidden-phone" style="margin-right: 10px;">
+							<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn edit {main_posts.display_moderator_tools}"><i class="icon-pencil"></i></button>
+							<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn delete {main_posts.display_moderator_tools}"><i class="icon-trash"></i></button>
+							<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn quote"><i class="icon-quote-left"></i></button>
+
+							<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite btn"><span class="post_rep_{main_posts.pid}">Favourite {main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i></button>
 							<button id="post_reply" class="btn btn-primary btn post_reply">Reply <i class="icon-reply"></i></button>
 						</div>
 					</h3>
 
 
 					<hr />
-					<span class="{main_posts.edited-class} hidden-phone" style="font-size:10px;"> last edited by <strong><a href="/users/{main_posts.editor}">{main_posts.editor}</a></strong> {main_posts.relativeEditTime} ago</span>
+					<small>
+						posted {main_posts.relativeTime} ago by <strong><a href="/users/{main_posts.username}">{main_posts.username}</a></strong>
+						<span class="{main_posts.edited-class}"><i class="icon-edit" title="edited by {main_posts.editor} {main_posts.relativeEditTime} ago"></i></span>
+					</small>
 
 					<div style="clear:both; margin-bottom: 10px;"></div>