From fa9f10bf5c9ba11546d635ebb835b734a7f07002 Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Sat, 21 Mar 2015 14:46:12 -0400
Subject: [PATCH] styled the post bar

---
 less/categories.less            |  30 +--
 less/topic.less                 | 314 +++++++++-----------------------
 templates/partials/post_bar.tpl |  33 ++--
 templates/topic.tpl             | 138 +-------------
 4 files changed, 124 insertions(+), 391 deletions(-)

diff --git a/less/categories.less b/less/categories.less
index 118b927..101d6ea 100644
--- a/less/categories.less
+++ b/less/categories.less
@@ -38,20 +38,6 @@
 			}
 		}
 
-		.stats {
-			font-size: 20px;
-			text-align: center;
-			margin-top: 5px;
-			line-height: 22px;
-
-			small {
-				text-transform: uppercase;
-				color: @gray-light;
-				font-weight: 300;
-				font-size: 12px;
-			}
-		}
-
 		.card {
 			border-left: 4px solid #ccc;
 			text-align: left;
@@ -129,7 +115,6 @@
 			}
 		}
 	}
-
 }
 
 .category-header-image-auto {
@@ -154,4 +139,19 @@
 	-o-background-size: contain!important;
 	background-size: contain!important;
 	background-position: center!important;
+}
+
+
+.stats {
+	font-size: 20px;
+	text-align: center;
+	margin-top: 5px;
+	line-height: 22px;
+
+	small {
+		text-transform: uppercase;
+		color: @gray-light;
+		font-weight: 300;
+		font-size: 12px;
+	}
 }
\ No newline at end of file
diff --git a/less/topic.less b/less/topic.less
index 509f178..e030223 100644
--- a/less/topic.less
+++ b/less/topic.less
@@ -1,57 +1,55 @@
 .topic {
-	.post-content {
-		> blockquote {
-			> *:not(:first-child) {
-				display: none;
-			}
+	.posts {
+		.icon {
+			font-size: 17px;
+			line-height: 17px;
+			border-radius: 50%;
+			margin-right: 15px;
+			min-width: 46px;
+			min-height: 46px;
+			margin-top: 2px;
 
-			> blockquote {
-				display: block!important;
-				> *:not(:first-child) {
-					display: none;
-				}
+			img {
+				margin-right: 15px;
+				width: 46px;
+				height: 46px;
+				border-radius: 50%;
 			}
 		}
 
-		> blockquote.uncollapsed {
-			> *:not(:first-child) {
-				display: block;
-			}
-
-			> blockquote {
-				display: block!important;
-				> *:not(:first-child) {
-					display: block;
-				}
-			}
+		h1 {
+			font-size: 22px;
+			line-height: 24px;
+			margin: 0;
 		}
+	}
 
-		.toggle {
-			padding: 0px 5px;
-			border: 1px solid #e0e0e0;
-			background: #fcfcfc;
-			width: 50px;
-			text-align: center;
-			display:block!important;
+	.browsing-users {
+		span {
+			text-transform: uppercase;
+			color: @gray-light;
 		}
+	}
 
-		pre {
-			max-height: 350px;
-
-			code {
-				white-space: pre;
-				word-wrap: normal;
-			}
-		}
+	.stats {
+		width: 60px;
+		float: left;
+		margin-top: -5px;
+	}
 
-		@media (max-width: @screen-sm-min) {
-			pre {
-				max-height: 250px;
-			}
-		}
+	.topic-main-buttons a {
+		margin-left: 20px;
 	}
+}
+
+
+
+
 
 
+
+
+.topic {
 	&.deleted {
 		-moz-opacity: 0.30;
 		opacity: 0.30;
@@ -71,224 +69,84 @@
 		}
 	}
 
-	@media (max-width: 475px) {
-		.favourite-text {
-			display: none;
-		}
-	}
-
-	.well {
-		padding-top: 10px;
-		padding-bottom: 10px;
-	}
-
-	.topic-stats {
-		height: 34px;
-		line-height: 34px;
-	}
-
-	.topic-main-buttons {
-		padding-bottom: 0px;
-	}
-
-	@media (max-width: 767px) {
-		.topic-main-buttons {
-			margin-bottom: 0px;
-		}
-	}
-
 	.posts {
+		.post-content {
+			ul {
+				> li {
+					list-style-type: disc;
 
-		.post-info, .post-block {
-			position: relative;
-			border: 1px solid rgba(0, 0, 0, 0.06);
-			border-radius: 0 0 5px 5px;
-			padding: 10px;
-
-			.post-signature {
-				font-size: 12px;
-				border-top: 1px solid #ddd;
-				display: inline-block;
-
-				> p {
-					padding-top: 5px;
-				}
+					ul > li {
+						list-style-type: circle;
 
-				img {
-					max-width: 200px;
-					max-height: 60px;
+						ul > li {
+							list-style-type: square;
+						}
+					}
 				}
-
-				margin-left: 5px;
 			}
-		}
-
-		.post-block {
-			border-radius: 5px;
-			margin-bottom: 15px;
-
-			.topic-buttons {
-				background: rgba(0, 0, 0, 0.02);
-				border: 1px solid rgba(0, 0, 0, 0.06);
-				margin: -5px 0 0 0;
-				padding: 8px 0 0 23px;
 
-				button.show {
-					display: inline-block !important;
+			> blockquote {
+				> *:not(:first-child) {
+					display: none;
 				}
 
-				@media (max-width: 767px) {
-					padding-left: 9px;
+				> blockquote {
+					display: block!important;
+					> *:not(:first-child) {
+						display: none;
+					}
 				}
 			}
 
-			.post-content {
-				padding: 10px 5px 0 5px;
-				word-wrap: break-word;
-				clear: left;
-
-				> ul, ol {
-					padding-bottom: 10px;
+			> blockquote.uncollapsed {
+				> *:not(:first-child) {
+					display: block;
 				}
 
-				ul {
-					> li {
-						list-style-type: disc;
-
-						ul > li {
-							list-style-type: circle;
-
-							ul > li {
-								list-style-type: square;
-							}
-						}
+				> blockquote {
+					display: block!important;
+					> *:not(:first-child) {
+						display: block;
 					}
 				}
-
-				blockquote p {
-					font-size: 14px;
-				}
-			}
-
-			.post-images{
-				padding: 2px 5px 0 5px;
-			}
-		}
-	}
-
-	.posts {
-		.main-post {
-			display: none;
-		}
-
-		.post-block {
-			.post-signature {
-				margin-left: 15px;
-			}
-
-			.topic-buttons {
-				margin: -11px -10px 0px -10px;
-				border: 0;
-				border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-				padding: 8px 9px 7px 23px;
-			}
-
-			.post-content {
-				margin-left: 10px;
-			}
-		}
-
-		.img-thumbnail {
-			float:none;
-			padding: 2px;
-			border-radius: 0;
-			margin-bottom: 5px;
-		}
-	}
-
-	.posts li[data-index="0"] {
-		.sub-post {
-			display: none !important;
-		}
-
-		.main-post {
-			display: block;
-		}
-
-		.col-md-11 {
-			width: 100%;
-		}
-
-		.topic-title {
-			line-height: 1.5em;
-			width: auto;
-			overflow: hidden;
-			margin: 0 0 -5px 0;
-			padding: 0 0 5px 0;
-
-			i {
-				opacity: 0.7;
 			}
-		}
 
-		.avatar {
-			position: relative;
-			float: left;
-			margin: 0 10px 0 0;
-			padding-bottom: 0px;
-			text-align: center;
-			width: 100px;
-
-			@media (max-width: 767px) {
-				display: none;
-			}
-
-			.img-thumbnail {
-				padding: 2px;
-				border-radius: 0;
+			.toggle {
+				padding: 0px 5px;
+				border: 1px solid #e0e0e0;
+				background: #fcfcfc;
+				width: 50px;
+				text-align: center;
+				display:block!important;
 			}
-		}
-
-		.post-content {
-			min-height: 80px;
-		}
 
-		.post-block {
-			>h3 {
-				margin:0px;
-			}
-			.topic-buttons {
-				background: rgba(0, 0, 0, 0.02);
-				border: 1px solid rgba(0, 0, 0, 0.06);
-				margin: 0 -11px 0 92px;
-				padding: 10px;
-				border-right: 0;
+			pre {
+				max-height: 350px;
 
-				@media (max-width: 767px) {
-					margin-left: -11px;
-					border-left: 0;
+				code {
+					white-space: pre;
+					word-wrap: normal;
 				}
+			}
 
-				button.show {
-					display: inline-block!important;
+			@media (max-width: @screen-sm-min) {
+				pre {
+					max-height: 250px;
 				}
 			}
 		}
 	}
-
-	.loading-indicator {
-		display: inline-block;
-		font-size: 14px;
-		margin-right: 1em;
-	}
 }
 
 .thread_active_users {
-
 	a[data-uid] {
 		img {
-			height:24px;
-			width:24px;
+			border-radius: 50%;
+			margin-top: -4px;
+			margin-left: 1px;
+			margin-right: -12px;
+			width: 46px;
+			height: 46px;
 		}
 
 		&::after {
diff --git a/templates/partials/post_bar.tpl b/templates/partials/post_bar.tpl
index 09b80e6..5cad732 100644
--- a/templates/partials/post_bar.tpl
+++ b/templates/partials/post_bar.tpl
@@ -1,5 +1,6 @@
-<div class="inline-block">
+<hr />
 
+<div class="inline-block">
 	<span class="tags">
 	<!-- BEGIN tags -->
 	<a href="{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">{tags.score}</span></a>
@@ -10,28 +11,32 @@
 	<span>|</span>
 	<!-- ENDIF tags.length -->
 
-	<small class="topic-stats">
-		<span>[[global:posts]]</span>
-		<strong><span class="topic-post-count human-readable-number" title="{postcount}">{postcount}</span></strong> |
-		<span>[[global:views]]</span>
-		<strong><span class="human-readable-number" title="{viewcount}">{viewcount}</span></strong>
-	</small>
+	
 	<span class="browsing-users hidden">
-		&bull;
-		<small><span>[[category:browsing]]</span></small>
 		<div component="topic/browsing/list" class="thread_active_users active-users inline-block"></div>
 		<small class="hidden">
 			<i class="fa fa-users"></i> <span component="topic/browsing/count" class="user-count"></span>
 		</small>
+		<span>[[category:browsing]]</span>
 	</span>
 </div>
 
-<div class="topic-main-buttons pull-right inline-block">
-	<div class="loading-indicator" done="0" style="display:none;">
+<div class="topic-main-buttons pull-right">
+	<span class="loading-indicator btn" done="0" style="display:none;">
 		<span class="hidden-xs">[[topic:loading_more_posts]]</span> <i class="fa fa-refresh fa-spin"></i>
+	</span>
+
+	<div class="stats">
+		<span class="topic-post-count human-readable-number" title="{postcount}">{postcount}</span><br />
+		<small>[[global:views]]</small>
 	</div>
+	<div class="stats">
+		<span class="human-readable-number" title="{viewcount}">{viewcount}</span><br />
+		<small>[[global:posts]]</small>
+	</div>
+
 	<!-- IF privileges.topics:reply -->
-	<button component="topic/reply" class="btn btn-primary post_reply" type="button">[[topic:reply]]</button>
+	<a component="topic/reply" class="btn btn-primary post_reply">[[topic:reply]]</a>
 	<!-- ELSE -->
 		<!-- IF !loggedIn -->
 		<a href="/login?next=topic/{slug}" class="btn btn-primary">[[topic:guest-login-reply]]</a>
@@ -42,4 +47,6 @@
 
 	<!-- IMPORT partials/thread_tools.tpl -->
 </div>
-<div style="clear:both;"></div>
\ No newline at end of file
+<div style="clear:both;"></div>
+
+<hr />
\ No newline at end of file
diff --git a/templates/topic.tpl b/templates/topic.tpl
index 10237ce..d6141ba 100644
--- a/templates/topic.tpl
+++ b/templates/topic.tpl
@@ -9,150 +9,18 @@
 				<meta itemprop="datePublished" content="{posts.relativeTime}">
 				<meta itemprop="dateModified" content="{posts.relativeEditTime}">
 
-				<div class="col-md-1 profile-image-block hidden-xs hidden-sm sub-post">
-					<a href="<!-- IF posts.user.userslug -->{relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
-						<img src="{posts.user.picture}" align="left" class="img-thumbnail" itemprop="image" />
-						<!-- IF posts.user.banned -->
-						<span class="label label-danger">[[user:banned]]</span>
-						<!-- ENDIF posts.user.banned -->
-					</a>
-				</div>
-
-				<div class="col-md-11 panel panel-default post-block topic-item">
-
-					<a class="main-post avatar" href="<!-- IF posts.user.userslug -->{relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
-						<img itemprop="image" src="{posts.user.picture}" align="left" class="img-thumbnail" width=150 height=150 />
-					</a>
-					<h3 class="main-post">
-						<p component="post/header" itemprop="name"><i class="fa fa-thumb-tack hide"></i> <i class="fa fa-lock hide"></i> {title}</p>
-					</h3>
-
-					<div class="topic-buttons">
-
-						<div class="btn-group">
-
-							<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button" title="<!-- IF posts.user.userslug -->[[topic:posted_by, {posts.user.username}]]<!-- ELSE -->[[topic:posted_by_guest]]<!-- ENDIF posts.user.userslug -->">
-								<i class="fa fa-circle status {posts.user.status}" title="[[global:{posts.user.status}]]"></i>
-								<span class="visible-xs visible-md"><img class="" src="{posts.user.picture}" width=18 height=18 />&nbsp;</span>
-								<span class="username-field" href="<!-- IF posts.user.userslug -->{relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->" itemprop="author" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.username}&nbsp;</span>
-								<span class="caret"></span>
-							</button>
-
-						    <ul class="dropdown-menu">
-								<li><a href="<!-- IF posts.user.userslug -->{relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->"><i class="fa fa-user"></i> [[topic:profile]]</a></li>
-								<!-- IF !posts.selfPost -->
-								<!-- IF posts.user.userslug -->
-								<!-- IF loggedIn -->
-								<!-- IF !config.disableChat -->
-								<li><a href="#" component="post/chat"><i class="fa fa-comment"></i> [[topic:chat]]</a></li>
-								<!-- ENDIF !config.disableChat -->
-								<!-- ENDIF loggedIn -->
-								<!-- ENDIF posts.user.userslug -->
-								<!-- ENDIF !posts.selfPost -->
-						    </ul>
-						</div>
-
-						<div class="btn-group">
-							<!-- IF !posts.index -->
-							<button component="topic/follow" class="btn btn-sm btn-default" type="button" title="[[topic:notify_me]]"><!-- IF isFollowing --><i class="fa fa-eye-slash"><!-- ELSE --><i class="fa fa-eye"><!-- ENDIF isFollowing --></i></button>
-							<!-- ENDIF !posts.index -->
-							<!-- IF !posts.selfPost -->
-							<button component="post/flag" class="btn btn-sm btn-default" type="button" title="[[topic:flag_title]]"><i class="fa fa-flag-o"></i></button>
-							<!-- ENDIF !posts.selfPost -->
-							<button component="post/favourite" data-favourited="{posts.favourited}" class="btn btn-sm btn-default <!-- IF posts.favourited --> btn-warning <!-- ENDIF posts.favourited -->" type="button">
-								<span class="favourite-text">[[topic:favourite]]</span>
-								<span component="post/favourite-count" data-favourites="{posts.reputation}">{posts.reputation}</span>&nbsp;
-								<!-- IF posts.favourited -->
-								<i class="fa fa-star"></i>
-								<!-- ELSE -->
-								<i class="fa fa-star-o"></i>
-								<!-- ENDIF posts.favourited -->
-							</button>
-						</div>
-
-						<!-- IF !reputation:disabled -->
-						<div class="btn-group">
-							<button component="post/upvote" class="btn btn-sm btn-default <!-- IF posts.upvoted --> upvoted btn-primary <!-- ENDIF posts.upvoted -->">
-								<i class="fa fa-chevron-up"></i>
-							</button>
-							<button component="post/vote-count" class="btn btn-sm btn-default" data-votes="{posts.votes}">{posts.votes}</button>
-							<!-- IF !downvote:disabled -->
-							<button component="post/downvote" class="btn btn-sm btn-default <!-- IF posts.downvoted --> downvoted btn-primary <!-- ENDIF posts.downvoted -->">
-								<i class="fa fa-chevron-down"></i>
-							</button>
-							<!-- ENDIF !downvote:disabled -->
-						</div>
-						<!-- ENDIF !reputation:disabled -->
-
-						<!-- IF privileges.topics:reply -->
-						<div class="btn-group">
-							<button component="post/quote" class="btn btn-sm btn-default" type="button" title="[[topic:quote]]"><i class="fa fa-quote-left"></i></button>
-							<button component="post/reply" class="btn btn-sm btn-primary" type="button">[[topic:reply]] <i class="fa fa-reply"></i></button>
-						</div>
-						<!-- ENDIF privileges.topics:reply -->
-
-						<div class="pull-right">
-							<div class="btn-group post-tools">
-								<div class="dropdown share-dropdown pull-right">
-									<button title="[[topic:share]]"class="btn btn-sm btn-default share" data-toggle="dropdown" href="#"><i class="fa fa-share-square-o"></i></button>
-									<!-- IMPORT partials/share_dropdown.tpl -->
-								</div>
-							</div>
-
-							<!-- IF posts.display_moderator_tools -->
-							<div class="btn-group post-tools">
-								<div class="dropdown">
-									<button title="[[topic:tools]]" class="btn btn-sm btn-default" data-toggle="dropdown" href="#"><i class="fa fa-gear"></i></button>
-									<ul class="dropdown-menu text-center pull-right" role="menu" aria-labelledby="dLabel">
-										<button component="post/edit" class="btn btn-sm btn-default" type="button" title="[[topic:edit]]"><i class="fa fa-pencil"></i></button>
-										<button component="post/delete" class="btn btn-sm btn-default" type="button" title="[[topic:delete]]"><i class="fa fa-trash-o"></i></button>
-										<button component="post/purge" class="btn btn-sm btn-default <!-- IF !posts.deleted -->none<!-- ENDIF !posts.deleted -->" type="button" title="[[topic:purge]]"><i class="fa fa-eraser"></i></button>
-
-										<!-- IF posts.display_move_tools -->
-										<button component="post/move" class="btn btn-sm btn-default" type="button" title="[[topic:move]]"><i class="fa fa-arrows"></i></button>
-										<!-- ENDIF posts.display_move_tools -->
-									</ul>
-								</div>
-							</div>
-							<!-- ENDIF posts.display_moderator_tools -->
-						</div>
-					</div>
-
-					<div component="post/content" itemprop="text">{posts.content}</div>
-					<!-- IF posts.user.signature -->
-					<div class="post-signature">{posts.user.signature}</div>
-					<!-- ENDIF posts.user.signature -->
-
-					<div class="post-info">
-						<span class="pull-right">
-							[[global:posted_ago, <span class="timeago" title="{posts.relativeTime}"></span>]]
-							<!-- IF posts.editor.username -->
-							<span>| [[global:last_edited_by_ago, <strong><a href="{relative_path}/user/{posts.editor.userslug}">{posts.editor.username}</a></strong>, <span class="timeago" title="{posts.relativeEditTime}"></span>]]</span>
-							<!-- ENDIF posts.editor.username -->
-						</span>
-						<span class="pull-left">
-							[[global:reputation]]: <i class='fa fa-star'></i> <span component="user/reputation" data-reputation="{posts.user.reputation}" data-uid="{posts.uid}" class='formatted-number reputation'>{posts.user.reputation}</span>&nbsp;|&nbsp;[[global:posts]]: <i class='fa fa-pencil'></i> <span class='formatted-number' component="user/postcount" data-uid="{posts.uid}" data-postcount="{posts.user.postcount}">{posts.user.postcount}</span>
-							<!-- IF posts.user.custom_profile_info.length -->
-								<!-- BEGIN custom_profile_info -->
-								| {posts.user.custom_profile_info.content}
-								<!-- END custom_profile_info -->
-							<!-- ENDIF posts.user.custom_profile_info.length -->
-						</span>
-						<div style="clear:both;"></div>
-					</div>
-				</div>
-				<div style="clear:both;"></div>
+				<!-- IMPORT partials/topic/post.tpl -->
 			</li>
 
 			<!-- IF !posts.index -->
-			<li class="well post-bar" data-index="{posts.index}">
+			<li class="post-bar" data-index="{posts.index}">
 				<!-- IMPORT partials/post_bar.tpl -->
 			</li>
 			<!-- ENDIF !posts.index -->
 		<!-- END posts -->
 	</ul>
 
-	<div class="well col-md-11 col-xs-12 pull-right post-bar bottom-post-bar <!-- IF unreplied -->hide<!-- ENDIF unreplied -->">
+	<div class="post-bar bottom-post-bar <!-- IF unreplied -->hide<!-- ENDIF unreplied -->">
 		<!-- IMPORT partials/post_bar.tpl -->
 	</div>