Repository: spark Updated Branches: refs/heads/master 1a3d0cd9f -> a6325fc40
[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 <timhun...@databricks.com> Closes #10297 from thunterdb/12324. Project: http://git-wip-us.apache.org/repos/asf/spark/repo Commit: http://git-wip-us.apache.org/repos/asf/spark/commit/a6325fc4 Tree: http://git-wip-us.apache.org/repos/asf/spark/tree/a6325fc4 Diff: http://git-wip-us.apache.org/repos/asf/spark/diff/a6325fc4 Branch: refs/heads/master Commit: a6325fc401f68d9fa30cc947c44acc9d64ebda7b Parents: 1a3d0cd Author: Timothy Hunter <timhun...@databricks.com> Authored: Wed Dec 16 10:12:33 2015 -0800 Committer: Joseph K. Bradley <jos...@databricks.com> Committed: Wed Dec 16 10:12:33 2015 -0800 ---------------------------------------------------------------------- NOTICE | 9 ++- docs/_layouts/global.html | 35 +++++++---- docs/css/main.css | 137 ++++++++++++++++++++++++++++++++++------- docs/js/main.js | 2 +- 4 files changed, 149 insertions(+), 34 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/spark/blob/a6325fc4/NOTICE ---------------------------------------------------------------------- diff --git a/NOTICE b/NOTICE index 7f7769f..571f8c2 100644 --- a/NOTICE +++ b/NOTICE @@ -606,4 +606,11 @@ Vis.js uses and redistributes the following third-party libraries: - keycharm https://github.com/AlexDM0/keycharm - The MIT License \ No newline at end of file + The MIT License + +=============================================================================== + +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. +=============================================================================== http://git-wip-us.apache.org/repos/asf/spark/blob/a6325fc4/docs/_layouts/global.html ---------------------------------------------------------------------- diff --git a/docs/_layouts/global.html b/docs/_layouts/global.html index 0b5b0cd..3089474 100755 --- a/docs/_layouts/global.html +++ b/docs/_layouts/global.html @@ -1,3 +1,4 @@ + <!DOCTYPE html> <!--[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]--> @@ -127,20 +128,32 @@ <div class="container-wrapper"> {% if page.url contains "/ml" %} - {% include nav-left-wrapper-ml.html nav-mllib=site.data.menu-mllib nav-ml=site.data.menu-ml %} - {% endif %} - + {% include nav-left-wrapper-ml.html nav-mllib=site.data.menu-mllib nav-ml=site.data.menu-ml %} + <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"> - {% if page.displayTitle %} - <h1 class="title">{{ page.displayTitle }}</h1> - {% else %} - <h1 class="title">{{ page.title }}</h1> - {% endif %} + </div> + {% else %} + <div class="content" id="content"> + {% if page.displayTitle %} + <h1 class="title">{{ page.displayTitle }}</h1> + {% else %} + <h1 class="title">{{ page.title }}</h1> + {% endif %} - {{ content }} + {{ content }} - </div> <!-- /container --> + </div> + {% endif %} + <!-- /container --> </div> <script src="js/vendor/jquery-1.8.0.min.js"></script> http://git-wip-us.apache.org/repos/asf/spark/blob/a6325fc4/docs/css/main.css ---------------------------------------------------------------------- diff --git a/docs/css/main.css b/docs/css/main.css index 356b324..175e800 100755 --- a/docs/css/main.css +++ b/docs/css/main.css @@ -40,17 +40,14 @@ } body .container-wrapper { - position: absolute; - width: 100%; - display: flex; -} - -body #content { + background-color: #FFF; + color: #1D1F22; + max-width: 1024px; + margin-top: 10px; + margin-left: auto; + margin-right: auto; + border-radius: 15px; position: relative; - - line-height: 1.6; /* Inspired by Github's wiki style */ - background-color: white; - padding-left: 15px; } .title { @@ -101,6 +98,24 @@ a:hover code { 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 { /* Remove the default 2px top margin which causes a small gap between the hover trigger area and the popup menu */ @@ -171,24 +186,104 @@ a.anchorjs-link:hover { text-decoration: none; } * The left navigation bar. */ .left-menu-wrapper { - position: absolute; - height: 100%; - - width: 256px; - margin-top: -20px; - padding-top: 20px; + margin-left: 0px; + margin-right: 0px; 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 { - position: fixed; - max-width: 350px; - - padding-right: 10px; - width: 256px; + padding: 0px; + width: 199px; } .left-menu h3 { margin-left: 10px; 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 http://git-wip-us.apache.org/repos/asf/spark/blob/a6325fc4/docs/js/main.js ---------------------------------------------------------------------- diff --git a/docs/js/main.js b/docs/js/main.js index f5d66b1..2329eb8 100755 --- a/docs/js/main.js +++ b/docs/js/main.js @@ -83,7 +83,7 @@ $(function() { // Display anchor links when hovering over headers. For documentation of the // configuration options, see the AnchorJS documentation. anchors.options = { - placement: 'left' + placement: 'right' }; anchors.add(); --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@spark.apache.org For additional commands, e-mail: commits-h...@spark.apache.org
![https://cloud.githubusercontent.com/assets/7594753/11793597/6d1d6eda-a261-11e5-836b-6eb2054e9054.png"](https://cloud.githubusercontent.com/assets/7594753/11793597/6d1d6eda-a261-11e5-836b-6eb2054e9054.png"){kind=link}
![https://cloud.githubusercontent.com/assets/7594753/11793669/c991989e-a261-11e5-8bf6-aecf3bdb6319.png"](https://cloud.githubusercontent.com/assets/7594753/11793669/c991989e-a261-11e5-8bf6-aecf3bdb6319.png"){kind=link}
![https://cloud.githubusercontent.com/assets/7594753/11793607/7754dbcc-a261-11e5-8b15-e0d074b0e47c.png"](https://cloud.githubusercontent.com/assets/7594753/11793607/7754dbcc-a261-11e5-8b15-e0d074b0e47c.png"){kind=link}
![https://cloud.githubusercontent.com/assets/7594753/11793612/7bf82968-a261-11e5-9cc3-e827a7a6b2b0.png"](https://cloud.githubusercontent.com/assets/7594753/11793612/7bf82968-a261-11e5-9cc3-e827a7a6b2b0.png"){kind=link}