Pin important wiki notices to the top of the page #9021
Conversation
|
This covers section title (and some part of the content) when using table of content or section link... |
|
that's true... im not sure how to fix, would the best way be to get the height of this container and add it to scroll-padding/scroll-margin? or is there some way i can make this work without js 🤔 |
|
|
||
| &__pinned-container { | ||
| .sticky-below-navbar(); | ||
| background-color: hsl(var(--hsl-b5)); |
|
|
||
| @media @mobile { | ||
| scroll-padding-top: @navbar-height; | ||
| scroll-padding-top: calc(var(--scroll-padding) + @navbar-height); |
There was a problem hiding this comment.
use variable instead so the value using calc only need to be defined once
| private adjustScrollPadding = () => { | ||
| const pinnedNotices = document.querySelector('.js-wiki-pinned-notices'); | ||
| const scrollPadding = pinnedNotices instanceof HTMLElement | ||
| ? pinnedNotices.getBoundingClientRect().height + 10 |
There was a problem hiding this comment.
this may be wrong if the window is resized
| @@ -25,4 +25,9 @@ | |||
| margin: 0; | |||
| } | |||
| } | |||
|
|
|||
| &__pinned-container { | |||
There was a problem hiding this comment.
I feel in some cases this may end up annoying people with this being permanently visible and reducing actual content area when reading the page (especially on mobile)
There was a problem hiding this comment.
yeah... talked about it with TicClick, who originally suggested idea of this PR, and we both aren't sure how to make it better. I was thinking it could be good to add a dismiss option that puts it back into its normal position, but I don't know if that's actually less "annoying", might feel like a cookie popup where ppl instantly click+close by habit
There was a problem hiding this comment.
i'm not sure if this should be necessary at all... maybe the least intrusive solution could be a dismissable cookie popup only for when arriving from a section link and the original notice isn't visible (and it auto-dismisses if you scroll up to the notice)
There was a problem hiding this comment.
given how limited screen space on mobile devices is, it makes sense to only show this on desktop.
another thought I had is that there's already an ever-floating table of contents on the left, which could be reused for just a small chip saying outdated [?] or something
so ppl will still see them when they open a wiki page from a section link, or just scroll past the notices at the beginning
looks a little strange when other not-pinned notices scroll under it, but I'm not sure if anything should be done about that