From 6e3aeaee366358a8c4fa4d6bf434e448b42f8506 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Joshua=20R=C3=BCsweg?= <josh@bastelstu.be>
Date: Tue, 19 Jun 2018 15:34:36 +0200
Subject: [PATCH] Add tiny version of reactionSummaryList See #2508

---
 .../templates/reactionSummaryList.tpl         |  2 +-
 .../install/files/style/ui/reactions.scss     | 40 +++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/com.woltlab.wcf/templates/reactionSummaryList.tpl b/com.woltlab.wcf/templates/reactionSummaryList.tpl
index 8c4613900c..dcefe25b72 100644
--- 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 ac8db31016..1c5a32f604 100644
--- 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
-- 
2.20.1