From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 17 Mar 2016 17:54:27 +0000 (+0100)
Subject: Improved mobile UI
X-Git-Tag: 3.0.0_Beta_1~2022
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=c3d0938e60daddd53e0eca2a051969d00e6f7c58;p=GitHub%2FWoltLab%2FWCF.git

Improved mobile UI
---

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index cf21638be3..c466f8a320 100644
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -363,12 +363,16 @@
 	.boxContainer {
 		margin-left: -10px;
 		margin-right: -10px;
-		padding: 40px 0;
 		
 		@include large-screen-only {
 			display: flex;
 			flex-wrap: wrap;
 			margin-bottom: -40px;
+			padding: 40px 0;
+		}
+		
+		@include small-screen-only {
+			padding: 20px 0;
 		}
 	}
 	
diff --git a/wcfsetup/install/files/style/layout/pageFooter.scss b/wcfsetup/install/files/style/layout/pageFooter.scss
index c86eb7a89c..5c9194083c 100644
--- a/wcfsetup/install/files/style/layout/pageFooter.scss
+++ b/wcfsetup/install/files/style/layout/pageFooter.scss
@@ -2,7 +2,14 @@
 	background-color: $wcfFooterBackground;
 	color: $wcfFooterText;
 	flex: 0 0 auto;
-	padding: 40px 0;
+	
+	@include large-screen-only {
+		padding: 40px 0;
+	}
+	
+	@include small-screen-only {
+		padding: 20px 0;
+	}
 	
 	a {
 		color: $wcfFooterLink;
diff --git a/wcfsetup/install/files/style/ui/alert.scss b/wcfsetup/install/files/style/ui/alert.scss
index ecb62bf86f..7916dcc014 100644
--- a/wcfsetup/install/files/style/ui/alert.scss
+++ b/wcfsetup/install/files/style/ui/alert.scss
@@ -3,8 +3,15 @@
 .success,
 .warning {
 	border-left: 5px solid transparent;
-	padding: 10px 20px;
 	margin-top: 20px;
+	
+	@include large-screen-only {
+		padding: 10px 20px;
+	}
+	
+	@include small-screen-only {
+		padding: 10px;
+	}
 }
 
 .error {
diff --git a/wcfsetup/install/files/style/ui/tabMenuMessage.scss b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
index 043385388e..0964226166 100644
--- a/wcfsetup/install/files/style/ui/tabMenuMessage.scss
+++ b/wcfsetup/install/files/style/ui/tabMenuMessage.scss
@@ -89,8 +89,20 @@
 				
 				@include userSelectNone;
 				
-				> span.icon {
-					display: none;
+				@include large-screen-only {
+					> .icon {
+						display: none;
+					}
+				}
+				
+				@include small-screen-only {
+					> .icon {
+						display: block;
+					}
+					
+					> span:not(.icon) {
+						display: none;
+					}
 				}
 			}
 		}
@@ -101,24 +113,6 @@
 	}
 }
 
-@include small-screen-only {
-	.messageTabMenu {
-		> nav > ul > li:not(.active) > a {
-			> span.icon {
-				display: block;
-			}
-			
-			> span:not(.icon) {
-				display: none;
-			}
-		}
-		
-		> div > nav {
-			// TODO: margin: ($wcfGapTiny - $wcfGapSmall) -$wcfGapSmall $wcfGapSmall -$wcfGapSmall;
-		}
-	}
-}
-
 /* fix for Firefox - fieldsets are set to display: table-column which cause an odd gap between the fieldset
    and the next element, similar to gaps with display: inline-block and font-size > 0 */
 @-moz-document url-prefix() {