From 63e2f52fa297475f37274f2143cd98b070f86c33 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 14 Mar 2016 17:40:26 +0100
Subject: [PATCH] Fixed a few display issue / mobile optimization

---
 wcfsetup/install/files/acp/style/layout.scss  |   1 +
 .../files/style/bootstrap/mixin/font.scss     |  48 ++++++++-
 wcfsetup/install/files/style/layout/box.scss  |  46 ++++++--
 .../files/style/layout/containerList.scss     |  64 +++++++----
 .../install/files/style/layout/content.scss   | 101 ++++++++++++------
 .../install/files/style/layout/layout.scss    |  22 ++++
 .../install/files/style/layout/sidebar.scss   |   9 +-
 wcfsetup/install/files/style/ui/message.scss  |  32 +++++-
 8 files changed, 247 insertions(+), 76 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 56067ec51b..45b4199dca 100644
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -15,6 +15,7 @@
 	position: fixed;
 	right: 0;
 	top: 0;
+	z-index: 300;
 	
 	@include large-screen-only {
 		.pageHeader .layoutBoundary {
diff --git a/wcfsetup/install/files/style/bootstrap/mixin/font.scss b/wcfsetup/install/files/style/bootstrap/mixin/font.scss
index f4741c8137..6523d14130 100644
--- a/wcfsetup/install/files/style/bootstrap/mixin/font.scss
+++ b/wcfsetup/install/files/style/bootstrap/mixin/font.scss
@@ -1,11 +1,25 @@
 @mixin wcfFontDefault {
-	font-size: $wcfFontSizeDefault;
 	font-weight: 400;
+	
+	@include large-screen-only {
+		font-size: $wcfFontSizeDefault;
+	}
+	
+	@include small-screen-only {
+		font-size: 14px;
+	}
 }
 
 @mixin wcfFontSmall {
-	font-size: $wcfFontSizeSmall;
 	font-weight: 400;
+	
+	@include large-screen-only {
+		font-size: $wcfFontSizeSmall;
+	}
+	
+	@include small-screen-only {
+		font-size: 12px;
+	}
 }
 
 @mixin wcfFontBold {
@@ -13,18 +27,42 @@
 }
 
 @mixin wcfFontHeadline {
-	font-size: $wcfFontSizeHeadline;
 	font-weight: 400;
+	line-height: 1.28;
+	
+	@include large-screen-only {
+		font-size: $wcfFontSizeHeadline;
+	}
+	
+	@include small-screen-only {
+		font-size: 18px;
+	}
 }
 
 @mixin wcfFontSection {
-	font-size: $wcfFontSizeSection;
 	font-weight: 300;
+	line-height: 1.28;
+	
+	@include large-screen-only {
+		font-size: $wcfFontSizeSection;
+	}
+	
+	@include small-screen-only {
+		font-size: 20px;
+	}
 }
 
 @mixin wcfFontTitle {
-	font-size: $wcfFontSizeTitle;
 	font-weight: 300;
+	line-height: 1.28;
+	
+	@include large-screen-only {
+		font-size: $wcfFontSizeTitle;
+	}
+	
+	@include small-screen-only {
+		font-size: 23px;
+	}
 }
 
 @mixin wcfLineHeight {
diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index 7361b4905a..4c6deaeefe 100644
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -196,11 +196,23 @@
 	.box {
 		&:not(.boxBorderless) {
 			background-color: $wcfSidebarBackground;
-			padding: 20px;
 			
-			.boxMenu {
-				margin-left: -20px;
-				margin-right: -20px;
+			@include large-screen-only {
+				padding: 20px;
+				
+				.boxMenu {
+					margin-left: -20px;
+					margin-right: -20px;
+				}
+			}
+			
+			@include small-screen-only {
+				padding: 20px 10px;
+				
+				.boxMenu {
+					margin-left: -10px;
+					margin-right: -10px;
+				}
 			}
 		}
 		
@@ -347,23 +359,35 @@
 	}
 	
 	.boxContainer {
-		display: flex;
-		flex-wrap: wrap;
-		margin-bottom: -40px;
 		margin-left: -10px;
 		margin-right: -10px;
 		padding: 40px 0;
+		
+		@include large-screen-only {
+			display: flex;
+			flex-wrap: wrap;
+			margin-bottom: -40px;
+		}
 	}
 	
 	.box {
-		flex: 0 0 50%;
 		overflow: hidden;
 		padding-left: 10px;
 		padding-right: 10px;
-		margin-bottom: 40px;
 		
-		&.boxFullWidth {
-			flex-basis: 100%;
+		@include large-screen-only {
+			flex: 0 0 50%;
+			margin-bottom: 40px;
+			
+			&.boxFullWidth {
+				flex-basis: 100%;
+			}
+		}
+		
+		@include small-screen-only {
+			& + .box {
+				margin-top: 40px;
+			}
 		}
 	}
 	
diff --git a/wcfsetup/install/files/style/layout/containerList.scss b/wcfsetup/install/files/style/layout/containerList.scss
index 4e362dc039..1fec3a71fa 100644
--- a/wcfsetup/install/files/style/layout/containerList.scss
+++ b/wcfsetup/install/files/style/layout/containerList.scss
@@ -1,8 +1,15 @@
 .containerList > li {
-	padding: 20px;
 	position: relative;
 	transition: background-color .2s;
 	
+	@include large-screen-only {
+		padding: 20px;
+	}
+	
+	@include small-screen-only {
+		padding: 10px 0;
+	}
+	
 	&:not(:last-child) {
 		border-bottom: 1px solid $wcfContentBorderInner;
 	}
@@ -84,36 +91,47 @@
 }
 
 .containerBoxList {
-	&.doubleColumned,
-	&.tripleColumned {
-		display: flex;
-		flex-wrap: wrap;
-		margin-bottom: -15px;
-		
-		> li {
-			overflow: hidden;
-			padding-right: 15px;
-			margin-bottom: 15px;
+	@include large-screen-only {
+		&.doubleColumned,
+		&.tripleColumned {
+			display: flex;
+			flex-wrap: wrap;
+			margin-bottom: -15px;
 			
-			.containerBoxContent {
+			> li {
 				overflow: hidden;
+				padding-right: 15px;
+				margin-bottom: 15px;
 				
-				h3 {
+				.containerBoxContent {
 					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
+					
+					h3 {
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+					}
 				}
 			}
 		}
+		
+		&.doubleColumned > li {
+			flex: 0 0 50%;
+		}
+		
+		&.tripleColumned > li {
+			flex: 0 0 calc(100% / 3);
+			/* work-around for IE10 */
+			width: calc(100% / 3);
+		}
 	}
 	
-	&.doubleColumned > li {
-		flex: 0 0 50%;
-	}
-	
-	&.tripleColumned > li {
-		flex: 0 0 calc(100% / 3);
-		/* work-around for IE10 */
-		width: calc(unquote("100% / 3"));
+	@include small-screen-only {
+		&.doubleColumned,
+		&.tripleColumned {
+			> li + li {
+				margin-top: 10px;
+			}
+		}
 	}
 }
diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index 0493d56e4e..354f9aa16a 100644
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -23,10 +23,12 @@
 	
 	.contentHeaderDescription {
 		color: $wcfContentDimmedText;
+		margin-top: 5px;
 	}
 	
 	.contentHeaderMetaData {
 		color: $wcfContentDimmedText;
+		margin-top: 5px;
 		
 		&.inlineList {
 			> li:not(:last-child) {
@@ -42,6 +44,12 @@
 			}
 		}
 	}
+	
+	@include small-screen-only {
+		.contentHeaderIcon {
+			display: none;
+		}
+	}
 }
 
 /* legacy styling for sub headlines (deprecated; use .section > .sectionTitle instead) */
@@ -213,52 +221,77 @@ fieldset {
 
 /* styling for content navigation area (containing pagination / page buttons) */
 .contentNavigation {
-	align-items: center;
-	display: flex;
-	
-	// align <nav> to the right side
-	justify-content: flex-end;
-	
-	> nav {
-		flex: 0 0 auto;
+	& + .section {
 		margin-top: 30px;
-		order: 3;
-		
-		&.pagination {
-			order: 1;
-			
-			// use up maximum space, causing it to stick to the left while all other
-			// <nav> elements will still be aligned to the right side
-			flex: 1 1 auto;
-		}
+	}
+	
+	@include large-screen-only {
+		align-items: center;
+		display: flex;
 		
-		&.jsClipboardEditor {
-			margin-right: 5px;
-			order: 2;
-		}
+		// align <nav> to the right side
+		justify-content: flex-end;
 		
-		& + nav {
+		> nav {
 			flex: 0 0 auto;
+			margin-top: 30px;
+			order: 3;
+			
+			&.pagination {
+				order: 1;
+				
+				// use up maximum space, causing it to stick to the left while all other
+				// <nav> elements will still be aligned to the right side
+				flex: 1 1 auto;
+			}
+			
+			&.jsClipboardEditor {
+				margin-right: 5px;
+				order: 2;
+			}
+			
+			& + nav {
+				flex: 0 0 auto;
+			}
+			
+			&:not(.pagination) {
+				text-align: right;
+			}
 		}
 		
-		&:not(.pagination) {
-			text-align: right;
+		ul {
+			display: inline-flex;
+			
+			> li {
+				flex: 0 0 auto;
+				
+				&:not(:last-child) {
+					margin-right: 5px;
+				}
+			}
 		}
 	}
 	
-	ul {
-		display: inline-flex;
+	@include small-screen-only {
+		> nav + nav > ul {
+			// gap between pagination and navigation buttons
+			margin-top: 10px;
+		}
 		
-		> li {
-			flex: 0 0 auto;
+		ul {
+			margin-top: 30px;
 			
-			&:not(:last-child) {
-				margin-right: 5px;
+			> li {
+				& + li {
+					margin-top: 10px;
+				}
+				
+				> .button {
+					display: block;
+					padding: 7px 10px;
+					text-align: center;
+				}
 			}
 		}
 	}
-	
-	& + .section {
-		margin-top: 30px;
-	}
 }
diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index fd89333afe..e711439613 100644
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -98,3 +98,25 @@ a {
 	}
 }
 
+/* mobile arranges the sidebar and content vertically:
+   
+   <leftSidebar> <content> <rightSidebar>
+   
+   becomes:
+   
+   <leftSidebar>
+   <content>
+   <rightSidebar>
+*/
+@include small-screen-only {
+	.sidebar {
+		margin: 0 -10px;
+	}
+	
+	.sidebar + .content,
+	.content + .sidebar {
+		// gap between sidebars and content
+		margin-top: 30px;
+	}
+}
+
diff --git a/wcfsetup/install/files/style/layout/sidebar.scss b/wcfsetup/install/files/style/layout/sidebar.scss
index 994b3151ec..421f8b566a 100644
--- a/wcfsetup/install/files/style/layout/sidebar.scss
+++ b/wcfsetup/install/files/style/layout/sidebar.scss
@@ -18,7 +18,14 @@
 		> fieldset,
 		> section:not(.box) {
 			background-color: $wcfSidebarBackground;
-			padding: 20px;
+			
+			@include large-screen-only {
+				padding: 20px;
+			}
+			
+			@include small-screen-only {
+				padding: 20px 10px;
+			}
 			
 			&:not(:first-child) {
 				margin-top: 30px;
diff --git a/wcfsetup/install/files/style/ui/message.scss b/wcfsetup/install/files/style/ui/message.scss
index 2f08061236..11ab8ba993 100644
--- a/wcfsetup/install/files/style/ui/message.scss
+++ b/wcfsetup/install/files/style/ui/message.scss
@@ -91,6 +91,7 @@
 	
 	@include small-screen-only {
 		flex: 0 0 auto;
+		margin: 0 -10px;
 		padding: 10px;
 		
 		.messageAuthor {
@@ -302,7 +303,28 @@
 }
 
 .messageQuickOptions {
-	@include inlineList;
+	@include large-screen-only {
+		@include inlineList;
+	}
+	
+	@include small-screen-only {
+		flex: 0 0 24px;
+		height: 1.5em;
+		position: relative;
+		
+		&::before {
+			content: $fa-var-bars;
+			font-family: FontAwesome;
+			font-size: 18px;
+			position: absolute;
+			right: 0;
+			top: -2px;
+		}
+		
+		> li {
+			display: none;
+		}
+	}
 }
 
 /* content - body */
@@ -378,7 +400,13 @@
 	}
 	
 	> .messageFooterButtons {
-		flex: auto;
+		@include large-screen-only {
+			flex: auto;
+		}
+		
+		@include small-screen-only {
+			display: none;
+		}
 	}
 }
 
-- 
2.20.1