Skip to content

Commit a6325fc

Browse files
thunterdbjkbradley
thunterdb
authored and
jkbradley
committed
[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 <[email protected]> Closes #10297 from thunterdb/12324.
1 parent 1a3d0cd commit a6325fc

File tree

4 files changed

+149
-34
lines changed

4 files changed

+149
-34
lines changed

‎NOTICE

+8-1
Original file line numberDiff line numberDiff line change
@@ -606,4 +606,11 @@ Vis.js uses and redistributes the following third-party libraries:
606606

607607
- keycharm
608608
https://github.com/AlexDM0/keycharm
609-
The MIT License
609+
The MIT License
610+
611+
===============================================================================
612+
613+
The CSS style for the navigation sidebar of the documentation was originally
614+
submitted by Óscar Nájera for the scikit-learn project. The scikit-learn project
615+
is distributed under the 3-Clause BSD license.
616+
===============================================================================

‎docs/_layouts/global.html

+24-11
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
<!DOCTYPE html>
23
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
34
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
@@ -127,20 +128,32 @@
127128
<div class="container-wrapper">
128129

129130
{% if page.url contains "/ml" %}
130-
{% include nav-left-wrapper-ml.html nav-mllib=site.data.menu-mllib nav-ml=site.data.menu-ml %}
131-
{% endif %}
132-
131+
{% include nav-left-wrapper-ml.html nav-mllib=site.data.menu-mllib nav-ml=site.data.menu-ml %}
132+
<input id="nav-trigger" class="nav-trigger" checked type="checkbox">
133+
<label for="nav-trigger"></label>
134+
<div class="content-with-sidebar" id="content">
135+
{% if page.displayTitle %}
136+
<h1 class="title">{{ page.displayTitle }}</h1>
137+
{% else %}
138+
<h1 class="title">{{ page.title }}</h1>
139+
{% endif %}
140+
141+
{{ content }}
133142

134-
<div class="container" id="content">
135-
{% if page.displayTitle %}
136-
<h1 class="title">{{ page.displayTitle }}</h1>
137-
{% else %}
138-
<h1 class="title">{{ page.title }}</h1>
139-
{% endif %}
143+
</div>
144+
{% else %}
145+
<div class="content" id="content">
146+
{% if page.displayTitle %}
147+
<h1 class="title">{{ page.displayTitle }}</h1>
148+
{% else %}
149+
<h1 class="title">{{ page.title }}</h1>
150+
{% endif %}
140151

141-
{{ content }}
152+
{{ content }}
142153

143-
</div> <!-- /container -->
154+
</div>
155+
{% endif %}
156+
<!-- /container -->
144157
</div>
145158

146159
<script src="js/vendor/jquery-1.8.0.min.js"></script>

‎docs/css/main.css

+116-21
Original file line numberDiff line numberDiff line change
@@ -40,17 +40,14 @@
4040
}
4141

4242
body .container-wrapper {
43-
position: absolute;
44-
width: 100%;
45-
display: flex;
46-
}
47-
48-
body #content {
43+
background-color: #FFF;
44+
color: #1D1F22;
45+
max-width: 1024px;
46+
margin-top: 10px;
47+
margin-left: auto;
48+
margin-right: auto;
49+
border-radius: 15px;
4950
position: relative;
50-
51-
line-height: 1.6; /* Inspired by Github's wiki style */
52-
background-color: white;
53-
padding-left: 15px;
5451
}
5552

5653
.title {
@@ -101,6 +98,24 @@ a:hover code {
10198
max-width: 914px;
10299
}
103100

101+
.content {
102+
z-index: 1;
103+
position: relative;
104+
background-color: #FFF;
105+
max-width: 914px;
106+
line-height: 1.6; /* Inspired by Github's wiki style */
107+
padding-left: 15px;
108+
}
109+
110+
.content-with-sidebar {
111+
z-index: 1;
112+
position: relative;
113+
background-color: #FFF;
114+
max-width: 914px;
115+
line-height: 1.6; /* Inspired by Github's wiki style */
116+
padding-left: 30px;
117+
}
118+
104119
.dropdown-menu {
105120
/* Remove the default 2px top margin which causes a small
106121
gap between the hover trigger area and the popup menu */
@@ -171,24 +186,104 @@ a.anchorjs-link:hover { text-decoration: none; }
171186
* The left navigation bar.
172187
*/
173188
.left-menu-wrapper {
174-
position: absolute;
175-
height: 100%;
176-
177-
width: 256px;
178-
margin-top: -20px;
179-
padding-top: 20px;
189+
margin-left: 0px;
190+
margin-right: 0px;
180191
background-color: #F0F8FC;
192+
border-top-width: 0px;
193+
border-left-width: 0px;
194+
border-bottom-width: 0px;
195+
margin-top: 0px;
196+
width: 210px;
197+
float: left;
198+
position: absolute;
181199
}
182200

183201
.left-menu {
184-
position: fixed;
185-
max-width: 350px;
186-
187-
padding-right: 10px;
188-
width: 256px;
202+
padding: 0px;
203+
width: 199px;
189204
}
190205

191206
.left-menu h3 {
192207
margin-left: 10px;
193208
line-height: 30px;
209+
}
210+
211+
/**
212+
* The collapsing button for the navigation bar.
213+
*/
214+
.nav-trigger {
215+
position: fixed;
216+
clip: rect(0, 0, 0, 0);
217+
}
218+
219+
.nav-trigger + label:after {
220+
content: '»';
221+
}
222+
223+
label {
224+
z-index: 10;
225+
}
226+
227+
label[for="nav-trigger"] {
228+
position: fixed;
229+
margin-left: 0px;
230+
padding-top: 100px;
231+
padding-left: 5px;
232+
width: 10px;
233+
height: 80%;
234+
cursor: pointer;
235+
background-size: contain;
236+
background-color: #D4F0FF;
237+
}
238+
239+
label[for="nav-trigger"]:hover {
240+
background-color: #BEE9FF;
241+
}
242+
243+
.nav-trigger:checked + label {
244+
margin-left: 200px;
245+
}
246+
247+
.nav-trigger:checked + label:after {
248+
content: '«';
249+
}
250+
251+
.nav-trigger:checked ~ div.content-with-sidebar {
252+
margin-left: 200px;
253+
}
254+
255+
.nav-trigger + label, div.content-with-sidebar {
256+
transition: left 0.4s;
257+
}
258+
259+
/**
260+
* Rules to collapse the menu automatically when the screen becomes too thin.
261+
*/
262+
263+
@media all and (max-width: 780px) {
264+
265+
div.content-with-sidebar {
266+
margin-left: 200px;
267+
}
268+
.nav-trigger + label:after {
269+
content: '«';
270+
}
271+
label[for="nav-trigger"] {
272+
margin-left: 200px;
273+
}
274+
275+
.nav-trigger:checked + label {
276+
margin-left: 0px;
277+
}
278+
.nav-trigger:checked + label:after {
279+
content: '»';
280+
}
281+
.nav-trigger:checked ~ div.content-with-sidebar {
282+
margin-left: 0px;
283+
}
284+
285+
div.container-index {
286+
margin-left: -215px;
287+
}
288+
194289
}

‎docs/js/main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ $(function() {
8383
// Display anchor links when hovering over headers. For documentation of the
8484
// configuration options, see the AnchorJS documentation.
8585
anchors.options = {
86-
placement: 'left'
86+
placement: 'right'
8787
};
8888
anchors.add();
8989

0 commit comments

Comments
 (0)