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

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 2d54f675dc869bc2934672399c835969fa5da698..668edd110e17f7c08d0183437717ffc77b2b9299 100644 (file)
--- 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 fa61d02b1d7c3a7fec6269dff298e0a99e3eeefe..7552cb43b00fe9adce857bebd5021f7c823898a7 100644 (file)
--- 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;
        }