Add tiny version of reactionSummaryList

See #2508

diff --git a/com.woltlab.wcf/templates/reactionSummaryList.tpl b/com.woltlab.wcf/templates/reactionSummaryList.tpl
index 8c4613900c903f64e40791f9b7fd2910fd0166c5..dcefe25b723ae666e760e3da533e4b7547d88a53 100644 (file)
--- a/com.woltlab.wcf/templates/reactionSummaryList.tpl
+++ b/com.woltlab.wcf/templates/reactionSummaryList.tpl
@@ -1,4 +1,4 @@
-<ul class="reactionSummaryList jsOnly" data-object-type="{$objectType}" data-object-id="{$objectID}">
+<ul class="reactionSummaryList{if $isTiny|isset && $isTiny} reactionSummaryListTiny{/if} jsOnly" data-object-type="{$objectType}" data-object-id="{$objectID}">
        {if $reactionData[$objectID]|isset && $reactionData[$objectID]->getReactions()|is_array}
                {foreach from=$reactionData[$objectID]->getReactions() key=reactionTypeID item=reaction}
                        <li class="reactCountButton jsTooltip" data-reaction-type-id="{$reactionTypeID}" title="{lang}wcf.reactions.summary.listReactions{/lang}">{@$reaction[renderedReactionIcon]} <span class="reactionCount">{$reaction[reactionCount]|shortUnit}</span></li>

diff --git a/wcfsetup/install/files/style/ui/reactions.scss b/wcfsetup/install/files/style/ui/reactions.scss
index ac8db310160061525274de68183e224d2a9cb723..1c5a32f604b21fc734161cfa2509bb67c693f314 100644 (file)
--- a/wcfsetup/install/files/style/ui/reactions.scss
+++ b/wcfsetup/install/files/style/ui/reactions.scss
@@ -107,4 +107,44 @@ li.reactCountButton {
 li.reactCountButton:hover {
        background-color: darken($wcfSidebarBackground, 5);
        color: $wcfContentText;
+}
+
+.reactionSummaryListTiny {
+       display: inline;
+       
+       li.reactCountButton > img {
+               width: 16px;
+               height: 16px;
+       }
+       
+       li.reactCountButton > span.icon.reactionType {
+               font-size: 14px;
+               height: 16px;
+               line-height: 16px;
+               width: 16px;
+               cursor: pointer;
+       }
+       
+       span.reactionCount {
+               @include wcfFontSmall;
+       }
+       
+       li.reactCountButton {
+               background-color: transparent;
+               padding: 0px;
+       }
+}
+
+ul.buttonList.iconList {
+       img.reactionType {
+               width: 16px;
+               height: 16px;
+       }
+       
+       span.icon.reactionType {
+               font-size: 14px;
+               height: 16px;
+               line-height: 16px;
+               width: 16px;
+       }
 }
\ No newline at end of file