fix: smaller screen view and search for mobile views (#689)

Co-authored-by: pyansys-ci-bot <[email protected]>
Co-authored-by: Maxime Rey <[email protected]>
Co-authored-by: Jorge Martínez <[email protected]>

Author: 4 people

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
 */
@@ -401,7 +401,7 @@ html[data-theme="dark"] {
 body {
   font-family: var(--ast-body-family);
   line-height: var(--ast-global-line-height);
-  font-size: 14px;
+  font-size: 0.875rem; // 14px
   color: var(--ast-color-text);
 }
 
@@ -420,5 +420,108 @@ h6 {
 }
 
 h1 {
-  line-height: 56px;
+  line-height: 3.5rem; // 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: 21.875rem !important; // 350px
+    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;
@@ -80,10 +84,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 */
@@ -149,21 +149,55 @@ 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);
   }