search

nomadjimbob / mikio

Customizable, Bootstrap 4 inspired template for Dokuwiki
GNU General Public License v2.0
23 stars 6 forks source link

[Feature request]: Make TOC Sticky with set to full height #21

Closed hubdot closed 3 years ago

hubdot commented 3 years ago

Hey there, :)

thanks for the awesome work on Mikio. It would be nice if there was another option for the TOC to make it float with content if set to tpl»mikio»tocFull > [x] checked.

On long pages the TOC stays on the TOP and thus leads to a lot of scrolling and losing track of where you've been. It'd be nice to have the option of it float. https://i.imgur.com/LkwmI1A.png

If the TOC exceeds device display height a scrollbar could be added: https://i.imgur.com/GF5bnrq.png

nomadjimbob commented 3 years ago

Good point above.

If you are not using LESS, you can edit the /assets/mikio.css and change the following:

.mikio .mikio-content .mikio-article.toc-full .mikio-toc {
  margin-top: 1rem;
  order: 2;
}

to

.mikio .mikio-content .mikio-article.toc-full .mikio-toc {
  margin-top: 1rem;
  order: 2;
  position: sticky;
  position: -webkit-sticky;
  top: 1rem;
  align-self: flex-start;
  overflow: scroll;
  max-height: 100vh;
}

I will add this to the next release which is currently pending the fix for #23