From ad742085957f5d102794614fef0dbde4b5bcf931 Mon Sep 17 00:00:00 2001 From: Matthew Holt Date: Wed, 31 May 2023 15:53:49 -0600 Subject: [PATCH] Finish responsive layout; several bug fixes --- new/docs/index.html | 122 ++++++++++++++++++++--------------- new/includes/header.html | 1 - new/resources/css/common.css | 43 +++++++++++- new/resources/css/docs.css | 50 ++++++++++++-- new/resources/js/common.js | 59 +---------------- new/resources/js/docs.js | 77 +++++++++++++++++++++- 6 files changed, 232 insertions(+), 120 deletions(-) diff --git a/new/docs/index.html b/new/docs/index.html index d2a5825..83001b5 100644 --- a/new/docs/index.html +++ b/new/docs/index.html @@ -18,59 +18,77 @@
diff --git a/new/includes/header.html b/new/includes/header.html index 237d165..10ac851 100644 --- a/new/includes/header.html +++ b/new/includes/header.html @@ -1,7 +1,6 @@
-
A ZeroSSL Project diff --git a/new/resources/css/common.css b/new/resources/css/common.css index 2f67b1f..f035a68 100644 --- a/new/resources/css/common.css +++ b/new/resources/css/common.css @@ -4,6 +4,8 @@ --text-color: #222; --header-bg: rgba(118, 179, 194, 0.11); --header-border-color: #ebf0f2; + --topbar-link-color-hover: black; + --topbar-link-bg-hover: rgb(244, 249, 251); --main-nav-link-color: #546c75; --main-nav-link-hover-color: #01324b; --link-color: #0097f2; @@ -27,6 +29,8 @@ --text-color: #cbe2e4; /* #a4c0c2 */ --header-bg: rgba(44, 130, 164, 0.11); --header-border-color: transparent; + --topbar-link-color-hover: white; + --topbar-link-bg-hover: rgb(255 255 255 / .1); --main-nav-link-color: #86a7b1; --main-nav-link-hover-color: #e2e9ec; --link-color: #34a1e4; @@ -168,8 +172,8 @@ header nav>ul { } .topbar a:hover { - background: rgb(0 0 0 / .05); - color: black; + background: var(--topbar-link-bg-hover); + color: var(--topbar-link-color-hover); } .navbar { @@ -479,3 +483,38 @@ header nav ul { padding-right: 20px; } } + +@media (max-width: 950px) { + header nav ul { + justify-content: space-evenly; + } + + .topbar .wrapper { + justify-content: center; + flex-wrap: wrap; + gap: 0; + } + + .logo { + height: 3em; + } + + .navbar { + flex-direction: column; + gap: 0; + padding: 1em 0; + } + + .navbar nav { + margin: .5em 0; + } + + .navbar .actions { + margin: 0 auto; + } + + .navbar nav > ul > li > a { + padding-top: 10px; + padding-bottom: 10px; + } +} \ No newline at end of file diff --git a/new/resources/css/docs.css b/new/resources/css/docs.css index f81a4a5..2c579e9 100644 --- a/new/resources/css/docs.css +++ b/new/resources/css/docs.css @@ -11,6 +11,7 @@ --pagenav-hover-bg: #f4f7f9; --cmd-bg: #333; --tip-color: #5c50bb; + --menu-toggle-bg: #e4f1f2; } .dark { @@ -26,6 +27,7 @@ --pagenav-hover-bg: #18262f; --cmd-bg: black; --tip-color: #a6b2f7; + --menu-toggle-bg: #274d5c; } @@ -89,7 +91,12 @@ main { min-width: 250px; } - +#docs-menu { + background: var(--menu-toggle-bg); + padding: 1em; + cursor: pointer; + display: none; +} @@ -189,7 +196,7 @@ main nav .heading { letter-spacing: 1px; } -main nav .heading:not(:first-child) { +main nav ul:not(:first-child) > .heading { margin-top: 2.5em; } @@ -359,9 +366,9 @@ article h5 { font-size: .6em; border-radius: 10px; padding: .3em .5em; - margin-left: .25em; position: absolute; top: 5px; + left: 0; text-decoration: none; } @@ -579,7 +586,7 @@ td code { #autonav { position: absolute; - visibility: hidden; + display: none; left: 80%; top: 0; background: var(--autonav-bg); @@ -597,8 +604,8 @@ td code { font-size: 14px; } -main nav > ul > li:hover #autonav { - visibility: visible; +main nav ul > li:hover #autonav { + display: block; } #autonav .heading { @@ -655,3 +662,34 @@ main nav > ul > li:hover #autonav { display: none; } } + +@media (max-width: 950px) { + #autonav { + display: none !important; + } + + .docs { + flex-direction: column; + } + + #docs-menu { + display: block; + } + + #docs-menu-container { + height: 0; + overflow: hidden; + transition: height 250ms ease-out; + display: flex; + flex-wrap: wrap; + } + + .docs nav ul { + min-width: 250px; + flex: 1; + } + + main nav ul .heading { + margin-top: 2.5em !important; + } +} \ No newline at end of file diff --git a/new/resources/js/common.js b/new/resources/js/common.js index 6eb0a64..34763d6 100644 --- a/new/resources/js/common.js +++ b/new/resources/js/common.js @@ -53,66 +53,9 @@ ready(function() { // on page load, immediately set the configured theme setTheme(getTheme()); - const autonav = $('#autonav'); - - // when a left-side-nav-link is hovered, show the in-page nav in a popout to the side - on('mouseover', 'main nav li a:not(#autonav a)', async e => { - const response = await fetch("/temporary-markdown-proxy"+e.target.getAttribute('href')); - const markdown = await response.text(); - const tokens = marked.lexer(markdown); - - autonav.replaceChildren(); - - let seenH1 = false; - for (const tkn of tokens) { - if (tkn.type != "heading") continue; - if (tkn.depth == 1) { - seenH1 = true; - } - if (!seenH1 || tkn.depth != 2) continue; - - // this includes HTML entities like < (i.e. not user-facing text), but - // that's how the server-side markdown renderer does it too ¯\_(ツ)_/¯ - const anchor = anchorID(tkn.text); - - const a = document.createElement('a'); - a.classList.add('autonav-link'); - a.innerHTML = marked.parseInline(tkn.text); - a.href = `${e.target.href}#${anchor}`; - autonav.append(a); - } - - if ($('#autonav *')) { - const sections = document.createElement('div') - sections.classList.add('heading'); - sections.innerText = 'Sections'; - autonav.prepend(sections); - e.target.closest('li').append(autonav); - } else { - // no links, so remove it from nav so as not to display an empty box - $('body').append(autonav); - } - - }); - - const spacingMS = 50; - let delay = spacingMS; - $$('main article h2').forEach(elem => { - const a = document.createElement('a'); - a.innerText = elem.innerText; - a.href = `#${elem.id}`; - setTimeout(function() { - $('#pagenav').append(a); - }, delay); - delay += spacingMS; - }); + }); -function anchorID(text) { - return text.trim().toLowerCase().replace(/\s/g, '-').replace(/[^\w-]/g, ''); -} - - // when the system theme changes, apply that to our site if system theme is configured window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches }) => { if (getTheme() == "system") { diff --git a/new/resources/js/docs.js b/new/resources/js/docs.js index 362b0ad..1a9e5e6 100644 --- a/new/resources/js/docs.js +++ b/new/resources/js/docs.js @@ -11,6 +11,19 @@ ready(function() { } currentPageLink?.classList?.add('current'); + // generate in-page nav before adding anchor links to headings + const spacingMS = 50; + let delay = spacingMS; + $$('main article h2').forEach(elem => { + const a = document.createElement('a'); + a.innerText = elem.innerText; + a.href = `#${elem.id}`; + setTimeout(function() { + $('#pagenav').append(a); + }, delay); + delay += spacingMS; + }); + // add anchor links, inspired by https://github.com/bryanbraun/anchorjs $$('article > h2[id], article > h3[id], article > h4[id], article > h5[id], article > h6[id]').forEach(function(elem) { const anchor = document.createElement('a'); @@ -20,4 +33,66 @@ ready(function() { anchor.innerText = '🔗'; elem.append(anchor); }); -}); \ No newline at end of file + + const autonav = $('#autonav'); + + // when a left-side-nav-link is hovered, show the in-page nav in a popout to the side + on('mouseover', 'main nav li a:not(#autonav a)', async e => { + // only show the pop-out nav if not on mobile/narrow screen + if ($('#docs-menu').offsetParent != null) { + return; + } + + const response = await fetch("/temporary-markdown-proxy"+e.target.getAttribute('href')); + const markdown = await response.text(); + const tokens = marked.lexer(markdown); + + // empty the container + autonav.replaceChildren(); + + let seenH1 = false; + for (const tkn of tokens) { + if (tkn.type != "heading") continue; + if (tkn.depth == 1) { + seenH1 = true; + } + if (!seenH1 || tkn.depth != 2) continue; + + // this includes HTML entities like < (i.e. not user-facing text), but + // that's how the server-side markdown renderer does it too ¯\_(ツ)_/¯ + const anchor = anchorID(tkn.text); + + const a = document.createElement('a'); + a.classList.add('autonav-link'); + a.innerHTML = marked.parseInline(tkn.text); + a.href = `${e.target.href}#${anchor}`; + autonav.append(a); + } + + if ($('#autonav *')) { + const sections = document.createElement('div') + sections.classList.add('heading'); + sections.innerText = 'Sections'; + autonav.prepend(sections); + e.target.closest('li').append(autonav); + autonav.style.display = ''; // unhide the container + } else { + // no links; hide the container so we don't see an empty box + autonav.style.display = 'none'; + } + + }); +}); + +on('click', '#docs-menu', e => { + const nav = $('#docs-menu-container'); + if (!nav.offsetHeight) { + nav.style.height = `${nav.scrollHeight}px`; + } else { + nav.style.height = 0; + } +}); + +function anchorID(text) { + return text.trim().toLowerCase().replace(/\s/g, '-').replace(/[^\w-]/g, ''); +} \ No newline at end of file