InstantSearch: clean up, fix css

4 files changed, 66 insertions, 65 deletions

diff --git a/content/assets/javascripts/instantsearch.js b/content/assets/javascripts/instantsearch.js
new file mode 100644
index 00000000..49a152ab
--- /dev/null
+++ b/content/assets/javascripts/instantsearch.js
@@ -0,0 +1,54 @@
+const search = instantsearch({
+  appId: 'BH4D9OD16A',
+  apiKey: 'ce1690e1421303458a1fcbea0cc4a927',
+  indexName: 'gitlab',
+  algoliaOptions: {
+    // Filter by tags as described in https://github.com/algolia/docsearch-configs/blob/master/configs/gitlab.json
+    'filters': "tags:gitlab OR tags:omnibus OR tags:runner",
+    // Number of results shown in the search dropdown
+    'hitsPerPage': 10,
+  },
+  loadingIndicator: true,
+  urlSync: true
+});
+
+search.addWidget(
+  instantsearch.widgets.searchBox({
+    container: '#search-input',
+    reset: true
+  })
+);
+
+search.addWidget(
+    instantsearch.widgets.refinementList({
+      container: '#refinement-list',
+      attributeName: 'tags',
+      sortBy: ["name:asc","isRefined"],
+      templates: {
+        header: 'Refine your search:'
+      }
+    })
+  );
+
+search.addWidget(
+  instantsearch.widgets.infiniteHits({
+    container: '#hits',
+    templates: {
+      item: document.getElementById('hit-template').innerHTML,
+      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
+    },
+    escapeHits: true,
+    showMoreLabel: "Load more results..."
+  })
+);
+
+search.addWidget(
+  instantsearch.widgets.stats({
+    container: '#stats',
+    templates: {
+      body: '<div class="stats">We found {{nbHits}} results, fetched in {{processingTimeMS}}ms.</div>'
+    }
+  })
+);
+
+search.start();
diff --git a/content/assets/stylesheets/instantsearch.scss b/content/assets/stylesheets/instantsearch.scss
index 1cd92d9c..3e693678 100644
--- a/content/assets/stylesheets/instantsearch.scss
+++ b/content/assets/stylesheets/instantsearch.scss
@@ -1,5 +1,5 @@
 ---
-version: 3
+version: 4
 ---
 
 @import "variables";
@@ -146,6 +146,15 @@ $color10: rgb(117, 117, 117);
 }
 //scss-lint:enable IdSelector
 
+//overrides padding for the searchbox
+.main.class {
+  padding-top: 90px;
+
+  @media (max-width: $mobile-width) {
+    padding-top: 20px;
+  }
+}
+
 .algolia-docsearch-suggestion--highlight {
   background-color: $color3;
 }
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index 2108f475..ca4cceb1 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -1,5 +1,5 @@
 ---
-version: 28
+version: 29
 ---
 
 @import "variables";
@@ -506,13 +506,6 @@ h6 {
   }
 }
 
-// instantsearch (search results page)
-// scss-lint:disable ImportantRule
-.instantsearch-input {
-  padding-top: 100px !important;
-}
-// scss-lint:enable ImportantRule
-
 .topics {
   text-align: center;
   position: relative;
diff --git a/layouts/instantsearch.html b/layouts/instantsearch.html
index 7d9def6c..76347e10 100644
--- a/layouts/instantsearch.html
+++ b/layouts/instantsearch.html
@@ -21,64 +21,9 @@
         <hr>
       <div class="clear"></div>
     </div>
+      <script type="application/javascript" src="/assets/javascripts/instantsearch.js"></script>
       <%= render '/footer.*' %>
       <%= render '/analytics.*' %>
       <%= render '/https_redirect.*' %>
-    <script type="text/javascript">
-      const search = instantsearch({
-        appId: 'BH4D9OD16A',
-        apiKey: 'ce1690e1421303458a1fcbea0cc4a927',
-        indexName: 'gitlab',
-        algoliaOptions: {
-          // Filter by tags as described in https://github.com/algolia/docsearch-configs/blob/master/configs/gitlab.json
-          'filters': "tags:gitlab OR tags:omnibus OR tags:runner",
-          // Number of results shown in the search dropdown
-          'hitsPerPage': 10,
-        },
-        loadingIndicator: true,
-        urlSync: true
-      });
-
-      search.addWidget(
-        instantsearch.widgets.searchBox({
-          container: '#search-input',
-          reset: true
-        })
-      );
-
-      search.addWidget(
-          instantsearch.widgets.refinementList({
-            container: '#refinement-list',
-            attributeName: 'tags',
-            sortBy: ["name:asc","isRefined"],
-            templates: {
-              header: 'Refine your search:'
-            }
-          })
-        );
-
-      search.addWidget(
-        instantsearch.widgets.infiniteHits({
-          container: '#hits',
-          templates: {
-            item: document.getElementById('hit-template').innerHTML,
-            empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
-          },
-          escapeHits: true,
-          showMoreLabel: "Load more results..."
-        })
-      );
-
-      search.addWidget(
-        instantsearch.widgets.stats({
-          container: '#stats',
-          templates: {
-            body: '<div class="stats">We found {{nbHits}} results, fetched in {{processingTimeMS}}ms.</div>'
-          }
-        })
-      );
-
-      search.start();
-    </script>
   </body>
 </html>