Document section sidebar is always available #195
Conversation
|
If you want to test the changes you can copy the codes in your local folders. If you do not want to compile all the files you can use master branch to test it:
|
| @@ -352,6 +352,9 @@ b.button:after { | |||
| //margin-bottom: $panel-margin-bottom * 2; | |||
| border-bottom: $sect-divider-size $sect-divider-style $sect-divider-color; | |||
| padding-bottom: 0.5em; | |||
| overflow: -moz-scrollbars-none; | |||
| position: sticky !important; | |||
There was a problem hiding this comment.
position: sticky is not making any difference here. Please apply it to #header. Also, position: sticky won't work on its own, you have to specify top: 0 so the browser knows where to "stick" it when you scroll.
There was a problem hiding this comment.
Previously It worked for me locally so I don't know why it dose not work now. But in the new version I apply it to #header.
| @@ -352,6 +352,9 @@ b.button:after { | |||
| //margin-bottom: $panel-margin-bottom * 2; | |||
| border-bottom: $sect-divider-size $sect-divider-style $sect-divider-color; | |||
| padding-bottom: 0.5em; | |||
| overflow: -moz-scrollbars-none; | |||
| position: sticky !important; | |||
| height: 570px !important; | |||
There was a problem hiding this comment.
Rather than specifying a fixed height (570px), please use the calc() function so you can calculate the height based on the user's viewport, so that it looks good on all screen sizes.
You can calculate the height by adding up the height of the header and the footer and then subtracting the sum from 100vh (which means 100% of the viewport height).
So, for example, if the header's height is 40px and the footer's height is 340px and suppose we want to keep a 20px gap between the sidebar and the footer, then you can specify the height as height: calc(100vh - 400px).
You can find the heights by inspecting them in the developer tools of the browser.
| @@ -380,6 +383,9 @@ b.button:after { | |||
| } | |||
| } | |||
| } | |||
| #toc::-webkit-scrollbar{ | |||
| width: 0 !important | |||
There was a problem hiding this comment.
Can you please try to make the scrollbar visible on hovering over the sidebar?
| @@ -6,6 +6,7 @@ body.book.toc2.toc-left { | |||
| } | |||
|
|
|||
| #header { | |||
| width: 100% !important; | |||
There was a problem hiding this comment.
Because I want to get the height of the parent element of #header, but I think it is not necessary now.
There was a problem hiding this comment.
The height of the sidebar looks fine on larger screens but look very small in smaller laptops. But I don't see another alternative because if the height is taller then it overlaps the footer when it appears on the viewport.
The changes look good but there is more that can be done.
-
Please put your changes within a media query targeting devices having width more than 1024px (
@media (min-width: 1024px) { /* your changes */ }) so that it does not impact all other resolutions like mobiles and tablets like this:
-
As an enhancement, can you fade out the bottom edge of the sidebar. Right now, with the shortened height of the sidebar, its content is cut off abruptly and it looks ugly:
-
Also reduce the width of the sidebar (
#toc) to around90%so that there is some space between its scrollbar and the main content.
Document section sidebar now move with the page.