Skip to content

Commit f67f4e2

Browse files
AA-TurnerAA-Turner
committed
Fix sidebars
1 parent 48707cf commit f67f4e2

File tree

3 files changed

+79
-122
lines changed

3 files changed

+79
-122
lines changed

‎python_docs_theme/static/pydoctheme.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ div.sphinxsidebar h3, div.sphinxsidebar h4 {
7171
}
7272

7373
div.sphinxsidebarwrapper {
74+
width: 217px;
7475
box-sizing: border-box;
7576
height: 100%;
7677
overflow-x: hidden;
@@ -101,6 +102,34 @@ div.sphinxsidebar input[type=text] {
101102
max-width: 150px;
102103
}
103104

105+
#sidebarbutton {
106+
/* Sphinx 4.x and earlier compat */
107+
height: 100%;
108+
background-color: #CCCCCC;
109+
margin-left: 0;
110+
color: #444444;
111+
border-left: 1px solid white;
112+
font-size: 1.2em;
113+
cursor: pointer;
114+
padding-top: 1px;
115+
float: right;
116+
display: table;
117+
/* after Sphinx 4.x and earlier is dropped, only the below is needed */
118+
width: 12px;
119+
border-radius: 0 5px 5px 0;
120+
border-left: none;
121+
}
122+
123+
#sidebarbutton span {
124+
/* Sphinx 4.x and earlier compat */
125+
display: table-cell;
126+
vertical-align: middle;
127+
}
128+
129+
#sidebarbutton:hover {
130+
background-color: #AAAAAA;
131+
}
132+
104133
div.body {
105134
padding: 0 0 0 1.2em;
106135
}

‎python_docs_theme/static/sidebar.js‎

Lines changed: 49 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -2,142 +2,69 @@
22
* sidebar.js
33
* ~~~~~~~~~~
44
*
5-
* This script makes the Sphinx sidebar collapsible. This is a slightly
6-
* modified version of Sphinx's own sidebar.js.
5+
* This file is functionally identical to "sidebar.js" in Sphinx 5.0.
6+
* When support for Sphinx 4 and earlier is dropped from the theme,
7+
* this file can be removed.
78
*
8-
* .sphinxsidebar contains .sphinxsidebarwrapper. This script adds in
9-
* .sphixsidebar, after .sphinxsidebarwrapper, the #sidebarbutton used to
10-
* collapse and expand the sidebar.
9+
* This script makes the Sphinx sidebar collapsible.
1110
*
12-
* When the sidebar is collapsed the .sphinxsidebarwrapper is hidden and the
13-
* width of the sidebar and the margin-left of the document are decreased.
14-
* When the sidebar is expanded the opposite happens. This script saves a
15-
* per-browser/per-session cookie used to remember the position of the sidebar
16-
* among the pages. Once the browser is closed the cookie is deleted and the
17-
* position reset to the default (expanded).
11+
* .sphinxsidebar contains .sphinxsidebarwrapper. This script adds
12+
* in .sphinxsidebar, after .sphinxsidebarwrapper, the #sidebarbutton
13+
* used to collapse and expand the sidebar.
1814
*
19-
* :copyright: Copyright 2007-2011 by the Sphinx team, see AUTHORS.
15+
* When the sidebar is collapsed the .sphinxsidebarwrapper is hidden
16+
* and the width of the sidebar and the margin-left of the document
17+
* are decreased. When the sidebar is expanded the opposite happens.
18+
* This script saves a per-browser/per-session cookie used to
19+
* remember the position of the sidebar among the pages.
20+
* Once the browser is closed the cookie is deleted and the position
21+
* reset to the default (expanded).
22+
*
23+
* :copyright: Copyright 2007-2022 by the Sphinx team, see AUTHORS.
2024
* :license: BSD, see LICENSE for details.
2125
*
2226
*/
2327

24-
$(function() {
28+
const initialiseSidebar = () => {
2529
// global elements used by the functions.
26-
// the 'sidebarbutton' element is defined as global after its
27-
// creation, in the add_sidebar_button function
28-
var bodywrapper = $('.bodywrapper');
29-
var sidebar = $('.sphinxsidebar');
30-
var sidebarwrapper = $('.sphinxsidebarwrapper');
31-
32-
// original margin-left of the bodywrapper and width of the sidebar
33-
// with the sidebar expanded
34-
var bw_margin_expanded = bodywrapper.css('margin-left');
35-
var ssb_width_expanded = sidebar.width();
36-
37-
// margin-left of the bodywrapper and width of the sidebar
38-
// with the sidebar collapsed
39-
var bw_margin_collapsed = '.8em';
40-
var ssb_width_collapsed = '.8em';
30+
const bodyWrapper = document.getElementsByClassName("bodywrapper")[0]
31+
const sidebar = document.getElementsByClassName("sphinxsidebar")[0]
32+
const sidebarWrapper = document.getElementsByClassName('sphinxsidebarwrapper')[0]
33+
const sidebarButton = document.getElementById("sidebarbutton")
34+
const sidebarArrow = sidebarButton.querySelector('span')
4135

42-
// colors used by the current theme
43-
var dark_color = '#AAAAAA';
44-
var light_color = '#CCCCCC';
45-
46-
function sidebar_is_collapsed() {
47-
return sidebarwrapper.is(':not(:visible)');
48-
}
36+
// for some reason, the document has no sidebar; do not run into errors
37+
if (typeof sidebar === "undefined") return;
4938

50-
function toggle_sidebar() {
51-
if (sidebar_is_collapsed())
52-
expand_sidebar();
53-
else
54-
collapse_sidebar();
55-
}
39+
const flipArrow = element => element.innerText = (element.innerText === "»") ? "«" : "»"
5640

57-
function collapse_sidebar() {
58-
sidebarwrapper.hide();
59-
sidebar.css('width', ssb_width_collapsed);
60-
bodywrapper.css('margin-left', bw_margin_collapsed);
61-
sidebarbutton.css({
62-
'margin-left': '0',
63-
'border-radius': '5px'
64-
});
65-
sidebarbutton.find('span').text('»');
66-
sidebarbutton.attr('title', _('Expand sidebar'));
67-
document.cookie = 'sidebar=collapsed';
41+
const collapse_sidebar = () => {
42+
bodyWrapper.style.marginLeft = ".8em";
43+
sidebar.style.width = ".8em"
44+
sidebarWrapper.style.display = "none"
45+
flipArrow(sidebarArrow)
46+
sidebarButton.title = _('Expand sidebar')
47+
window.localStorage.setItem("sidebar", "collapsed")
6848
}
6949

70-
function expand_sidebar() {
71-
bodywrapper.css('margin-left', bw_margin_expanded);
72-
sidebar.css('width', ssb_width_expanded);
73-
sidebarwrapper.show();
74-
sidebarbutton.css({
75-
'margin-left': ssb_width_expanded-12,
76-
'border-radius': '0 5px 5px 0'
77-
});
78-
sidebarbutton.find('span').text('«');
79-
sidebarbutton.attr('title', _('Collapse sidebar'));
80-
document.cookie = 'sidebar=expanded';
50+
const expand_sidebar = () => {
51+
bodyWrapper.style.marginLeft = ""
52+
sidebar.style.removeProperty("width")
53+
sidebarWrapper.style.display = ""
54+
flipArrow(sidebarArrow)
55+
sidebarButton.title = _('Collapse sidebar')
56+
window.localStorage.setItem("sidebar", "expanded")
8157
}
8258

83-
function add_sidebar_button() {
84-
sidebarwrapper.css({
85-
'float': 'left',
86-
'margin-right': '0',
87-
'width': ssb_width_expanded - 13
88-
});
89-
// create the button
90-
sidebar.append(
91-
'<div id="sidebarbutton"><span>&laquo;</span></div>'
92-
);
93-
var sidebarbutton = $('#sidebarbutton');
94-
sidebarbutton.find('span').css({
95-
'display': 'block',
96-
'position': 'fixed',
97-
'top': '50%'
98-
});
99-
100-
sidebarbutton.click(toggle_sidebar);
101-
sidebarbutton.attr('title', _('Collapse sidebar'));
102-
sidebarbutton.css({
103-
'border-radius': '0 5px 5px 0',
104-
'color': '#444444',
105-
'background-color': '#CCCCCC',
106-
'font-size': '1.2em',
107-
'cursor': 'pointer',
108-
'height': '100%',
109-
'padding-left': '1px',
110-
'margin-left': ssb_width_expanded - 12
111-
});
59+
sidebarButton.addEventListener("click", () => {
60+
(sidebarWrapper.style.display === "none") ? expand_sidebar() : collapse_sidebar()
61+
})
11262

113-
sidebarbutton.hover(
114-
function () {
115-
$(this).css('background-color', dark_color);
116-
},
117-
function () {
118-
$(this).css('background-color', light_color);
119-
}
120-
);
121-
}
122-
123-
function set_position_from_cookie() {
124-
if (!document.cookie)
125-
return;
126-
var items = document.cookie.split(';');
127-
for(var k=0; k<items.length; k++) {
128-
var key_val = items[k].split('=');
129-
var key = key_val[0];
130-
if (key == 'sidebar') {
131-
var value = key_val[1];
132-
if ((value == 'collapsed') && (!sidebar_is_collapsed()))
133-
collapse_sidebar();
134-
else if ((value == 'expanded') && (sidebar_is_collapsed()))
135-
expand_sidebar();
136-
}
137-
}
138-
}
63+
if (!window.localStorage.getItem("sidebar")) return
64+
const value = window.localStorage.getItem("sidebar")
65+
if (value === "collapsed") collapse_sidebar();
66+
else if (value === "expanded") expand_sidebar();
67+
}
13968

140-
add_sidebar_button();
141-
var sidebarbutton = $('#sidebarbutton');
142-
set_position_from_cookie();
143-
});
69+
if (document.readyState !== "loading") initialiseSidebar()
70+
else document.addEventListener("DOMContentLoaded", initialiseSidebar)

‎python_docs_theme/theme.conf‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ relbarlinkcolor = #444444
1414
sidebarbgcolor = white
1515
sidebartextcolor = #444444
1616
sidebarlinkcolor = #444444
17+
sidebarbtncolor = #cccccc
1718
bgcolor = white
1819
textcolor = #222222
1920
linkcolor = #0090c0

0 commit comments

Comments
 (0)