Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0d781e4

Browse files
authored
Make sidebar scrollable and sticky (on modern browsers) (#91)
Just make the sidebar stick to the top with CSS and show a scrollbar onoverflow. There's no fallback for older browsers -- since up to now,this didn't work for anyone (because "intelligent" scrolling has beenbroken for years), I assume improving the UX at least for modernbrowsers is still a net improvement.
1 parentefb6c69 commit0d781e4

File tree

2 files changed

+20
-56
lines changed

2 files changed

+20
-56
lines changed

‎python_docs_theme/static/pydoctheme.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,15 @@ form.inline-search input[type="submit"] {
5151
width:40px;
5252
}
5353

54+
div.document {
55+
display: flex;
56+
}
57+
5458
div.sphinxsidebar {
59+
float: none;
60+
position: sticky;
61+
top:0;
62+
max-height:100vh;
5563
background-color:#eeeeee;
5664
border-radius:5px;
5765
line-height:130%;
@@ -62,6 +70,13 @@ div.sphinxsidebar h3, div.sphinxsidebar h4 {
6270
margin-top:1.5em;
6371
}
6472

73+
div.sphinxsidebarwrapper {
74+
box-sizing: border-box;
75+
height:100%;
76+
overflow-x: hidden;
77+
overflow-y: auto;
78+
}
79+
6580
div.sphinxsidebarwrapper>h3:first-child {
6681
margin-top:0.2em;
6782
}

‎python_docs_theme/static/sidebar.js

Lines changed: 5 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
* sidebar.js
33
* ~~~~~~~~~~
44
*
5-
* This script makes the Sphinx sidebar collapsible and implements intelligent
6-
*scrolling. This is a slightlymodified version of Sphinx's own sidebar.js.
5+
* This script makes the Sphinx sidebar collapsible. This is a slightly
6+
* modified version of Sphinx's own sidebar.js.
77
*
88
* .sphinxsidebar contains .sphinxsidebarwrapper. This script adds in
99
* .sphixsidebar, after .sphinxsidebarwrapper, the #sidebarbutton used to
@@ -25,10 +25,7 @@ $(function() {
2525
// global elements used by the functions.
2626
// the 'sidebarbutton' element is defined as global after its
2727
// creation, in the add_sidebar_button function
28-
varjwindow=$(window);
29-
varjdocument=$(document);
3028
varbodywrapper=$('.bodywrapper');
31-
vardocumentwrapper=$('.documentwrapper');
3229
varsidebar=$('.sphinxsidebar');
3330
varsidebarwrapper=$('.sphinxsidebarwrapper');
3431

@@ -46,13 +43,6 @@ $(function() {
4643
vardark_color='#AAAAAA';
4744
varlight_color='#CCCCCC';
4845

49-
functionget_viewport_height(){
50-
if(window.innerHeight)
51-
returnwindow.innerHeight;
52-
else
53-
returnjwindow.height();
54-
}
55-
5646
functionsidebar_is_collapsed(){
5747
returnsidebarwrapper.is(':not(:visible)');
5848
}
@@ -62,8 +52,6 @@ $(function() {
6252
expand_sidebar();
6353
else
6454
collapse_sidebar();
65-
// adjust the scrolling of the sidebar
66-
scroll_sidebar();
6755
}
6856

6957
functioncollapse_sidebar(){
@@ -72,7 +60,6 @@ $(function() {
7260
bodywrapper.css('margin-left',bw_margin_collapsed);
7361
sidebarbutton.css({
7462
'margin-left':'0',
75-
'height':documentwrapper.height(),
7663
'border-radius':'5px'
7764
});
7865
sidebarbutton.find('span').text('»');
@@ -86,35 +73,28 @@ $(function() {
8673
sidebarwrapper.show();
8774
sidebarbutton.css({
8875
'margin-left':ssb_width_expanded-12,
89-
'height':Math.max(sidebarwrapper.height(),documentwrapper.height()),
9076
'border-radius':'0 5px 5px 0'
9177
});
9278
sidebarbutton.find('span').text('«');
9379
sidebarbutton.attr('title',_('Collapse sidebar'));
94-
//sidebarwrapper.css({'padding-top':
95-
// Math.max(window.pageYOffset - sidebarwrapper.offset().top, 10)});
9680
document.cookie='sidebar=expanded';
9781
}
9882

9983
functionadd_sidebar_button(){
10084
sidebarwrapper.css({
10185
'float':'left',
10286
'margin-right':'0',
103-
'width':ssb_width_expanded-28
87+
'width':ssb_width_expanded-13
10488
});
10589
// create the button
10690
sidebar.append(
10791
'<div id="sidebarbutton"><span>&laquo;</span></div>'
10892
);
10993
varsidebarbutton=$('#sidebarbutton');
110-
// find the height of the viewport to center the '<<' in the page
111-
varviewport_height=get_viewport_height();
112-
varsidebar_offset=sidebar.offset().top;
113-
varsidebar_height=Math.max(documentwrapper.height(),sidebar.height());
11494
sidebarbutton.find('span').css({
11595
'display':'block',
11696
'position':'fixed',
117-
'top':Math.min(viewport_height/2,sidebar_height/2+sidebar_offset)-10
97+
'top':'50%'
11898
});
11999

120100
sidebarbutton.click(toggle_sidebar);
@@ -125,8 +105,7 @@ $(function() {
125105
'background-color':'#CCCCCC',
126106
'font-size':'1.2em',
127107
'cursor':'pointer',
128-
'height':sidebar_height,
129-
'padding-top':'1px',
108+
'height':'100%',
130109
'padding-left':'1px',
131110
'margin-left':ssb_width_expanded-12
132111
});
@@ -161,34 +140,4 @@ $(function() {
161140
add_sidebar_button();
162141
varsidebarbutton=$('#sidebarbutton');
163142
set_position_from_cookie();
164-
165-
166-
/* intelligent scrolling */
167-
functionscroll_sidebar(){
168-
varsidebar_height=sidebarwrapper.height();
169-
varviewport_height=get_viewport_height();
170-
varoffset=sidebar.position()['top'];
171-
varwintop=jwindow.scrollTop();
172-
varwinbot=wintop+viewport_height;
173-
varcurtop=sidebarwrapper.position()['top'];
174-
varcurbot=curtop+sidebar_height;
175-
// does sidebar fit in window?
176-
if(sidebar_height<viewport_height){
177-
// yes: easy case -- always keep at the top
178-
sidebarwrapper.css('top',$u.min([$u.max([0,wintop-offset-10]),
179-
jdocument.height()-sidebar_height-200]));
180-
}
181-
else{
182-
// no: only scroll if top/bottom edge of sidebar is at
183-
// top/bottom edge of window
184-
if(curtop>wintop&&curbot>winbot){
185-
sidebarwrapper.css('top',$u.max([wintop-offset-10,0]));
186-
}
187-
elseif(curtop<wintop&&curbot<winbot){
188-
sidebarwrapper.css('top',$u.min([winbot-sidebar_height-offset-20,
189-
jdocument.height()-sidebar_height-200]));
190-
}
191-
}
192-
}
193-
jwindow.scroll(scroll_sidebar);
194143
});

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp