From 741ec9ef07d7a0779bb6d5a5f95281f4022546b7 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 24 Aug 2022 15:35:59 +0200
Subject: [PATCH] Overhaul the markup and CSS of the article navigation

---
 com.woltlab.wcf/templates/article.tpl        |  70 +++----
 wcfsetup/install/files/style/ui/article.scss | 204 ++++++++-----------
 2 files changed, 112 insertions(+), 162 deletions(-)

diff --git a/com.woltlab.wcf/templates/article.tpl b/com.woltlab.wcf/templates/article.tpl
index 0f34ab1b0e..f108c5d3c4 100644
--- 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 f5fbcbede5..201e0d724b 100644
--- 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;
 	}
 }
 
-- 
2.20.1