Improved mobile UI

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index cf21638be35ba8accc198198f3dd3f78cb0f5839..c466f8a3206d6a8166706c99b5ddcc80e3c36922 100644 (file)
--- 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 c86eb7a89c0c28aae1944fd09d09d9bd661b27f1..5c9194083c72794d7f2852db267282b7036360ac 100644 (file)
--- 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 ecb62bf86f3677e05ef042bbcd2baf381a2faf2f..7916dcc014fbf0f4801964097f73264c36b35653 100644 (file)
--- 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 043385388ed962f9dc5986178b9896ac79b3ee2e..096422616616f0e147475b441a0e8ed18daf95ea 100644 (file)
--- 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() {