Skip to content

Commit 2ebb450

Browse files
mejedibigbes
mejedi
authored and
bigbes
committed
Fancy TOK
Note: when mouse is over .b-cols_content_left, main page scroll is disabled. Helps to avoid quirks when scrolling TOC. Note: content wrapped in .b-scrollview div to mkae it easy to disable scrolling.
1 parent c0bcab5 commit 2ebb450

File tree

5 files changed

+90
-28
lines changed

5 files changed

+90
-28
lines changed

‎sphinx/_static/headers.js

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,47 @@ $(document).ready(function () {
212212
$(".toggle-navigation").removeClass('active');
213213
});
214214

215-
}).click(function() {
215+
var b_scroll_view = $('.b-scrollview');
216+
var b_cols_content = $('.b-cols_content');
217+
var b_footer = $('.b-footer');
218+
var b_cols_content_left = $('.b-cols_content_left');
219+
220+
/* disable page scrolling while mouse is in TOC */
221+
b_cols_content_left.mouseenter(function() {
222+
b_scroll_view.css('overflow', 'hidden');
223+
}).mouseleave(function() {
224+
b_scroll_view.css('overflow', '');
225+
});
226+
227+
function layout_tok() {
228+
var scroll_top = b_scroll_view.scrollTop();
229+
var window_h = $(window).height();
230+
var y1 = b_cols_content.offset().top;
231+
var y2 = b_footer.offset().top;
232+
var target = b_cols_content_left;
233+
if ($(window).width() < 992) {
234+
target.removeClass('b-cols_content_left_stuck');
235+
target.css('max-height', '');
236+
return;
237+
}
238+
/* adjust max-height s.t. it matches the portion of TOC clipped
239+
* by viewport*/
240+
var max_height = Math.min(window_h, y2);
241+
if (y1 >= 0) {
242+
max_height = Math.min(max_height, window_h - y1, y2 - y1);
243+
target.removeClass('b-cols_content_left_stuck');
244+
} else {
245+
target.addClass('b-cols_content_left_stuck');
246+
}
247+
/* -15 to compensate for padding-top */
248+
target.css('max-height', Math.floor(max_height - 15) + 'px');
249+
}
250+
251+
b_scroll_view.scroll(layout_tok);
252+
$(window).resize(layout_tok);
253+
layout_tok();
254+
255+
}).click(function(event) {
216256
if (is_mobile) {
217257
event.stopPropagation();
218258
}

‎sphinx/_static/sphinx_design.css

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -281,12 +281,19 @@ tr.field td p {
281281
width:960px;
282282
margin:0 auto;
283283
padding:0 0 30px 0;
284+
position:relative;
284285
}
285286
.b-cols_content_left {
286-
position:relative;
287-
float:left;
288-
width:295px;
289-
padding:15px 0 0 0;
287+
position: absolute;
288+
top: 0;
289+
bottom: 0;
290+
width: 295px;
291+
padding: 15px 15px 0 700px;
292+
margin-left: -700px;
293+
overflow: auto;
294+
}
295+
.b-cols_content_left_stuck {
296+
position: fixed !important;
290297
}
291298
.b-cols_content_right {
292299
float:right;

‎sphinx/_templates/base

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -62,20 +62,22 @@
6262
{% else %}
6363
<body class="b-main b-doc-{{ pagename }}">
6464
{% endif%}
65-
<div class="b-wrapper">
66-
<!-- HEADER > -->
67-
{{ menu.i_header() }}
68-
<!-- < HEADER -->
65+
<div class="b-scrollview">
66+
<div class="b-wrapper">
67+
<!-- HEADER > -->
68+
{{ menu.i_header() }}
69+
<!-- < HEADER -->
6970

70-
<div class="b-content b-clearbox">
71-
{% block content %} {% endblock content %}
72-
</div>
73-
</div>
71+
<div class="b-content b-clearbox">
72+
{% block content %} {% endblock content %}
73+
</div>
74+
</div>
7475

75-
<!-- FOOTER > -->
76-
{{ menu.i_footer() }}
77-
<!-- < FOOTER -->
78-
<div id="mobile-checker"></div>
76+
<!-- FOOTER > -->
77+
{{ menu.i_footer() }}
78+
<!-- < FOOTER -->
79+
<div id="mobile-checker"></div>
80+
</div>
7981
</body>
8082
</html>
8183

‎www/theme/static/design.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ body {
1616
height:100%;
1717
background:#FFF;
1818
margin:0;
19+
overflow: hidden;
20+
}
21+
.b-scrollview {
22+
height: 100%;
23+
overflow: auto;
1924
}
2025
a, img, input, textarea, select {
2126
outline:none;
@@ -2484,5 +2489,11 @@ ul.b-social_block a:hover {
24842489
.b-menu_mobile__wrapper .b-header_menu li.p-active {
24852490
border-top: 0px solid black;
24862491
}
2492+
.b-cols_content .b-cols_content_left {
2493+
position: relative;
2494+
padding: 15px 0 0 0;
2495+
margin: 0;
2496+
overflow: initial;
2497+
}
24872498
}
24882499

‎www/theme/templates/base

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,22 @@
2626
{% include "script" ignore missing %}
2727
</head>
2828
<body class="p-main">
29-
<div class="b-wrapper">
30-
<!-- HEADER > -->
31-
{{ menu.i_header() }}
32-
<!-- < HEADER -->
29+
<div class="b-scrollview">
30+
<div class="b-wrapper">
31+
<!-- HEADER > -->
32+
{{ menu.i_header() }}
33+
<!-- < HEADER -->
3334

34-
<div class="b-content b-clearbox">
35-
{% block content %}
36-
{% endblock content %}
35+
<div class="b-content b-clearbox">
36+
{% block content %}
37+
{% endblock content %}
38+
</div>
3739
</div>
38-
</div>
3940

40-
<!-- FOOTER > -->
41-
{{ menu.i_footer() }}
42-
<!-- < FOOTER -->
41+
<!-- FOOTER > -->
42+
{{ menu.i_footer() }}
43+
<!-- < FOOTER -->
44+
</div>
4345
</body>
4446
</html>
4547

0 commit comments

Comments
 (0)