From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 13 Mar 2016 09:30:52 +0000 (+0100)
Subject: Added some more mobile optimizations
X-Git-Tag: 3.0.0_Beta_1~2030^2~13
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=e5359fe5e5c092bc8f3f90179aad7db7d16641d3;p=GitHub%2FWoltLab%2FWCF.git

Added some more mobile optimizations
---

diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss
index 0bbd0277e7..f37c4bcc7f 100644
--- a/wcfsetup/install/files/style/layout/global.scss
+++ b/wcfsetup/install/files/style/layout/global.scss
@@ -149,6 +149,14 @@ ol.nativeList {
 
 /* simulate native HTML styles for certain elements */
 .htmlContent {
+	> :first-child {
+		margin-top: 0 !important;
+	}
+	
+	> :last-child {
+		margin-bottom: 0 !important;
+	}
+	
 	p {
 		margin: 1em 0;
 	}
diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index 89075b8b4a..d927f4af08 100644
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -39,7 +39,14 @@ a {
 	background-color: $wcfContentBackground;
 	color: $wcfContentText;
 	flex: 1 0 auto;
-	padding: 60px 0;
+	
+	@include large-screen-only {
+		padding: 60px 0;
+	}
+	
+	@include small-screen-only {
+		padding: 30px 0;
+	}
 	
 	a {
 		color: $wcfContentLink;
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 08b7e3774b..8f13112d3d 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -4,7 +4,13 @@
 	margin: 30px 0;
 	
 	> li {
-		padding: 30px 0;
+		@include large-screen-only {
+			padding: 30px 0;
+		}
+		
+		@include small-screen-only {
+			padding: 20px 0;
+		}
 		
 		&:not(:first-child) {
 			border-top: 1px solid $wcfContentBorder;
@@ -40,6 +46,10 @@
 .message {
 	display: flex;
 	
+	@include small-screen-only {
+		flex-direction: column;
+	}
+	
 	.messageClipboardCheckbox {
 		height: 24px;
 		width: 24px;
@@ -63,14 +73,58 @@
 
 /* sidebar */
 .messageSidebar {
-	align-self: flex-start;
 	background-color: $wcfSidebarBackground;
-	border-radius: 3px;
 	color: $wcfSidebarText;
-	flex: 0 0 240px;
-	padding: 20px;
 	position: relative;
-	text-align: center;
+	
+	@include large-screen-only {
+		align-self: flex-start;
+		border-radius: 3px;
+		flex: 0 0 240px;
+		padding: 20px;
+		text-align: center;
+		
+		& + .messageContent {
+			margin-left: 30px;
+		}
+	}
+	
+	@include small-screen-only {
+		flex: 0 0 auto;
+		padding: 10px;
+		
+		.messageAuthor {
+			flex: 0 0 auto;
+			position: relative;
+			
+			.userAvatar {
+				display: block;
+				margin: 0;
+				position: static;
+				
+				> a {
+					left: 0;
+					position: absolute;
+					top: 50%;
+					transform: translateY(-50%);
+				}
+				
+				.userAvatarImage {
+					max-height: 48px;
+					max-width: 48px;
+				}
+			}
+			
+			.messageAuthorContainer,
+			.userTitle {
+				margin-left: 58px;
+			}
+		}
+		
+		.userCredits {
+			display: none;
+		}
+	}
 	
 	a {
 		color: $wcfSidebarLink;
@@ -124,10 +178,6 @@
 	margin-bottom: 5px;
 }
 
-.messageSidebar + .messageContent {
-	margin-left: 30px;
-}
-
 // sidebar right
 .messageSidebarOrientationRight {
 	.messageContent {
@@ -149,7 +199,14 @@
 	display: flex;
 	flex: auto;
 	flex-direction: column;
-	margin: 0 20px;
+	
+	@include large-screen-only {
+		margin: 0 20px;
+	}
+	
+	@include small-screen-only {
+		margin-top: 20px;
+	}
 	
 	&.loading {
 		position: relative;
diff --git a/wcfsetup/install/files/style/ui/messageGroup.scss b/wcfsetup/install/files/style/ui/messageGroup.scss
index bc55f54973..9d98a0dddd 100644
--- a/wcfsetup/install/files/style/ui/messageGroup.scss
+++ b/wcfsetup/install/files/style/ui/messageGroup.scss
@@ -1,18 +1,16 @@
 .messageGroupList {
 	.tabularList {
-		.tabularListColumns {
-			> .columnSubject {
-				flex: 1 1 auto;
-			}
-			
-			> .columnStats {
-				flex: 0 0 140px;
-				text-align: center;
-			}
-			
-			> .columnLastPost {
-				flex: 0 0 200px;
-			}
+		.columnSubject {
+			flex: 1 1 auto;
+		}
+		
+		.columnStats {
+			flex: 0 0 140px;
+			text-align: center;
+		}
+		
+		.columnLastPost {
+			flex: 0 0 200px;
 		}
 		
 		.tabularListRow:not(.tabularListRowHead) {
diff --git a/wcfsetup/install/files/style/ui/tabularBox.scss b/wcfsetup/install/files/style/ui/tabularBox.scss
index 2461e60dee..ee3662e719 100644
--- a/wcfsetup/install/files/style/ui/tabularBox.scss
+++ b/wcfsetup/install/files/style/ui/tabularBox.scss
@@ -53,7 +53,7 @@
 	
 	&.ASC > a,
 	&.DESC > a {
-		padding-right: 14px;
+		padding-right: 18px;
 		position: relative;
 		
 		&:after {