fix: smaller screen view and search for mobile views

doc/changelog.d/689.fixed.md

@@ -0,0 +1 @@
+smaller screen view and search for mobile views

src/ansys_sphinx_theme/assets/styles/ansys-sphinx-theme-variable.scss

@@ -15,7 +15,6 @@
 
 :root {
   /** Ansys specific changes to the theme */
-
   /**
   * Ansys Font family
   *
@@ -52,6 +51,7 @@
   --bs-nav-link-font-size: 0.875rem; /* 14px */
   --bs-navbar-color: var(--bs-ast-navbar-color);
   --ast-font-sidebar-header: 1rem; /* 16px */
+
   /**
 * weight
 */
@@ -422,3 +422,106 @@ h6 {
 h1 {
   line-height: 56px;
 }
+
+
+/* Mobile-specific overrides (≤ 1200px) */
+@media (max-width: 1200px) {
+  .navbar-header-items {
+    display: none !important;
+    flex-grow: 1 !important;
+    padding: 0 0 0 0.5rem !important;
+  }
+
+  ul.navbar-nav {
+    align-items: baseline;
+  }
+
+  .navbar-center-items .navbar-item {
+    display: inline-block;
+  }
+
+  .navbar-persistent--mobile {
+    display: none;
+  }
+
+  .navbar-persistent--container {
+    display: flex;
+  }
+
+  .bd-sidebar-primary {
+    flex-grow: 0.75;
+    height: 100vh;
+    left: 0;
+    margin-left: -75%;
+    max-height: 100vh !important;
+    max-width: 350px !important;
+    position: fixed;
+    top: 0;
+    transition: visibility 0.2s ease-out,margin 0.2s ease-out;
+    visibility: hidden;
+    width: 75%;
+    z-index: 1050;
+    display: flex !important;
+  }
+
+  .bd-sidebar-primary[open] {
+    visibility: visible !important;
+  }
+
+  button.primary-toggle {
+    display: flex !important;
+  }
+
+  #pst-collapse-sidebar-button {
+    display: none !important;
+  }
+
+  nav.bd-links {
+    display: block !important;
+  }
+
+  .nav-link .hide-on-wide {
+    display: none !important;
+  }
+
+  .bd-sidebar-primary.hide-on-wide {
+    display: flex !important;
+  }
+
+  .bd-sidebar-primary .sidebar-header-items {
+    display: flex !important;
+  }
+}
+
+/* Desktop-specific overrides (> 1200px) */
+@media (min-width: 1200px) {
+  .navbar-header-items {
+    display: inherit;
+    flex-grow: 1;
+    padding: 0 0 0 0.5rem;
+  }
+
+  ul.navbar-nav {
+    align-items: baseline;
+  }
+
+  .navbar-center-items .navbar-item {
+    display: inline-block;
+  }
+
+  .navbar-persistent--mobile {
+    display: none;
+  }
+
+  .navbar-persistent--container {
+    display: flex;
+  }
+
+  .bd-sidebar-primary {
+    font-size: var(--pst-sidebar-font-size);
+  }
+
+  button.primary-toggle {
+    display: none;
+  }
+}

src/ansys_sphinx_theme/assets/styles/ast-search.scss

@@ -1,4 +1,8 @@
 /* Static Search Results Container */
+
+.bd-search{
+  display: flex;
+}
 .static-search-results {
   display: flex;
   flex-direction: column;
@@ -81,10 +85,6 @@ html[data-theme="light"] .highlight {
 .bd-search .search-button__kbd-shortcut {
   background-color: var(--ast-search-bar-enable-background) !important;
   box-shadow: none !important;
-  height: 2.25rem; /* 36px */
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
 }
 
 /* Index Select Dropdown */
@@ -150,20 +150,54 @@ html[data-theme="light"] .highlight {
 }
 
 /* Responsive Styles */
-@media (max-width: 48rem) { /* 768px */
-  .bd-search input.expanded {
-    width: 6.25rem; /* 100px */
+@media (min-width: 1200px) and (max-width: 85.375rem) {
+  .bd-search input.form-control.expanded {
+    width: 100%; /* 320px */
+  }
+
+  .bd-search input.form-control {
+    width: 100%; /* 240px */
+  }
+
+  .bd-search .search-button__kbd-shortcut {
+    display: none !important;
+  }
+
+  .static-search-results {
+    width: 50%; /* 480px */
+  }
+}
+
+@media (max-width: 1200px) {
+
+  .bd-search input.form-control.expanded {
+    width: 5rem; /* 320px */
   }
 
-  .form-control {
-    width: 3.125rem; /* 50px */
+  .bd-search input.form-control {
+    width: 100%; /* 240px */
   }
 
-  .result {
-    width: 6.25rem; /* 100px */
+  .static-search-results {
+    width: 50%; /* 480px */
   }
 
   .bd-search .search-button__kbd-shortcut {
-    display: none;
+    display: none !important;
+  }
+}
+
+// laptop
+@media (min-width: 85.375rem)  and (max-width: 128rem) {
+  .bd-search input.form-control.expanded {
+    width: 35rem; /* 560px */
+  }
+
+  .bd-search input.form-control {
+    width: 100%; /* 240px */
+  }
+
+  .static-search-results {
+    width: 37rem; /* 600px */
   }
 }

src/ansys_sphinx_theme/assets/styles/pydata-sphinx-theme-custom.scss

@@ -744,25 +744,25 @@ button.btn.version-switcher__button:hover {
   max-width: 100%;
 }
 
-@media (min-width: 960px) {
+@media (min-width: 1200px) {
   .bd-sidebar-primary {
     width: 20%;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 1200px) {
   .col-lg-3 {
     width: fit-content;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 1200px) {
   .bd-page-width {
     max-width: min(100%, 1700px) !important;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 1200px) {
   .bd-main .bd-content .bd-article-container {
     width: min(100%, 1070px);
   }

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/components/search-button-field.html

@@ -1,5 +1,5 @@
 
-<div class="search-bar pst-js-only" id="search-bar">
+<div class="search-bar" id="search-bar">
   <form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
     <i class="fa-solid fa-magnifying-glass"></i>
     <input type="search" class="form-control" name="q" placeholder="{{ theme_search_bar_text }}"

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/static/js/search.js

@@ -1,6 +1,31 @@
-const SEARCH_BAR = document.getElementById("search-bar");
-const SEARCH_INPUT = SEARCH_BAR.querySelector(".bd-search input.form-control");
-const RESULTS = document.getElementById("static-search-results");
+// Determine which search bar to use (mobile or desktop)
+let SEARCH_BAR;
+let RESULTS;
+if (window.innerWidth < 1200) {
+  SEARCH_BAR = document.querySelector(
+    "div.sidebar-header-items__end #search-bar",
+  );
+} else {
+  SEARCH_BAR = document.getElementById("search-bar");
+}
+
+// Fallback if nothing is found
+if (!SEARCH_BAR) {
+  console.warn("SEARCH_BAR not found for current view.");
+}
+
+// Get input and results area
+
+const SEARCH_INPUT = SEARCH_BAR?.querySelector(".bd-search input.form-control");
+
+if (window.innerWidth < 1200) {
+  RESULTS = document.querySelector(
+    "div.sidebar-header-items__end .static-search-results",
+  );
+} else {
+  RESULTS = document.querySelector(".static-search-results");
+}
+
 const MAIN_PAGE_CONTENT = document.querySelector(".bd-main");
 let CURRENT_INDEX = -1;
 
@@ -144,7 +169,6 @@ require(["fuse"], function (Fuse) {
     searchingBanner.className = "searching-banner";
     searchingBanner.textContent = "Searching...";
     searchingBanner.style.display = "block";
-    console.log("Searching...");
     searchingBanner.style.fontStyle = "italic";
     RESULTS.appendChild(searchingBanner);
   }
@@ -248,7 +272,6 @@ require(["fuse"], function (Fuse) {
     }
   }
 
-  // Add event listeners
   SEARCH_INPUT.addEventListener("click", expandSearchInput);
   SEARCH_INPUT.addEventListener("keydown", handleKeyDownSearchInput);
   document.addEventListener("keydown", handleGlobalKeyDown);