Consider key pinning sticking issue

[nichgray]

When you pin the key and scroll down to where the first "related manuscripts" box is on the right, then "hide" without unpinning the key, the manuscript box sticks at key level. Can we fix this? Maybe "hide" should automatically also mean "unpinned" if that is possible?

[karindalziel]

Some thoughts:

1: maybe we could fix it by always centering the links. but that won't work on small screens. The code to do this can be found here: https://stackoverflow.com/questions/8922107/javascript-scrollintoview-middle-alignment#answer-50453912

2: alternately, we can do the same thing we do with the relation links somehow:

var headerheight = $(".variorum_header").css("height");
      $(".mss_links").css({"top": headerheight });

I'd have to look into this with Jess.

3: If all else fails, we can remove the "pin" feature.

[jduss4]

My other idea is to remove the "pin" functionality of the key entirely. It shows up at the top automatically, and then scrolls out of view. At the bottom next to the "top" button, we have another "show key" button that when clicked pops up a modal for a quick refresher. This wouldn't be an ideal solution but it would remove some of the problems of having a pinned key, while also allowing for people to consult the key without having to lose their place in the text

[jduss4]

Nikki thinks the primary reason for having the key would be to refresh your mind on the types of variants (colors), and this could be mitigated by having a hover tooltip type item as a label?

[jduss4]

For now key pinning has been removed.

The javascript used to look like this:

  // Show/hide page key
  $(".v_show_key").click(function() {
    if ($(".v_page_key").hasClass("hide")) {
      $(".v_page_key").removeClass("hide");
      $(this).text("hide key");
      $(".v_pin_key").removeClass("hide");

    } else {
      $(".v_page_key").addClass("hide");
      $(this).text("show key");
      $(".v_pin_key").addClass("hide");
      $(".variorum_header").removeClass("sticky");
      $(".mss_links").css({"top": "0"});
      $(".v_pin_key").text("pin key");
    };
    return false;
  });

  $(".v_pin_key").click(function() {
    if (!$(".variorum_header").hasClass("sticky")) {
      $(".variorum_header").addClass("sticky");
      $(this).text("unpin key");
      var headerheight = $(".variorum_header").css("height");
      $(".mss_links").css({"top": headerheight });
    } else {
      $( ".variorum_header" ).removeClass("sticky");
      $(this).text("pin key");
      $(".mss_links").css({"top": "0"});
    }
    return false;
  });