Added some more mobile optimizations

diff --git a/wcfsetup/install/files/style/layout/global.scss b/wcfsetup/install/files/style/layout/global.scss
index 0bbd0277e7ef1432ceb5450f14b080d68aba190c..f37c4bcc7fc39051957cac891273bdca8d97562d 100644 (file)
--- 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 89075b8b4a4aa029653dfa01d4508aef1c7db86b..d927f4af08853d7d17df87f6bfb226aeb0d8ae05 100644 (file)
--- 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 08b7e3774bfc0696f2fe9ec748ab73432693fc66..8f13112d3df70c46acf02f9b6f455f64e67bb219 100644 (file)
--- 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 bc55f549732428df1d03b90ec4f338df502f1209..9d98a0dddd1ed193667e94852f4dc773830c56e5 100644 (file)
--- 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 2461e60deefb51bc38d762225b0806e0faf98f39..ee3662e7193f84292cd03974567eb6c8366bdf91 100644 (file)
--- 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 {