Improved article template

* Removed duplicate display of article category
* Changed position of share buttons
* Added language dropdown for multilingual articles

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 9f83dae6a864e9270a93736a5d228e298c1e95e6..fdbb31609f4f1127e53230f849ecd99d53e567e6 100644 (file)
--- 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 f74ac02151a04811e603d0f20eebf99d775cc342..ac8e348abafa091ede627e327d4dbaba16dd9dcf 100644 (file)
--- 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;