fni-docs-theme 0.6.3 → 0.6.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 52ad30bc234f2c88e25cbf28ecfed428e59592fb5eb72032f2177f3c0a2b3a75
-  data.tar.gz: 4b06e9324cd90e9036f58dffbb301f6d20ca1939e68327aabcf9d348d76110b1
+  metadata.gz: 5da153deee1782c2f6ea5f63ef757b28dfc09efa7e0f4e6f8dfb72915a838d21
+  data.tar.gz: 94097ecbd14efbfdb0f6aa2f158ab69a7f5fb1950ba4b98c8397d424d1d32895
 SHA512:
-  metadata.gz: 999b02316e61eff711b6dcddd718e72bdddef140fe9b07ad6ef29f7a8e80525a709635959b9e18b597a95a440bd305a091b26c8ff6e19a81b1f6c8590700ef91
-  data.tar.gz: 2ee1ac77ba641acd33d2faca54be3585d9daeace984e8234c444536433bf3d6a8f04026193ddb7a55002f4580e6ec1fc1e9aa4ccdb083057e7c1b5e41a6e8542
+  metadata.gz: 968ac6ee68c5b97311e7632abb2802194cdc879be641e22f8833a115328237e6ff5b3c1b7c542cc2034d9f0b7114c012a51de54891faef89761d1248209adf50
+  data.tar.gz: af9906fdec4ae17b3e12de632541a6c5082929631ca825d406adc05b9322e35fbdc1fcf558d29eaacc18ab575b90c80941b8ae08aaacbba3fed7ce4e7c5988c1

data/_layouts/default.html

@@ -49,6 +49,11 @@ layout: table_wrappers
   <div class="side-bar">
     <div class="site-header">
       <a href="{{ '/' | absolute_url }}" class="site-title lh-tight">{% include_cached title.html %}</a>
+      {% if site.search_enabled != false %}
+        <a href="#" id="mobile-search-button" class="site-button mobile-search-button">
+          <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
+        </a>
+      {% endif %}
       <a href="#" id="menu-button" class="site-button">
         <svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
       </a>

data/_sass/layout.scss

@@ -138,8 +138,87 @@
   align-items: center;
 }
 
+// COMPLETE MOBILE BUTTON OVERHAUL - Force visual separation
+@media (max-width: 50rem) {
+  .site-header {
+    position: relative !important;
+    display: flex !important;
+    min-height: 60px !important;
+    padding-right: 0 !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+  }
+
+  .mobile-search-button {
+    position: absolute !important;
+    top: 50% !important;
+    right: 60px !important; // Closer to hamburger (was 80px)
+    z-index: 999 !important;
+    display: flex !important;
+    width: 44px !important; // Slightly smaller
+    height: 44px !important;
+    margin: 0 !important;
+    align-items: center !important;
+    justify-content: center !important;
+    transform: translateY(-50%) !important;
+  }
+
+  // Hide search button when search is active to prevent duplicate icons
+  .search-active .mobile-search-button {
+    display: none !important;
+  }
+
+  .site-button[id="menu-button"] {
+    position: absolute !important;
+    top: 50% !important;
+    right: 8px !important;
+    z-index: 998 !important;
+    display: flex !important;
+    width: 44px !important; // Match search button size
+    height: 44px !important;
+    margin: 0 !important;
+    align-items: center !important;
+    justify-content: center !important;
+    transform: translateY(-50%) !important;
+  }
+
+  // Hide menu button when nav is open to prevent overlap with close button
+  .nav-open .site-button[id="menu-button"] {
+    display: none !important;
+  }
+
+  // Close button positioning - ensure it doesn't overlap
+  .site-button[id="close-button"] {
+    position: absolute !important;
+    top: 50% !important;
+    right: 8px !important;
+    z-index: 1000 !important;
+    display: none !important; // Hidden by default
+    width: 44px !important;
+    height: 44px !important;
+    margin: 0 !important;
+    align-items: center !important;
+    justify-content: center !important;
+    transform: translateY(-50%) !important;
+  }
+
+  // Show close button only when nav is open
+  .nav-open .site-button[id="close-button"] {
+    display: flex !important;
+  }
+}
+
+// Close button positioning
+.site-button[id="close-button"] {
+  z-index: 200 !important; // Highest for close button
+  order: 3;
+  flex-shrink: 0 !important; // Prevent shrinking
+}
+
+// This section is now handled by the media query above
+
 @include mq(md) {
-  .site-header .site-button {
+  .site-header .site-button:not(.mobile-search-button) {
     display: none;
   }
 }

data/assets/js/just-the-docs.js

@@ -53,6 +53,16 @@ function initNav() {
       siteNav.classList.add('nav-open');
       mainHeader.classList.add('nav-open');
       document.body.classList.add('nav-open');
+
+      // Clear search state when nav opens to prevent overlay conflicts
+      {%- if site.search_enabled != false %}
+      if (searchInput && document.body.classList.contains('search-active')) {
+        searchInput.value = '';
+        document.body.classList.remove('search-active');
+        document.documentElement.classList.remove('search-active');
+        mainHeader.classList.remove('nav-open');
+      }
+      {%- endif %}
     } else {
       siteNav.classList.remove('nav-open');
       mainHeader.classList.remove('nav-open');
@@ -80,16 +90,76 @@ function initNav() {
     }
   });
 
-  {%- if site.search_enabled != false and site.search.button %}
+  {%- if site.search_enabled != false %}
   const searchInput = document.getElementById('search-input');
   const searchButton = document.getElementById('search-button');
+  const mobileSearchButton = document.getElementById('mobile-search-button');
 
-  jtd.addEvent(searchButton, 'click', function(e){
-    e.preventDefault();
+  {%- if site.search.button %}
+  if (searchButton) {
+    jtd.addEvent(searchButton, 'click', function(e){
+      e.preventDefault();
 
-    mainHeader.classList.add('nav-open');
-    searchInput.focus();
-  });
+      mainHeader.classList.add('nav-open');
+      if (searchInput) {
+        searchInput.focus();
+      }
+    });
+  }
+  {%- endif %}
+
+  // Mobile search button functionality
+  if (mobileSearchButton) {
+    jtd.addEvent(mobileSearchButton, 'click', function(e){
+      e.preventDefault();
+
+      if (searchInput) {
+        mainHeader.classList.add('nav-open');
+        document.body.classList.add('search-active');
+        document.documentElement.classList.add('search-active');
+        searchInput.focus();
+      }
+    });
+  }
+
+  // Handle search input focus/blur to manage state
+  if (searchInput) {
+    jtd.addEvent(searchInput, 'focus', function(e){
+      document.body.classList.add('search-active');
+      document.documentElement.classList.add('search-active');
+    });
+
+    jtd.addEvent(searchInput, 'blur', function(e){
+      // Delay removal to allow for click events
+      setTimeout(function() {
+        if (!searchInput.value.trim()) {
+          document.body.classList.remove('search-active');
+          document.documentElement.classList.remove('search-active');
+          mainHeader.classList.remove('nav-open');
+        }
+      }, 150);
+    });
+
+    // Function to clear search state when closing nav
+    function clearSearchStateIfEmpty() {
+      if (!searchInput.value.trim()) {
+        document.body.classList.remove('search-active');
+        document.documentElement.classList.remove('search-active');
+      }
+    }
+
+    // Add search state clearing to nav close events
+    if (closeButton) {
+      jtd.addEvent(closeButton, 'click', function(e){
+        setTimeout(clearSearchStateIfEmpty, 50);
+      });
+    }
+
+    // Also clear search state when clicking overlay to close nav
+    jtd.addEvent(mobileOverlay, 'click', function(e){
+      setTimeout(clearSearchStateIfEmpty, 50);
+    });
+  }
   {%- endif %}
 }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fni-docs-theme
 version: !ruby/object:Gem::Version
-  version: 0.6.3
+  version: 0.6.4
 platform: ruby
 authors:
 - Patrick Marsceill