From 66bc953d77721c874a8073626ca07bf8dbad754f Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 6 Sep 2017 13:41:09 +0200
Subject: [PATCH] Improve sidebar UX on mobile

Closes #2414
---
 wcfsetup/install/files/style/layout/box.scss | 38 ++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/wcfsetup/install/files/style/layout/box.scss b/wcfsetup/install/files/style/layout/box.scss
index baa1216597..2d4ab79daf 100644
--- 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 */
-- 
2.20.1