Refactor search bar

* Use fewer selectors and classes * Unify scrolling and focus handling * Fix gutter on small screens
elixir-lang · Mar 12, 2024 · a718598 · a718598
1 parent ac40c44
commit a718598
Show file tree

Hide file tree

Showing 13 changed files with 126 additions and 208 deletions.
diff --git a/assets/css/layout.css b/assets/css/layout.css
@@ -41,6 +41,7 @@ body {
 }
 
 .sidebar-button {
+  padding: 26px 12px 18px 19px;
   position: fixed;
   z-index: 200;
   top: 0;
@@ -61,18 +62,15 @@ body {
 
 .content-inner {
   max-width: var(--content-width);
+  min-height: 100%;
   margin: 0 auto;
-  padding: 3px var(--content-gutter);
+  padding: 0 var(--content-gutter) 10px;
 }
 
 .content-inner:focus {
   outline: none;
 }
 
-.content-outer {
-  min-height: 100%;
-}
-
 body:is(.sidebar-opening, .sidebar-opened) .sidebar-button {
   transform: translateX(calc(var(--sidebarWidth) - 100%));
 }
@@ -122,50 +120,14 @@ body.sidebar-closed .content {
   left: 0;
 }
 
-@media screen and (hover: hover) and (max-width: 768px) {
-  body.sidebar-opening .content {
-    left: 0;
-    width: 100%;
-  }
-
-  body.sidebar-closed .sidebar-button {
-    position: absolute;
-    top: 14px;
-  }
-
-  body.sidebar-closed .sidebar-button.fixed {
-    position: fixed;
-    padding: 16px 12px 18px 19px;
-  }
-
-  body.sidebar-closed .sidebar-button.fixed-top {
-    position: fixed;
-  }
-}
-
-@media screen and (hover: none) {
+@media screen and (max-width: 768px) {
   .content,
   body.sidebar-opening .content {
     left: 0;
     width: 100%;
   }
 
-  .content-inner {
-    padding-top: 60px;
-    padding-bottom: 30px;
-    overflow-x: auto;
-  }
-
   body.sidebar-closed .sidebar-button {
     position: absolute;
-    top: 14px;
-  }
-
-  .sm-fixed {
-    position: fixed !important;
-  }
-
-  .sm-hidden {
-    top: -70px !important;
   }
 }
diff --git a/assets/css/print.css b/assets/css/print.css
@@ -8,7 +8,7 @@
     display: none;
   }
 
-  .top-search, .background-layer {
+  .top-search {
     display: none;
   }
 
@@ -27,6 +27,10 @@
     display: none;
   }
 
+  .content-inner {
+    padding: 0;
+  }
+
   .content-inner .section-heading a.hover-link {
     display: none;
   }

diff --git a/assets/css/search-bar.css b/assets/css/search-bar.css
@@ -1,22 +1,10 @@
 .top-search {
-  position: relative;
-  top: 0;
-  z-index: 101;
-  margin-top: 10px;
   background-color: var(--background);
-  padding: 0.8rem 0;
-}
-
-@media (max-width: 480px) or ((min-width: 481px) and (max-width: 768px)) {
-  .top-search {
-    padding: 0.8rem 1.8rem 0.8rem 3rem;
-    margin-left: -1rem;
-    margin-right: -1rem;
-  }
-}
-
-.top-search.sticky {
-  position: sticky;
+  top: 0;
+  z-index: 99;
+  position: relative;
+  width: 100%;
+  padding: 10px 0;
 }
 
 .search-settings {
@@ -130,27 +118,15 @@
   color: var(--iconAction);
 }
 
-@media (hover: none) {
+@media screen and (max-width: 768px) {
+  /* Code and blockquotes take the full gutter on small screens,
+     so we need the search to the same */
   .top-search {
-    margin-top: 0;
-    position: absolute;
-    top: 13px;
-    height: 57px;
-    left: 56px;
-    right: 20px;
-    transition: top var(--sidebarTransitionDuration) ease-in-out;
-    z-index: 99;
-  }
-
-  .background-layer {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 70px;
-    background-color: var(--background);
-    transition: all var(--sidebarTransitionDuration) ease-in-out;
-    z-index: 98;
+    padding-left: calc(var(--content-gutter) + 36px);
+    padding-right: var(--content-gutter);
+    margin-left: calc(-1 * var(--content-gutter));
+    margin-right: calc(-1 * var(--content-gutter));
+    width: calc(2 * var(--content-gutter) + 100%);
   }
 
   .search-settings {
@@ -163,3 +139,23 @@ body.search-focused .search-bar .search-close-button {
   transform: scaleY(1);
   transition: transform 0.15s ease-out 0.15s;
 }
+
+@media screen and (hover: hover) {
+  body.search-focused .top-search {
+    position: sticky !important;
+  }
+
+  body.search-focused.sidebar-closed .sidebar-button {
+    position: fixed !important;
+  }
+}
+
+@media screen and (hover: none) {
+  body.scroll-sticky .top-search {
+    position: sticky !important;
+  }
+
+  body.scroll-sticky.sidebar-closed .sidebar-button {
+    position: fixed !important;
+  }
+}
diff --git a/assets/css/sidebar.css b/assets/css/sidebar.css
@@ -398,7 +398,6 @@
   cursor: pointer;
   background-color: transparent;
   border: none;
-  padding: 28px 12px 18px 19px;
   font-size: var(--sidebarFontSize);
 }
 

diff --git a/assets/js/helpers.js b/assets/js/helpers.js
@@ -168,14 +168,3 @@ export function getProjectNameAndVersion () {
 export function isMacOS () {
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
 }
-
-/**
- * Return `true` if the client's device is touch-enabled.
- *
- * @return {Boolean}
- */
-export function isTouchDevice () {
-  return (('ontouchstart' in window) ||
-    (navigator.maxTouchPoints > 0) ||
-    (navigator.msMaxTouchPoints > 0))
-}
diff --git a/assets/js/search-bar.js b/assets/js/search-bar.js
@@ -7,11 +7,10 @@ import {
   AUTOCOMPLETE_CONTAINER_SELECTOR,
   AUTOCOMPLETE_SUGGESTION_SELECTOR
 } from './autocomplete/autocomplete-list'
-import { isMacOS, isTouchDevice, qs } from './helpers'
+import { isMacOS, qs } from './helpers'
 
 const SEARCH_INPUT_SELECTOR = 'form.search-bar input'
 const SEARCH_CLOSE_BUTTON_SELECTOR = 'form.search-bar .search-close-button'
-const TOP_SEARCH_SELECTOR = '.top-search'
 
 /**
  * Initializes the sidebar search box.
@@ -35,16 +34,8 @@ export function setSearchInputValue (value) {
  */
 export function focusSearchInput () {
   const searchInput = qs(SEARCH_INPUT_SELECTOR)
-
-  if (!isTouchDevice()) {
-    qs(TOP_SEARCH_SELECTOR).classList.add('sticky')
-    if (window.scrollY === 0) {
-      qs('.sidebar-button').classList.add('fixed-top')
-    } else {
-      qs('.sidebar-button').classList.add('fixed')
-    }
-  }
-
+  // We also add the class before so we don't move the screen position
+  document.body.classList.add('search-focused')
   searchInput.focus()
 }
 
@@ -162,47 +153,27 @@ function hideAutocomplete () {
 }
 
 let lastScrollTop = window.scrollY
-const topSearch = document.querySelector(TOP_SEARCH_SELECTOR)
-const sidebarMenu = document.getElementById('sidebar-menu')
-const backgroundLayer = document.querySelector('.background-layer')
 const scrollThreshold = 70 // Set a threshold for scroll, adjust as needed
-const searchInput = qs(SEARCH_INPUT_SELECTOR)
-const sidebarButton = qs('.sidebar-button')
 
 window.addEventListener('scroll', function () {
   const currentScroll = window.scrollY
 
-  if (isTouchDevice()) {
-    // Add 'fixed' class when not at the top
-    if (currentScroll > scrollThreshold * 2) {
-      topSearch.classList.add('sm-fixed')
-      sidebarMenu.classList.add('sm-fixed')
-      backgroundLayer.classList.add('sm-fixed')
-    }
+  // Add 'scroll-sticky' class when not at the top
+  if (currentScroll > scrollThreshold * 2) {
+    document.body.classList.add('scroll-sticky')
+  }
 
-    if (currentScroll === 0) {
-      // Remove 'fixed' class when at the top
-      topSearch.classList.remove('sm-fixed')
-      sidebarMenu.classList.remove('sm-fixed')
-      backgroundLayer.classList.remove('sm-fixed')
-    }
+  // Remove when at the top
+  if (currentScroll === 0) {
+    document.body.classList.remove('scroll-sticky')
+  }
 
-    if (currentScroll > lastScrollTop && currentScroll > scrollThreshold) {
-      // Scrolling down and past the threshold
-      topSearch.classList.add('sm-hidden')
-      sidebarMenu.classList.add('sm-hidden')
-      backgroundLayer.classList.add('sm-hidden')
-    } else {
-      // Scrolling up or at the top of the page
-      topSearch.classList.remove('sm-hidden')
-      sidebarMenu.classList.remove('sm-hidden')
-      backgroundLayer.classList.remove('sm-hidden')
-    }
-  } else if (currentScroll !== lastScrollTop) {
-    topSearch.classList.remove('sticky')
-    sidebarButton.classList.remove('fixed')
-    sidebarButton.classList.remove('fixed-top')
-    searchInput.blur()
+  if (currentScroll > lastScrollTop && currentScroll > scrollThreshold) {
+    // Scrolling down and past the threshold
+    document.body.classList.remove('scroll-sticky')
+  } else {
+    // Scrolling up or at the top of the page
+    document.body.classList.add('scroll-sticky')
   }
 
   lastScrollTop = currentScroll <= 0 ? 0 : currentScroll

diff --git a/formatters/html/dist/html-B2KBCIGP.js → formatters/html/dist/html-5VHYSU4S.js b/formatters/html/dist/html-B2KBCIGP.js → formatters/html/dist/html-5VHYSU4S.js
diff --git a/formatters/html/dist/html-elixir-UXH7N42W.css b/formatters/html/dist/html-elixir-UXH7N42W.css
diff --git a/formatters/html/dist/html-elixir-ZVNZTSAB.css b/formatters/html/dist/html-elixir-ZVNZTSAB.css
diff --git a/formatters/html/dist/html-erlang-GHFCMISR.css b/formatters/html/dist/html-erlang-GHFCMISR.css
diff --git a/formatters/html/dist/html-erlang-HDO4UZJC.css b/formatters/html/dist/html-erlang-HDO4UZJC.css
diff --git a/lib/ex_doc/formatter/html/templates/footer_template.eex b/lib/ex_doc/formatter/html/templates/footer_template.eex
@@ -1,42 +1,41 @@
-      <footer class="footer">
-        <p>
-          <%= if config.package do %>
-            <span class="line">
-              <a href="https://hex.pm/packages/<%= config.package %>/<%= config.version %>" class="footer-hex-package">Hex Package</a>
-
-              <a href="https://preview.hex.pm/preview/<%= config.package %>/<%= config.version %>">Hex Preview</a>
-
-              <%= source_path = node && Map.get(node, :source_path); if source_path do %>
-                (<a href="https://preview.hex.pm/preview/<%= config.package %>/<%= config.version %>/show/<%= source_path %>">current file</a>)
-              <% end %>
-            </span>
-          <% end %>
-
+    <footer class="footer">
+      <p>
+        <%= if config.package do %>
           <span class="line">
-            <button class="a-main footer-button display-quick-switch" title="Search HexDocs packages">
-              Search HexDocs
-            </button>
+            <a href="https://hex.pm/packages/<%= config.package %>/<%= config.version %>" class="footer-hex-package">Hex Package</a>
 
-            <%= if "epub" in config.formatters do %>
-              <a href="<%= config.project %>.epub" title="ePub version">
-                Download ePub version
-              </a>
+            <a href="https://preview.hex.pm/preview/<%= config.package %>/<%= config.version %>">Hex Preview</a>
+
+            <%= source_path = node && Map.get(node, :source_path); if source_path do %>
+              (<a href="https://preview.hex.pm/preview/<%= config.package %>/<%= config.version %>/show/<%= source_path %>">current file</a>)
             <% end %>
           </span>
-        </p>
+        <% end %>
+
+        <span class="line">
+          <button class="a-main footer-button display-quick-switch" title="Search HexDocs packages">
+            Search HexDocs
+          </button>
 
-        <p class="built-using">
-          Built using
-          <a href="https://github.com/elixir-lang/ex_doc" title="ExDoc" target="_blank" rel="help noopener" translate="no">ExDoc</a> (v<%= ExDoc.version() %>) for the
-          <%= if config.proglang == :erlang do %>
-            <a href="https://erlang.org" title="Erlang" target="_blank" translate="no">Erlang programming language</a>
-          <% else %>
-            <a href="https://elixir-lang.org" title="Elixir" target="_blank" translate="no">Elixir programming language</a>
+          <%= if "epub" in config.formatters do %>
+            <a href="<%= config.project %>.epub" title="ePub version">
+              Download ePub version
+            </a>
           <% end %>
-        </p>
-        <%= before_closing_footer_tag(config, :html) %>
-      </footer>
-    </div>
+        </span>
+      </p>
+
+      <p class="built-using">
+        Built using
+        <a href="https://github.com/elixir-lang/ex_doc" title="ExDoc" target="_blank" rel="help noopener" translate="no">ExDoc</a> (v<%= ExDoc.version() %>) for the
+        <%= if config.proglang == :erlang do %>
+          <a href="https://erlang.org" title="Erlang" target="_blank" translate="no">Erlang programming language</a>
+        <% else %>
+          <a href="https://elixir-lang.org" title="Elixir" target="_blank" translate="no">Elixir programming language</a>
+        <% end %>
+      </p>
+      <%= before_closing_footer_tag(config, :html) %>
+    </footer>
   </div>
 </main>
 </div>