From ade3c620f641b2e570cded86853721297ecd99a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Mon, 1 Oct 2018 10:31:49 -0500
Subject: [PATCH] Fixes

---
 app/dist/scripts/app.js          |  6 ++++
 app/sass/partials/_glossary.scss | 61 +++++++++++++++++++++++++++++---
 app/views/redirect.js            | 12 +++----
 3 files changed, 68 insertions(+), 11 deletions(-)

diff --git a/app/dist/scripts/app.js b/app/dist/scripts/app.js
index 8873186..889d491 100755
--- a/app/dist/scripts/app.js
+++ b/app/dist/scripts/app.js
@@ -14,6 +14,12 @@ $(function () {
 
 
 
+// Browsers not Firefox do not yet support `text-orientation` and/or `writing-mode`
+if (!/Firefox[/\s](\d+\.\d+)/.test(navigator.userAgent))
+  document.querySelector(".component--glossary-toc-toggle").classList.add("noncompliant-fix");
+
+
+
 if ( // Toggle beta message
   localStorage.getItem("hide lbry alert") &&
   localStorage.getItem("hide lbry alert") === "true" // cannot set Booleans for some reason
diff --git a/app/sass/partials/_glossary.scss b/app/sass/partials/_glossary.scss
index 8ad81b5..13da93b 100644
--- a/app/sass/partials/_glossary.scss
+++ b/app/sass/partials/_glossary.scss
@@ -14,17 +14,47 @@
     }
 
     .component--glossary-toc-toggle {
-      left: calc(250px - 25px);
+      &:not(.noncompliant-fix) {
+        left: calc(250px - 25px);
+      }
+
+      &.noncompliant-fix {
+        @media (min-width: 901px) {
+          left: calc(250px - 65px);
+        }
+
+        @media (max-width: 900px) {
+          left: calc(250px - 45px);
+        }
+      }
     }
   }
 
   &.sidebar-closed {
+    @media (max-width: 1230px) {
+      .page__header {
+        margin-left: 1rem;
+      }
+    }
+
     .component--glossary-toc {
       left: -250px;
     }
 
     .component--glossary-toc-toggle {
-      left: 0;
+      &:not(.noncompliant-fix) {
+        left: 0;
+      }
+
+      &.noncompliant-fix {
+        @media (min-width: 901px) {
+          left: -40px;
+        }
+
+        @media (max-width: 900px) {
+          left: -20px;
+        }
+      }
     }
   }
 }
@@ -50,13 +80,34 @@
 }
 
 .component--glossary-toc-toggle {
-  width: 25px; height: 104px;
-
+  background-color: mix($gray, $white, 30%);
   font-size: 0.7rem;
   position: absolute;
   text-orientation: upright;
   text-transform: uppercase;
-  top: 4rem;
   writing-mode: vertical-rl;
   z-index: 1;
+
+  &:not(.noncompliant-fix) {
+    width: 25px; height: 104px;
+    top: 4rem;
+  }
+
+  &.noncompliant-fix {
+    transform: rotate(90deg);
+
+    @media (min-width: 901px) {
+      width: 105px; height: 25px;
+
+      letter-spacing: 2px;
+      top: 103px;
+    }
+
+    @media (max-width: 900px) {
+      width: 65px; height: 25px;
+
+      letter-spacing: 1px;
+      top: 83px;
+    }
+  }
 }
diff --git a/app/views/redirect.js b/app/views/redirect.js
index 1593f45..3a5992e 100644
--- a/app/views/redirect.js
+++ b/app/views/redirect.js
@@ -140,12 +140,12 @@ function partialFinder(markdownBody) {
 
 function wikiFinder(markdownBody) {
   return markdownBody.replace(/\[\[([\w\s/-]+)\]\]/g, (match, p1) => {
-      const label = p1.trim(),
-        href = encodeURI("/glossary#" + label.replace(/\s+/g, '-'));
+    const label = p1.trim(),
+      href = encodeURI("/glossary#" + label.replace(/\s+/g, "-"));
 
-      return label ?
-        `<a href="${href}" class="link--glossary">${label}</a>` :
-        match.input;
-    }
+    return label ?
+      `<a href="${href}" class="link--glossary">${label}</a>` :
+      match.input;
+  }
   );
 }