diff --git a/app/dist/scripts/api.js b/app/dist/scripts/api.js index 5807a0a..bd279d0 100644 --- a/app/dist/scripts/api.js +++ b/app/dist/scripts/api.js @@ -32,6 +32,22 @@ document.querySelector(".api-toc__search-clear").addEventListener("click", () => reinitJets(); }); +// Handle menu toggle for mobile +if (document.getElementById("toggle-menu")) { + document.getElementById("toggle-menu").addEventListener("click", () => { + document.querySelector("body").classList.toggle("disable-scrolling"); + document.querySelector(".api-toc").classList.toggle("active"); + }); + + // Handle menu toggle when clicking on commands + document.querySelectorAll(".api-toc__command a").forEach(command => { + command.addEventListener("click", () => { + document.querySelector("body").classList.remove("disable-scrolling"); + document.querySelector(".api-toc").classList.remove("active"); + }); + }); +} + // Code toggles @@ -66,6 +82,6 @@ function reinitJets() { contentTag, searchTag: "#input-search" }); - + document.getElementById("input-search").focus(); } diff --git a/app/dist/scripts/app.js b/app/dist/scripts/app.js index 50a96f5..6768844 100755 --- a/app/dist/scripts/app.js +++ b/app/dist/scripts/app.js @@ -1,4 +1,4 @@ -"use strict"; /* global document, history, location, navigator, send, window */ +"use strict"; /* global document, history, location, send, window */ @@ -16,11 +16,26 @@ document.addEventListener("DOMContentLoaded", () => { -// Browsers not Firefox do not yet support `text-orientation` and/or `writing-mode` +// Menu toggle for Glossary if ( - !/Firefox[/\s](\d+\.\d+)/.test(navigator.userAgent) && - document.querySelector(".component--glossary-toc-toggle") -) document.querySelector(".component--glossary-toc-toggle").classList.add("noncompliant-fix"); + window.innerWidth <= 800 && + window.location.pathname.split("/").pop() === "glossary" +) { + document.querySelector(".page__header__title").insertAdjacentHTML("afterbegin", ""); + + document.getElementById("toggle-menu").addEventListener("click", () => { + document.querySelector(".component--glossary-toc").classList.toggle("active"); + document.querySelector("body").classList.toggle("disable-scrolling"); + }); + + // Handle menu toggle when clicking on commands + document.querySelectorAll(".component--glossary-toc a").forEach(keyword => { + keyword.addEventListener("click", () => { + document.querySelector("body").classList.remove("disable-scrolling"); + document.querySelector(".component--glossary-toc").classList.remove("active"); + }); + }); +} @@ -37,7 +52,7 @@ document.querySelectorAll("a[href^='#']").forEach(anchor => { let elementOffset; if (document.getElementById(element)) { - elementOffset = document.getElementById(element).offsetTop - 74; + elementOffset = document.getElementById(element).offsetTop - 150; window.scroll({ top: elementOffset, behavior: "smooth" }); history.pushState({}, "", `#${element}`); // Add hash to URL bar } @@ -81,7 +96,7 @@ function scrollToElementOnLoad() { let elementOffset; if (document.getElementById(element)) { - elementOffset = document.getElementById(element).offsetTop - 74; + elementOffset = document.getElementById(element).offsetTop - 150; window.scroll({ top: elementOffset, behavior: "smooth" }); } }, 150); diff --git a/app/sass/_layout.scss b/app/sass/_layout.scss index dfa1454..22b787a 100644 --- a/app/sass/_layout.scss +++ b/app/sass/_layout.scss @@ -30,6 +30,14 @@ main { padding-top: 4rem; } +.disable-scrolling { + top: 0; right: 0; + bottom: 0; left: 0; + + overflow: hidden; + position: fixed; +} + .inner-wrap { max-width: 1200px; margin-right: auto; @@ -85,7 +93,7 @@ sub { } frame-viewer { - width: 100%; height: calc(100vh - 4rem); // TODO: Update when new navigation is merged + width: 100%; height: calc(100vh - 4rem); display: block; iframe { diff --git a/app/sass/pages/_api.scss b/app/sass/pages/_api.scss index 473bfcd..e2de786 100644 --- a/app/sass/pages/_api.scss +++ b/app/sass/pages/_api.scss @@ -24,7 +24,7 @@ .api-toc { width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall - bottom: 0; left: 0; + bottom: 0; background-color: $lbry-white; border-right: 1px solid $lbry-gray-1; @@ -33,8 +33,25 @@ position: fixed; z-index: 3; + @media (min-width: 801px) { + left: 0; + } + @media (max-width: 800px) { - display: none; + height: calc(100% - 4rem); + top: 4rem; + padding-top: 3.5rem; + transition: left 0.2s; + + -webkit-overflow-scrolling: touch; + + &:not(.active) { + left: -200px; + } + + &.active { + left: 0; + } } } @@ -259,6 +276,7 @@ .right { width: 70%; float: right; + word-wrap: break-word; } &::after { @@ -302,6 +320,12 @@ font-size: 0.8rem; transition: background-color 0.2s; + &.menu { + @media (min-width: 801px) { + display: none; + } + } + &:not(:last-of-type) { margin-right: 0.5rem; } diff --git a/app/sass/pages/_page.scss b/app/sass/pages/_page.scss index f1e79c0..b91a68c 100644 --- a/app/sass/pages/_page.scss +++ b/app/sass/pages/_page.scss @@ -13,6 +13,7 @@ .page__header { @include center; width: 100%; + top: 4rem; background-color: $lbry-black; background-position: center; @@ -21,7 +22,11 @@ color: $lbry-white; padding-right: env(safe-area-inset-right); padding-left: env(safe-area-inset-left); - position: relative; + position: sticky; + z-index: 2; + + // GOOD OL' SAFARI + position: -webkit-sticky; // sass-lint:disable-line no-duplicate-properties } .page__header__title { @@ -39,6 +44,29 @@ padding-top: 1rem; padding-bottom: 1rem; } + + @media (min-width: 801px) { + button { + display: none; + } + } + + @media (max-width: 800px) { + button { + margin-right: 1rem; padding-right: 1rem; + position: relative; + + &::after { + width: 1px; height: 100%; + top: 0; right: 0; + + background-color: $lbry-white; + content: ""; + opacity: 0.3; + position: absolute; + } + } + } } .page__content { diff --git a/app/sass/partials/_glossary.scss b/app/sass/partials/_glossary.scss index 911191c..07b4411 100644 --- a/app/sass/partials/_glossary.scss +++ b/app/sass/partials/_glossary.scss @@ -20,7 +20,7 @@ .component--glossary-toc { width: 200px; height: calc(100vh - 4rem); - bottom: 0; left: 0; + bottom: 0; background-color: $lbry-white; border-right: 1px solid $lbry-gray-1; @@ -28,15 +28,37 @@ line-height: 1.33; overflow-x: hidden; overflow-y: auto; - padding-top: 0.25rem !important; padding-left: 0 !important; position: fixed; z-index: 1; - @media (max-width: 800px) { - display: none; + @media (min-width: 801px) { + left: 0; + padding-top: 0.25rem !important; } + @media (max-width: 800px) { + height: 100%; + top: 0; + padding-top: 9rem !important; + // padding-bottom: 4rem; + transition: left 0.2s; + + -webkit-overflow-scrolling: touch; + + &:not(.active) { + left: -200px; + } + + &.active { + left: 0; + } + } + + // @media (max-width: 800px) { + // display: none; + // } + li { list-style-type: none !important; diff --git a/app/views/api.js b/app/views/api.js index db223b3..9d48048 100644 --- a/app/views/api.js +++ b/app/views/api.js @@ -309,6 +309,7 @@ function renderReturns(args) { function renderToggles(onSdkPage) { return [ + "", !onSdkPage ? "" : "", "", onSdkPage ? "" : "", diff --git a/package.json b/package.json index 03d7da1..e77f443 100755 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "dependencies": { "@babel/polyfill": "^7.4.4", "@inc/fastify-ws": "^1.1.0", - "@octokit/rest": "^16.25.3", + "@octokit/rest": "^16.25.4", "@slack/client": "^5.0.1", "async": "^2.6.2", "async-es": "^2.6.2", @@ -29,7 +29,7 @@ "dedent": "^0.7.0", "dotenv": "^8.0.0", "fastify": "~2.3.0", - "fastify-compress": "^0.9.0", + "fastify-compress": "^0.10.0", "fastify-helmet": "^3.0.0", "fastify-static": "^2.4.0", "front-matter": "^3.0.2", @@ -67,7 +67,7 @@ "@lbry/color": "^1.1.1", "@lbry/components": "^2.7.1", "eslint": "^5.16.0", - "husky": "^2.2.0", + "husky": "^2.3.0", "nodemon": "^1.19.0", "npm-run-all": "^4.1.5", "pino-pretty": "^3.0.0",