[UI] Minor fixes to the navbar (#867)

* Fix the incorrect layered icons in the nav menu on low-resolution screens
* Move the wiki and help buttons higher up in the menu
* Prevent the buttons in the mobile menu from breaking into a new line
* Prevent the secondary nav buttons from expanding the menu vertically
* Fix the navbar height to avoid having it shift around
* Rework the mobile menu offsets
* Add back the forum update notification

app/javascript/src/javascripts/navigation.js

@@ -1,8 +1,8 @@
 const Navigation = {};
 
 Navigation.init = function () {
-  const wrapper = $("body");
+  const wrapper = $("html");
-  $("#nav-toggle").on("click", (event) => {
+  $("#nav-toggle, .nav-offset-left, .nav-offset-bottom").on("click", (event) => {
     event.preventDefault();
 
     wrapper.toggleClass("nav-toggled");

app/javascript/src/styles/common/navigation.scss

@@ -2,14 +2,11 @@ nav.navigation {
   display: grid;
   grid-template-areas: "logo logo controls";
   grid-template-columns: min-content auto;
-  grid-template-rows: min-content auto min-content min-content;
+  grid-template-rows: min-content min-content min-content min-content auto;
 
   width: 100%; // otherwise narrow when fixed
   z-index: 20; // otherwise post labels layered above
 
-  pointer-events: none; // allow clicking through offset
-  & > menu { pointer-events: auto; }
-
 
   /* Top bar, always visible */
   .nav-logo {
@@ -20,6 +17,9 @@ nav.navigation {
     a.nav-logo-link {
       display: flex;
 
+      // Height: 3.75rem
+      // - padding  0.25 * 2 = 0.5
+      // - image               3.25
       height: 3.25rem;
       width: 3.25rem;
       margin: 0.25rem;
@@ -43,6 +43,12 @@ nav.navigation {
     padding-right: 0.5em;
     background-color: themed("color-background");
 
+    //   Height: 3.75rem
+    // - wrapper padding  0.875 * 2 = 1.75
+    // - link padding     0.25  * 2 = 0.5
+    // - font size                    1.5
+    padding: 0.875rem;
+
     & > a {
       display: flex;
       gap: 0.25em;
@@ -59,10 +65,16 @@ nav.navigation {
   }
 
   /* Prevent toggled menus from being too wide */
-  .nav-offset {
+  .nav-offset-left {
-    grid-area: offset;
+    grid-area: offleft;
-    pointer-events: none;
     display: none; // flex
+    background: #00000050;
+  }
+
+  .nav-offset-bottom {
+    grid-area: offbott;
+    display: none; // flex
+    background: #00000050;
   }
 
   /* Toggled menus, hidden by default */
@@ -81,6 +93,9 @@ nav.navigation {
         border-bottom: 1px solid themed("color-foreground");
         padding: 0.5em;
 
+        // "Comments" is usually the longest and might wrap
+        white-space: nowrap;
+
         i {
           width: 1.5rem;
           color: themed("color-link-active");
@@ -89,6 +104,22 @@ nav.navigation {
       }
 
       &.current a { background-color: themed("color-foreground"); }
+      &.forum-updated {
+        position: relative;
+
+        &::after {
+          content: "";
+          width: 6px;
+          height: 6px;
+          border-radius: 3px;
+
+          background: var(--palette-text-red);
+
+          position: absolute;
+          right: 0.2em;
+          top: 1em;
+        }
+      }
     }
   }
 
@@ -99,6 +130,11 @@ nav.navigation {
 
     background-color: themed("color-foreground");
     font-size: 1.35em;
+    height: 440px;
+
+    // Prevent the tools / help buttons from being pushed
+    // way too low on pages with a lot of secondary links
+    overflow: scroll;
 
     li {
       padding: 0;
@@ -116,6 +152,11 @@ nav.navigation {
       form input[type="text"] {
         width: 100%;
         box-sizing: border-box;
+
+        // Reduced font size to make the search
+        // box less claustrophobic
+        font-size: 1em;
+        padding: 0.25em 0.5em;
       }
     }
   }
@@ -195,6 +236,13 @@ nav.navigation {
           margin: -0.5em 0;
         }
       }
+
+      // Hack to put the wiki/help links before discord/sstar on mobile
+      // but still have "more" at the end on desktop
+      &#nav-more {
+        grid-row: 1;
+        grid-column: 3;
+      }
     }
   }
 }
@@ -208,26 +256,30 @@ body[data-th-sheader="true"] nav.navigation {
 
 
 // Mobile toggle
-body.nav-toggled {
+html.nav-toggled {
-  padding-top: 4rem;
+
+  height: 100%;
+  overflow: hidden;
+
+  body { padding-top: 3.75rem; }
 
   nav.navigation {
     grid-template-areas:
       "logo    logo    controls" 
-      "offset  primary secondary "
+      "offleft primary secondary "
-      "offset  tools   tools     "
+      "offleft tools   tools     "
-      "offset  help    help      ";
+      "offleft help    help      "
+      "offbott offbott offbott   ";
     grid-template-columns: auto minmax(auto, 180px) minmax(auto, 180px);
     position: fixed;
     top: 0;
     height: 100vh;
-    max-height: 800px;
     max-width: 100vw; // prevent bug when page overflows viewport
 
     // Allow scrolling when the menu is too long
     overflow-y: scroll;
 
-    .nav-primary, .nav-secondary, .nav-offset {
+    .nav-primary, .nav-secondary, .nav-offset-left, .nav-offset-bottom {
       display: flex;
     }
     .nav-tools, .nav-help {
@@ -241,7 +293,7 @@ body.nav-toggled {
 
 
 // Desktop
-nav.navigation, body.nav-toggled nav.navigation {
+nav.navigation, html.nav-toggled nav.navigation {
   @include window-larger-than(800px) {
     grid-template-areas:
       "logo primary   help      tools    "
@@ -261,7 +313,7 @@ nav.navigation, body.nav-toggled nav.navigation {
       a.nav-logo-link { margin: 0.25rem 0.5rem 0 0; }
     }
 
-    .nav-offset, .nav-controls { display: none; }
+    .nav-offset-left, .nav-offset-bottom, .nav-controls { display: none; }
 
     .nav-primary {
       display: flex;
@@ -281,12 +333,17 @@ nav.navigation, body.nav-toggled nav.navigation {
           padding: 0 0.75em;
           i { display: none; }
         }
+
+        &.forum-updated::after {
+          top: 0.2em;
+        }
       }
     }
 
     .nav-secondary {
       display: flex;
       flex-flow: row;
+      height: unset;
 
       padding: 0 0.25em;
       font-size: 1.05em;
@@ -348,6 +405,12 @@ nav.navigation, body.nav-toggled nav.navigation {
     }
 
     .nav-tools {
+
+      // Otherwise help gets layered above it
+      // When the viewport is narrow (but not mobile)
+      z-index: 1;
+      background: var(--color-background);
+
       li {
         a {
           i { color: themed("color-link"); }
@@ -377,5 +440,8 @@ body.c-static.a-home {
     nav.navigation, menu.nav-logo, menu.nav-secondary {
       background: unset;
     }
+    menu.nav-tools {
+      background: var(--bg-color);
+    }
   }
 }

app/views/layouts/_nav.html.erb

@@ -7,7 +7,8 @@
     <%= render "layouts/main_links" %>
   </menu>
 
-  <menu class="nav-offset"></menu>
+  <menu class="nav-offset-left"></menu>
+  <menu class="nav-offset-bottom"></menu>
 
   <menu class="nav-secondary <%= "empty" unless content_for(:secondary_links) %>">
     <%= yield :secondary_links %>
@@ -41,12 +42,12 @@
   </menu>
 
   <menu class="nav-help <%= CurrentUser.is_anonymous? ? "anonymous" : "" %>">
+    <%= nav_link_to("Wiki", wiki_pages_path(title: "help:home"), class: "nav-help-wiki") %>
+    <%= nav_link_to("Help", help_pages_path, class: "nav-help-help") %>
     <% if !CurrentUser.is_anonymous? %>
       <%= custom_image_nav_link_to("Discord", "discord.com.png", discord_get_path, class: "nav-help-discord") %>
     <% end %>
-    <%= custom_image_nav_link_to("Subscribestar", "subscribestar.adult.png", subscribestar_path, class: "nav-help-subscribestar") %>
+    <%= custom_image_nav_link_to("SubscribeStar", "subscribestar.adult.png", subscribestar_path, class: "nav-help-subscribestar") %>
-    <%= nav_link_to("Wiki", wiki_pages_path(title: "help:home"), class: "nav-help-wiki") %>
-    <%= nav_link_to("Help", help_pages_path, class: "nav-help-help") %>
     <%= nav_link_to("More", site_map_path, class: "nav-help-map") %>
   </menu>
 

app/views/static/subscribestar.html.erb

@@ -8,5 +8,5 @@
 </div>
 
 <% content_for(:page_title) do %>
-  Subscribestar
+  SubscribeStar
 <% end %>