Add show/hide nav button and other styling tweaks

Author: cwmonkey

_includes/greasemonkey/sa-mobile-friendly/sa-mobile-friendly.css

@@ -8,25 +8,75 @@
   box-sizing: border-box;
 }
 
+/* Nav button from js */
+
+.sa-mobile-friendly-menu-button {
+  text-indent: 100%;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 32px;
+  width: 32px;
+  box-shadow: none;
+  border-top: none;
+  border-right: none;
+
+  &:before {
+    text-indent: 0;
+    display: block;
+    content: "☰";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    line-height: 2.1;
+  }
+}
+
+/* Mobile friendly styling */
+
 * {
-  max-width:100%;
+  max-width: 100%;
+}
+
+body {
+  background-image: none !important;
+
+  &:not(.sa-mobile-friendly-menu-button-clicked) {
+    #nav_purchase,
+    #navigation,
+    #threadiklist,
+    .bottom_forms,
+    .threadrate,
+    .navigation {
+      display: none !important;
+    }
+  }
+
+  &.sa-mobile-friendly-menu-button-clicked {
+    #container {
+      padding-top: 32px;
+    }
+
+    .sa-mobile-friendly-menu-button:before {
+      content: "✖";
+    }
+  }
 }
 
 #container {
   padding: 0 0 5px 0;
-}
 
-#nav_purchase,
-#navigation,
-#threadiklist,
-.bottom_forms,
-.threadrate,
-.navigation {
-  display: none !important;
+  .breadcrumbs:first-child .bclast {
+    padding-right: 37px;
+  }
 }
 
 #nav_title {
-  padding: 0 5px;
+  padding: 5px 37px 5px 5px;
+  line-height: 32px;
 
   div {
     display: inline-block;
@@ -56,6 +106,10 @@ div.pages span.disabled, .letternav li a,
     white-space: normal !important;
     line-height: 1.5;
   }
+
+  .up span {
+    display: none !important;
+  }
 
   .index {
     display: none !important;
@@ -166,13 +220,14 @@ div.pages span.disabled, .letternav li a,
         }
 
         .postdate {
-          background: none !important;
+          background-image: none !important;
           border: none !important;
           padding-right: 10px;
+          flex-grow: 1;
         }
 
         .postlinks {
-          background: none !important;
+          background-image: none !important;
           flex-grow: 1;
           text-align: right;
         }
@@ -209,7 +264,8 @@ div.pages span.disabled, .letternav li a,
       }
 
       .registered,
-      .special_title {
+      .special_title,
+      .special_title_v2 {
         display: none;
       }
 

_includes/greasemonkey/sa-mobile-friendly/version

@@ -1 +1 @@
-0.1.5
+0.1.6

greasemonkey/sa-mobile-friendly/index.html

@@ -12,6 +12,14 @@ <h2><a href="#description">Usage and description</a></h2>
 	<h3>Versions</h3>
 
 	<ul>
+		<li>
+			0.1.6 - 2025-10-27
+			<ul>
+				<li>Hide special title v2</li>
+				<li>Fix date/edit/quote background color</li>
+				<li>Adding show/hide nav button</li>
+			</ul>
+		</li>
 		<li>
 			0.1.5 - 2025-10-26
 			<ul>

greasemonkey/sa-mobile-friendly/sa-mobile-friendly.user.js

@@ -5,11 +5,13 @@
 (function() {
   'use strict';
 
+  // Add mobile stylesheet
   const style = document.createElement("STYLE");
   style.textContent = `{% include greasemonkey/sa-mobile-friendly/sa-mobile-friendly.css %}`;
 
   document.documentElement.append(style);
 
+  // Add mobile meta tag
   function addMeta() {
     const head = document.querySelector('head');
     const meta = document.createElement('meta');
@@ -29,4 +31,36 @@
   }
 
   tryAddMeta();
+
+  // Add mobile menu button
+  let $container = null;
+  const bodyOpenClass = 'sa-mobile-friendly-menu-button-clicked';
+
+  function addMobileButton() {
+    const $button = document.createElement('BUTTON');
+    $button.className = 'sa-mobile-friendly-menu-button';
+    $button.textContent = 'Show Navigation';
+
+    $button.addEventListener('click', () => {
+      if (document.body.classList.contains(bodyOpenClass)) {
+        document.body.classList.remove(bodyOpenClass);
+      } else {
+        document.body.classList.add(bodyOpenClass);
+      }
+    });
+
+    $container.prepend($button);
+  }
+
+  function tryAddMobileButton() {
+    $container = document.querySelector('#container');
+
+    if ($container) {
+      addMobileButton();
+    } else {
+      setTimeout(tryAddMeta, 100);
+    }
+  }
+
+  tryAddMobileButton();
 })();