diff --git a/ui/src/css/header.css b/ui/src/css/header.css index c148c0f30..f12883767 100644 --- a/ui/src/css/header.css +++ b/ui/src/css/header.css @@ -3,8 +3,10 @@ * It also handles the mobile version of the menu. */ -html.is-clipped--navbar { - overflow-y: hidden; +@media screen and (max-width: 1200px) { + html.is-clipped--navbar { + overflow-y: hidden; + } } body { diff --git a/ui/src/css/nav.css b/ui/src/css/nav.css index d13239484..1c039cb33 100644 --- a/ui/src/css/nav.css +++ b/ui/src/css/nav.css @@ -8,6 +8,12 @@ * of the sidebar menu needs to be adjusted. */ +@media screen and (max-width: 1023.5px) { + html.is-clipped--nav { + overflow-y: hidden; + } +} + .nav-container { position: fixed; top: var(--body-top); @@ -71,10 +77,6 @@ height: inherit; } -html.is-clipped--nav { - overflow-y: hidden; -} - .nav-panel-menu { overflow-y: scroll; overscroll-behavior: none; @@ -108,6 +110,29 @@ html.is-clipped--nav { color: var(--nav-font-color); } +.nav-menu-toggle { + background: transparent url(../img/octicons-16.svg#view-unfold) no-repeat center / 100% 100%; + border: none; + float: right; + height: 1em; + margin-right: -0.5rem; + opacity: 0.75; + outline: none; + padding: 0; + position: sticky; + top: calc((var(--nav-line-height) - 1 + 0.5) * 1rem); + visibility: hidden; + width: 1em; +} + +.nav-menu-toggle.is-active { + background-image: url(../img/octicons-16.svg#view-fold); +} + +.nav-panel-menu.is-active:hover .nav-menu-toggle { + visibility: visible; +} + .nav-menu h3.title { color: var(--nav-heading-font-color); font-size: inherit; diff --git a/ui/src/img/octicons-16.svg b/ui/src/img/octicons-16.svg index aba79fe78..8a219549f 100644 --- a/ui/src/img/octicons-16.svg +++ b/ui/src/img/octicons-16.svg @@ -1 +1 @@ -Octicons v11.2.0 by GitHub - https://primer.style/octicons/ - License: MIT +Octicons v11.2.0 by GitHub - https://primer.style/octicons/ - License: MIT diff --git a/ui/src/js/01-nav.js b/ui/src/js/01-nav.js index 61a2f8c3f..eed4fc6c5 100644 --- a/ui/src/js/01-nav.js +++ b/ui/src/js/01-nav.js @@ -4,8 +4,10 @@ var SECT_CLASS_RX = /^sect(\d)$/ var navContainer = document.querySelector('.nav-container') - if (!navContainer) return var navToggle = document.querySelector('.nav-toggle') + if (!navContainer && (!navToggle || (navToggle.hidden = true))) return + var nav = navContainer.querySelector('.nav') + var navMenuToggle = navContainer.querySelector('.nav-menu-toggle') navToggle.addEventListener('click', showNav) navContainer.addEventListener('click', trapEvent) @@ -13,7 +15,6 @@ var menuPanel = navContainer.querySelector('[data-panel=menu]') if (!menuPanel) return var explorePanel = navContainer.querySelector('[data-panel=explore]') - var nav = navContainer.querySelector('.nav') var currentPageItem = menuPanel.querySelector('.is-current-page') var originalPageItem = currentPageItem @@ -34,6 +35,22 @@ } }) + if (navMenuToggle && menuPanel.querySelector('.nav-item-toggle')) { + navMenuToggle.style.display = '' + navMenuToggle.addEventListener('click', function () { + var collapse = !this.classList.toggle('is-active') + find(menuPanel, '.nav-item > .nav-item-toggle').forEach(function (btn) { + collapse ? btn.parentElement.classList.remove('is-active') : btn.parentElement.classList.add('is-active') + }) + if (currentPageItem) { + if (collapse) activateCurrentPath(currentPageItem) + scrollItemToMidpoint(menuPanel, currentPageItem.querySelector('.nav-link')) + } else { + menuPanel.scrollTop = 0 + } + }) + } + if (explorePanel) { explorePanel.querySelector('.context').addEventListener('click', function () { // NOTE logic assumes there are only two panels diff --git a/ui/src/js/02-on-this-page.js b/ui/src/js/02-on-this-page.js index 3271eacae..f3b27325f 100644 --- a/ui/src/js/02-on-this-page.js +++ b/ui/src/js/02-on-this-page.js @@ -9,6 +9,7 @@ var articleSelector = 'article.doc' var article = document.querySelector(articleSelector) + if (!article) return var headingsSelector = [] for (var level = 0; level <= levels; level++) { var headingSelector = [articleSelector] diff --git a/ui/src/js/03-fragment-jumper.js b/ui/src/js/03-fragment-jumper.js index 940857b0a..b603d49c9 100644 --- a/ui/src/js/03-fragment-jumper.js +++ b/ui/src/js/03-fragment-jumper.js @@ -2,6 +2,7 @@ 'use strict' var article = document.querySelector('article.doc') + if (!article) return var toolbar = document.querySelector('.toolbar') var supportsScrollToOptions = 'scrollTo' in document.documentElement @@ -19,7 +20,7 @@ window.location.hash = '#' + this.id e.preventDefault() } - var y = computePosition(this, 0) - toolbar.getBoundingClientRect().bottom + var y = computePosition(this, 0) - (toolbar ? toolbar.getBoundingClientRect().bottom : 0) var instant = e === false && supportsScrollToOptions instant ? window.scrollTo({ left: 0, top: y, behavior: 'instant' }) : window.scrollTo(0, y) } diff --git a/ui/src/js/05-mobile-navbar.js b/ui/src/js/05-mobile-navbar.js index cbcfb4caa..4204ae34a 100644 --- a/ui/src/js/05-mobile-navbar.js +++ b/ui/src/js/05-mobile-navbar.js @@ -8,8 +8,8 @@ function toggleNavbarMenu (e) { e.stopPropagation() // trap event document.documentElement.classList.toggle('is-clipped--navbar') - this.classList.toggle('is-active') - var menu = document.getElementById(this.dataset.target) + navbarBurger.setAttribute('aria-expanded', this.classList.toggle('is-active')) + var menu = document.getElementById(this.getAttribute('aria-controls') || this.dataset.target) menu.classList.toggle('is-active') } })() diff --git a/ui/src/js/06-copy-to-clipboard.js b/ui/src/js/06-copy-to-clipboard.js index 03096f159..a4879b4a9 100644 --- a/ui/src/js/06-copy-to-clipboard.js +++ b/ui/src/js/06-copy-to-clipboard.js @@ -4,7 +4,11 @@ var CMD_RX = /^\$ (\S[^\\\n]*(\\\n(?!\$ )[^\\\n]*)*)(?=\n|$)/gm var LINE_CONTINUATION_RX = /( ) *\\\n *|\\\n( ?) */g var TRAILING_SPACE_RX = / +$/gm + var config = (document.getElementById('site-script') || { dataset: {} }).dataset + var supportsCopy = window.navigator.clipboard + var svgAs = config.svgAs + var uiRootPath = (config.uiRootPath == null ? window.uiRootPath : config.uiRootPath) || '.' ;[].slice.call(document.querySelectorAll('.doc pre.highlight, .doc .literalblock pre')).forEach(function (pre) { var code, language, lang, copy, toast, toolbox @@ -28,19 +32,19 @@ } ;(toolbox = document.createElement('div')).className = 'source-toolbox' if (lang) toolbox.appendChild(lang) - if (window.navigator.clipboard) { + if (supportsCopy) { ;(copy = document.createElement('button')).className = 'copy-button' copy.setAttribute('title', 'Copy to clipboard') - if (config.svgAs === 'svg') { + if (svgAs === 'svg') { var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg') svg.setAttribute('class', 'copy-icon') var use = document.createElementNS('http://www.w3.org/2000/svg', 'use') - use.setAttribute('href', window.uiRootPath + '/img/octicons-16.svg#icon-clippy') + use.setAttribute('href', uiRootPath + '/img/octicons-16.svg#icon-clippy') svg.appendChild(use) copy.appendChild(svg) } else { var img = document.createElement('img') - img.src = window.uiRootPath + '/img/octicons-16.svg#view-clippy' + img.src = uiRootPath + '/img/octicons-16.svg#view-clippy' img.alt = 'copy icon' img.className = 'copy-icon' copy.appendChild(img) diff --git a/ui/src/js/vendor/highlight.bundle.js b/ui/src/js/vendor/highlight.bundle.js index af5891478..5cd0a41a5 100644 --- a/ui/src/js/vendor/highlight.bundle.js +++ b/ui/src/js/vendor/highlight.bundle.js @@ -43,6 +43,6 @@ hljs.registerLanguage('xml', xml) hljs.registerLanguage('yaml', yaml) hljs.registerLanguage('toml', ini) -for (const node of document.querySelectorAll('pre code.hljs')) { +for (const node of document.querySelectorAll('pre code.hljs[data-lang]')) { hljs.highlightElement(node) } diff --git a/ui/src/partials/edit-this-page.hbs b/ui/src/partials/edit-this-page.hbs new file mode 100644 index 000000000..27946f49a --- /dev/null +++ b/ui/src/partials/edit-this-page.hbs @@ -0,0 +1,5 @@ +{{#if (and page.fileUri (not env.CI))}} +
Edit this Page
+{{else if (and page.editUrl (or env.FORCE_SHOW_EDIT_PAGE_LINK (not page.origin.private)))}} +
Edit this Page
+{{/if}} diff --git a/ui/src/partials/footer-scripts.hbs b/ui/src/partials/footer-scripts.hbs index 171536393..850887e89 100644 --- a/ui/src/partials/footer-scripts.hbs +++ b/ui/src/partials/footer-scripts.hbs @@ -1,4 +1,4 @@ - + --> {{/with}} + {{!-- + --}} diff --git a/ui/src/partials/header.hbs b/ui/src/partials/header.hbs index e8e839345..56dfb18d7 100644 --- a/ui/src/partials/header.hbs +++ b/ui/src/partials/header.hbs @@ -27,7 +27,7 @@ {{/navbar}}