[Update] Support Page Sections & Sphinx Domains

MANIFEST.in

@@ -1,4 +1,6 @@
 prune common
 include LICENSE
+include sphinx_search/_static/js/rtd_sphinx_search.js
 include sphinx_search/_static/js/rtd_sphinx_search.min.js
+include sphinx_search/_static/css/rtd_sphinx_search.css
 include sphinx_search/_static/css/rtd_sphinx_search.min.css

docs/custom-design.rst

@@ -4,49 +4,12 @@ Custom Design
 If you want to change the styles of the search UI,
 you can do so by `adding your custom stylesheet`_ to your documentation.
 
-Basic structure of the HTML which is generated for the full-page search UI
+Basic structure of the HTML which is generated for the search UI
 is given below for the reference:
 
 .. code-block:: html
 
-    <div class="search__outer__wrapper search__backdrop display-block">
-        <div class="search__outer">
-
-            <!-- Cross icon on top right corner -->
-            <div class="search__cross" title="Close">
-                <!--?xml version='1.0' encoding='UTF-8'?-->
-                <svg class="search__cross__img" width="15px" height="15px" enable-background="new 0 0 612 612" version="1.1" viewBox="0 0 612 612" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-                    <polygon points="612 36.004 576.52 0.603 306 270.61 35.478 0.603 0 36.004 270.52 306.01 0 576 35.478 611.4 306 341.41 576.52 611.4 612 576 341.46 306.01">
-                    </polygon>
-                </svg>
-            </div>
-
-            <input class="search__outer__input" placeholder="Search ...">
-            <span class="bar"></span>  <!-- This is for underline effect on input field -->
-
-            <div class="search__result__box">
-
-                <!-- Results -->
-                <div class="search__result__single" id="hit__1">
-                <div class="search__result__single" id="hit__2">
-
-                <!-- Sample result structure -->
-                <div class="search__result__single" id="hit__3">
-                    <a href="https://link-to-the.result">
-                        <div class="content">
-                            <h2 class="search__result__title">Title of the <em>Result</em></h2>
-                            <br>
-                            <small class="search__result__path">path/to/result (from <strong>subproject-slug</strong>)</small>
-                            <p class="search__result__content">... Sample <em>Result</em> Text ...</p>
-                        </div>
-                    </a>
-                </div>
-
-                <div class="search__result__single" id="hit__4">
-                <div class="search__result__single" id="hit__5">
-            </div>
-        </div>
-    </div>
+    <!-- Coming Soon -->
 
 
 .. _adding your custom stylesheet: https://docs.readthedocs.io/page/guides/adding-custom-css.html

gulpfile.js

@@ -11,7 +11,7 @@ var autoprefixer = require("gulp-autoprefixer"),
 
 gulp.task("styles", function() {
     return gulp
-        .src("sphinx_search/_static/css/*.css")
+        .src("sphinx_search/_static/css/rtd_sphinx_search.css")
         .pipe(autoprefixer())
         .pipe(csso())
         .pipe(rename({ extname: ".min.css" }))
@@ -20,15 +20,15 @@ gulp.task("styles", function() {
 
 gulp.task("scripts", function() {
     return gulp
-        .src("sphinx_search/_static/js/*.js")
+        .src("sphinx_search/_static/js/rtd_sphinx_search.js")
         .pipe(babel({ presets: ["@babel/env"] }))
         .pipe(uglify())
         .pipe(rename({ extname: ".min.js" }))
         .pipe(gulp.dest("sphinx_search/_static/js"));
 });
 
 gulp.task("clean", function() {
-    return del(["sphinx_search/**/*.min.*"]);
+    return del(["sphinx_search/**/rtd_sphinx_search.min.*"]);
 });
 
 gulp.task("default", ["clean"], function() {

sphinx_search/_static/css/rtd_sphinx_search.css

@@ -61,6 +61,7 @@
 
 .search__outer::-webkit-scrollbar {
     width: 7px;
+    height: 7px;
     background-color: #fcfcfc;
 }
 
@@ -149,16 +150,19 @@
 /* Search result */
 
 .search__result__single {
-    padding: 10px;
+    margin-top: 10px;
+    padding: 0px 10px;
     border-bottom: 1px solid #e6e6e6;
 }
 
 .search__result__box .active {
     background-color: rgb(245, 245, 245);
 }
 
-.search__result__single:hover {
-    background-color: rgb(245, 245, 245);
+.outer_div_page_results {
+    margin: 5px 0px;
+    overflow: auto;
+    padding: 3px 5px;
 }
 
 .search__result__single a {
@@ -172,30 +176,37 @@
     /* Display and box model */
     display: inline-block;
     font-weight: 500;
-    margin-bottom: 0;
+    margin-bottom: 15px;
     margin-top: 0;
-    font-size: 14px;
+    font-size: 15px;
 
     /* Other */
     color: #6ea0ec;
     border-bottom: 1px solid #6ea0ec;
 }
 
-/* Path of each search result */
-
-.search__result__path {
-    color: #b3b3b3;
+.search__result__subheading {
+    color: black;
+    font-weight: 700;
+    float: left;
+    width: 20%;
+    font-size: 15px;
+    margin-right: 10px;
+    overflow-x: hidden;
 }
 
-/* Content of each search result */
-
 .search__result__content {
+    margin: 0;
     text-decoration: none;
     color: black;
-    font-size: 14px;
+    font-size: 15px;
     display: block;
-    margin-top: 3px;
     margin-bottom: 5px;
+    margin-bottom: 0;
+    line-height: inherit;
+    float: right;
+    width: calc(80% - 15px);
+    text-align: left;
 }
 
 /* Highlighting of matched results */
@@ -206,7 +217,7 @@
 
 .search__outer .search__result__title em {
     background-color: #e5f6ff;
-    padding-bottom: 4px;
+    padding-bottom: 3px;
     border-bottom-color: black;
 }
 
@@ -215,6 +226,38 @@
     border-bottom: 1px solid black;
 }
 
+.search__result__subheading em {
+    border-bottom: 1px solid black;
+}
+
+.outer_div_page_results:hover {
+    background-color: rgb(245, 245, 245);
+}
+
+.br-for-hits {
+    display: block;
+    content: "";
+    margin-top: 10px;
+}
+
+.rtd_ui_search_subtitle {
+    all: unset;
+    color: inherit;
+    font-size: 85%;
+}
+
+@media (max-width: 630px) {
+    .search__result__subheading {
+        float: none;
+        width: 90%;
+    }
+
+    .search__result__content {
+        float: none;
+        width: 90%;
+    }
+}
+
 @keyframes fade-in {
     from {
         opacity: 0;