The TOC side bar is broken

[jerstlouis]

This is an old issue which has been affecting OGC metanorma documents since the start regarding the TOC side bar. Tested in both Chromium and Firefox and the behavior is the same.

• The scroll bar is partially hidden:

• Clicking at a particular spot on the dark blue bar near the white dot, the TOC will glide away to the left with all text disappearing, but an empty white bar remaining. Was the intent here to allow collapsing the TOC side bar to the left? It is also very difficult to find the exact spot where you need to click for this to happen.

• When clicking again to bring it back, the text comes back, but now an extra white portion is added.

NOTE: The most problematic issue with this bug, is that most often it happens when you try to click the scrollbar to scroll the TOC.

[opoudjis]

Mitigations:

@media screen and (min-width: 768px) {
  nav { 
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 323px;
    font-size: 0.9em;
    overflow: auto;
    padding: 0 0 0 45px;
    background-color: #f1f8ff; } }

• Make 45px into 30px to unhide it, and move the scrollbar well away from the toggle bar

$('#toggle').on('click', function(){
    if( $('nav').is(':visible') ) {
        $('nav').animate({ 'left': '-353px' }, 'slow', function(){
            $('nav').hide();
        });
        $('body').animate({ 'margin-left': '0' }, 'slow');
    }
    else {
        $('nav').show();
        $('nav').animate({ 'left': '0px' }, 'slow');
        $('body').animate({ 'margin-left': '298px' }, 'slow');
    }
});

This code presupposes:

  @media screen and (min-width: 768px) {
    body {
      margin-left: 360px; } }

but this has since changed to:

  @media screen and (min-width: 768px) {
    body {
      padding-left: 360px; } }

The JS needs to become:

$('#toggle').on('click', function(){
    if( $('nav').is(':visible') ) {
        $('nav').animate({ 'left': '-353px' }, 'slow', function(){
            $('nav').hide();
        });
        $('body').animate({ 'padding-left': '30px' }, 'slow');
    }
    else {
        $('nav').show();
        $('nav').animate({ 'left': '0px' }, 'slow');
        $('body').animate({ 'margin-left': '360px' }, 'slow');
    }
});

Whoever updated the CSS qualities of body from using margin to using padding (which may well have been me) had no idea about this Javascript toggle hardcoding attributes.

[opoudjis]

Metanorma does not have a front-end dev. As a result, bad things continue to happen on the front end, because I am not able to maintain it, nor do I have the capacity to, or the inclination to.

If Metanorma does not have a front-end dev, Metanorma should not be implementing front-end Javascript tricks like this, because they impose a maintenance burden that needs to be persisted. This has already been the subject of discussion with OGC.

[opoudjis]

Also need to do away with the children of metanorma-generic importing their own script.html files: we need the one definition of the toggle script throughout Metanorma, to align with the one base style of HTML and its padding on body.