Floated sidebar

Floated sidebar ready.
ToDo: Collapsing does not yet work correctly! Work in progress!

diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index ab099f8665b24576292f3d15f8108431845de530..33e49787759375fb69baf7bb5fa93c2a6a089eae 100644 (file)
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -703,7 +703,15 @@ nav.footerNavigation ul li a:hover {
 /* ############## Main ############## */
 
 div.main {
+       background-color: #d8e7f5;
        margin: 0 23px;
+       position: relative;
+       
+       -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+       -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+       -ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+       -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
+       box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
 }
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
@@ -728,23 +736,49 @@ div.main {
 
 section.content {
        background-color: rgba(255, 255, 255, 1);
-       display: table-cell;
        position: relative;
-       width: 100%;
+       min-height: 100px;
        z-index: 100;
-       vertical-align: top;
+       
+       -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+       -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+       -ms-box-shadow: 0 0 50pxrgba(0, 0, 0, .1);
+       /* ToDo: Opera doesn't like that so much! Bug-report sent to Opera 
+       -o-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+       box-shadow: 0 0 5px rgba(0, 0, 0, .1);*/
+       
+       -webkit-transition: margin .5s ease;
+       -moz-transition: margin .5s ease;
+       -ms-transition: margin .5s ease;
+       -o-transition: margin .5s ease;
+       transition: margin .5s ease;
+}
+
+section.content:after {
+       content: '';
+       display: block;
+       clear: both;
+}
+
+.left section.content {
+       border-left: 1px solid #bcd;
+       margin-left: 249px;
+}
+
+.right section.content {
+       border-right: 1px solid #bcd;
+       margin-right: 249px;
 }
 
+/* ToDo: The sidebar should be removed completely, when there is no content, as on the login-page and similar! Then this declaration would work as expected. */
 div.main > div section:only-child {
-       display: block !important;
-       width: auto;
+       margin: 0 !important;
 }
 
 @media screen and (min-width: 480px), screen and (min-device-width: 480px) {
        
        section.content {
                padding: 5px 40px 20px;
-               min-height: 100px; /* ToDo: Does not work! */
        }
        
 }      
@@ -753,7 +787,6 @@ div.main > div section:only-child {
        
        section.content {
                padding: 5px 15px 20px;
-               min-height: auto;
        }
        
 }      
@@ -782,19 +815,83 @@ section.content .content {
 /* Globals */
 
 aside.sidebar {
-       border-right: 1px solid #bcd;
-       background-color: #d8e7f5;
-       margin: 0 !important;
-       padding: 0 !important;
-       display: table-cell;
+       margin-bottom: -10px;
+       display: block;
        position: relative;
-       vertical-align: top;
+       width: 250px;
+       overflow: hidden;
+       z-index: 110;
+       
+       -webkit-transition: width .5s ease;
+       -moz-transition: width .5s ease;
+       -ms-transition: width .5s ease;
+       -o-transition: width .5s ease;
+       transition: width .5s ease;
+}
+
+/* Toggle for sidebar orientation (options: left|right|top|bottom) */
+
+.left aside.sidebar {
+       float: left;
+}
+
+.right aside.sidebar {
+       float: right;
+}
+
+
+
+/* ToDo: Collapsible Sidebar */
+
+/* Collapsed */
+
+aside.collapsedSidebar {
+       width: 1px;
+}
+
+aside.sidebar.collapsedSidebar + section.content {
+       border: 0;
+       margin: 0;
+}
+
+aside.sidebar .collapsibleSidebarButton {
+       cursor: pointer;
+       border: 1px solid #f60;
+       background-color: red;
+       background-image: url('../../icon/arrowLeft1.svg');
+       background-size: 10px;
+       background-position: center center;
+       background-repeat: no-repeat;
+       position: absolute;
+       top: 50%;
+       left: 200px;
+       margin-right: -5px;
+       width: 50px;
+       height: 50px;
+       z-index: 1500;
+       opacity: 1;
+}
+
+#tplLogin aside.sidebar .collapsibleSidebarButton {
+       /* ToDo: This should not be necessary! Is there no way to 
+       remove the sidebar by script on pages like log-in? If we 
+       find a way to achieve this, this declaration can be deleted. */
+       display: none;
+}
+
+aside.sidebar.collapsedSidebar .collapsibleSidebarButton {
+       /*border-right: 1px solid transparent;
+       border-left: 1px solid transparent;*/
+       background-image: url('../../icon/arrowRight1.svg');
+}
+
+aside.sidebar .collapsibleSidebarButton:hover {
+       color: #999;
+       opacity: 1;
+}
+
+aside.sidebar.collapsedSidebar .collapsibleSidebarButton:hover {
        
-       -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-       -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-       -ms-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-       -o-box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
-       box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
 }
 
 
@@ -803,7 +900,6 @@ aside.sidebar {
 
 nav.sidebarMenu {
        white-space: nowrap;
-       padding-bottom: 20px;
 }
 
 nav.sidebarMenu > div {
@@ -878,6 +974,7 @@ nav.sidebarMenu > div ul li.activeMenuItem {
        background-color: #fff;
        margin-right: -1px;
        overflow: hidden;
+       z-index: 110;
        
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
        -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .1);
@@ -891,69 +988,6 @@ nav.sidebarMenu > div ul li.activeMenuItem a {
        color: #369;
 }
 
-/* ToDo: Collapsible Sidebar Button */
-
-aside.sidebar .collapsibleSidebarButton {
-       border-right: 1px solid transparent;
-       border-left: 1px solid transparent;
-       background-image: url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg'), url('../../icon/arrowLeft1.svg');
-       background-size: 10px;
-       background-position: center 1%, center center, center 99%;
-       background-repeat: no-repeat;
-       position: absolute;
-       top: 0;
-       right: -17px;
-       bottom: 0;
-       width: 15px;
-       height: 100%;
-       z-index: 500;
-       opacity: .3;
-       
-       -webkit-transition: opacity .2s linear;
-       -moz-transition: opacity .2s linear;
-       -ms-transition: opacity .2s linear;
-       -o-transition: opacity .2s linear;
-       transition: opacity .2s linear;
-}
-
-#tplLogin aside.sidebar .collapsibleSidebarButton {
-       /* ToDo: This should not be necessary! Is there no way to 
-       remove the sidebar by script on pages like log-in? If we 
-       find a way to achieve this, this declaration can be deleted. */
-       display: none;
-}
-
-aside.sidebar.collapsedSidebar .collapsibleSidebarButton {
-       /*border-right: 1px solid transparent;
-       border-left: 1px solid transparent;*/
-       background-image: url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg'), url('../../icon/arrowRight1.svg');
-       background-position: center 1%, center center, center 99%;
-}
-
-aside.sidebar .collapsibleSidebarButton:hover {
-       color: #999;
-       cursor: pointer;        
-       border-right-color: rgba(0, 0, 0, .15);
-       border-left-color: rgba(0, 0, 0, .15);
-       background-color: rgba(0, 0, 0, .015);
-       opacity: 1;
-}
-
-aside.sidebar.collapsedSidebar .collapsibleSidebarButton:hover {
-       border-right-color: rgba(0, 0, 0, .15);
-       border-left-color: transparent;
-}
-
-aside.sidebar.collapsedSidebar {
-       width: 0;
-}
-
-aside.sidebar.collapsedSidebar nav {
-       overflow: hidden;
-       width: 0;
-       display: none;
-}
-
 
 
 /* ############## Page Footer ############## */
@@ -1188,13 +1222,6 @@ li > .badgeButton {
 
 .mainHeading {
        margin-top: 25px;
-       position: relative;
-}
-
-.mainHeading:after {
-       content: '';
-       display: block;
-       clear: both;
 }
 
 .mainHeading:not(:first-of-type) {
@@ -1974,12 +2001,6 @@ input[type='button'],
        position: relative;
 }
 
-.tabMenu:after {
-       content: '';
-       display: block;
-       clear: both;
-}
-
 /* Tabs */
 
 .tabMenu li {
@@ -2630,12 +2651,6 @@ tr .columnURL {
        background-image: none !important;
 }
 
-.pageNavigation ul li:after {
-       content: '';
-       display: block;
-       clear: both;
-}
-
 .pageNavigation ul li img {
        height: 16px;
        width: 16px;

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index f08191ae3b0babea2a63557d17a71b9a753156ef..30ff66da17547b541e5d141d344f6cc59529e80a 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -142,10 +142,10 @@
        <!-- /HEADER -->
        
        <!-- MAIN -->
-       <div id="main" class="main left">
+       <div id="main" class="main left"><!-- ToDo: We now use a floating sidebar. Thus we need some trigger for its orientation, which has to reside at least one level above the sidebar. This trigger should be set either to "left" or "right", although "top" or "bottom" would also be nice (not for the ACP but maybe in other applications like the gallery or so). Also for 2 sidebars we can mix the trigger values, support is already here!!! -->
                <div>
                        <!-- SIDEBAR -->
-                       <aside class="sidebar">
+                       <aside class="sidebar"><!-- ToDo: Please remove the sidebar completely if there is no content in it! The remaining empty sidebar frame causes many display problems and makes proper styling nearly impossible! A simple "if"-construct should be possible i think? -->
                                <!-- sidebar menu -->
                                <nav id="sidebarMenu" class="sidebarMenu">
                                        {* work-around for unknown core-object during WCFSetup *}