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 47312ea96c73516eae77f81e63db1bf48f1bad5e..6b1d2d58fc80c2c7a9a7d77e62fadef18759acb1 100644 (file)
--- 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;