From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 18 May 2022 10:45:06 +0000 (+0200)
Subject: Improved behaviour for contentHeaderNavigation buttons
X-Git-Tag: 5.5.0_Beta_3~13^2
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=405de3b60f453dfca0c11555f653128694b7ecb6;p=GitHub%2FWoltLab%2FWCF.git

Improved behaviour for contentHeaderNavigation buttons

ref https://www.woltlab.com/community/thread/295238-%C3%A4nderung-der-reihenfolge-von-antworten-pagination-abonnieren-in-der-mobilen-ansi/?postID=1894039#post1894039
---

diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index 7141856f8e..5e4764b26d 100644
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -27,6 +27,28 @@
 }
 
 .contentHeader {
+	align-items: flex-start;
+	display: flex;
+	justify-content: flex-end;
+	margin-top: -10px;
+
+	.contentHeaderIcon {
+		flex: 0 0 64px;
+		margin-right: 15px;
+	}
+
+	.contentHeaderTitle {
+		flex: 1 auto;
+		margin-top: 10px;
+	}
+
+	.contentHeaderNavigation {
+		flex: 0 0 auto;
+		margin-left: 15px;
+		margin-top: 10px;
+		max-width: 50%;
+	}
+	
 	.contentHeaderDescription {
 		color: $wcfContentDimmedText;
 		margin-top: 5px;
@@ -79,31 +101,15 @@
 	}
 
 	@include screen-sm-down {
+		flex-wrap: wrap;
+
 		.contentHeaderIcon {
 			display: none;
 		}
-
-		.contentHeaderNavigation > ul {
-			margin-top: 10px;
-		}
 	}
 
 	@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;
 			max-width: 50%;
 		}
 	}
@@ -433,6 +439,12 @@ fieldset {
 	}
 }
 
+@include screen-sm-down {
+	.contentHeader + .contentInteraction {
+		margin-top: 10px;
+	}
+}
+
 .contentInteractionButtonContainer {
 	align-self: center;
 	display: flex;