Overhaul the markup and CSS of the article navigation

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 0f34ab1b0e4a6fc691f02d1c4d6c3f7b0ef26752..f108c5d3c40c4102728fec3bb9819699c0bb5a27 100644 (file)
--- a/com.woltlab.wcf/templates/article.tpl
+++ b/com.woltlab.wcf/templates/article.tpl
@@ -247,50 +247,44 @@
 {event name='afterFooter'}
 
 {if $previousArticle || $nextArticle}
-       <div class="section articleNavigation">
+       <div class="section">
                <nav>
-                       <ul>
+                       <ul class="articleNavigation">
                                {if $previousArticle}
-                                       <li class="previousArticleButton">
-                                               <a href="{$previousArticle->getLink()}" rel="prev">
-                                                       {if $previousArticle->getTeaserImage()}
-                                                               <div class="box96">
-                                                                       <span class="articleNavigationArticleImage">{@$previousArticle->getTeaserImage()->getElementTag(96)}</span>
-                                                                       
-                                                                       <div>
-                                                                               <span class="articleNavigationEntityName">{lang}wcf.article.previousArticle{/lang}</span>
-                                                                               <span class="articleNavigationArticleTitle">{$previousArticle->getTitle()}</span>
-                                                                       </div>
-                                                               </div>
-                                                       {else}
-                                                               <div>
-                                                                       <span class="articleNavigationEntityName">{lang}wcf.article.previousArticle{/lang}</span>
-                                                                       <span class="articleNavigationArticleTitle">{$previousArticle->getTitle()}</span>
-                                                               </div>
-                                                       {/if}
-                                               </a>
+                                       <li class="previousArticleButton articleNavigationArticle{if $previousArticle->getTeaserImage()} articleNavigationArticleWithImage{/if}">
+                                               <span class="articleNavigationArticleIcon">
+                                                       {icon size=48 name='chevron-left'}
+                                               </span>
+                                               {if $previousArticle->getTeaserImage()}
+                                                       <span class="articleNavigationArticleImage">{@$previousArticle->getTeaserImage()->getElementTag(96)}</span>
+                                               {/if}
+                                               <span class="articleNavigationArticleContent">
+                                                       <span class="articleNavigationEntityName">{lang}wcf.article.previousArticle{/lang}</span>
+                                                       <span class="articleNavigationArticleTitle">
+                                                               <a href="{$previousArticle->getLink()}" rel="prev" class="articleNavigationArticleLink">
+                                                                       {$previousArticle->getTitle()}
+                                                               </a>
+                                                       </span>
+                                               </span>
                                        </li>
                                {/if}
                                
                                {if $nextArticle}
-                                       <li class="nextArticleButton">
-                                               <a href="{$nextArticle->getLink()}" rel="next">
-                                                       {if $nextArticle->getTeaserImage()}
-                                                               <div class="box96">
-                                                                       <span class="articleNavigationArticleImage">{@$nextArticle->getTeaserImage()->getElementTag(96)}</span>
-                                                                       
-                                                                       <div>
-                                                                               <span class="articleNavigationEntityName">{lang}wcf.article.nextArticle{/lang}</span>
-                                                                               <span class="articleNavigationArticleTitle">{$nextArticle->getTitle()}</span>
-                                                                       </div>
-                                                               </div>
-                                                       {else}
-                                                               <div>
-                                                                       <span class="articleNavigationEntityName">{lang}wcf.article.nextArticle{/lang}</span>
-                                                                       <span class="articleNavigationArticleTitle">{$nextArticle->getTitle()}</span>
-                                                               </div>
-                                                       {/if}
-                                               </a>
+                                       <li class="nextArticleButton articleNavigationArticle{if $nextArticle->getTeaserImage()} articleNavigationArticleWithImage{/if}">
+                                               <span class="articleNavigationArticleIcon">
+                                                       {icon size=48 name='chevron-right'}
+                                               </span>
+                                               {if $nextArticle->getTeaserImage()}
+                                                       <span class="articleNavigationArticleImage">{@$nextArticle->getTeaserImage()->getElementTag(96)}</span>
+                                               {/if}
+                                               <span class="articleNavigationArticleContent">
+                                                       <span class="articleNavigationEntityName">{lang}wcf.article.nextArticle{/lang}</span>
+                                                       <span class="articleNavigationArticleTitle">
+                                                               <a href="{$nextArticle->getLink()}" rel="next" class="articleNavigationArticleLink">
+                                                                       {$nextArticle->getTitle()}
+                                                               </a>
+                                                       </span>
+                                               </span>
                                        </li>
                                {/if}
                        </ul>

diff --git a/wcfsetup/install/files/style/ui/article.scss b/wcfsetup/install/files/style/ui/article.scss
index f5fbcbede521ef6849e2ab4c5885bc18b1013dfe..201e0d724b43803d01c6d97214f5296830cb35ee 100644 (file)
--- a/wcfsetup/install/files/style/ui/article.scss
+++ b/wcfsetup/install/files/style/ui/article.scss
@@ -92,149 +92,105 @@
 }
 
 .articleNavigation {
-       @include screen-md-up {
-               > nav > ul {
-                       display: flex;
-               }
+       column-gap: 20px;
+       display: grid;
+       grid-template-areas: "previous next";
+       grid-template-columns: 1fr 1fr;
+
+       @include screen-sm-down {
+               column-gap: 0;
+               grid-template-areas:
+                       "previous"
+                       "next";
+               grid-template-columns: 1fr;
+               row-gap: 20px;
        }
+}
 
-       .previousArticleButton,
-       .nextArticleButton {
-               display: flex;
-
-               @include screen-md-up {
-                       flex: 0 0 50%;
-               }
-
-               > a {
-                       color: $wcfContentText;
-                       display: flex;
-
-                       &::before {
-                               align-self: center;
-                               display: block;
-                               flex: 0 0 auto;
-                               font-family: FontAwesome;
-                               font-size: 36px;
-                       }
-
-                       > div {
-                               flex: 1 1 auto;
-                       }
-
-                       .articleNavigationEntityName,
-                       .articleNavigationArticleTitle {
-                               display: block;
-                       }
-
-                       .articleNavigationEntityName {
-                               color: $wcfContentDimmedText;
-                       }
-
-                       .articleNavigationArticleTitle {
-                               margin-top: 3px;
-
-                               @include wcfFontHeadline;
-                       }
-
-                       .articleNavigationArticleImage {
-                               > img {
-                                       border-radius: 2px;
-                                       opacity: 0.85;
-                                       transition: 0.2s ease opacity;
-                               }
-                       }
-
-                       &:hover {
-                               &::before {
-                                       color: $wcfContentLinkActive;
-                               }
-
-                               .articleNavigationArticleTitle {
-                                       color: $wcfContentLinkActive;
-                               }
+.articleNavigationArticle {
+       color: $wcfContentText;
+       display: grid;
+       grid-template-rows: repeat(2, minmax(0, max-content));
+       position: relative;
+
+       &.previousArticleButton {
+               grid-area: previous;
+               grid-template-areas:
+                       "icon entity"
+                       "icon title";
+               grid-template-columns: 60px auto;
+       }
 
-                               .articleNavigationArticleImage {
-                                       > img {
-                                               opacity: 1;
-                                       }
-                               }
-                       }
-               }
+       &.nextArticleButton {
+               grid-area: next;
+               grid-template-areas:
+                       "entity icon"
+                       "title icon";
+               text-align: right;
        }
 
-       .previousArticleButton {
-               @include screen-md-up {
-                       padding-right: 10px;
+       &.articleNavigationArticleWithImage {
+               &.previousArticleButton {
+                       grid-template-areas: "icon image content";
+                       grid-template-columns: 60px 96px auto;
                }
 
-               > a {
-                       &::before {
-                               content: $fa-var-chevron-left;
-                       }
-
-                       > div {
-                               margin-left: 10px;
-                       }
+               &.nextArticleButton {
+                       grid-template-areas: "content image icon";
+                       grid-template-columns: auto 96px 60px;
+                       text-align: right;
                }
        }
+}
 
-       .nextArticleButton {
-               justify-content: flex-end;
-               text-align: right;
+.articleNavigationArticleIcon {
+       grid-area: icon;
+}
 
-               @include screen-md-up {
-                       margin-left: 50%;
-                       padding-left: 10px;
-               }
+body:not(.touch) .articleNavigationArticle:hover .articleNavigationArticleIcon {
+       color: $wcfContentLinkActive;
+}
 
-               .articleNavigationArticleImage {
-                       order: 1;
-                       margin-left: 15px;
-                       margin-right: 0;
-               }
+.articleNavigationArticleImage {
+       border-radius: 3px;
+       grid-area: image;
+       overflow: hidden;
+}
 
-               > a {
-                       &::before {
-                               content: $fa-var-chevron-right;
-                               order: 1;
-                       }
+.previousArticleButton.articleNavigationArticleWithImage .articleNavigationArticleContent {
+       margin-left: 20px;
+}
 
-                       > div {
-                               margin-right: 10px;
-                       }
-               }
-       }
+.nextArticleButton.articleNavigationArticleWithImage .articleNavigationArticleContent {
+       margin-right: 20px;
+}
 
-       .previousArticleButton + .nextArticleButton {
-               @include screen-sm-down {
-                       margin-top: 20px;
-               }
+.articleNavigationArticleContent {
+       grid-area: content;
+}
 
-               @include screen-md-up {
-                       margin-left: 0;
-               }
-       }
+.articleNavigationEntityName {
+       color: $wcfContentDimmedText;
+       display: block;
 }
 
-/* fix icons in rtl design */
-html[dir="rtl"] {
-       .articleNavigation {
-               .previousArticleButton {
-                       > a {
-                               &::before {
-                                       content: $fa-var-chevron-right;
-                               }
-                       }
-               }
+.articleNavigationArticleTitle {
+       display: block;
+       margin-top: 5px;
 
-               .nextArticleButton {
-                       > a {
-                               &::before {
-                                       content: $fa-var-chevron-left;
-                               }
-                       }
-               }
+       @include wcfFontHeadline;
+}
+
+.articleNavigationArticleLink {
+       color: $wcfContentText;
+
+       &::before {
+               bottom: 0;
+               content: "";
+               left: 0;
+               position: absolute;
+               right: 0;
+               top: 0;
        }
 }