Fix namespacing problem

docs/_ext/hidden_code_block.py

@@ -1,3 +1,5 @@
+# Source: http://scopatz.github.io/hiddencode/
+
 """Simple, inelegant Sphinx extension which adds a directive for a
 highlighted code-block that may be toggled hidden and shown in HTML.  
 This is possibly useful for teaching courses.

docs/custom-design.rst

@@ -33,6 +33,9 @@ is given below for the reference:
                 </div>
                 <input class="search__outer__input" placeholder="Search ..." />
                 <span class="bar"></span>
+                <div class="rtd__search__credits">
+                    Search by <a href="https://readthedocs.org/">Read the Docs</a> &amp; <a href="https://readthedocs-sphinx-search.readthedocs.io/en/latest/">readthedocs-sphinx-search</a>
+                <div>
                 <div class="search__result__box">
 
                     <!-- RESULT 1 -->

docs/js-api-reference.rst

@@ -1,7 +1,8 @@
 JavaScript API Reference
 ========================
 
-Following are the functions that are defined in `rtd_sphinx_search.js`_,
+Following are the functions that are defined in ``READTHEDOCS`` object in `rtd_sphinx_search.js`_.
+You can override any of the following functions to make this extension work in your way.
 
 .. js:autofunction:: debounce
 .. js:autofunction:: convertObjToUrlParams
@@ -24,5 +25,32 @@ Following are the functions that are defined in `rtd_sphinx_search.js`_,
 .. js:autofunction:: showSearchModal
 .. js:autofunction:: removeSearchModal
 
+Example: Overriding A JavaScript Function
+------------------------------------------
+
+Here is an example on how to add some customizations
+by overriding some of the above functions.
+
+Let's say you have a custom search bar (different from the default one),
+and you want to show the search UI when the user clicks on that.
+For this, you can override ``getInputField()`` function to return your own search bar.
+This will add all the required event-listeners in the right place.
+
+Create a ``custom.js`` and write the following code:
+
+.. code-block:: js
+
+    // custom.js
+
+    var READTHEDOCS = {
+        getInputField: function() {
+            var custom_search_bar = document.querySelector('.my-custom-search-bar');
+            return custom_search_bar;    
+        }
+    }
+
+And then, you can `include this custom.js file in your docs`_.
+
 
 .. _rtd_sphinx_search.js: https://github.com/readthedocs/readthedocs-sphinx-search/blob/master/sphinx_search/static/js/rtd_sphinx_search.js
+.. _include this custom.js file in your docs: https://docs.readthedocs.io/page/guides/adding-custom-css.html

sphinx_search/static/css/rtd_sphinx_search.css

@@ -259,7 +259,7 @@
     background: #eee;
     z-index: 100000;
     border: 1px solid #eee;
-    padding: 2px 10px;
+    padding: 5px 10px;
     text-align: center;
     color: black;
 }
@@ -269,6 +269,14 @@
     text-decoration: underline;
 }
 
+@media (max-width: 520px) {
+    .rtd__search__credits {
+        height: 50px;
+        bottom: calc(-80% - 40px);
+        overflow: hidden;
+    }
+}
+
 @media (min-height: 1250px) {
     .rtd__search__credits {
         bottom: calc(-1000px - 30px);