Skip to content
Snippets Groups Projects
Commit a6325fc4 authored by Timothy Hunter's avatar Timothy Hunter Committed by Joseph K. Bradley
Browse files

[SPARK-12324][MLLIB][DOC] Fixes the sidebar in the ML documentation 

This fixes the sidebar, using a pure CSS mechanism to hide it when the browser's viewport is too narrow.
Credit goes to the original author Titan-C (mentioned in the NOTICE).

Note that I am not a CSS expert, so I can only address comments up to some extent.

Default view:
<img width="936" alt="screen shot 2015-12-14 at 12 46 39 pm" src="https://cloud.githubusercontent.com/assets/7594753/11793597/6d1d6eda-a261-11e5-836b-6eb2054e9054.png">

When collapsed manually by the user:
<img width="1004" alt="screen shot 2015-12-14 at 12 54 02 pm" src="https://cloud.githubusercontent.com/assets/7594753/11793669/c991989e-a261-11e5-8bf6-aecf3bdb6319.png">

Disappears when column is too narrow:
<img width="697" alt="screen shot 2015-12-14 at 12 47 22 pm" src="https://cloud.githubusercontent.com/assets/7594753/11793607/7754dbcc-a261-11e5-8b15-e0d074b0e47c.png">

Can still be opened by the user if necessary:
<img width="651" alt="screen shot 2015-12-14 at 12 51 15 pm" src="https://cloud.githubusercontent.com/assets/7594753/11793612/7bf82968-a261-11e5-9cc3-e827a7a6b2b0.png">

Author: Timothy Hunter <timhunter@databricks.com>

Closes #10297 from thunterdb/12324.
parent 1a3d0cd9
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
NOTICE
+ 8
− 1
View file @ a6325fc4
...@@ -606,4 +606,11 @@ Vis.js uses and redistributes the following third-party libraries: ...@@ -606,4 +606,11 @@ Vis.js uses and redistributes the following third-party libraries:
- keycharm - keycharm
https://github.com/AlexDM0/keycharm https://github.com/AlexDM0/keycharm
The MIT License The MIT License
\ No newline at end of file
===============================================================================
The CSS style for the navigation sidebar of the documentation was originally
submitted by Óscar Nájera for the scikit-learn project. The scikit-learn project
is distributed under the 3-Clause BSD license.
===============================================================================
docs/_layouts/global.html
+ 24
− 11
View file @ a6325fc4
<!DOCTYPE html> <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
...@@ -127,20 +128,32 @@ ...@@ -127,20 +128,32 @@
<div class="container-wrapper"> <div class="container-wrapper">
{% if page.url contains "/ml" %} {% if page.url contains "/ml" %}
{% include nav-left-wrapper-ml.html nav-mllib=site.data.menu-mllib nav-ml=site.data.menu-ml %} {% include nav-left-wrapper-ml.html nav-mllib=site.data.menu-mllib nav-ml=site.data.menu-ml %}
{% endif %} <input id="nav-trigger" class="nav-trigger" checked type="checkbox">
<label for="nav-trigger"></label>
<div class="content-with-sidebar" id="content">
{% if page.displayTitle %}
<h1 class="title">{{ page.displayTitle }}</h1>
{% else %}
<h1 class="title">{{ page.title }}</h1>
{% endif %}
{{ content }}
<div class="container" id="content"> </div>
{% if page.displayTitle %} {% else %}
<h1 class="title">{{ page.displayTitle }}</h1> <div class="content" id="content">
{% else %} {% if page.displayTitle %}
<h1 class="title">{{ page.title }}</h1> <h1 class="title">{{ page.displayTitle }}</h1>
{% endif %} {% else %}
<h1 class="title">{{ page.title }}</h1>
{% endif %}
{{ content }} {{ content }}
</div> <!-- /container --> </div>
{% endif %}
<!-- /container -->
</div> </div>
<script src="js/vendor/jquery-1.8.0.min.js"></script> <script src="js/vendor/jquery-1.8.0.min.js"></script>
......
docs/css/main.css
+ 116
− 21
View file @ a6325fc4
...@@ -40,17 +40,14 @@ ...@@ -40,17 +40,14 @@
} }
body .container-wrapper { body .container-wrapper {
position: absolute; background-color: #FFF;
width: 100%; color: #1D1F22;
display: flex; max-width: 1024px;
} margin-top: 10px;
margin-left: auto;
body #content { margin-right: auto;
border-radius: 15px;
position: relative; position: relative;
line-height: 1.6; /* Inspired by Github's wiki style */
background-color: white;
padding-left: 15px;
} }
.title { .title {
...@@ -101,6 +98,24 @@ a:hover code { ...@@ -101,6 +98,24 @@ a:hover code {
max-width: 914px; max-width: 914px;
} }
.content {
z-index: 1;
position: relative;
background-color: #FFF;
max-width: 914px;
line-height: 1.6; /* Inspired by Github's wiki style */
padding-left: 15px;
}
.content-with-sidebar {
z-index: 1;
position: relative;
background-color: #FFF;
max-width: 914px;
line-height: 1.6; /* Inspired by Github's wiki style */
padding-left: 30px;
}
.dropdown-menu { .dropdown-menu {
/* Remove the default 2px top margin which causes a small /* Remove the default 2px top margin which causes a small
gap between the hover trigger area and the popup menu */ gap between the hover trigger area and the popup menu */
...@@ -171,24 +186,104 @@ a.anchorjs-link:hover { text-decoration: none; } ...@@ -171,24 +186,104 @@ a.anchorjs-link:hover { text-decoration: none; }
* The left navigation bar. * The left navigation bar.
*/ */
.left-menu-wrapper { .left-menu-wrapper {
position: absolute; margin-left: 0px;
height: 100%; margin-right: 0px;
width: 256px;
margin-top: -20px;
padding-top: 20px;
background-color: #F0F8FC; background-color: #F0F8FC;
border-top-width: 0px;
border-left-width: 0px;
border-bottom-width: 0px;
margin-top: 0px;
width: 210px;
float: left;
position: absolute;
} }
.left-menu { .left-menu {
position: fixed; padding: 0px;
max-width: 350px; width: 199px;
padding-right: 10px;
width: 256px;
} }
.left-menu h3 { .left-menu h3 {
margin-left: 10px; margin-left: 10px;
line-height: 30px; line-height: 30px;
}
/**
* The collapsing button for the navigation bar.
*/
.nav-trigger {
position: fixed;
clip: rect(0, 0, 0, 0);
}
.nav-trigger + label:after {
content: '»';
}
label {
z-index: 10;
}
label[for="nav-trigger"] {
position: fixed;
margin-left: 0px;
padding-top: 100px;
padding-left: 5px;
width: 10px;
height: 80%;
cursor: pointer;
background-size: contain;
background-color: #D4F0FF;
}
label[for="nav-trigger"]:hover {
background-color: #BEE9FF;
}
.nav-trigger:checked + label {
margin-left: 200px;
}
.nav-trigger:checked + label:after {
content: '«';
}
.nav-trigger:checked ~ div.content-with-sidebar {
margin-left: 200px;
}
.nav-trigger + label, div.content-with-sidebar {
transition: left 0.4s;
}
/**
* Rules to collapse the menu automatically when the screen becomes too thin.
*/
@media all and (max-width: 780px) {
div.content-with-sidebar {
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-with-sidebar {
margin-left: 0px;
}
div.container-index {
margin-left: -215px;
}
} }
\ No newline at end of file
docs/js/main.js
+ 1
− 1
View file @ a6325fc4
...@@ -83,7 +83,7 @@ $(function() { ...@@ -83,7 +83,7 @@ $(function() {
// Display anchor links when hovering over headers. For documentation of the // Display anchor links when hovering over headers. For documentation of the
// configuration options, see the AnchorJS documentation. // configuration options, see the AnchorJS documentation.
anchors.options = { anchors.options = {
placement: 'left' placement: 'right'
}; };
anchors.add(); anchors.add();
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment