Allow tocbot to be used on mobile anywhere in content

[yorkshire-pudding]

In my theme, blocks from the sidebar move underneath the content when the screen narrows. The fixed tocblock then overlays the content which is not acceptable.

For now, I've hidden it for small screens.
I presume fixing this would be quite complex, and what would the UI even look like anyway?

What are others doing?

[olafgrabienski]

Thanks for your report! I just noticed an interesting thing on the Tocbot library demo site which I wasn't aware of: When you narrow the screen, as soon as the TOC disappears, there is a new Menu button at the top of the page which toggles a slide-in overlay region containing the TOC.

[yorkshire-pudding]

This does look like a good UI pattern for it and I think would be the best solution. It looks like they've done the CSS in a mobile first way as the only media query I could find is a min-width in styles.css.

styles.css

body{
    background-color:#FFF
}
.transition--300{
    transition:all 300ms ease-in-out
}
.toc{
    height:100%;
    width:280px;
    transform:translateX(0)
}
.content{
    position:relative
}
.content h1:first-child,.content h2:first-child{
    padding-top:0;
    margin-top:0
}
.title{
    font-size:3em
}
.content{
    margin-bottom:95vh
}
.content ul,.content ol{
    list-style:inherit
}
.content a{
    color:#0977c3;
    text-decoration:none;
    border-bottom:1px solid #EEE;
    transition:all 300ms ease
}
.content a.no-decoration{
    border-bottom:0
}
.content a:hover{
    border-bottom:1px solid #0977c3
}
.content a:hover.no-decoration{
    border-bottom:0
}
a.toc-link{
    text-decoration:none
}
.try-it-container{
    transform:translateY(84%)
}
.try-it-container.is-open{
    transform:translateY(0%)
}
.page-content{
    display:block !important
}
.hljs{
    display:block;
    background:white;
    padding:0.5em;
    color:#333333;
    overflow-x:auto
}
.hljs-comment,.hljs-meta{
    color:#969896
}
.hljs-string,.hljs-variable,.hljs-template-variable,.hljs-strong,.hljs-emphasis,.hljs-quote{
    color:#df5000
}
.hljs-keyword,.hljs-selector-tag,.hljs-type{
    color:#a71d5d
}
.hljs-literal,.hljs-symbol,.hljs-bullet,.hljs-attribute{
    color:#0086b3
}
.hljs-section,.hljs-name{
    color:#63a35c
}
.hljs-tag{
    color:#333333
}
.hljs-title,.hljs-attr,.hljs-selector-id,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo{
    color:#795da3
}
.hljs-addition{
    color:#55a532;
    background-color:#eaffea
}
.hljs-deletion{
    color:#bd2c00;
    background-color:#ffecec
}
.hljs-link{
    text-decoration:underline
}
.toc-icon{
    position:fixed;
    top:0;
    right:0
}
#toc:checked ~ .toc{
    box-shadow:0 0 5px #c8c8c8;
    transform:translateX(0)
}
.toc{
    background-color:rgba(255,255,255,0.9);
    transform:translateX(-100%)
}
.toc.toc-right{
    transform:translateX(100%);
    right:0
}
@media (min-width: 52em){
    .toc{
        transform:translateX(0)
    }
    .toc.toc-right{
        transform:translateX(0);
        right:calc((100% - 48rem - 4rem) / 2)
    }
    .toc-icon{
        display:none
    }
    .try-it-container{
        display:block
    }
    .content{
        margin-left:280px
    }
    .toc-right ~ .content{
        margin-left:0;
        margin-right:280px
    }
}
*{
    box-sizing:border-box
}
body{
    font-size:1.2rem;
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
}
h1,h2,h3,h4,h5,h6{
    padding-top:0.5em
}
h1:focus,h2:focus,h3:focus,h4:focus,h5:focus,h6:focus{
    outline:0
}
p{
    margin-top:0.25rem
}
pre{
    display:block;
    background:#f7f7f7;
    border-radius:2px;
    border:1px solid #e0e0e0;
    padding:2px;
    line-height:1.2;
    margin-bottom:10px;
    overflow:auto;
    white-space:pre-wrap
}
code{
    display:inline;
    font-size:.8em;
    max-width:100%
}

tocbot.css

.toc{
    overflow-y:auto
}
.toc>.toc-list{
    overflow:hidden;
    position:relative
}
.toc>.toc-list li{
    list-style:none
}
.toc-list{
    margin:0;
    padding-left:10px
}
a.toc-link{
    color:currentColor;
    height:100%
}
.is-collapsible{
    max-height:1000px;
    overflow:hidden;
    transition:all 300ms ease-in-out
}
.is-collapsed{
    max-height:0
}
.is-position-fixed{
    position:fixed !important;
    top:0
}
.is-active-link{
    font-weight:700
}
.toc-link::before{
    background-color:#EEE;
    content:' ';
    display:inline-block;
    height:inherit;
    left:0;
    margin-top:-1px;
    position:absolute;
    width:2px
}
.is-active-link::before{
    background-color:#54BC4B
}

It looks like it may be theme agnostic enough to work.

[olafgrabienski]

We should check if the mobile toggle is part of the Drupal module. I don't think so, but if it is in Drupal, it should be easy to port the missing part to Backdrop.

[olafgrabienski]

If the mobile toggle isn't available in Drupal, we need an idea of how to implement it in Backdrop but also a good concept which considers amongst others the existing mobile menu toggle in Backdrop.

[yorkshire-pudding]

I'll try and look at this next week if I can. I have a bit of a deadline I'm working to at the moment. You're right that TocBot should not clash with the mobile menu

[yorkshire-pudding]

Following discussion agreed to first fix the immediate bug in #47 and then focus this on the enhancement of making to ToC usable wherever the user is in the content. Possibly using a UI pattern like this:

This uses https://github.com/tscanlin/tocbot/blob/master/src/scss/_tocbot-responsive.scss

_tocbot-responsive.scss

/* Responsive Styles */

// By default the toc will be left of the content.
// You can add the `.toc-right` class to move it to the right side.

.toc-icon {
  position: fixed;
  top: 0;
  right: 0;
}

#toc:checked ~ .toc {
  box-shadow: 0 0 5px rgba(200, 200, 200, 1);
  transform: translateX(0);
}

// Responsive overrides.
.toc {
  background-color: hsla(200, 100%, 100%, 0.9);
  transform: translateX(-100%);

  &.toc-right {
    transform: translateX(100%);
    right: 0;
  }
}

// 52em
@media (min-width: 52em) {
  .toc {
    transform: translateX(0);

    &.toc-right {
      transform: translateX(0);
      right: calc((100% - 48rem - 4rem) / 2);
    }
  }

  .toc-icon {
    display: none;
  }

  .try-it-container {
    display: block;
  }

  .content {
    margin-left: 280px;
  }
  .toc-right ~ .content {
    margin-left: 0;
    margin-right: 280px;
  }
}

But even after converting from SASS to CSS this is not an easy fit into the module, and may need quite a bit of work to make it work with all layouts.

Another pattern, might be to have a button at the bottom that slides up the ToC from the bottom. This can be seen on the same demo page in another function that the demo page offers.

[yorkshire-pudding]

@olafgrabienski I have a very rough proof of concept working based on the demo model site but slightly different as our layout puts the sidebar below the content.

It will require a bit more thought as to styling, making the toggle switch text configurable and ensuring it works ok with different layouts. Options are:

• keep it on right, regardless of which sidebar it is in
• Provide a few limited options in settings so the user selects where it goes
• try to identify whether it should be on right or left depending on the classes of the sidebar and the layout

The first (or second) could be a first step with the latter coming later if there is demand.

[olafgrabienski]

@yorkshire-pudding Thanks, your proof of concept, sounds promising!

Regarding the layout questions, I think the position on the right side is a good default (for left to right languages). An option to change the default would be great. (Better than depending on layout and sidebar classes, in my opinion.)

Do you already have an idea how your proof of concept will work with regards to the Backdrop mobile menu?