From 62d40558c983ffe5413b0df17b45300f19225b4a Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Fri, 10 Jun 2016 16:22:33 +0200
Subject: [PATCH] Improved article template

* Removed duplicate display of article category
* Changed position of share buttons
* Added language dropdown for multilingual articles
---
 com.woltlab.wcf/templates/article.tpl        | 48 ++++++++++++--------
 wcfsetup/install/files/style/ui/article.scss | 23 ----------
 2 files changed, 29 insertions(+), 42 deletions(-)

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 9f83dae6a8..fdbb31609f 100644
--- a/com.woltlab.wcf/templates/article.tpl
+++ b/com.woltlab.wcf/templates/article.tpl
@@ -4,9 +4,6 @@
 	<header class="contentHeader articleContentHeader">
 		<div class="contentHeaderTitle">
 			<h1 class="contentTitle">{$articleContent->title}</h1>
-			<div class="contentHeaderDescription">
-				{$articleContent->getArticle()->getCategory()->getTitle()}
-			</div>
 			<ul class="inlineList contentHeaderMetaData articleMetaData">
 				<li>
 					<span class="icon icon16 fa-user"></span>
@@ -40,6 +37,27 @@
 			<nav class="contentHeaderNavigation">
 				<ul>
 					{content}
+						{if $article->isMultilingual}
+							<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 $__wcf->getSession()->getPermission('admin.content.article.canManageArticle')}<li><a href="{link controller='ArticleEdit' id=$article->articleID isACP=true}{/link}" class="button"><span class="icon icon16 fa-pencil"></span> <span>{lang}wcf.acp.article.edit{/lang}</span></a></li>{/if}
 						{event name='contentHeaderNavigation'}
 					{/content}
@@ -95,24 +113,16 @@
 	<div class="articleLikesSummery"></div>
 	
 	<ul class="articleLikeButtons buttonGroup"></ul>
-	
-	{if $article->isMultilingual}
-		{foreach from=$article->getLanguageLinks() item='langArticleContent'}
-			{if $langArticleContent->getLanguage() && $langArticleContent->languageID != $articleContent->languageID}
-				<a href="{$langArticleContent->getLink()}">{$langArticleContent->getLanguage()->languageName}</a>
-			{/if}
-		{/foreach}
-	{/if}
-	
-	{if ENABLE_SHARE_BUTTONS}
-		<section class="section jsOnly">
-			<h2 class="sectionTitle">{lang}wcf.message.share{/lang}</h2>
-			
-			{include file='shareButtons'}
-		</section>
-	{/if}
 </section>
 
+{if ENABLE_SHARE_BUTTONS}
+	<section class="section jsOnly">
+		<h2 class="sectionTitle">{lang}wcf.message.share{/lang}</h2>
+		
+		{include file='shareButtons'}
+	</section>
+{/if}
+
 {if ARTICLE_SHOW_ABOUT_AUTHOR && $article->getUserProfile()->aboutMe}
 	<div class="section articleAboutAuthor">
 		<h2 class="sectionTitle">{lang}wcf.article.aboutAuthor{/lang}</h2>
diff --git a/wcfsetup/install/files/style/ui/article.scss b/wcfsetup/install/files/style/ui/article.scss
index f74ac02151..ac8e348aba 100644
--- a/wcfsetup/install/files/style/ui/article.scss
+++ b/wcfsetup/install/files/style/ui/article.scss
@@ -1,26 +1,3 @@
-.articleContentHeader {
-	.contentHeaderTitle {
-		display: flex;
-		flex-wrap: wrap;
-	}
-	
-	.contentTitle,
-	.contentHeaderDescription {
-		width: 100%;
-	}
-	
-	.contentTitle {
-		margin-top: 5px;
-	}
-	
-	.contentHeaderDescription {
-		color: $wcfContentText;
-		margin-top: 0;
-		order: -1;
-		text-transform: uppercase;
-	}
-}
-
 .articleImage {
 	.articleImageWrapper {
 		align-items: center;
-- 
2.20.1