Skip to content

Commit 4b97fe0

Browse files
AakashGfudeAakashGfude
authored
NEW: Adding a section for footer-content like in sphinx-basic-ng (#861)
1 parent 51219fe commit 4b97fe0

File tree

10 files changed

+139
-78
lines changed

10 files changed

+139
-78
lines changed

‎docs/user_guide/layout.rst

+58-24
Original file line numberDiff line numberDiff line change
@@ -79,38 +79,63 @@ You can click on section titles to learn more about them and some basic layout c
7979
Links between pages in the active section.
8080

8181
.. grid-item::
82-
:padding: 2
83-
:outline:
84-
:columns: 6
85-
:class: content
82+
:columns: 8
8683

87-
.. button-ref:: layout-article-header
88-
:color: primary
89-
:outline:
84+
.. grid::
85+
:margin: 0
86+
:gutter: 0
9087

91-
Article Header
88+
.. grid-item::
89+
:class: content
90+
:padding: 2
91+
:columns: 8
92+
:outline:
9293

93-
**Article Content**
94+
.. button-ref:: layout-article-header
95+
:color: primary
96+
:outline:
9497

95-
.. button-ref:: layout-article-footer
96-
:color: primary
97-
:outline:
98+
Article Header
9899

99-
Article Footer
100+
**Article Content**
100101

101-
.. grid-item::
102-
:padding: 2
103-
:outline:
104-
:columns: 2
105-
:class: sidebar-secondary
102+
.. button-ref:: layout-article-footer
103+
:color: primary
104+
:outline:
106105

107-
.. button-ref:: layout-sidebar-secondary
108-
:color: primary
106+
Article Footer
107+
108+
.. grid-item::
109+
:padding: 2
110+
:columns: 4
111+
:outline:
112+
:class: sidebar-secondary
113+
114+
.. button-ref:: layout-sidebar-secondary
115+
:color: primary
116+
:outline:
117+
118+
Secondary Sidebar
119+
120+
Within-page header links
121+
122+
.. grid::
123+
:margin: 0
124+
:gutter: 0
109125
:outline:
110126

111-
Secondary Sidebar
127+
.. grid-item::
128+
:padding: 2
129+
:columns: 12
130+
:class: footer-content
131+
132+
.. button-ref:: layout-footer-content
133+
:color: primary
134+
:outline:
135+
136+
Footer content
137+
112138

113-
Within-page header links
114139

115140
.. grid-item::
116141
:padding: 2
@@ -322,12 +347,21 @@ use this pattern:
322347
"**": []
323348
}
324349
350+
.. _layout-footer-content:
351+
352+
Footer Content
353+
==============
354+
355+
The footer content is a narrow bar spanning the article’s content and secondary sidebar.
356+
It does not contain anything immediately viewable to the reader, but is kept as a placeholder in case theme developers wish to re-use it in the future.
357+
358+
325359
.. _layout-sidebar-secondary:
326360

327361
Secondary Sidebar (right)
328362
=========================
329363

330-
The in-page sidebar is just to the right of a page's main content, and is
364+
The in-page sidebar is just to the right of a page's article content, and is
331365
configured in ``conf.py`` with ``html_theme_options['page_sidebar_items']``.
332366

333367
By default, it has the following templates:
@@ -364,7 +398,7 @@ at the bottom. You can hide these buttons with the following configuration:
364398
Footer
365399
======
366400

367-
The footer is just below a page's main content, and is configured in ``conf.py``
401+
The footer is just below a page’s main content, and is configured in ``conf.py``
368402
with ``html_theme_options['footer_items']``.
369403

370404
By default, it has the following templates:

‎src/pydata_sphinx_theme/assets/styles/sections/_article.scss

+25-14
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
/**
22
* Main content area
33
*/
4-
.bd-content {
5-
display: flex;
4+
.bd-main {
5+
flex-grow: 1;
66
flex-direction: column;
7+
display: flex;
8+
min-width: 0;
79

8-
// Max-width is slightly more than the W3 since our docs often have images.
9-
// We shoot for about 100 characters per line instead of 80.
10-
// ref: https://www.w3.org/WAI/tutorials/page-structure/styling/#line-length
11-
max-width: 60em;
12-
overflow-x: auto; // Prevent wide content from pushing off the secondary sidebar
13-
padding: 1rem;
14-
15-
.bd-article {
16-
// Give a bit more verticle spacing on wide screens
17-
@include media-breakpoint-up($breakpoint-sidebar-secondary) {
18-
padding-top: 2rem;
19-
padding-left: 2rem;
10+
.bd-content {
11+
display: flex;
12+
justify-content: center;
13+
height: 100%;
14+
.bd-article-container {
15+
justify-content: space-between;
16+
display: flex;
17+
flex-direction: column;
18+
// Max-width is slightly more than the W3 since our docs often have images.
19+
// We shoot for about 100 characters per line instead of 80.
20+
// ref: https://www.w3.org/WAI/tutorials/page-structure/styling/#line-length
21+
max-width: 60em;
22+
overflow-x: auto; // Prevent wide content from pushing off the secondary sidebar
23+
padding: 1rem;
24+
.bd-article {
25+
// Give a bit more verticle spacing on wide screens
26+
@include media-breakpoint-up($breakpoint-sidebar-secondary) {
27+
padding-top: 2rem;
28+
padding-left: 2rem;
29+
}
30+
}
2031
}
2132
}
2233
}

‎src/pydata_sphinx_theme/assets/styles/sections/_container.scss

+9-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
.bd-container {
22
flex-grow: 1;
33
display: flex;
4-
flex-direction: column;
4+
justify-content: center;
55

66
.bd-container__inner {
7-
flex-grow: 1;
8-
justify-content: center;
7+
display: flex;
8+
}
9+
}
10+
11+
.bd-page-width {
12+
width: 100%;
13+
@include media-breakpoint-up(lg) {
14+
max-width: $breakpoint-page-width;
915
}
1016
}

‎src/pydata_sphinx_theme/assets/styles/sections/_header.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@
1717
width: 100%;
1818
padding: 0.5rem 0;
1919
max-width: 100vw;
20-
20+
justify-content: center;
2121
.bd-header__inner {
22+
display: flex;
23+
align-items: center;
2224
height: 100%;
2325
padding-left: 1rem;
2426
padding-right: 1rem;

‎src/pydata_sphinx_theme/assets/styles/sections/_sidebar-primary.scss

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
display: flex;
88
flex-direction: column;
99
gap: 1rem;
10-
1110
max-height: calc(100vh - var(--pst-header-height));
1211
position: sticky;
1312
top: var(--pst-header-height);

‎src/pydata_sphinx_theme/assets/styles/sections/_sidebar-secondary.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
.bd-sidebar-secondary {
66
display: flex;
77
order: 2;
8+
flex-shrink: 0;
89
flex-direction: column;
910
position: sticky;
1011
top: var(--pst-header-height);
@@ -16,7 +17,7 @@
1617
}
1718

1819
padding: 2rem 1rem 1rem 1rem;
19-
@include make-col(2);
20+
width: var(--pst-sidebar-secondary);
2021

2122
// Color and border
2223
background-color: var(--pst-color-background);

‎src/pydata_sphinx_theme/assets/styles/variables/_layout.scss

+2
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
// Article header is 66% of Header
88
--pst-header-height: 3rem;
99
--pst-header-article-height: calc(var(--pst-header-height) * 2 / 3);
10+
--pst-sidebar-secondary: 17rem;
1011
}
1112

1213
/*******************************************************************************
@@ -19,6 +20,7 @@
1920
*/
2021
$breakpoint-sidebar-primary: lg; // When we collapse the primary sidebar
2122
$breakpoint-sidebar-secondary: xl; // When we collapse the secondary sidebar
23+
$breakpoint-page-width: 88rem; // taken from sphinx-basic-ng, which we are ultimately going to inherit
2224

2325
/*******************************************************************************
2426
* Define the animation behaviour

‎src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

+38-33
Original file line numberDiff line numberDiff line change
@@ -78,45 +78,50 @@
7878
</nav>
7979
{% endblock %}
8080

81-
<div class="bd-container container-xl">
82-
<div class="bd-container__inner row">
81+
<div class="bd-container">
82+
<div class="bd-container__inner bd-page-width">
8383
{# Primary sidebar #}
8484
<div class="bd-sidebar-primary bd-sidebar{% if not sidebars %} hide-on-wide{% endif %}">
8585
{% include "sections/sidebar-primary.html" %}
8686
</div>
87-
88-
{# Secondary sidebar #}
89-
{% block docs_toc %}
90-
{% if not remove_sidebar_secondary %}
91-
<div class="bd-sidebar-secondary bd-toc">
92-
{% include "sections/sidebar-secondary.html" %}
93-
</div>
94-
{% endif %}
95-
{% endblock %}
96-
97-
{# Main content area #}
98-
{% block docs_main %}
99-
<div class="bd-content col">
100-
{# Article header #}
101-
<div class="bd-header-article">
102-
{% include "sections/header-article.html" %}
87+
<main class="bd-main">
88+
{# Main content area #}
89+
{% block docs_main %}
90+
<div class="bd-content">
91+
<div class="bd-article-container">
92+
{# Article header #}
93+
<div class="bd-header-article">
94+
{% include "sections/header-article.html" %}
95+
</div>
96+
{# Article content #}
97+
{% block docs_body %}
98+
<article class="bd-article" role="main">
99+
{% block body %} {% endblock %}
100+
</article>
101+
{% endblock %}
102+
{# Article Footer #}
103+
{% if theme_show_prev_next %}
104+
<footer class="bd-footer-article">
105+
{% include "sections/footer-article.html" %}
106+
</footer>
107+
{% endif %}
103108
</div>
104-
105-
{# Article content #}
106-
{% block docs_body %}
107-
<article class="bd-article" role="main">
108-
{% block body %} {% endblock %}
109-
</article>
110-
{% endblock %}
111-
112-
{# Article Footer #}
113-
{% if theme_show_prev_next %}
114-
<footer class="bd-footer-article">
115-
{% include "sections/footer-article.html" %}
116-
</footer>
109+
{# Secondary sidebar #}
110+
{% block docs_toc %}
111+
{% if not remove_sidebar_secondary %}
112+
<div class="bd-sidebar-secondary bd-toc">
113+
{% include "sections/sidebar-secondary.html" %}
114+
</div>
117115
{% endif %}
118-
</div>
119-
{% endblock %}
116+
{% endblock %}
117+
</div>
118+
<footer class="bd-footer-content">
119+
<div class="bd-footer-content__inner">
120+
{% include "sections/footer-content.html" %}
121+
</div>
122+
</footer>
123+
{% endblock %}
124+
</main>
120125
</div>
121126
</div>
122127

‎src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/footer-content.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{#- Intentionally empty in case others want to add something -#}

‎src/pydata_sphinx_theme/theme/pydata_sphinx_theme/sections/header.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="bd-header__inner container-xl">
1+
<div class="bd-header__inner bd-page-width">
22
<label class="sidebar-toggle primary-toggle" for="__primary">
33
<span class="fas fa-bars"></span>
44
</label>

0 commit comments

Comments
 (0)