feat: implement default search bar expansion behavior (#496)

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

Author: 3 people

doc/changelog.d/496.fixed.md

@@ -0,0 +1 @@
+feat: implement default search bar expansion behavior

src/ansys_sphinx_theme/search/fuse_search.py

@@ -100,9 +100,6 @@ def create_search_index(app, exception):
     if exception:
         return
 
-    if not app.config.html_theme_options.get("static_search", {}):
-        return
-
     switcher_version = app.config.html_theme_options.get("switcher", {}).get("version_match", "")
     version_url_prefix = f"version/{switcher_version}/" if switcher_version else ""
 

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

@@ -0,0 +1,19 @@
+
+<link rel="stylesheet" href="{{ pathto('_static/css/fuse-search.css', 1) }}">
+
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
+
+{% set theme_static_search = theme_static_search | default({}) %}
+{% set theme_limit = theme_static_search.limit | default(10) %}
+{% set min_chars_for_search = theme_static_search.min_chars_for_search | default(1) %}
+
+<script>
+var theme_static_search = JSON.parse('{{ theme_static_search | tojson | safe }}');
+var theme_limit = "{{ theme_limit }}";
+var min_chars_for_search = "{{ min_chars_for_search }}";
+
+</script>
+
+<script src="{{ pathto('_static/js/fuse_search.js', 1) }}"></script>
+<script src="{{ pathto('_static/js/fuse_extension.js', 1) }}"></script>

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

@@ -0,0 +1,14 @@
+
+<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 }}"
+         aria-label="{{ theme_search_bar_text }}" autocomplete="off" autocorrect="off"
+         autocapitalize="off" spellcheck="false"/>
+  <span class="search-button__kbd-shortcut">
+    <kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd>
+  </span>
+</form>
+<!-- Search results container -->
+<div id="results" class="results" style="display: none;" tabindex="0">
+</div>

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

@@ -1,7 +1,21 @@
-{%- extends "pydata_sphinx_theme/layout.html" -%} {# Append our custom CSS after
-the bootstrap stylesheet so we can override where necessary #} {%- block css %}
-{{ super() }} {% if theme_show_breadcrumbs %}
-<link href="{{ pathto('_static/css/breadcrumbs.css', 1) }}" rel="stylesheet" />
-{% endif %} {%- endblock %}{% block docs_navbar %} {{ super() }} {% if
-theme_switcher %} {% include 'components/announcement_version.html' %} {% endif
-%} {% endblock %}
+{%- extends "pydata_sphinx_theme/layout.html" -%}
+
+{# Append our custom CSS after the bootstrap stylesheet so we can override where necessary #}
+{%- block css %}
+  {{ super() }}
+  {% if theme_show_breadcrumbs %}
+    <link href="{{ pathto('_static/css/breadcrumbs.css', 1) }}" rel="stylesheet" />
+  {% endif %}
+{%- endblock %}
+
+{% block docs_navbar %}
+  {{ super() }}
+  {% if theme_switcher %}
+    {% include 'components/announcement_version.html' %}
+  {% endif %}
+{% endblock %}
+
+{%- block content %}
+  {{ super() }}
+  {%- include "components/ast-search-button.html" %}
+{%- endblock %}

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/layout.html

@@ -1,23 +1,24 @@
 .results {
-  margin-top: 3rem !important;
   display: flex;
   flex-direction: column;
-  flex-wrap: wrap;
   align-content: flex-start;
   justify-content: center;
   position: absolute;
   background-color: white;
-  width: 800px;
-  padding: 0 10px;
+  width: 700px;
+  padding: 10px;
   border: 1px solid #ddd; /* Optional: Add border for better visibility */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for better visibility */
+  overflow: auto;
+  height: 500px;
 }
 .search-button__wrapper.show .search-button__search-container {
   overflow: auto;
 }
 .result-item {
   margin-bottom: 1rem;
   cursor: pointer; /* Indicate that the item is clickable */
+  transition: box-shadow 0.3s ease; /* Smooth transition */
 }
 
 .result-title {
@@ -27,12 +28,37 @@
   font-family: "Open Sans", sans-serif;
 }
 
+.result-title:focus,
+.result-title:focus-visible,
+.result-text:focus,
+.result-text:focus-visible {
+  box-shadow: var(--ast-ring-shadow-focused);
+}
+
+.result-item.selected {
+  box-shadow: var(--ast-ring-shadow-focused);
+}
+
 .result-text {
   font-size: 12px;
   font-family: "Open Sans", sans-serif;
   color: var(--ast-search-bar-enable-text);
 }
 
+.result-item:focus-visible,
+.result-item:focus {
+  outline: none; /* Remove default focus outline */
+  cursor: pointer;
+  box-shadow: var(--ast-ring-shadow-focused);
+  z-index: 1;
+}
+
+.result-item:hover {
+  background-color: var(
+    --ast-color-hover-card-background
+  ); /* Background when hovered */
+}
+
 .no-results {
   font-style: italic;
   color: #777;
@@ -51,29 +77,22 @@ html[data-theme="light"] .highlight {
   color: var(--ast-search-bar-enable-text);
   font-size: 14px;
   outline-color: var(--ast-search-bar-enable-border);
-  border: 0.5px solid var(--ast-search-bar-enable-border);
-  width: 670px;
+  border: 0px solid var(--ast-search-bar-enable-border);
+  width: 300px;
+  transition: max-width 0.3s ease;
   max-width: 200%;
   height: 40px;
-  margin-left: 5px;
 }
 
 .search-button__wrapper.show input,
 .search-button__wrapper.show svg {
   font-size: 14px;
 }
 
-.bd-search {
-  gap: 8px;
-  background-color: var(--ast-search-bar-enable-background);
-  border: 0px solid var(--ast-search-bar-enable-border);
-  margin-bottom: 300px;
-}
-
 .bd-search .search-button__kbd-shortcut {
   background-color: var(--ast-search-bar-enable-background) !important;
   box-shadow: none !important;
-  height: 40px;
+  height: 36px;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
@@ -105,3 +124,39 @@ html[data-theme="light"] .highlight {
 .form-control:focus {
   box-shadow: none;
 }
+
+/* Button Styling */
+.search-button__button {
+  transition: width 0.3s ease;
+  width: 50px; /* Initial width */
+}
+
+/* Result Container Styling */
+.bd-search {
+  gap: 8px;
+  background-color: var(--ast-search-bar-enable-background);
+  border: 1px solid var(--ast-search-bar-enable-border);
+  margin-bottom: 0px;
+}
+
+@media (max-width: 768px) {
+  .form-control:focus,
+  .form-control:focus-visible,
+  .form-control {
+    width: 100px;
+  }
+  .bd-search input.expanded {
+    width: 200px;
+  }
+  .bd-search .search-button__kbd-shortcut {
+    display: none;
+  }
+}
+
+.bd-search input.expanded {
+  width: 600px;
+}
+
+.search-icon {
+  cursor: pointer;
+}

src/ansys_sphinx_theme/theme/ansys_sphinx_theme/search.html

@@ -277,7 +277,7 @@ a.headerlink {
 */
 .bd-header .navbar-header-items__start {
   width: fit-content;
-  padding-right: 3rem;
+  padding-right: 2rem;
 }
 /**
 * header logo