From 2e3bc3bffb3c562f10d42856f69513fd2e370521 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Joshua=20R=C3=BCsweg?= <josh@bastelstu.be>
Date: Tue, 19 Jun 2018 15:31:59 +0200
Subject: [PATCH] Determine size of reactionType with CSS See #2508

---
 com.woltlab.wcf/templates/article.tpl           |  2 +-
 com.woltlab.wcf/templates/reactionTypeIcon.tpl  |  2 +-
 com.woltlab.wcf/templates/reactionTypeImage.tpl |  1 -
 wcfsetup/install/files/style/ui/reactions.scss  | 15 +++++++++++++++
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 0ffe45cfaf..860d18b3d0 100644
--- a/com.woltlab.wcf/templates/article.tpl
+++ b/com.woltlab.wcf/templates/article.tpl
@@ -159,7 +159,7 @@
 			</div>
 			<div class="col-xs-12 col-md-6">
 				<ul class="articleLikeButtons buttonGroup">
-					<li class="jsOnly"><span class="button reactButton{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}">{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID}{@$__wcf->getReactionHandler()->getReactionTypeByID($articleLikeData[$article->articleID]->reactionTypeID)->renderIcon()}{else}<img src="{$__wcf->getPath()}/images/reaction/reactionIcon.svg" style="width:24px;height:24px;" alt="">{/if}</span></li>
+					<li class="jsOnly"><span class="button reactButton{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID} active{/if}" title="{lang}wcf.reactions.react{/lang}">{if $articleLikeData[$article->articleID]|isset && $articleLikeData[$article->articleID]->reactionTypeID}{@$__wcf->getReactionHandler()->getReactionTypeByID($articleLikeData[$article->articleID]->reactionTypeID)->renderIcon()}{else}<img src="{$__wcf->getPath()}/images/reaction/reactionIcon.svg" class="reactionType" alt="">{/if}</span></li>
 				</ul>
 			</div>
 		</div>
diff --git a/com.woltlab.wcf/templates/reactionTypeIcon.tpl b/com.woltlab.wcf/templates/reactionTypeIcon.tpl
index 4075258636..c256d3f9ba 100644
--- a/com.woltlab.wcf/templates/reactionTypeIcon.tpl
+++ b/com.woltlab.wcf/templates/reactionTypeIcon.tpl
@@ -1,5 +1,5 @@
 <span
-	class="icon icon24 fa-{$reactionType->iconName} reactionType"
+	class="icon fa-{$reactionType->iconName} reactionType"
 	style="color: {$reactionType->iconColor};"
 	data-reaction-type-id="{$reactionType->reactionTypeID}"
 ></span>
diff --git a/com.woltlab.wcf/templates/reactionTypeImage.tpl b/com.woltlab.wcf/templates/reactionTypeImage.tpl
index a4577bbdef..b8aa009259 100644
--- a/com.woltlab.wcf/templates/reactionTypeImage.tpl
+++ b/com.woltlab.wcf/templates/reactionTypeImage.tpl
@@ -1,6 +1,5 @@
 <img
 	src="{@$__wcf->getPath()}images/reaction/{$reactionType->iconFile}"
-	style="width:24px;height:24px"
 	class="reactionType"
 	data-reaction-type-id="{$reactionType->reactionTypeID}"
 />
diff --git a/wcfsetup/install/files/style/ui/reactions.scss b/wcfsetup/install/files/style/ui/reactions.scss
index 74eabe65f5..ac8db31016 100644
--- a/wcfsetup/install/files/style/ui/reactions.scss
+++ b/wcfsetup/install/files/style/ui/reactions.scss
@@ -25,6 +25,18 @@
 	}
 }
 
+img.reactionType {
+	width: 24px;
+	height: 24px;
+}
+
+span.icon.reactionType {
+	font-size: 18px;
+	height: 24px;
+	line-height: 24px;
+	width: 24px;
+}
+
 .reactionPopoverContent {
 	background-color: $wcfContentBackground;
 	border-radius: 3px;
@@ -45,6 +57,9 @@
 	
 	> ul > li.reactionTypeButton > span.icon:hover {
 		font-size: 22px;
+		height: 24px;
+		line-height: 24px;
+		width: 24px;
 	}
 	
 	> ul > li.reactionTypeButton > span.icon {
-- 
2.20.1