From a8253ac41d46ebf7b8f77ced8e0e51be0f366286 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 21 Jun 2023 17:18:17 +0200
Subject: [PATCH] Rework article button's html / css

The area was originally only used for the Like buttons, later the report button was also placed there, which is why the name `articleLikeButtons` is now misleading.

Closes #5522
---
 com.woltlab.wcf/templates/article.tpl        | 7 ++++---
 wcfsetup/install/files/style/ui/article.scss | 8 ++------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 2d54f675dc..668edd110e 100644
--- a/com.woltlab.wcf/templates/article.tpl
+++ b/com.woltlab.wcf/templates/article.tpl
@@ -187,7 +187,7 @@
 			{/if}
 			
 			<div class="col-xs-12 col-md-6 col-md{if !(MODULE_LIKE && ARTICLE_ENABLE_LIKE && $__wcf->session->getPermission('user.like.canViewLike'))} col-md-offset-6{/if}">
-				<ul class="articleLikeButtons buttonGroup buttonList smallButtons">
+				<ul class="articleButtons buttonGroup buttonList smallButtons">
 					{if $__wcf->session->getPermission('user.profile.canReportContent')}
 						<li>
 							<button
@@ -203,9 +203,10 @@
 						</li>
 					{/if}
 					{if MODULE_LIKE && ARTICLE_ENABLE_LIKE && $__wcf->session->getPermission('user.like.canLike') && $article->userID != $__wcf->user->userID}
-						<li class="jsOnly"><span class="button reactButton{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}" data-reaction-type-id="{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID}{$articleLikeData[$article->articleID]->reactionTypeID}{else}0{/if}">{icon name='face-smile'} <span class="invisible">{lang}wcf.reactions.react{/lang}</span></span></li>
+						<li class="jsOnly"><span class="button jsTooltip reactButton{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}" data-reaction-type-id="{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID}{$articleLikeData[$article->articleID]->reactionTypeID}{else}0{/if}">{icon name='face-smile'} <span class="invisible">{lang}wcf.reactions.react{/lang}</span></span></li>
 					{/if}
-					{event name='articleLikeButtons'}
+					{event name='articleLikeButtons'}{* deprecated: use articleButtons instead *}
+					{event name='articleButtons'}
 				</ul>
 			</div>
 		</div>
diff --git a/wcfsetup/install/files/style/ui/article.scss b/wcfsetup/install/files/style/ui/article.scss
index fa61d02b1d..7552cb43b0 100644
--- a/wcfsetup/install/files/style/ui/article.scss
+++ b/wcfsetup/install/files/style/ui/article.scss
@@ -52,16 +52,12 @@
 		align-items: center;
 	}
 
-	.articleLikeButtons {
+	.articleButtons {
 		justify-content: flex-end;
-
-		.invisible {
-			display: inline;
-		}
 	}
 
 	.articleLikesSummery:not(:empty),
-	.articleLikeButtons:not(:empty) {
+	.articleButtons:not(:empty) {
 		margin-top: 20px;
 	}
 
-- 
2.20.1