Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dc8d41b
menu
thunterdb Dec 14, 2015
94e8274
colors fixed
thunterdb Dec 14, 2015
b091b42
add the original author to the notice
thunterdb Dec 14, 2015
6b8e9cf
comments from @parano
thunterdb Dec 16, 2015
464dcb5
changes
thunterdb Dec 16, 2015
19b92a2
duplicate css code
thunterdb Dec 16, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion NOTICE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -606,4 +606,11 @@ Vis.js uses and redistributes the following third-party libraries:

- keycharm
https://github.com/AlexDM0/keycharm
The MIT License
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.
===============================================================================
35 changes: 24 additions & 11 deletions docs/_layouts/global.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]-->
Expand Down Expand Up @@ -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">
Copy link

@parano parano Dec 15, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

indent off

Copy link
Contributor Author

@thunterdb thunterdb Dec 16, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed

{% 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>
Expand Down
139 changes: 118 additions & 21 deletions docs/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -101,6 +98,26 @@ a:hover code {
max-width: 914px;
}

.content {
z-index: 1;
position: relative;
background-color: #FFF;
Copy link
Member

@jkbradley jkbradley Dec 16, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 instances of background-color here

Copy link
Contributor Author

@thunterdb thunterdb Dec 16, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oops thanks!

max-width: 914px;
line-height: 1.6; /* Inspired by Github's wiki style */
background-color: white;
padding-left: 15px;
}

.content-with-sidebar {
z-index: 1;
position: relative;
background-color: #FFF;
Copy link
Member

@jkbradley jkbradley Dec 16, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto

Copy link
Contributor Author

@thunterdb thunterdb Dec 16, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

max-width: 914px;
line-height: 1.6; /* Inspired by Github's wiki style */
background-color: white;
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 */
Expand Down Expand Up @@ -171,24 +188,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 {
Copy link

@parano parano Dec 15, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not put this in the next selector label[for="nav-trigger"] ?

Copy link
Contributor Author

@thunterdb thunterdb Dec 16, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good question. I tried to do this and it failed to take the z-index into account despite my best efforts. This is the only way I found to make it work. If you think it is too wide, then I can try to add a CSS class to it.

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;
}

}
2 changes: 1 addition & 1 deletion docs/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down