From 9ba4fe51c909b9de3a0cdea678ab471fff2de1c1 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 17 Jun 2021 18:41:59 +0200
Subject: [PATCH] Implemented content interaction buttons

---
 com.woltlab.wcf/templates/article.tpl         |  46 +++---
 com.woltlab.wcf/templates/articleAdd.tpl      |  43 +++---
 com.woltlab.wcf/templates/articleList.tpl     |  52 ++++---
 .../templates/categoryArticleList.tpl         |  39 +++--
 .../templates/categoryTrophyList.tpl          |  12 +-
 com.woltlab.wcf/templates/cms.tpl             |  20 ++-
 com.woltlab.wcf/templates/combinedTagged.tpl  |  10 +-
 .../templates/contentInteraction.tpl          |  37 +++++
 .../templates/deletedContentList.tpl          |  10 +-
 com.woltlab.wcf/templates/editHistory.tpl     |   2 +-
 com.woltlab.wcf/templates/following.tpl       |  10 +-
 com.woltlab.wcf/templates/header.tpl          |   2 +
 com.woltlab.wcf/templates/ignoredUsers.tpl    |  10 +-
 com.woltlab.wcf/templates/membersList.tpl     |  20 +--
 .../templates/moderationActivation.tpl        |  16 +-
 com.woltlab.wcf/templates/moderationList.tpl  |  14 +-
 .../templates/moderationReport.tpl            |  22 +--
 .../templates/notificationList.tpl            |  18 +--
 com.woltlab.wcf/templates/pageNavbarTop.tpl   |  13 +-
 com.woltlab.wcf/templates/searchResult.tpl    |  23 ++-
 com.woltlab.wcf/templates/tagged.tpl          |  10 +-
 com.woltlab.wcf/templates/trophy.tpl          |  12 +-
 com.woltlab.wcf/templates/trophyList.tpl      |  12 +-
 .../templates/unreadArticleList.tpl           |  24 ++-
 com.woltlab.wcf/templates/usersOnlineList.tpl |  12 +-
 .../templates/watchedArticleList.tpl          |  24 ++-
 syncTemplates.json                            |   1 -
 .../install/files/style/layout/content.scss   | 141 ++++++++++++++----
 wcfsetup/install/lang/de.xml                  |   1 +
 wcfsetup/install/lang/en.xml                  |   1 +
 30 files changed, 375 insertions(+), 282 deletions(-)
 create mode 100644 com.woltlab.wcf/templates/contentInteraction.tpl

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 93f0acb7c0..2b3161a2e9 100644
--- a/com.woltlab.wcf/templates/article.tpl
+++ b/com.woltlab.wcf/templates/article.tpl
@@ -72,28 +72,7 @@
 			<nav class="contentHeaderNavigation">
 				<ul>
 					{content}
-						{if $article->isMultilingual && $__wcf->user->userID}
-							<li class="dropdown">
-								<a class="dropdownToggle boxFlag box24 button">
-									<span><img src="{$articleContent->getLanguage()->getIconPath()}" alt="" class="iconFlag"></span>
-									<span>{$articleContent->getLanguage()->languageName}</span>
-								</a>
-								<ul class="dropdownMenu">
-									{foreach from=$article->getLanguageLinks() item='langArticleContent'}
-										{if $langArticleContent->getLanguage()}
-											<li class="boxFlag">
-												<a class="box24" href="{$langArticleContent->getLink()}">
-													<span><img src="{$langArticleContent->getLanguage()->getIconPath()}" alt="" class="iconFlag"></span>
-													<span>{$langArticleContent->getLanguage()->languageName}</span>
-												</a>
-											</li>
-										{/if}
-									{/foreach}
-								</ul>
-							</li>
-						{/if}
-					
-						{if $article->canEdit()}<li><a href="{link controller='ArticleEdit' id=$article->articleID}{/link}" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.acp.article.edit{/lang}</span></a></li>{/if}
+						{if $article->canEdit()}<li><a href="{link controller='ArticleEdit' id=$article->articleID}{/link}" class="button buttonPrimary"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.acp.article.edit{/lang}</span></a></li>{/if}
 						{event name='contentHeaderNavigation'}
 					{/content}
 				</ul>
@@ -115,6 +94,29 @@
 	{/if}
 {/capture}
 
+{capture assign='contentInteractionButtons'}
+	{if $article->isMultilingual && $__wcf->user->userID}
+		<div class="contentInteractionButton dropdown jsOnly">
+			<a class="dropdownToggle boxFlag box24 button small">
+				<span><img src="{$articleContent->getLanguage()->getIconPath()}" alt="" class="iconFlag"></span>
+				<span>{$articleContent->getLanguage()->languageName}</span>
+			</a>
+			<ul class="dropdownMenu">
+				{foreach from=$article->getLanguageLinks() item='langArticleContent'}
+					{if $langArticleContent->getLanguage()}
+						<li class="boxFlag">
+							<a class="box24" href="{$langArticleContent->getLink()}">
+								<span><img src="{$langArticleContent->getLanguage()->getIconPath()}" alt="" class="iconFlag"></span>
+								<span>{$langArticleContent->getLanguage()->languageName}</span>
+							</a>
+						</li>
+					{/if}
+				{/foreach}
+			</ul>
+		</div>
+	{/if}
+{/capture}
+
 {include file='header'}
 
 {if !$article->isPublished()}
diff --git a/com.woltlab.wcf/templates/articleAdd.tpl b/com.woltlab.wcf/templates/articleAdd.tpl
index aeccb5ccf6..6345f13683 100644
--- a/com.woltlab.wcf/templates/articleAdd.tpl
+++ b/com.woltlab.wcf/templates/articleAdd.tpl
@@ -10,27 +10,34 @@
 			</h1>
 		</div>
 		
-		<nav class="contentHeaderNavigation">
-			<ul>
-				{if $action == 'edit'}
-					{if $article->canDelete()}
-						<li><a href="#" class="button jsButtonRestore" data-confirm-message-html="{lang __encode=true isArticleEdit=true}wcf.acp.article.restore.confirmMessage{/lang}"{if !$article->isDeleted} style="display: none"{/if}><span class="icon icon16 fa-refresh"></span> <span>{lang}wcf.global.button.restore{/lang}</span></a></li>
-						<li><a href="#" class="button jsButtonDelete" data-confirm-message-html="{lang __encode=true isArticleEdit=true}wcf.acp.article.delete.confirmMessage{/lang}"{if !$article->isDeleted} style="display: none"{/if}><span class="icon icon16 fa-times"></span> <span>{lang}wcf.global.button.delete{/lang}</span></a></li>
-						<li><a href="#" class="button jsButtonTrash" data-confirm-message-html="{lang __encode=true isArticleEdit=true}wcf.acp.article.trash.confirmMessage{/lang}"{if $article->isDeleted} style="display: none"{/if}><span class="icon icon16 fa-times"></span> <span>{lang}wcf.global.button.trash{/lang}</span></a></li>
-					{/if}
-					{if $languages|count > 1 || $article->isMultilingual}
-						<li><a href="#" class="button jsButtonToggleI18n"><span class="icon icon16 fa-flag"></span> <span>{lang}wcf.acp.article.button.toggleI18n{/lang}</span></a></li>
-					{/if}
-					<li><a href="{$article->getLink()}" class="button"><span class="icon icon16 fa-search"></span> <span>{lang}wcf.acp.article.button.viewArticle{/lang}</span></a></li>
-				{/if}
-				<li><a href="{link controller='ArticleList'}{/link}" class="button"><span class="icon icon16 fa-list"></span> <span>{lang}wcf.acp.menu.link.article.list{/lang}</span></a></li>
-				
-				{event name='contentHeaderNavigation'}
-			</ul>
-		</nav>
+		{hascontent}
+			<nav class="contentHeaderNavigation">
+				<ul>
+					{content}
+						{if $action == 'edit'}
+							<li><a href="{$article->getLink()}" class="button buttonPrimary"><span class="icon icon16 fa-search"></span> <span>{lang}wcf.acp.article.button.viewArticle{/lang}</span></a></li>
+						{/if}
+						{event name='contentHeaderNavigation'}
+					{/content}
+				</ul>
+			</nav>
+		{/hascontent}
 	</header>
 {/capture}
 
+{capture assign='contentInteractionButtons'}
+	{if $action == 'edit'}
+		{if $article->canDelete()}
+			<a href="#" class="contentInteractionButton button small jsButtonRestore" data-confirm-message-html="{lang __encode=true isArticleEdit=true}wcf.acp.article.restore.confirmMessage{/lang}"{if !$article->isDeleted} style="display: none"{/if}>{lang}wcf.global.button.restore{/lang}</a>
+			<a href="#" class="contentInteractionButton button small jsButtonDelete" data-confirm-message-html="{lang __encode=true isArticleEdit=true}wcf.acp.article.delete.confirmMessage{/lang}"{if !$article->isDeleted} style="display: none"{/if}>{lang}wcf.global.button.delete{/lang}</a>
+			<a href="#" class="contentInteractionButton button small jsButtonTrash" data-confirm-message-html="{lang __encode=true isArticleEdit=true}wcf.acp.article.trash.confirmMessage{/lang}"{if $article->isDeleted} style="display: none"{/if}>{lang}wcf.global.button.trash{/lang}</a>
+		{/if}
+		{if $languages|count > 1 || $article->isMultilingual}
+			<a href="#" class="contentInteractionButton button small jsButtonToggleI18n">{lang}wcf.acp.article.button.toggleI18n{/lang}</a>
+		{/if}
+	{/if}
+{/capture}
+
 {if $articleIsFrontend|empty}
 	{include file='header' pageTitle='wcf.acp.article.'|concat:$action}
 {else}
diff --git a/com.woltlab.wcf/templates/articleList.tpl b/com.woltlab.wcf/templates/articleList.tpl
index fca02056be..4aeb58ce57 100644
--- a/com.woltlab.wcf/templates/articleList.tpl
+++ b/com.woltlab.wcf/templates/articleList.tpl
@@ -13,29 +13,12 @@
 	{/if}
 {/capture}
 
-{capture assign='headerNavigation'}
-	<li><a rel="alternate" href="{if $__wcf->getUser()->userID}{link controller='ArticleFeed'}at={@$__wcf->getUser()->userID}-{@$__wcf->getUser()->accessToken}{/link}{else}{link controller='ArticleFeed'}{/link}{/if}" title="{lang}wcf.global.button.rss{/lang}" class="rssFeed jsTooltip"><span class="icon icon16 fa-rss"></span> <span class="invisible">{lang}wcf.global.button.rss{/lang}</span></a></li>
-	{if ARTICLE_ENABLE_VISIT_TRACKING}
-		<li class="jsOnly"><a href="#" title="{lang}wcf.article.markAllAsRead{/lang}" class="markAllAsReadButton jsTooltip"><span class="icon icon16 fa-check"></span> <span class="invisible">{lang}wcf.article.markAllAsRead{/lang}</span></a></li>
-	{/if}
-{/capture}
-
 {capture assign='contentHeaderNavigation'}
-	<li class="dropdown jsOnly">
-		<a href="#" class="button dropdownToggle"><span class="icon icon16 fa-sort-amount-asc"></span> <span>{lang}wcf.article.button.sort{/lang}</span></a>
-		<ul class="dropdownMenu">
-			<li><a href="{link controller='ArticleList'}pageNo={@$pageNo}{if $user}&userID={@$user->userID}{/if}&sortField=title&sortOrder={if $sortField == 'title' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.title{/lang}{if $sortField == 'title'} <span class="icon icon16 fa-caret-{if $sortOrder == 'ASC'}up{else}down{/if}"></span>{/if}</a></li>
-			<li><a href="{link controller='ArticleList'}pageNo={@$pageNo}{if $user}&userID={@$user->userID}{/if}&sortField=time&sortOrder={if $sortField == 'time' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.date{/lang}{if $sortField == 'time'} <span class="icon icon16 fa-caret-{if $sortOrder == 'ASC'}up{else}down{/if}"></span>{/if}</a></li>
-			
-			{event name='sortOptions'}
-		</ul>
-	</li>
-	
 	{if $__wcf->getSession()->getPermission('admin.content.article.canManageArticle') || $__wcf->getSession()->getPermission('admin.content.article.canContributeArticle')}
 		{if $availableLanguages|count > 1}
-			<li><a href="#" class="button jsButtonArticleAdd"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.article.add{/lang}</span></a></li>
+			<li><a href="#" class="button buttonPrimary jsButtonArticleAdd"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.article.add{/lang}</span></a></li>
 		{else}
-			<li><a href="{link controller='ArticleAdd'}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.article.add{/lang}</span></a></li>
+			<li><a href="{link controller='ArticleAdd'}{/link}" class="button buttonPrimary"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.article.add{/lang}</span></a></li>
 		{/if}
 	{/if}
 {/capture}
@@ -70,19 +53,34 @@
 	{/if}
 {/capture}
 
-{include file='header'}
-
 {assign var='additionalLinkParameters' value=''}
 {if $user}{capture append='additionalLinkParameters'}&userID={@$user->userID}{/capture}{/if}
 {if $labelIDs|count}{capture append='additionalLinkParameters'}{foreach from=$labelIDs key=labelGroupID item=labelID}&labelIDs[{@$labelGroupID}]={@$labelID}{/foreach}{/capture}{/if}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}
-			{pages print=true assign='pagesLinks' controller='ArticleList' link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder$additionalLinkParameters"}
-		{/content}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign='pagesLinks' controller='ArticleList' link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder$additionalLinkParameters"}
+{/capture}
+
+{capture assign='contentInteractionButtons'}
+	<div class="contentInteractionButton dropdown jsOnly">
+		<a href="#" class="button small dropdownToggle">{lang}wcf.article.button.sort{/lang}</a>
+		<ul class="dropdownMenu">
+			<li><a href="{link controller='ArticleList'}pageNo={@$pageNo}{if $user}&userID={@$user->userID}{/if}&sortField=title&sortOrder={if $sortField == 'title' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.title{/lang}{if $sortField == 'title'} <span class="icon icon16 fa-caret-{if $sortOrder == 'ASC'}up{else}down{/if}"></span>{/if}</a></li>
+			<li><a href="{link controller='ArticleList'}pageNo={@$pageNo}{if $user}&userID={@$user->userID}{/if}&sortField=time&sortOrder={if $sortField == 'time' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.date{/lang}{if $sortField == 'time'} <span class="icon icon16 fa-caret-{if $sortOrder == 'ASC'}up{else}down{/if}"></span>{/if}</a></li>
+			
+			{event name='sortOptions'}
+		</ul>
 	</div>
-{/hascontent}
+{/capture}
+
+{capture assign='contentInteractionDropdownItems'}
+	<li><a rel="alternate" href="{if $__wcf->getUser()->userID}{link controller='ArticleFeed'}at={@$__wcf->getUser()->userID}-{@$__wcf->getUser()->accessToken}{/link}{else}{link controller='ArticleFeed'}{/link}{/if}" class="rssFeed">{lang}wcf.global.button.rss{/lang}</a></li>
+	{if ARTICLE_ENABLE_VISIT_TRACKING}
+		<li class="jsOnly"><a href="#" class="markAllAsReadButton">{lang}wcf.article.markAllAsRead{/lang}</a></li>
+	{/if}
+{/capture}
+
+{include file='header'}
 
 {if $objects|count}
 	<div class="section">
diff --git a/com.woltlab.wcf/templates/categoryArticleList.tpl b/com.woltlab.wcf/templates/categoryArticleList.tpl
index 33b310afec..4c531d7cc5 100644
--- a/com.woltlab.wcf/templates/categoryArticleList.tpl
+++ b/com.woltlab.wcf/templates/categoryArticleList.tpl
@@ -18,22 +18,12 @@
 	{/if}
 {/capture}
 
-{capture assign='headerNavigation'}
-	<li><a rel="alternate" href="{if $__wcf->getUser()->userID}{link controller='ArticleFeed' id=$categoryID}at={@$__wcf->getUser()->userID}-{@$__wcf->getUser()->accessToken}{/link}{else}{link controller='ArticleFeed' id=$categoryID}{/link}{/if}" title="{lang}wcf.global.button.rss{/lang}" class="rssFeed jsTooltip"><span class="icon icon16 fa-rss"></span> <span class="invisible">{lang}wcf.global.button.rss{/lang}</span></a></li>
-	{if $__wcf->user->userID}
-		<li class="jsOnly"><a href="#" title="{lang}wcf.user.objectWatch.manageSubscription{/lang}" class="jsSubscribeButton jsTooltip" data-object-type="com.woltlab.wcf.article.category" data-object-id="{@$category->categoryID}"><span class="icon icon16 fa-bookmark{if !$category->isSubscribed()}-o{/if}"></span> <span class="invisible">{lang}wcf.user.objectWatch.manageSubscription{/lang}</span></a></li>
-	{/if}
-	{if ARTICLE_ENABLE_VISIT_TRACKING}
-		<li class="jsOnly"><a href="#" title="{lang}wcf.article.markAllAsRead{/lang}" class="markAllAsReadButton jsTooltip"><span class="icon icon16 fa-check"></span> <span class="invisible">{lang}wcf.article.markAllAsRead{/lang}</span></a></li>
-	{/if}
-{/capture}
-
 {if $__wcf->getSession()->getPermission('admin.content.article.canManageArticle')}
 	{capture assign='contentHeaderNavigation'}
 		{if $availableLanguages|count > 1}
-			<li><a href="#" class="button jsButtonArticleAdd"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.article.add{/lang}</span></a></li>
+			<li><a href="#" class="button buttonPrimary jsButtonArticleAdd"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.article.add{/lang}</span></a></li>
 		{else}
-			<li><a href="{link controller='ArticleAdd'}categoryID={@$category->categoryID}{/link}" class="button"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.article.add{/lang}</span></a></li>
+			<li><a href="{link controller='ArticleAdd'}categoryID={@$category->categoryID}{/link}" class="button buttonPrimary"><span class="icon icon16 fa-plus"></span> <span>{lang}wcf.acp.article.add{/lang}</span></a></li>
 		{/if}
 	{/capture}
 {/if}
@@ -68,15 +58,24 @@
 	{/if}
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign='pagesLinks' controller='CategoryArticleList' object=$category link="pageNo=%d"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}
-			{pages print=true assign='pagesLinks' controller='CategoryArticleList' object=$category link="pageNo=%d"}
-		{/content}
-	</div>
-{/hascontent}
+{capture assign='contentInteractionButtons'}
+	{if $__wcf->user->userID}
+		<a href="#" class="jsSubscribeButton jsOnly button small{if $category->isSubscribed()} active{/if}" data-object-type="com.woltlab.wcf.article.category" data-object-id="{@$category->categoryID}">{lang}wcf.user.objectWatch.button.subscribe{/lang}</a>
+	{/if}
+{/capture}
+
+{capture assign='contentInteractionDropdownItems'}
+	<li><a rel="alternate" href="{if $__wcf->getUser()->userID}{link controller='ArticleFeed' id=$categoryID}at={@$__wcf->getUser()->userID}-{@$__wcf->getUser()->accessToken}{/link}{else}{link controller='ArticleFeed' id=$categoryID}{/link}{/if}" class="rssFeed">{lang}wcf.global.button.rss{/lang}</a></li>
+	{if ARTICLE_ENABLE_VISIT_TRACKING}
+		<li class="jsOnly"><a href="#" class="markAllAsReadButton">{lang}wcf.article.markAllAsRead{/lang}</a></li>
+	{/if}
+{/capture}
+
+{include file='header'}
 
 {if $objects|count}
 	<div class="section">
diff --git a/com.woltlab.wcf/templates/categoryTrophyList.tpl b/com.woltlab.wcf/templates/categoryTrophyList.tpl
index 3a39651634..91a2fac195 100644
--- a/com.woltlab.wcf/templates/categoryTrophyList.tpl
+++ b/com.woltlab.wcf/templates/categoryTrophyList.tpl
@@ -20,15 +20,11 @@
 	{/if}
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign='pagesLinks' controller='CategoryTrophyList' object=$category link="pageNo=%d"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}
-			{pages print=true assign='pagesLinks' controller='CategoryTrophyList' object=$category link="pageNo=%d"}
-		{/content}
-	</div>
-{/hascontent}
+{include file='header'}
 
 {if $objects|count}
 	<div class="section sectionContainerList">
diff --git a/com.woltlab.wcf/templates/cms.tpl b/com.woltlab.wcf/templates/cms.tpl
index eb29f7c6a6..f74d49af45 100644
--- a/com.woltlab.wcf/templates/cms.tpl
+++ b/com.woltlab.wcf/templates/cms.tpl
@@ -12,17 +12,17 @@
 {/capture}
 
 {capture assign='contentHeaderNavigation'}
+	{if $__wcf->getSession()->getPermission('admin.content.cms.canManagePage')}<li><a href="{link controller='PageEdit' id=$page->pageID isACP=true}{/link}" class="button buttonPrimary"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.acp.page.edit{/lang}</span></a></li>{/if}
+{/capture}
+
+{capture assign='contentInteractionButtons'}
 	{if $page->showShareButtons()}
-		<li>
-			<a href="{$content->getLink()}" class="button shareButton jsOnly" data-link-title="{$content->getTitle()}">
-				<span class="icon icon16 fa-share-alt"></span> <span>{lang}wcf.message.share{/lang}</span>
-			</a>
-		</li>
+		<a href="{$content->getLink()}" class="contentInteractionButton button small shareButton jsOnly" data-link-title="{$content->getTitle()}">{lang}wcf.message.share{/lang}</a>
 	{/if}
-	
+
 	{if $page->isMultilingual && $__wcf->user->userID && $page->getPageLanguages()|count > 1}
-		<li class="dropdown">
-			<a class="dropdownToggle boxFlag box24 button">
+		<div class="contentInteractionButton dropdown jsOnly">
+			<a class="button small  dropdownToggle boxFlag box24">
 				<span><img src="{$activePageLanguage->getIconPath()}" alt="" class="iconFlag"></span>
 				<span>{$activePageLanguage->languageName}</span>
 			</a>
@@ -36,10 +36,8 @@
 					</li>
 				{/foreach}
 			</ul>
-		</li>
+		</div>
 	{/if}
-	
-	{if $__wcf->getSession()->getPermission('admin.content.cms.canManagePage')}<li><a href="{link controller='PageEdit' id=$page->pageID isACP=true}{/link}" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.acp.page.edit{/lang}</span></a></li>{/if}
 {/capture}
 
 {include file='header'}
diff --git a/com.woltlab.wcf/templates/combinedTagged.tpl b/com.woltlab.wcf/templates/combinedTagged.tpl
index be1c1ba302..a6924fa2a0 100644
--- a/com.woltlab.wcf/templates/combinedTagged.tpl
+++ b/com.woltlab.wcf/templates/combinedTagged.tpl
@@ -47,13 +47,11 @@
 	</section>
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign=pagesLinks controller='CombinedTagged' link="$linkParameters&objectType=$objectType&pageNo=%d"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}{pages print=true assign=pagesLinks controller='CombinedTagged' link="$linkParameters&objectType=$objectType&pageNo=%d"}{/content}
-	</div>
-{/hascontent}
+{include file='header'}
 
 {if $items}
 	{include file=$resultListTemplateName application=$resultListApplication}
diff --git a/com.woltlab.wcf/templates/contentInteraction.tpl b/com.woltlab.wcf/templates/contentInteraction.tpl
new file mode 100644
index 0000000000..1be218c668
--- /dev/null
+++ b/com.woltlab.wcf/templates/contentInteraction.tpl
@@ -0,0 +1,37 @@
+{if !$beforeContentInteraction|empty}
+    {@$beforeContentInteraction}
+{/if}
+
+<div class="contentInteraction">
+    {hascontent}
+		<div class="contentInteractionPagination paginationTop">
+			{content}{if $contentInteractionPagination|isset}{@$contentInteractionPagination}{/if}{/content}
+		</div>
+	{/hascontent}
+
+    <div class="contentInteractionButtonContainer">
+        {hascontent}
+            <div class="contentInteractionButtons">
+                {content}
+                    {event name='beforeButtons'}
+                    {if $contentInteractionButtons|isset}{@$contentInteractionButtons}{/if}
+                    {event name='afterButtons'}
+                {/content}
+            </div>
+        {/hascontent}
+
+        {hascontent}
+            <div class="contentInteractionDropdown dropdown jsOnly">
+                <a href="#" class="button small dropdownToggle"><span class="icon icon16 fa-ellipsis-v"></span></a>
+
+                <ul class="contentInteractionDropdownItems dropdownMenu">
+                    {content}
+                        {event name='beforeDropdownItems'}
+                        {if $contentInteractionDropdownItems|isset}{@$contentInteractionDropdownItems}{/if}
+                        {event name='afterDropdownItems'}
+                    {/content}
+                </ul>
+            </div>
+        {/hascontent}
+    </div>
+</div>
diff --git a/com.woltlab.wcf/templates/deletedContentList.tpl b/com.woltlab.wcf/templates/deletedContentList.tpl
index b970d48b49..d0d4e17f6b 100644
--- a/com.woltlab.wcf/templates/deletedContentList.tpl
+++ b/com.woltlab.wcf/templates/deletedContentList.tpl
@@ -18,13 +18,11 @@
 
 {capture assign='contentTitle'}{lang}wcf.moderation.deletedContent.{@$objectType}{/lang}{/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign=pagesLinks controller='DeletedContentList' link="objectType=$objectType&pageNo=%d"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}{pages print=true assign=pagesLinks controller='DeletedContentList' link="objectType=$objectType&pageNo=%d"}{/content}
-	</div>
-{/hascontent}
+{include file='header'}
 
 {if $items}
 	{include file=$resultListTemplateName application=$resultListApplication}
diff --git a/com.woltlab.wcf/templates/editHistory.tpl b/com.woltlab.wcf/templates/editHistory.tpl
index 0f956f0758..da5142094c 100644
--- a/com.woltlab.wcf/templates/editHistory.tpl
+++ b/com.woltlab.wcf/templates/editHistory.tpl
@@ -2,7 +2,7 @@
 
 {capture assign='contentTitle'}{lang}wcf.edit.versions{/lang}: {$object->getTitle()}{/capture}
 
-{capture assign='contentHeaderNavigation'}<li><a href="{$object->getLink()}" class="button"><span class="icon icon16 fa-arrow-right"></span> <span>{lang}wcf.edit.button.goToContent{/lang}</span></a></li>{/capture}
+{capture assign='contentHeaderNavigation'}<li><a href="{$object->getLink()}" class="button buttonPrimary"><span class="icon icon16 fa-arrow-right"></span> <span>{lang}wcf.edit.button.goToContent{/lang}</span></a></li>{/capture}
 
 {include file='header'}
 
diff --git a/com.woltlab.wcf/templates/following.tpl b/com.woltlab.wcf/templates/following.tpl
index 1b3fc468b3..f304c53854 100644
--- a/com.woltlab.wcf/templates/following.tpl
+++ b/com.woltlab.wcf/templates/following.tpl
@@ -2,13 +2,11 @@
 
 {capture assign='contentTitleBadge'}<span class="badge">{#$items}</span>{/capture}
 
-{include file='header' __sidebarLeftHasMenu=true}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign=pagesLinks controller='Following' link="pageNo=%d"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}{pages print=true assign=pagesLinks controller='Following' link="pageNo=%d"}{/content}
-	</div>
-{/hascontent}
+{include file='header' __sidebarLeftHasMenu=true}
 
 {if $objects|count}
 	<div class="section sectionContainerList">
diff --git a/com.woltlab.wcf/templates/header.tpl b/com.woltlab.wcf/templates/header.tpl
index dc9e0c5116..d9f66db755 100644
--- a/com.woltlab.wcf/templates/header.tpl
+++ b/com.woltlab.wcf/templates/header.tpl
@@ -162,3 +162,5 @@
 				{/hascontent}
 				
 				{event name='contents'}
+
+				{include file='contentInteraction'}
diff --git a/com.woltlab.wcf/templates/ignoredUsers.tpl b/com.woltlab.wcf/templates/ignoredUsers.tpl
index fe10da0483..0d40af6a4f 100644
--- a/com.woltlab.wcf/templates/ignoredUsers.tpl
+++ b/com.woltlab.wcf/templates/ignoredUsers.tpl
@@ -2,13 +2,11 @@
 
 {capture assign='contentTitleBadge'}<span class="badge">{#$items}</span>{/capture}
 
-{include file='header' __sidebarLeftHasMenu=true}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign=pagesLinks controller='IgnoredUsers' link="pageNo=%d"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}{pages print=true assign=pagesLinks controller='IgnoredUsers' link="pageNo=%d"}{/content}
-	</div>
-{/hascontent}
+{include file='header' __sidebarLeftHasMenu=true}
 
 {if $objects|count}
 	<div class="section sectionContainerList">
diff --git a/com.woltlab.wcf/templates/membersList.tpl b/com.woltlab.wcf/templates/membersList.tpl
index 3465f5634c..2a925b56c8 100644
--- a/com.woltlab.wcf/templates/membersList.tpl
+++ b/com.woltlab.wcf/templates/membersList.tpl
@@ -33,19 +33,15 @@
 	</section>
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{if $searchID}
+			{pages print=true assign=pagesLinks controller='MembersList' id=$searchID link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder&letter=$encodedLetter"}
+		{else}
+			{pages print=true assign=pagesLinks controller='MembersList' link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder&letter=$encodedLetter"}
+		{/if}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}
-			{if $searchID}
-				{pages print=true assign=pagesLinks controller='MembersList' id=$searchID link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder&letter=$encodedLetter"}
-			{else}
-				{pages print=true assign=pagesLinks controller='MembersList' link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder&letter=$encodedLetter"}
-			{/if}
-		{/content}
-	</div>
-{/hascontent}
+{include file='header'}
 
 {if $items}
 	<div class="section sectionContainerList">
diff --git a/com.woltlab.wcf/templates/moderationActivation.tpl b/com.woltlab.wcf/templates/moderationActivation.tpl
index 4c1bd05f0c..43a5710e48 100644
--- a/com.woltlab.wcf/templates/moderationActivation.tpl
+++ b/com.woltlab.wcf/templates/moderationActivation.tpl
@@ -35,13 +35,7 @@
 			<nav class="contentHeaderNavigation">
 				<ul>
 					{content}
-						<li class="jsOnly"><a id="moderationAssignUser" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.moderation.assignedUser.change{/lang}</span></a></li>
-						{if !$queue->isDone()}
-							<li class="jsOnly"><a id="enableContent" class="button"><span class="icon icon16 fa-check"></span> <span>{lang}wcf.moderation.activation.enableContent{/lang}</span></a></li>
-							{if $queueManager->canRemoveContent($queue->getDecoratedObject())}<li class="jsOnly"><a id="removeContent" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.moderation.activation.removeContent{/lang}</span></a></li>{/if}
-						{/if}
-						{if $queue->getAffectedObject()}<li><a href="{$queue->getAffectedObject()->getLink()}" class="button"><span class="icon icon16 fa-arrow-right"></span> <span>{lang}wcf.moderation.jumpToContent{/lang}</span></a></li>{/if}
-						
+						{if $queue->getAffectedObject()}<li><a href="{$queue->getAffectedObject()->getLink()}" class="button buttonPrimary"><span class="icon icon16 fa-arrow-right"></span> <span>{lang}wcf.moderation.jumpToContent{/lang}</span></a></li>{/if}
 						{event name='contentHeaderNavigation'}
 					{/content}
 				</ul>
@@ -50,6 +44,14 @@
 	</header>
 {/capture}
 
+{capture assign='contentInteractionButtons'}
+	<a id="moderationAssignUser" class="contentInteractionButton button small jsOnly">{lang}wcf.moderation.assignedUser.change{/lang}</a>
+	{if !$queue->isDone()}
+		<a id="enableContent" class="contentInteractionButton button small jsOnly">{lang}wcf.moderation.activation.enableContent{/lang}</a>
+		{if $queueManager->canRemoveContent($queue->getDecoratedObject())}<a id="removeContent" class="contentInteractionButton button small jsOnly">{lang}wcf.moderation.activation.removeContent{/lang}</a>{/if}
+	{/if}
+{/capture}
+
 {include file='header'}
 
 {include file='formError'}
diff --git a/com.woltlab.wcf/templates/moderationList.tpl b/com.woltlab.wcf/templates/moderationList.tpl
index 72637c619a..db3b97fe2b 100644
--- a/com.woltlab.wcf/templates/moderationList.tpl
+++ b/com.woltlab.wcf/templates/moderationList.tpl
@@ -6,17 +6,15 @@
 	{event name='sidebarBoxes'}
 {/capture}
 
-{capture assign='headerNavigation'}
-	<li class="jsOnly"><a href="#" title="{lang}wcf.moderation.markAllAsRead{/lang}" class="markAllAsReadButton jsTooltip"><span class="icon icon16 fa-check"></span> <span class="invisible">{lang}wcf.moderation.markAllAsRead{/lang}</span></a></li>
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign=pagesLinks controller='ModerationList' link="definitionID=$definitionID&assignedUserID=$assignedUserID&status=$status&pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionDropdownItems'}
+	<li class="jsOnly"><a href="#" class="markAllAsReadButton">{lang}wcf.moderation.markAllAsRead{/lang}</a></li>
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}{pages print=true assign=pagesLinks controller='ModerationList' link="definitionID=$definitionID&assignedUserID=$assignedUserID&status=$status&pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}{/content}
-	</div>
-{/hascontent}
+{include file='header'}
 
 {if $objects|count}
 	<div class="section tabularBox messageGroupList moderationList moderationQueueEntryList jsClipboardContainer" data-type="com.woltlab.wcf.moderation.queue">
diff --git a/com.woltlab.wcf/templates/moderationReport.tpl b/com.woltlab.wcf/templates/moderationReport.tpl
index 6e5c21c3c6..432a81eac7 100644
--- a/com.woltlab.wcf/templates/moderationReport.tpl
+++ b/com.woltlab.wcf/templates/moderationReport.tpl
@@ -35,16 +35,7 @@
 			<nav class="contentHeaderNavigation">
 				<ul>
 					{content}
-						<li class="jsOnly"><a id="moderationAssignUser" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.moderation.assignedUser.change{/lang}</span></a></li>
-						{if !$queue->isDone()}
-							{if $queueManager->canRemoveContent($queue->getDecoratedObject())}<li class="jsOnly"><a id="removeContent" class="button"><span class="icon icon16 fa-times"></span> <span>{lang}wcf.moderation.report.removeContent{/lang}</span></a></li>{/if}
-							<li class="jsOnly"><a id="removeReport" class="button"><span class="icon icon16 fa-check"></span> <span>{lang}wcf.moderation.report.removeReport{/lang}</span></a></li>
-						{/if}
-						{if $queue->canChangeJustifiedStatus()}
-							<li class="jsOnly"><a id="changeJustifiedStatus" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.moderation.report.changeJustifiedStatus{/lang}</span></a></li>
-						{/if}
-						{if $queue->getAffectedObject()}<li><a href="{$queue->getAffectedObject()->getLink()}" class="button"><span class="icon icon16 fa-arrow-right"></span> <span>{lang}wcf.moderation.jumpToContent{/lang}</span></a></li>{/if}
-						
+						{if $queue->getAffectedObject()}<li><a href="{$queue->getAffectedObject()->getLink()}" class="button buttonPrimary"><span class="icon icon16 fa-arrow-right"></span> <span>{lang}wcf.moderation.jumpToContent{/lang}</span></a></li>{/if}
 						{event name='contentHeaderNavigation'}
 					{/content}
 				</ul>
@@ -53,6 +44,17 @@
 	</header>
 {/capture}
 
+{capture assign='contentInteractionButtons'}
+	<a id="moderationAssignUser" class="contentInteractionButton button small jsOnly">{lang}wcf.moderation.assignedUser.change{/lang}</a>
+	{if !$queue->isDone()}
+		<a id="enableContent" class="contentInteractionButton button small jsOnly">{lang}wcf.moderation.activation.enableContent{/lang}</a>
+		{if $queueManager->canRemoveContent($queue->getDecoratedObject())}<a id="removeContent" class="contentInteractionButton button small jsOnly">{lang}wcf.moderation.activation.removeContent{/lang}</a>{/if}
+	{/if}
+	{if $queue->canChangeJustifiedStatus()}
+		<a id="changeJustifiedStatus" class="contentInteractionButton button small jsOnly">{lang}wcf.moderation.report.changeJustifiedStatus{/lang}</a>
+	{/if}
+{/capture}
+
 {include file='header'}
 
 {include file='formError'}
diff --git a/com.woltlab.wcf/templates/notificationList.tpl b/com.woltlab.wcf/templates/notificationList.tpl
index 40e8b14d66..41480874e3 100644
--- a/com.woltlab.wcf/templates/notificationList.tpl
+++ b/com.woltlab.wcf/templates/notificationList.tpl
@@ -8,7 +8,6 @@
 			<nav class="contentHeaderNavigation">
 				<ul>
 					{content}
-						{if $__wcf->getUserNotificationHandler()->getNotificationCount()}<li class="jsOnly"><a class="button jsMarkAllAsConfirmed"><span class="icon icon16 fa-check"></span> <span>{lang}wcf.user.notification.markAllAsConfirmed{/lang}</span></a></li>{/if}
 						{event name='contentHeaderNavigation'}
 					{/content}
 				</ul>
@@ -21,20 +20,19 @@
 	<link rel="alternate" type="application/rss+xml" title="{lang}wcf.global.button.rss{/lang}" href="{link controller='NotificationFeed'}at={@$__wcf->getUser()->userID}-{@$__wcf->getUser()->accessToken}{/link}">
 {/capture}
 
-{capture assign='headerNavigation'}
-	<li><a rel="alternate" href="{link controller='NotificationFeed'}at={@$__wcf->getUser()->userID}-{@$__wcf->getUser()->accessToken}{/link}" title="{lang}wcf.global.button.rss{/lang}" class="rssFeed jsTooltip"><span class="icon icon16 fa-rss"></span> <span class="invisible">{lang}wcf.global.button.rss{/lang}</span></a></li>
+{include file='userMenuSidebar'}
+
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign=pagesLinks controller='NotificationList' link="pageNo=%d"}
 {/capture}
 
-{include file='userMenuSidebar'}
+{capture assign='contentInteractionDropdownItems'}
+	{if $__wcf->getUserNotificationHandler()->getNotificationCount()}<li class="jsOnly"><a href="#" class="jsMarkAllAsConfirmed">{lang}wcf.user.notification.markAllAsConfirmed{/lang}</a></li>{/if}
+	<li><a rel="alternate" href="{link controller='NotificationFeed'}at={@$__wcf->getUser()->userID}-{@$__wcf->getUser()->accessToken}{/link}" class="rssFeed">{lang}wcf.global.button.rss{/lang}</a></li>
+{/capture}
 
 {include file='header' __sidebarLeftHasMenu=true}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}{pages print=true assign=pagesLinks controller='NotificationList' link="pageNo=%d"}{/content}
-	</div>
-{/hascontent}
-
 {if $notifications[notifications]}
 	{assign var=lastPeriod value=''}
 	
diff --git a/com.woltlab.wcf/templates/pageNavbarTop.tpl b/com.woltlab.wcf/templates/pageNavbarTop.tpl
index 7395b0829b..3f80ec77aa 100644
--- a/com.woltlab.wcf/templates/pageNavbarTop.tpl
+++ b/com.woltlab.wcf/templates/pageNavbarTop.tpl
@@ -3,12 +3,13 @@
 		{if $skipBreadcrumbs|empty}{include file='breadcrumbs'}{/if}
 		
 		{hascontent}
-		<ul class="pageNavigationIcons jsPageNavigationIcons">
-			{content}
-				{if $headerNavigation|isset}{@$headerNavigation}{/if}
-				{event name='navigationIcons'}
-			{/content}
-		</ul>
+			{* DEPRECATED: use contentInteractionButtons or contentInteractionDropdownItems instead *}
+			<ul class="pageNavigationIcons jsPageNavigationIcons">
+				{content}
+					{if $headerNavigation|isset}{@$headerNavigation}{/if}
+					{event name='navigationIcons'}
+				{/content}
+			</ul>
 		{/hascontent}
 	</div>
 </div>
diff --git a/com.woltlab.wcf/templates/searchResult.tpl b/com.woltlab.wcf/templates/searchResult.tpl
index bcc79e718d..c7a2972d62 100644
--- a/com.woltlab.wcf/templates/searchResult.tpl
+++ b/com.woltlab.wcf/templates/searchResult.tpl
@@ -9,9 +9,6 @@
 			<nav class="contentHeaderNavigation">
 				<ul>
 					{content}
-						{if $alterable}
-							<li><a href="{link controller='Search'}modify={@$searchID}{/link}" class="button"><span class="icon icon16 fa-search"></span> <span>{lang}wcf.search.results.change{/lang}</span></a></li>
-						{/if}
 						{event name='contentHeaderNavigation'}
 					{/content}
 				</ul>
@@ -20,16 +17,18 @@
 	</header>
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{assign var=encodedHighlight value=$highlight|urlencode}
+	{pages print=true application=$application assign=pagesLinks controller='SearchResult' id=$searchID link="pageNo=%d&highlight=$encodedHighlight"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}
-			{assign var=encodedHighlight value=$highlight|urlencode}
-			{pages print=true application=$application assign=pagesLinks controller='SearchResult' id=$searchID link="pageNo=%d&highlight=$encodedHighlight"}
-		{/content}
-	</div>
-{/hascontent}
+{capture assign='contentInteractionButtons'}
+	{if $alterable}
+		<a href="{link controller='Search'}modify={@$searchID}{/link}" class="contentInteractionButton button small">{lang}wcf.search.results.change{/lang}</a>
+	{/if}
+{/capture}
+
+{include file='header'}
 
 {include file=$resultListTemplateName application=$resultListApplication}
 
diff --git a/com.woltlab.wcf/templates/tagged.tpl b/com.woltlab.wcf/templates/tagged.tpl
index 989e846cd4..59795191db 100644
--- a/com.woltlab.wcf/templates/tagged.tpl
+++ b/com.woltlab.wcf/templates/tagged.tpl
@@ -36,13 +36,11 @@
 	{/if}
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign=pagesLinks controller='Tagged' object=$tag link="objectType=$objectType&pageNo=%d"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}{pages print=true assign=pagesLinks controller='Tagged' object=$tag link="objectType=$objectType&pageNo=%d"}{/content}
-	</div>
-{/hascontent}
+{include file='header'}
 
 {if $items}
 	{include file=$resultListTemplateName application=$resultListApplication}
diff --git a/com.woltlab.wcf/templates/trophy.tpl b/com.woltlab.wcf/templates/trophy.tpl
index 460b73e330..fcef5c7642 100644
--- a/com.woltlab.wcf/templates/trophy.tpl
+++ b/com.woltlab.wcf/templates/trophy.tpl
@@ -28,15 +28,11 @@
 	</header>
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign='pagesLinks' controller='Trophy' object=$trophy link="pageNo=%d"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}
-			{pages print=true assign='pagesLinks' controller='Trophy' object=$trophy link="pageNo=%d"}
-		{/content}
-	</div>
-{/hascontent}
+{include file='header'}
 
 {if $objects|count}
 	<div class="section sectionContainerList">
diff --git a/com.woltlab.wcf/templates/trophyList.tpl b/com.woltlab.wcf/templates/trophyList.tpl
index f88727cb2c..4a0fac0ede 100644
--- a/com.woltlab.wcf/templates/trophyList.tpl
+++ b/com.woltlab.wcf/templates/trophyList.tpl
@@ -15,15 +15,11 @@
 	{/if}
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign='pagesLinks' controller='TrophyList' link="pageNo=%d"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}
-			{pages print=true assign='pagesLinks' controller='TrophyList' link="pageNo=%d"}
-		{/content}
-	</div>
-{/hascontent}
+{include file='header'}
 
 {if $objects|count}
 	<div class="section sectionContainerList">
diff --git a/com.woltlab.wcf/templates/unreadArticleList.tpl b/com.woltlab.wcf/templates/unreadArticleList.tpl
index 26f5e56607..ad138203ee 100644
--- a/com.woltlab.wcf/templates/unreadArticleList.tpl
+++ b/com.woltlab.wcf/templates/unreadArticleList.tpl
@@ -9,12 +9,6 @@
 
 {capture assign='contentTitleBadge'}<span class="badge">{#$items}</span>{/capture}
 
-{capture assign='headerNavigation'}
-	{if ARTICLE_ENABLE_VISIT_TRACKING}
-		<li class="jsOnly"><a href="#" title="{lang}wcf.article.markAllAsRead{/lang}" class="markAllAsReadButton jsTooltip"><span class="icon icon16 fa-check"></span> <span class="invisible">{lang}wcf.article.markAllAsRead{/lang}</span></a></li>
-	{/if}
-{/capture}
-
 {capture assign='sidebarRight'}
 	{if !$labelGroups|empty}
 		<form id="sidebarForm" method="post" action="{link application='wcf' controller=$controllerName object=$controllerObject}{/link}">
@@ -45,15 +39,17 @@
 	{/if}
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign='pagesLinks' controller='UnreadArticleList' link="pageNo=%d"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}
-			{pages print=true assign='pagesLinks' controller='UnreadArticleList' link="pageNo=%d"}
-		{/content}
-	</div>
-{/hascontent}
+{capture assign='contentInteractionDropdownItems'}
+	{if ARTICLE_ENABLE_VISIT_TRACKING}
+		<li class="jsOnly"><a href="#" class="markAllAsReadButton">{lang}wcf.article.markAllAsRead{/lang}</a></li>
+	{/if}
+{/capture}
+
+{include file='header'}
 
 {if $objects|count}
 	<div class="section">
diff --git a/com.woltlab.wcf/templates/usersOnlineList.tpl b/com.woltlab.wcf/templates/usersOnlineList.tpl
index 06cde2e020..1ba7cb5f73 100644
--- a/com.woltlab.wcf/templates/usersOnlineList.tpl
+++ b/com.woltlab.wcf/templates/usersOnlineList.tpl
@@ -67,15 +67,11 @@
 	</section>
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign=pagesLinks controller='UsersOnlineList' link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}
-			{pages print=true assign=pagesLinks controller='UsersOnlineList' link="pageNo=%d&sortField=$sortField&sortOrder=$sortOrder"}
-		{/content}
-	</div>
-{/hascontent}
+{include file='header'}
 
 {assign var=usersOnlineList value=''}
 {assign var=usersOnline value=0}
diff --git a/com.woltlab.wcf/templates/watchedArticleList.tpl b/com.woltlab.wcf/templates/watchedArticleList.tpl
index 3249368cd9..071b65c4a2 100644
--- a/com.woltlab.wcf/templates/watchedArticleList.tpl
+++ b/com.woltlab.wcf/templates/watchedArticleList.tpl
@@ -7,12 +7,6 @@
 	{/if}
 {/capture}
 
-{capture assign='headerNavigation'}>
-	{if ARTICLE_ENABLE_VISIT_TRACKING}
-		<li class="jsOnly"><a href="#" title="{lang}wcf.article.markAllAsRead{/lang}" class="markAllAsReadButton jsTooltip"><span class="icon icon16 fa-check"></span> <span class="invisible">{lang}wcf.article.markAllAsRead{/lang}</span></a></li>
-	{/if}
-{/capture}
-
 {capture assign='sidebarRight'}
 	{if !$labelGroups|empty}
 		<form id="sidebarForm" method="post" action="{link application='wcf' controller=$controllerName object=$controllerObject}{/link}">
@@ -43,15 +37,17 @@
 	{/if}
 {/capture}
 
-{include file='header'}
+{capture assign='contentInteractionPagination'}
+	{pages print=true assign='pagesLinks' controller='WatchedArticleList' link="pageNo=%d"}
+{/capture}
 
-{hascontent}
-	<div class="paginationTop">
-		{content}
-			{pages print=true assign='pagesLinks' controller='WatchedArticleList' link="pageNo=%d"}
-		{/content}
-	</div>
-{/hascontent}
+{capture assign='contentInteractionDropdownItems'}
+	{if ARTICLE_ENABLE_VISIT_TRACKING}
+		<li class="jsOnly"><a href="#" class="markAllAsReadButton">{lang}wcf.article.markAllAsRead{/lang}</a></li>
+	{/if}
+{/capture}
+
+{include file='header'}
 
 {if $objects|count}
 	<div class="section">
diff --git a/syncTemplates.json b/syncTemplates.json
index fcd4ed90c5..32b63d1cdc 100644
--- a/syncTemplates.json
+++ b/syncTemplates.json
@@ -62,7 +62,6 @@
     "__wysiwygSmileyFormNode",
     "__wysiwygTabMenuFormContainer",
     "aclPermissionJavaScript",
-    "articleAdd",
     "articleAddDialog",
     "benchmark",
     "booleanOptionType",
diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index c09b229f53..9a0078823c 100644
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -27,6 +27,9 @@
 }
 
 .contentHeader {
+	display: flex;
+	align-items: flex-start;
+
 	.contentHeaderDescription {
 		color: $wcfContentDimmedText;
 		margin-top: 5px;
@@ -51,6 +54,10 @@
 		}
 	}
 
+	.contentHeaderTitle {
+		flex: 1 1 0%;
+	}
+
 	.contentTitle + .inlineDataList {
 		margin-top: 5px;
 	}
@@ -65,29 +72,31 @@
 		}
 	}
 
-	@include screen-sm {
-		.contentHeaderNavigation > ul {
-			@include inlineList;
+	@include screen-sm-down {
+		.contentHeaderNavigation {
+			flex: 0 auto;
 
-			align-items: flex-start;
-			justify-content: flex-end;
-			margin-top: 20px;
+			ul {
+				margin-left: 5px;
+			}
+
+			li:not(:first-child) {
+				margin-top: 5px;
+			}
+
+			.button {
+				padding: 6px 10px;
+				text-transform: none;
+			}
 		}
 	}
 
 	@include screen-md-up {
-		display: flex;
-		align-items: flex-start;
-
 		.contentHeaderIcon {
 			flex: 0 0 64px;
 			margin-right: 15px;
 		}
 
-		.contentHeaderTitle {
-			flex: 1 1 0%;
-		}
-
 		.contentHeaderNavigation {
 			flex: 0 0 auto;
 			margin-left: 15px;
@@ -414,24 +423,102 @@ fieldset {
 	}
 }
 
+.contentInteraction {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 20px;
+
+	@include screen-xs {
+		flex-wrap: wrap;
+	}
+}
+
+.contentInteractionPagination {
+	flex: 0 0 auto;
+
+	&.paginationTop {
+		margin-top: 0;
+	}
+
+	@include screen-xs {
+		flex: 0 0 100%;
+
+		& + .contentInteractionButtonContainer {
+			margin-top: 20px;
+		}
+	}
+}
+
+.contentInteractionButtonContainer {
+	display: flex;
+	margin-left: auto;
+	overflow: auto;
+}
+
+.contentInteractionButtons {
+	display: flex;
+	flex: 0 0 auto;
+}
+
+.contentInteractionButton {
+	flex: 0 0 auto;
+	overflow: hidden;
+
+	.icon {
+		display: none;
+	}
+
+	&:not(:first-child) {
+		&.button,
+		.button {
+			border-bottom-left-radius: 0;
+			border-top-left-radius: 0;
+		}
+	}
+
+	&:not(:last-child) {
+		&.button,
+		.button {
+			border-bottom-right-radius: 0;
+			border-top-right-radius: 0;
+		}
+	}
+}
+
+.contentInteractionButton:not(:first-child) {
+	margin-left: 1px;
+}
+
+.contentInteractionDropdown {
+	display: flex;
+	flex: 0 0 auto;
+	margin-left: 5px;
+
+	.dropdownToggle {
+		align-items: center;
+		display: flex;
+		flex: 0 0 100%;
+		white-space: nowrap;
+	}
+}
+
+.content {
+	.contentInteraction + .section,
+	.contentInteraction + form {
+		margin-top: 20px;
+	}
+}
+
 /* content navigation buttons */
 @include screen-xs {
 	.contentHeader > .contentHeaderNavigation > ul {
-		margin-top: 30px;
+		> .button {
+			display: block;
+			padding: 7px 10px;
+			text-align: center;
 
-		> li {
-			&:not(:first-child) {
-				margin-top: 10px;
-			}
-
-			> .button {
-				display: block;
-				padding: 7px 10px;
-				text-align: center;
-
-				> .invisible {
-					display: inline;
-				}
+			> .invisible {
+				display: inline;
 			}
 		}
 	}
diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index 1bd69fa451..57432010ab 100644
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -5446,6 +5446,7 @@ Benachrichtigungen auf <a href="{link isHtmlEmail=true}{/link}">{PAGE_TITLE|lang
 		<item name="wcf.user.profile.title"><![CDATA[Benutzerprofil von {$user->username}]]></item>
 	</category>
 	<category name="wcf.user.objectWatch">
+		<item name="wcf.user.objectWatch.button.subscribe"><![CDATA[Abonnieren]]></item>
 		<item name="wcf.user.objectWatch.manageSubscription"><![CDATA[Abonnement verwalten]]></item>
 		<item name="wcf.user.objectWatch.subscribe.com.woltlab.wcf.article.category"><![CDATA[Kategorie abonnieren]]></item>
 		<item name="wcf.user.objectWatch.enableNotification.com.woltlab.wcf.article.category"><![CDATA[Benachrichtigung über neue Artikel aus dieser Kategorie aktivieren]]></item>
diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 658b49c14c..0df7104076 100644
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -5447,6 +5447,7 @@ your notifications on <a href="{link isHtmlEmail=true}{/link}">{PAGE_TITLE|langu
 		<item name="wcf.user.profile.title"><![CDATA[User profile of {$user->username}]]></item>
 	</category>
 	<category name="wcf.user.objectWatch">
+		<item name="wcf.user.objectWatch.button.subscribe"><![CDATA[Subscribe]]></item>
 		<item name="wcf.user.objectWatch.manageSubscription"><![CDATA[Manage Subscription]]></item>
 		<item name="wcf.user.objectWatch.subscribe.com.woltlab.wcf.article.category"><![CDATA[Watch this category]]></item>
 		<item name="wcf.user.objectWatch.enableNotification.com.woltlab.wcf.article.category"><![CDATA[Notify me of new articles.]]></item>
-- 
2.20.1