From 733effa94f6d581976a02ef23c3f529ed928b81f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Mon, 5 Oct 2020 13:05:28 -0400
Subject: [PATCH] feat: move topic labels
 https://github.com/NodeBB/NodeBB/issues/8717

---
 less/topic.less     |  9 ++++++++-
 templates/topic.tpl | 12 +++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/less/topic.less b/less/topic.less
index e30f8a7..e057d6e 100644
--- a/less/topic.less
+++ b/less/topic.less
@@ -36,6 +36,13 @@
 			text-transform: initial;
 		}
 	}
+
+	[component="topic/labels"] {
+		vertical-align: -3px;
+		font-size: 16px;
+		color: @text-muted;
+	}
+
 	[component="topic/browsing-users"] {
 		margin-bottom: -15px;
 	}
@@ -236,7 +243,7 @@
 
 	.stats {
 		font-size: 12px;
-		margin: 0px 5px 0px 5px;
+		margin: 0px 2px 0px 2px;
 		display: inline-block;
 	}
 
diff --git a/templates/topic.tpl b/templates/topic.tpl
index e84053f..d85804f 100644
--- a/templates/topic.tpl
+++ b/templates/topic.tpl
@@ -1,4 +1,3 @@
-<!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{each widgets.header}}}
 	{{widgets.header.html}}
@@ -8,14 +7,17 @@
 	<div class="topic <!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
 		<div class="topic-header">
 			<h1 component="post/header" class="" itemprop="name">
-				<i component="topic/pinned" class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->" title="[[topic:pinned]]"></i>
-				<i component="topic/locked" class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->" title="[[topic:locked]]"></i>
-				<i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
-				{{{each icons}}}@value{{{end}}}
 				<span class="topic-title" component="topic/title">{title}</span>
 			</h1>
 
 			<div class="topic-info clearfix">
+				<div component="topic/labels" class="inline-block">
+					<i component="topic/pinned" class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->" title="[[topic:pinned]]"></i>
+					<i component="topic/locked" class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->" title="[[topic:locked]]"></i>
+					<i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
+					{{{each icons}}}@value{{{end}}}
+				</div>
+
 				<div class="category-item inline-block">
 					{{{ if category.icon }}}
 					<div role="presentation" class="icon pull-left" style="{{{ if category.bgColor }}}background-color: {category.bgColor};{{{end}}}; {{{ if category.color}}}color: {category.color};{{{end}}}">