Improve sidebar UX on mobile

Closes #2414

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index baa121659771d022fc001c987ec92758dd13e43e..2d4ab79dafbec32963d0603262cdfe3cc8b36d8e 100644 (file)
--- a/wcfsetup/install/files/style/layout/box.scss
+++ b/wcfsetup/install/files/style/layout/box.scss
@@ -627,16 +627,39 @@
 }
 
 @include screen-xs {
+       .main > .layoutBoundary {
+               display: flex;
+               flex-wrap: wrap;
+               
+               > .content {
+                       flex: 0 0 100%;
+                       order: 3;
+               }
+               
+               > .boxesSidebarLeft {
+                       order: 1;
+               }
+               
+               > .boxesSidebarRight {
+                       order: 2;
+               }
+       }
+       
        .boxesSidebarLeft,
        .boxesSidebarRight {
+               flex: 1 0 100%;
                pointer-events: none;
                
                > .boxContainer {
                        pointer-events: all;
                }
                
-               &:not(.open) > .boxContainer {
-                       display: none;
+               &:not(.open) {
+                       flex: 1 50%;
+                       
+                       > .boxContainer {
+                               display: none;
+                       }
                }
                
                &::before {
@@ -664,6 +687,17 @@
                        content: attr(data-hide-navigation);
                }
        }
+       
+       .boxesSidebarLeft:not(.open) + .content + .boxesSidebarRight:not(.open) {
+               border-left: 1px solid $wcfContentBackground;
+               margin-left: 10px;
+               margin-top: 0;
+       }
+       
+       .content:first-child + .boxesSidebarRight {
+               margin-bottom: 20px;
+               margin-top: 0;
+       }
 }
 
 /* styling for boxes in <contentTop>/<contentBottom> position */