Merge pull request scikit-learn#4663 from Titan-C/sidebar

[MRG + 1] Sidebar hide in css

Author: GaelVaroquaux

doc/themes/scikit-learn/layout.html

@@ -5,7 +5,6 @@
     Layout for scikit-learn, after a design made by Angel Soler
     (http://angelsoler.net)
 
-    Update: Collapsable sidebar added - 13/03/2012 - Jaques Grobler
     Update: Next-page button added - 16/03/2012 - Jaques Grobler
 
 
@@ -25,9 +24,6 @@
 
 {% block extrahead %}
   {% if pagename != 'index' %}
-   {% if theme_collapsiblesidebar|tobool %}
-       <script type="text/javascript" src="{{ pathto('_static/sidebar.js', 1) }}"></script>
-   {% endif %}
   {% endif %}
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <script src="{{ pathto('_static/js/bootstrap.min.js', 1)}}" type="text/javascript"></script>
@@ -42,9 +38,6 @@
            $(this).css('background-color', '#A7D6E2');
        }
     );
-    var bodywrapper = $('.bodywrapper');
-    var sidebarbutton = $('#sidebarbutton');
-    sidebarbutton.css({'height': '900px'});
   </script>
 {% endblock %}
 
@@ -276,6 +269,10 @@ <h2>Machine Learning in Python</h2>
     {{ toc }}
     </div>
 </div>
+{% if theme_collapsiblesidebar|tobool %}
+<input type="checkbox" id="nav-trigger" class="nav-trigger" checked />
+<label for="nav-trigger"></label>
+{% endif %}
 {% endif %}
 
 

doc/themes/scikit-learn/static/nature.css_t

@@ -142,8 +142,10 @@ div.content-wrapper {
 }
 
 div.content {
-    margin-left: 210px;
-    padding-bottom: 10px;
+    z-index: 1;
+    position: relative;
+    background-color: #FFF;
+    padding-left: 15px;
 }
 
 div.example_digits {
@@ -254,6 +256,7 @@ div.sphinxsidebar {
     border-left-width: 0;
     border-bottom-width: 0;
     margin-top: 0;
+    position: absolute;
 }
 
 div.sphinxsidebar h3 {
@@ -277,9 +280,45 @@ div.sphinxsidebarwrapper {
 
 {% if theme_collapsiblesidebar|tobool %}
 /* for collapsible sidebar */
-div#sidebarbutton {
+.nav-trigger {
+    position: fixed;
+    clip: rect(0, 0, 0, 0);
+}
+
+.nav-trigger + label:after {
+    content: '»';
+}
+
+label[for="nav-trigger"] {
+    position: fixed;
+    margin-left: 0px;
+    padding-top: 100px;
+    z-index: 2;
+    width: 15px;
+    height: 80%;
+    cursor: pointer;
+    background-size: contain;
     background-color: #F6F6F6;
-    position: relative;
+    border-radius: 10px 0px 0px 10px;
+}
+
+label[for="nav-trigger"]:hover {
+    background-color: #D0D0D0;
+}
+
+.nav-trigger:checked + label {
+    margin-left: 200px;
+}
+
+.nav-trigger:checked + label:after {
+    content: '«';
+}
+
+.nav-trigger:checked ~ div.content {
+    margin-left: 200px;
+}
+.nav-trigger + label, div.content {
+    transition: left 0.4s;
 }
 {% endif %}
 
@@ -1164,6 +1203,29 @@ div.container-index {
     display: none;
   }
 
+
+{% if theme_collapsiblesidebar|tobool %}
+  div.content {
+    margin-left: 200px;
+  }
+  .nav-trigger + label:after {
+    content: '«';
+  }
+  label[for="nav-trigger"] {
+    margin-left: 200px;
+  }
+
+  .nav-trigger:checked + label {
+    margin-left: 0px;
+  }
+  .nav-trigger:checked + label:after {
+    content: '»';
+  }
+  .nav-trigger:checked ~ div.content {
+    margin-left: 0px;
+  }
+
+{%- else %}
   .sphinxsidebar {
     display: none;
   }
@@ -1172,6 +1234,7 @@ div.container-index {
     margin-left: 0;
   }
 
+{% endif %}
 
   div.container-index {
     margin-left: 0;

doc/themes/scikit-learn/static/sidebar.js

@@ -11,8 +11,6 @@
                             (!$(this).children('ul').is(':hidden')) ? '\u25ba' : '\u25bc');
                        $(this).children('ul').toggle();
                    }
-		   // Update the sidebar height when expanding/collapsing toctree elemements
-		   $('#sidebarbutton').animate({height : $('.toctree-wrapper').height() + 50}, 0);
                    return true; //Makes links clickable
                }
            })
@@ -22,8 +20,6 @@
        $('li.toctree-l2:not(:has(ul))').attr('data-content', '-');
        $('li.toctree-l2:has(ul)').attr('data-content', '\u25ba');
        $('li.toctree-l2:has(ul)').css('cursor', 'pointer');
-       //Initialise the sidebar button with the collapsing toctree
-       $('#sidebarbutton').animate({height : $('.toctree-wrapper').height() + 50}, 0);
 
        $('.toctree-l2').hover(
            function () {