Determine size of reactionType with CSS

See #2508

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 0ffe45cfaf7a0574814c2a344e37979fe6679589..860d18b3d08d02798ed7a4d20c709ad79448fac9 100644 (file)
--- 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 4075258636a27cabdc00237730891c5ceb7e1c64..c256d3f9bad26534a28a9fc8ad2b2e12a9aced65 100644 (file)
--- 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 a4577bbdef397d275c46eb6f8266e3856eb8ea1c..b8aa009259daa0e1f0463f9a7da56554b794a7ef 100644 (file)
--- 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 74eabe65f540bb6c1e6dff41fd4289259c2e7750..ac8db310160061525274de68183e224d2a9cb723 100644 (file)
--- 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 {