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: | 7bb68023bdde3fe63f0f7360f215439a |
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
| |
Changes
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; |