From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 1 Nov 2013 23:51:57 +0000 (+0100)
Subject: Removed transition between content and sidebar for mobile devices
X-Git-Tag: 2.0.0_Beta_11~8^2~10
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=556c2975d1dd11bd98d131501e884b691f0939b7;p=GitHub%2FWoltLab%2FWCF.git

Removed transition between content and sidebar for mobile devices

It is not possible to use a transition in Internet Explorer unless we're using floats which in fact suck. width: 200% for display:table results in the strangest thing I've ever seen and furthermore that browser doesn't give a damn about white-space: nowrap with two inline-block children.

Thank you Internet Explorer.

Not.
---

diff --git a/wcfsetup/install/files/style/layout.less b/wcfsetup/install/files/style/layout.less
index 47312ea96c..6b1d2d58fc 100644
--- a/wcfsetup/install/files/style/layout.less
+++ b/wcfsetup/install/files/style/layout.less
@@ -665,57 +665,39 @@
 			}
 		}
 		
-		&.sidebarOrientationLeft,
-		&.sidebarOrientationRight {
-			overflow: hidden;
-			
-			> div {
-				/* revert overflow from parent */
-				overflow: visible;
-				
-				width: 200%;
-				
-				.transition(margin-left, .2s, ease);
-			}
-		}
-		
 		&.sidebarOrientationLeft {
-			> div {
-				margin-left: -100%;
-				
-				> div {
-					> .sidebar {
-						margin-left: -100%;
+			> div > div {
+				> .sidebar {
+					display: none;
+					
+					> div {
+						width: 100%;
 						
-						> div {
+						fieldset {
 							width: 100%;
-							
-							fieldset {
-								width: 100%;
-							}
-						}
-						
-						> .mobileSidebarToggleButton {
-							border-radius: 0 0 0 @wcfSmallButtonBorderRadius;
-							border-width: 0 0 1px 1px;
-							display: block;
-							right: -3px;
-							position: absolute;
-							top: 0;
 						}
 					}
 					
-					> .content {
-						padding-top: 35px;
-						
-						> .mobileSidebarToggleButton {
-							border-radius: 0 0 @wcfSmallButtonBorderRadius 0;
-							border-width: 0 1px 1px 0;
-							display: block;
-							left: -3px;
-							position: absolute;
-							top: 0;
-						}
+					> .mobileSidebarToggleButton {
+						border-radius: 0 0 0 @wcfSmallButtonBorderRadius;
+						border-width: 0 0 1px 1px;
+						display: block;
+						right: -3px;
+						position: absolute;
+						top: 0;
+					}
+				}
+				
+				> .content {
+					padding-top: 35px;
+					
+					> .mobileSidebarToggleButton {
+						border-radius: 0 0 @wcfSmallButtonBorderRadius 0;
+						border-width: 0 1px 1px 0;
+						display: block;
+						left: -3px;
+						position: absolute;
+						top: 0;
 					}
 				}
 			}
@@ -724,6 +706,8 @@
 		&.sidebarOrientationRight {
 			> div > div {
 				> .sidebar {
+					display: none;
+					
 					> div {
 						width: 100%;
 						
@@ -757,89 +741,17 @@
 			}
 		}
 		
-		&.mobileShowSidebar {
-			.sidebar {
+		&.mobileShowSidebar > div > div {
+			> .sidebar {
+				display: table-cell;
 				padding-top: 35px;
 			}
 			
-			&.sidebarOrientationLeft {
-				> div {
-					margin-left: 0;
-				}
-			}
-			
-			&.sidebarOrientationRight {
-				> div {
-					margin-left: -100%;
-				}
-			}
-		}
-		/*border-right-width: 0;
-		position: relative;
-		//margin-top: 7px;
-		
-		> div {
-			display: block;
-			
-			> div {
-				display: block;
-				
-				> .sidebar,
-				> .content {
-					display: block;
-				}
-			}
-		}
-		
-		&.sidebarOrientationRight {
-			.sidebar {
-				//display: none;
+			> .content {
+				display: none;
 			}
 		}
 		
-		&.sidebarOrientationLeft {
-			.sidebar {
-				background-color: transparent;
-				padding: 0;
-				position: absolute;
-				right: 0px;
-				top: 14px;
-				width: 100%;
-				
-				&.mobileSidebar {
-					&:before {
-						content: "\f03a";
-						font-family: FontAwesome;
-						font-size: 21px;
-						right: 7px;
-						position: absolute;
-						top: 0;
-					}
-					
-					&:hover {
-						> div {
-							display: block;
-						}
-					}
-					
-					> div {
-						background-color: @wcfSidebarBackgroundColor;
-						margin-top: 28px;
-						padding-top: 14px;
-						width: 100%;
-					}
-				}
-				
-				> div {
-					display: none;
-					
-					> fieldset.jsOnly {
-						display: none;
-					}
-				}
-			}
-		}*/
-		
 		.content {
 			border-left: 0 !important;
 			border-right: 0 !important;