Fixed a few display issue / mobile optimization

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 56067ec51b7c7f1dda6e0bd5716654f1a98c9523..45b4199dca6cc9f94f4486bc5cabfc7ad3281baf 100644 (file)
--- 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 f4741c81379c0b4580bbc5829f5e4ea63780f649..6523d1413092392a61a87fd553cbec6daa3c1dc1 100644 (file)
--- 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 7361b4905a32bdf0c344752114aff7f86dce3231..4c6deaeefe3c60a23531b4ac5e74b60a3aa02741 100644 (file)
--- 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 4e362dc039c1b338f73778ebb7824d498e37f475..1fec3a71fa2bbbed971d4d3541f08adad1b1c17a 100644 (file)
--- 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 0493d56e4ef6653603afaa74083070e9574bd523..354f9aa16a7789ea3df81125d06c9f01440e3a8a 100644 (file)
--- 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 fd89333afe9563add6255fe90fc702ba1602a91d..e71143961367cfa78204988a1b8d9062e34bf7d3 100644 (file)
--- 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 994b3151ec014e2c50332d6560c502c7e1abb3c6..421f8b566ad63db40f1b8193345e23cb1bf52928 100644 (file)
--- 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 2f0806123658ea82bf00780165f29bd3a950e762..11ab8ba993aa7d9fa57a8df27a931ec1a78237f3 100644 (file)
--- 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;
+               }
        }
 }