refactor: using-scss-variables

doc/changelog.d/689.fixed.md

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

doc/changelog.d/696.miscellaneous.md

@@ -0,0 +1 @@
+using-scss-variables

src/ansys_sphinx_theme/assets/styles/_variables.scss

@@ -0,0 +1,15 @@
+// Variables for Ansys Sphinx Theme
+
+// content variables
+$article-width: 1000px;
+$sidebar-primary-width: 75%;
+$sidebar-primary-max-width: 350px;
+
+
+// Breakpoint variables
+$bs-breakpoint-xxl: 1600px;
+$bs-breakpoint-xl: 1200px;
+$bs-breakpoint-lg: 1040px;
+$bs-breakpoint-md: 720px;
+$bs-breakpoint-sm: 540px;
+$bs-breakpoint-xs: 0px;

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

@@ -13,8 +13,19 @@
   src: url(../fonts/SourceSansPro-Regular.ttf);
 }
 
+// Import SCSS variables
+
+@import 'variables';
+
+
 :root {
   /** Ansys specific changes to the theme */
+  --bs-breakpoint-lg: $bs-breakpoint-lg !important;
+  --bs-breakpoint-md: $bs-breakpoint-md;
+  --bs-breakpoint-sm: $bs-breakpoint-sm;
+  --bs-breakpoint-xs: $bs-breakpoint-xs;
+  --bs-breakpoint-xl: $bs-breakpoint-xl;
+   --breakpoint-sidebar-primary: $bs-breakpoint-lg;
 
   /**
   * Ansys Font family
@@ -52,6 +63,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 +434,106 @@ h6 {
 h1 {
   line-height: 56px;
 }
+
+
+/* Mobile-specific overrides (≤ 1040px) */
+@media (max-width: $bs-breakpoint-lg) {
+  .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: $sidebar-primary-max-width !important;
+    position: fixed;
+    top: 0;
+    transition: visibility 0.2s ease-out,margin 0.2s ease-out;
+    visibility: hidden;
+    width: $sidebar-primary-width;
+    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 (> 1040px) */
+@media (min-width: $bs-breakpoint-lg) {
+  .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,9 @@
 /* Static Search Results Container */
+@import 'variables';
+
+.bd-search{
+  display: flex;
+}
 .static-search-results {
   display: flex;
   flex-direction: column;
@@ -81,10 +86,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 +151,54 @@ html[data-theme="light"] .highlight {
 }
 
 /* Responsive Styles */
-@media (max-width: 48rem) { /* 768px */
-  .bd-search input.expanded {
-    width: 6.25rem; /* 100px */
+@media (min-width: $bs-breakpoint-lg) 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: $bs-breakpoint-lg) {
+
+  .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

@@ -6,6 +6,9 @@
 * _sidebar-primary.scss
 *
 */
+
+@import "variables";
+
 .bd-sidebar-primary,
 .bd-sidebar-secondary {
   max-height: calc(100vh - var(--pst-header-height) - 1vh);
@@ -269,23 +272,23 @@ a.headerlink {
   color: #222;
 }
 
-@media (min-width: 1200px) {
+@media (min-width: $bs-breakpoint-xl) {
   .container,
   .container-lg,
   .container-md,
   .container-sm,
   .container-xl {
-    max-width: 1200px;
+    max-width: $bs-breakpoint-xl;
   }
 }
 
-@media (min-width: 1600px) {
+@media (min-width: $bs-breakpoint-xxl) {
   .container,
   .container-lg,
   .container-md,
   .container-sm,
   .container-xl {
-    max-width: 1600px;
+    max-width: $bs-breakpoint-xxl;
   }
 }
 
@@ -740,31 +743,31 @@ button.btn.version-switcher__button:hover {
 
 .bd-main .bd-content .bd-article-container {
   padding: 8px;
-  width: 1000px;
+  width: $article-width;
   max-width: 100%;
 }
 
-@media (min-width: 960px) {
+@media (min-width: $bs-breakpoint-lg) {
   .bd-sidebar-primary {
     width: 20%;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: $bs-breakpoint-lg) {
   .col-lg-3 {
     width: fit-content;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: $bs-breakpoint-lg) {
   .bd-page-width {
-    max-width: min(100%, 1700px) !important;
+    max-width: min(100%, $bs-breakpoint-lg + 30px) !important;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: $bs-breakpoint-lg) {
   .bd-main .bd-content .bd-article-container {
-    width: min(100%, 1070px);
+    width: min(100%, $bs-breakpoint-lg + 30px);
   }
 }
 

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 < 1040) {
+  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 < 1040) {
+  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);