Fossil

Check-in [7bb68023]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Timing tweaks: made "hide borders" hack occur about the same time as the CSS transition finishes, and increased the menu show delay still further to make it work for Firefox.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | js-hamburger-menu
Files: files | file ages | folders
SHA3-256:7bb68023bdde3fe63f0f7360f215439a0c096897f65edeaccc6fbc451774c1f5
User & Date: wyoung 2018-09-10 10:01:37
Context
2018-09-10
13:41
Added a guard on the use of CSS transitions so it falls back to a non-animated menu pull down if they appear not to be available on the current browser. Also added a check for the existence of the hamburger menu item in case the skin admin diked it out, and did a few other minor tweaks to the footer JS code. check-in: 5d9a3454 user: wyoung tags: js-hamburger-menu
10:01
Timing tweaks: made "hide borders" hack occur about the same time as the CSS transition finishes, and increased the menu show delay still further to make it work for Firefox. check-in: 7bb68023 user: wyoung tags: js-hamburger-menu
09:30
Changed hamburger menu drop-down menu from 33% of the screen width to 90%: it works better on small screens, and it allows the sitemap to go multi-column on wider screens. Also added some right-side padding to balance the padding added for
    on the left.
check-in: e76a243d user: wyoung tags: js-hamburger-menu
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to skins/default/footer.txt.

43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
    // *transition*, hence never kicks off the *CSS* transition:
    //
    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples
    function showPanel() {
      setTimeout(function() {
        panel.style.maxHeight = panelHeight;
        panel.style.border    = panelBorder;
      }, 25);   // 10 is insufficient with Firefox 62
    }

    // Click handler for the hamburger button.
    var needSitemapHTML = true;
    document.querySelector("div.mainmenu > a").onclick = function() {
      if (panel.style.maxHeight == panelHeight) {
        // Hamburger button clicked while panel visible.  Trigger the
        // transition back to hidden state.
        panel.style.maxHeight = '0';
        setTimeout(function() {
          // Browsers show a 1px high line when maxHeight == 0, so
          // temporarily hide the borders while hidden.
          panel.style.border = 'none';
        }, 300);
      }
      else if (needSitemapHTML) {
        // Only get it once per page load: it isn't likely to
        // change on us.
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
          var doc = xhr.responseXML;







|










|
|

|







43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
    // *transition*, hence never kicks off the *CSS* transition:
    //
    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#JavaScript_examples
    function showPanel() {
      setTimeout(function() {
        panel.style.maxHeight = panelHeight;
        panel.style.border    = panelBorder;
      }, 40);   // 10ms is insufficient with Firefox 62
    }

    // Click handler for the hamburger button.
    var needSitemapHTML = true;
    document.querySelector("div.mainmenu > a").onclick = function() {
      if (panel.style.maxHeight == panelHeight) {
        // Hamburger button clicked while panel visible.  Trigger the
        // transition back to hidden state.
        panel.style.maxHeight = '0';
        setTimeout(function() {
          // Browsers show a 1px high border line when maxHeight == 0,
          // our "hidden" state, so hide the borders in that state, too.
          panel.style.border = 'none';
        }, 500);    // same as transition time below
      }
      else if (needSitemapHTML) {
        // Only get it once per page load: it isn't likely to
        // change on us.
        var xhr = new XMLHttpRequest();
        xhr.onload = function() {
          var doc = xhr.responseXML;