From 8c0a41a62fc715f07d3f64ae9e35d1ad1b2cac09 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 16 Jun 2016 13:47:19 +0200
Subject: [PATCH] Improved layout in article footer

---
 com.woltlab.wcf/templates/article.tpl        | 11 ++++++++---
 wcfsetup/install/files/style/ui/article.scss | 15 ++++++++++++---
 wcfsetup/install/files/style/ui/message.scss | 18 +++++++++++-------
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 519bc035ff..204ffbdbc6 100644
--- a/com.woltlab.wcf/templates/article.tpl
+++ b/com.woltlab.wcf/templates/article.tpl
@@ -110,9 +110,14 @@
 		</ul>
 	{/if}
 	
-	<div class="articleLikesSummery"></div>
-	
-	<ul class="articleLikeButtons buttonGroup"></ul>
+	<div class="section row articleLikeSection">
+		<div class="col-xs-12 col-md-8">
+			<div class="articleLikesSummery"></div>
+		</div>
+		<div class="col-xs-12 col-md-4">
+			<ul class="articleLikeButtons buttonGroup"></ul>
+		</div>
+	</div>
 </section>
 
 {if ENABLE_SHARE_BUTTONS}
diff --git a/wcfsetup/install/files/style/ui/article.scss b/wcfsetup/install/files/style/ui/article.scss
index 1aa234818e..597e510ca7 100644
--- a/wcfsetup/install/files/style/ui/article.scss
+++ b/wcfsetup/install/files/style/ui/article.scss
@@ -24,12 +24,21 @@
 		@include wcfFontBold;
 	}
 	
-	.articleLikesSummery:not(:empty) {
+	.articleTagList,
+	.articleLikeSection {
 		margin-top: 20px;
 	}
 	
-	.articleLikeButtons:not(:empty) {
-		margin-top: 20px;
+	.articleLikeSection {
+		align-items: center;
+	}
+	
+	.articleLikeButtons {
+		justify-content: flex-end;
+		
+		.invisible {
+			display: inline;
+		}
 	}
 }
 
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 3520623cca..350989c052 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -414,16 +414,9 @@
 	}
 	
 	> .likesSummary {
-		color: $wcfContentDimmedText;
-		cursor: pointer;
 		flex: 0 0 auto;
 		
 		@include wcfFontSmall;
-		
-		> .icon {
-			color: $wcfContentDimmedText;
-			margin-right: 5px;
-		}
 	}
 	
 	> .messageFooterButtons {
@@ -437,6 +430,17 @@
 	}
 }
 
+.likesSummary {
+	color: $wcfContentDimmedText;
+	cursor: pointer;
+	flex: 0 0 auto;
+	
+	> .icon {
+		color: $wcfContentDimmedText;
+		margin-right: 5px;
+	}
+}
+
 .messageSignature {
 	border-top: 1px solid $wcfContentBorderInner;
 	opacity: .6;
-- 
2.20.1