Make it less ugly

readthedocs · Mar 9, 2023 · 1e2c870 · 1e2c870
1 parent f36ee3d
commit 1e2c870
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 25 deletions.
diff --git a/sphinx_search/static/css/rtd_sphinx_search.css b/sphinx_search/static/css/rtd_sphinx_search.css
@@ -149,9 +149,12 @@
 
 /* Search result */
 
+.search__result__box {
+    padding: 0px 10px;
+}
+
 .search__result__single {
     margin-top: 10px;
-    padding: 0px 10px;
     border-bottom: 1px solid #e6e6e6;
 }
 
@@ -282,17 +285,38 @@
     letter-spacing: 1px;
 }
 
+.search__filters {
+    padding: 0px 10px;
+}
+
 .search__filters ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .search__filters li {
-   display: inline;
-   margin-right: 0.5em;
+    display: inline;
+    margin-right: 5px;
+}
+
+.search__filters .search__filters__title {
+    color: black;
+    font-size: 15px;
+}
+
+.search__filters button {
+    background: #f3f4f5;
+    border-color: #d0d7de;
+    color: black;
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 999px;
+    padding: 2px 7px;
+    font-size: 15px;
 }
 
+
 @media (max-width: 670px) {
     .rtd__search__credits {
         height: 50px;

diff --git a/sphinx_search/static/js/rtd_sphinx_search.js b/sphinx_search/static/js/rtd_sphinx_search.js
@@ -297,13 +297,16 @@ const generateSingleResult = (resultData, projectName, id) => {
     let h2_element = createDomNode("h2", {class: "search__result__title"});
     h2_element.innerHTML = page_title;
 
-    // If the result is not from the same project,
-    // then it's from a subproject.
+    // Results can belong to different projects.
+    // If the result isn't from the current project, add a note about it.
     const project_slug = resultData.project.slug
     if (projectName !== project_slug) {
         let subtitle = createDomNode("small", {class: "rtd_ui_search_subtitle"});
         subtitle.innerText = ` (from project ${project_slug})`;
         h2_element.appendChild(subtitle);
+        // If the result isn't from the current project,
+        // then we create an absolute link to the page.
+        page_link = `${resultData.domain}${page_link}`;
     }
     h2_element.appendChild(createDomNode("br"))
 
@@ -597,7 +600,8 @@ const generateAndReturnInitialHtml = (filters) => {
           </div>
         </div>
         <div class="rtd__search__credits">
-          Search by <a href="https://readthedocs.org/">Read the Docs</a> & <a href="https://readthedocs-sphinx-search.readthedocs.io/en/latest/">readthedocs-sphinx-search</a>
+          Search by <a href="https://readthedocs.org/">Read the Docs</a> & <a href="https://readthedocs-sphinx-search.readthedocs.io/en/latest/">readthedocs-sphinx-search</a>.
+          <a href="https://docs.readthedocs.io/page/server-side-search/syntax.html">Search syntax</a>.
         </div>
     `;
 
@@ -607,25 +611,34 @@ const generateAndReturnInitialHtml = (filters) => {
     div.innerHTML = innerHTML;
     let filters_list = div.querySelector(".search__filters ul");
     const config = getConfig();
-    for (const [filter, value] of filters) {
-        let li = createDomNode("li");
-        let button = createDomNode("button");
-        button.innerText = filter;
-        button.value = value;
-        button.addEventListener("click", event => {
-          event.preventDefault();
-          let search_query = getSearchTerm();
-          let [query, _] = parseQuery(search_query);
-          setSearchQuery(event.target.value + " " + query);
-          const search_params = {
-            q: search_query,
-            project: config.project,
-            version: config.version,
-          };
-          fetchAndGenerateResults(config.api_endpoint, search_params)();
-        });
-        li.appendChild(button);
-        filters_list.appendChild(li);
+    if (filters.length > 0) {
+      let li = createDomNode("li", {"class": "search__filters__title"});
+      li.innerText = "Filters:";
+      filters_list.appendChild(li);
+    }
+    for (let i = 0, len = filters.length; i < len; i++) {
+      const [name, filter] = filters[i];
+      let li = createDomNode("li");
+      let button = createDomNode("button");
+      button.innerText = name;
+      button.value = i;
+      button.title = filter;
+      button.addEventListener("click", event => {
+        event.preventDefault();
+        let filter = filters[parseInt(event.target.value)][1];
+        let search_query = getSearchTerm();
+        let [query, _] = parseQuery(search_query);
+        search_query = filter + " " + query;
+        setSearchQuery(search_query);
+        const search_params = {
+          q: search_query,
+          project: config.project,
+          version: config.version,
+        };
+        fetchAndGenerateResults(config.api_endpoint, search_params)();
+      });
+      li.appendChild(button);
+      filters_list.appendChild(li);
     }
     return div;
 };