NEW: Adding a section for footer-content like in sphinx-basic-ng #861

AakashGfude · 2022-08-08T12:47:22Z

Added footer-content.html, following the sphinx-basic-ng design.

For this and to mimic sphinx-basic-ng design (which we are ultimately planning to inherit) #840, have reordered and created a few tags for body content. Copied over the container CSS for these elements as well from sphinx-basic-ng, including the page width to be 88rem (which looked nicer to me, but can revert it.).

The specific tags created/reordered here are:

bd-container__inner now has a new main tag and primary sidebar as its only children. secondary sidebar has been moved from this position.
new main tag is introduced to accommodate footer-content section. The visual position of which is shown in the pic above.
main tag has bd-content and the new footer-section as its children tags.
bd-content now has bd-article-container and the secondary sidebar as its children. Note that the secondary sidebar was earlier on the same level as primary sidebar, but has moved here to adhere to the skeleton of sphinx-basic-ng.
bd-article-container has an article header, article content, and article footer in it.

Inspecting the HTML, in the preview of this PR will help understand the hierarchy better.

The need for this section was highlighted in a PR in sphinx-book-theme: executablebooks/sphinx-book-theme#597

choldgraf · 2022-08-09T08:37:06Z

@AakashGfude this looks good in general to me, though I'm a bit surprised at how many changed lines of code there are. Are those just rearrangements? Could you please:

In the top description, could you be more specific than just "reordered and created a few body tags"? What did you rearrange specifically? In particular anything that might be a breaking change for downstream CSS
Does this change the end output at all? I couldn't see any difference in our site.
Doesn't the theme already have a footer that spans the entire bottom of the page? How is this different from that? e.g. from our main docs:

AakashGfude · 2022-08-09T12:46:13Z

Thanks, @choldgraf, have updated the top description to explain the HTML container structure better.
It does not change the output at all of this theme, because we don't use footer-content at all here (Which is introduced in this PR). However, I have made the page-width to be 88rem (same as sphinx-basic-ng), while I was adjusting the styles to the new HTML layout.

The screenshot which you have posted is of footer.html which is in bright red in the snapshot of sections in the top description. And it spans the whole page.

The one introduced here is footer-content, which spans the article plus the sidebar-secondary width. The need for this section arises in sphinx-book-theme . Notice the footer in the image below:

It will not break any downstream CSS, as the hierarchy has been matched in the SCSS files, but I will keep looking tomorrow for any unintended changes.

choldgraf · 2022-08-10T13:16:53Z

A quick thought - could you update our layout figure at the link below to include this?

https://pydata-sphinx-theme.readthedocs.io/en/latest/user_guide/layout.html

This will also make it easier to figure out what exactly we are adding

AakashGfude · 2022-08-11T02:13:35Z

Good idea @choldgraf, have added the section for footer content.

choldgraf

A few quick thoughts in there but it looks pretty good to me in general. My main questions are around the ramifications of removing the bootstrap class helper and hard-coding width instead.

I took a look at the demo docs and they all seem to look good!

choldgraf · 2022-08-11T12:10:49Z

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

+.bd-page-width {
+  width: 100%;
+  @include media-breakpoint-up(lg) {
+    width: $breakpoint-page-width;


why not just set max-width: $breakpoint-page-width instead of a fixed width?

True, I will use max-width. I was following the sphinx-basic-ng convention https://github.com/pradyunsg/sphinx-basic-ng/blob/main/src/sphinx_basic_ng/theme/basic-ng/static/skeleton.css#L294 , but it has different fixed widths for a lot of sizes.

If you think it's better to fix the width, either for our own reasons or just to be the same as the basic-ng theme, I think it's fine. We just need to encode this context in the CSS comments or variable names so it doesn't seem like a random CSS decision

I have added a comment at the location where the variable is declared https://github.com/pydata/pydata-sphinx-theme/pull/861/files#diff-e1eb68fda05547f5b24fb1a5b0a020546ba808616976abb40a6b704bddea3858R23

choldgraf · 2022-08-11T12:11:31Z

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

-  flex-direction: column;
-  gap: 1rem;
-
+  flex-shrink: 0;


what does this do?

and what was the reason for removing the flex/flex-direction/etc stuff above?

I will revert this one. The change does not handle all cases, like, when there is an ethical ads banner. It does not shift the ethical ads banner to the bottom of the primary sidebar, when the toc links do not occupy the whole screen.

For example, it produces this:

Instead of this:

Thanks for pointing this change out.

choldgraf · 2022-08-11T12:12:00Z

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

@@ -16,7 +17,7 @@
  }

  padding: 2rem 1rem 1rem 1rem;
-  @include make-col(2);
+  width: 17rem;


we should avoid hard-coding widths and things like that, so that we can standardize things more easily. What's the rationale for removing make-col? Are there any other effects? If I recall the col CSS does more than just set the width right?

the make-col(2) class is setting up the width and max-width to be 16.6667%. And making it explicit that the flex-grow and flex-shrink should be zero.
I found flex-shrink 0 to be useful here, to prevent the sidebar from shrinking. And 17rem was looking okay, for the changed HTML structure. Which is also used by sphinx-basic-ng.
Good point, I will make it a variable.

… variable

AakashGfude · 2022-08-15T03:01:08Z

@choldgraf let me know how it looks now.

choldgraf

This looks good to me - two quick comments. +1 on merge once those are resolved.

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

choldgraf · 2022-08-15T09:09:45Z

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

+            <footer class="bd-footer-article">
+                {% include "sections/footer-article.html" %}
+            </footer>
+            {% endif %}
          </div>


What is this/div attracted to? It seems to be at a different indentation level then everything else . Is that just a quirk of my mobile browser?

hmm maybe a quirk, because in my editor it is at the same level as "bd-content" and a child of "bd-main".

AakashGfude · 2022-08-16T09:21:21Z

@choldgraf I don't have the permission to merge here. Do merge if you think it looks okay.

choldgraf · 2022-08-18T07:36:04Z

Thanks for the enhancement @AakashGfude !

AakashGfude added 3 commits August 8, 2022 16:07

reshuffling content layout html and editing scss to mimic sb-ng

b855576

adding footer-content and css for mobile, article

60e6f92

keeping the comments

f50f8c8

AakashGfude changed the title ~~Footer content~~ NEW: Adding a section for footer content as in sphinx-basic-ng Aug 8, 2022

AakashGfude changed the title ~~NEW: Adding a section for footer content as in sphinx-basic-ng~~ NEW: Adding a section for footer content like in sphinx-basic-ng Aug 9, 2022

AakashGfude changed the title ~~NEW: Adding a section for footer content like in sphinx-basic-ng~~ NEW: Adding a section for footer-content like in sphinx-basic-ng Aug 9, 2022

property to prevent overflow in mobile screens

e3df9e6

AakashGfude added 4 commits August 11, 2022 11:32

added footer-content in layout.rst

17e77bc

adding a section for footer content

40d93c6

added content for footer-content

923ce01

correcting the ref

aec7bb2

choldgraf reviewed Aug 11, 2022

View reviewed changes

AakashGfude added 2 commits August 12, 2022 13:18

reverting sidebar-primary change and making secondary sidebar width a…

108a3fe

… variable

making comment more explicit

36b238e

editing comment

e2a9280

choldgraf approved these changes Aug 15, 2022

View reviewed changes

choldgraf merged commit 4b97fe0 into pydata:main Aug 18, 2022

12rambau mentioned this pull request Aug 30, 2022

bd-article-container is not taking full width of its parent #904

Closed

drammock mentioned this pull request Aug 31, 2022

Inconsistent layout from one page to another #907

Closed

AakashGfude mentioned this pull request Sep 4, 2022

Update pydata theme to 0.10 executablebooks/sphinx-book-theme#597

Merged

4 tasks

rossbar mentioned this pull request Sep 27, 2022

Extra vertical whitespace padding above h1 in theme v0.10.0 #955

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NEW: Adding a section for footer-content like in sphinx-basic-ng #861

NEW: Adding a section for footer-content like in sphinx-basic-ng #861

AakashGfude commented Aug 8, 2022 •

edited

choldgraf commented Aug 9, 2022

AakashGfude commented Aug 9, 2022

choldgraf commented Aug 10, 2022 •

edited

AakashGfude commented Aug 11, 2022 •

edited

choldgraf left a comment

choldgraf Aug 11, 2022

AakashGfude Aug 12, 2022

choldgraf Aug 12, 2022

AakashGfude Aug 15, 2022

choldgraf Aug 11, 2022

AakashGfude Aug 12, 2022

choldgraf Aug 11, 2022

AakashGfude Aug 12, 2022 •

edited

AakashGfude commented Aug 15, 2022

choldgraf left a comment

choldgraf Aug 15, 2022

AakashGfude Aug 15, 2022

AakashGfude commented Aug 16, 2022

choldgraf commented Aug 18, 2022

NEW: Adding a section for footer-content like in sphinx-basic-ng #861

NEW: Adding a section for footer-content like in sphinx-basic-ng #861

Conversation

AakashGfude commented Aug 8, 2022 • edited

choldgraf commented Aug 9, 2022

AakashGfude commented Aug 9, 2022

choldgraf commented Aug 10, 2022 • edited

AakashGfude commented Aug 11, 2022 • edited

choldgraf left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AakashGfude Aug 12, 2022 • edited

Choose a reason for hiding this comment

AakashGfude commented Aug 15, 2022

choldgraf left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AakashGfude commented Aug 16, 2022

choldgraf commented Aug 18, 2022

AakashGfude commented Aug 8, 2022 •

edited

choldgraf commented Aug 10, 2022 •

edited

AakashGfude commented Aug 11, 2022 •

edited

AakashGfude Aug 12, 2022 •

edited