Commit245418d

committed

Sidebar: "dumb" scrolling

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 parenta7b271a commit245418dCopy full SHA for 245418d

File tree

2 files changed

+13

-36

lines changed

python_docs_theme/static
- pydoctheme.css
- sidebar.js

2 files changed

+13

-36

lines changed

`‎python_docs_theme/static/pydoctheme.css`

Lines changed: 10 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,9 @@ form.inline-search input[type="submit"] {`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`div.sphinxsidebar {`
	`55`	`+position: sticky;`
	`56`	`+top:0;`
	`57`	`+height:100vh;`
`55`	`58`	`background-color:#eeeeee;`
`56`	`59`	`border-radius:5px;`
`57`	`60`	`line-height:130%;`
`@@ -62,6 +65,13 @@ div.sphinxsidebar h3, div.sphinxsidebar h4 {`
`62`	`65`	`margin-top:1.5em;`
`63`	`66`	`}`
`64`	`67`
	`68`	`+div.sphinxsidebarwrapper {`
	`69`	`+box-sizing: border-box;`
	`70`	`+height:100%;`
	`71`	`+overflow-x: hidden;`
	`72`	`+overflow-y: auto;`
	`73`	`+}`
	`74`	`+`
`65`	`75`	`div.sphinxsidebarwrapper>h3:first-child {`
`66`	`76`	`margin-top:0.2em;`
`67`	`77`	`}`

`‎python_docs_theme/static/sidebar.js`

Lines changed: 3 additions & 36 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,8 @@`
`2`	`2`	`* sidebar.js`
`3`	`3`	`* ~~~~~~~~~~`
`4`	`4`	`*`
`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.`
`7`	`7`	`*`
`8`	`8`	`* .sphinxsidebar contains .sphinxsidebarwrapper. This script adds in`
`9`	`9`	`* .sphixsidebar, after .sphinxsidebarwrapper, the #sidebarbutton used to`
`@@ -26,7 +26,6 @@ $(function() {`
`26`	`26`	`// the 'sidebarbutton' element is defined as global after its`
`27`	`27`	`// creation, in the add_sidebar_button function`
`28`	`28`	`varjwindow=$(window);`
`29`		`-varjdocument=$(document);`
`30`	`29`	`varbodywrapper=$('.bodywrapper');`
`31`	`30`	`vardocumentwrapper=$('.documentwrapper');`
`32`	`31`	`varsidebar=$('.sphinxsidebar');`
`@@ -62,8 +61,6 @@ $(function() {`
`62`	`61`	`expand_sidebar();`
`63`	`62`	`else`
`64`	`63`	`collapse_sidebar();`
`65`		`-// adjust the scrolling of the sidebar`
`66`		`-scroll_sidebar();`
`67`	`64`	`}`
`68`	`65`
`69`	`66`	`functioncollapse_sidebar(){`
`@@ -100,7 +97,7 @@ $(function() {`
`100`	`97`	`sidebarwrapper.css({`
`101`	`98`	`'float':'left',`
`102`	`99`	`'margin-right':'0',`
`103`		`-'width':ssb_width_expanded-28`
	`100`	`+'width':ssb_width_expanded-13`
`104`	`101`	`});`
`105`	`102`	`// create the button`
`106`	`103`	`sidebar.append(`
`@@ -161,34 +158,4 @@ $(function() {`
`161`	`158`	`add_sidebar_button();`
`162`	`159`	`varsidebarbutton=$('#sidebarbutton');`
`163`	`160`	`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);`
`194`	`161`	`});`

0 commit comments

Comments

(0)

Movatterモバイル変換

Navigation Menu

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Commit245418d

File tree

2 files changed

2 files changed

`‎python_docs_theme/static/pydoctheme.css`

`‎python_docs_theme/static/sidebar.js`

0 commit comments