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",