Searchbar for Arrow Docs (arrow-kt#898)

* Add proper styling for the searchbar * Add Arrow styling for the search results dropdown * Hide unnecessary X on search input elements on Chromium and Edge * Add JS code to call Algolia docsearch API. Including autofocus feature.
RawToast · Jul 18, 2018 · 4073b16 · 4073b16
1 parent bdc7e11
commit 4073b16
Show file tree

Hide file tree

Showing 9 changed files with 1,808 additions and 15 deletions.
diff --git a/modules/docs/arrow-docs/docs/_includes/_doc-wrapper.html b/modules/docs/arrow-docs/docs/_includes/_doc-wrapper.html
@@ -1,8 +1,13 @@
 <div id="doc-wrapper">
     <div class="doc-header">
+        <div class="search-wrapper">
+          <input id="docsearch" class="search" placeholder="Search documentation..." type="search" autofocus="autofocus">
+        </div>
         <a target="_blank"
-           href="{{site.data.commons.github_repository}}/edit/master/modules/docs/arrow-docs/docs{{page.url | replace: '_', ''}}README.md"><i
-                class="fa fa-pencil"></i> Edit</a>
+          href="{{site.data.commons.github_repository}}/edit/master/modules/docs/arrow-docs/docs{{page.url | replace: '_', ''}}README.md">
+          <i class="fa fa-pencil"></i>
+            Edit
+        </a>
     </div>
     <div class="doc-content">
         {% if page.video %}

diff --git a/modules/docs/arrow-docs/docs/_includes/_js-bottom-docs.html b/modules/docs/arrow-docs/docs/_includes/_js-bottom-docs.html
@@ -11,14 +11,15 @@
 </script>
 <!-- Touch gesture support -->
 <script src="{{ '/js/hammer.min.js' | relative_url }}"></script>
+<!-- Docsearch -->
+<script type="text/javascript" src="{{ '/js/docsearch.min.js' | relative_url }}"></script>
 <!-- Custom scripts for this template -->
 <script src="{{ '/js/functions.js' | relative_url }}"></script>
-
 <!-- Gitter -->
 <script>
   ((window.gitter = {}).chat = {}).options = {
     room: 'arrow-kt/Lobby'
   };
 
 </script>
-<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
+<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
diff --git a/modules/docs/arrow-docs/docs/_sass/arrow.scss b/modules/docs/arrow-docs/docs/_sass/arrow.scss
@@ -29,3 +29,6 @@
 @import "components/features";
 @import "components/font";
 @import "components/footer";
+@import "components/dropdown";
+
+@include dropdown($dropdown-config...);
diff --git a/modules/docs/arrow-docs/docs/_sass/components/_doc-header.scss b/modules/docs/arrow-docs/docs/_sass/components/_doc-header.scss
@@ -3,21 +3,47 @@
 // -----------------------------------------------
 .doc-header {
     @include flexbox;
-    @include justify-content(flex-end);
+    @include justify-content(space-between);
     @include align-items(center);
     height: ($base-point-grid * 11);
     padding: 0 ($base-point-grid * 4);
     background: $white;
 
-    .search {
+    .search-wrapper {
+      flex: 1 1 auto;
+      position: relative;
+      &:after {
+        color: #4b74e5;
+        content: "\f002";
         display: block;
-        width: 100%;
-        padding: $base-point-grid 0;
-        font-family: $base-font-family;
-        font-size: $base-font-size;
-        color: $brand-secondary;
-        border: none;
-        cursor: auto;
+        font-family: FontAwesome;
+        font-size: 1rem;
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translate(0, -50%);
+      }
+      .search {
+          display: block;
+          width: calc(100% - 1.5rem);
+          padding: $base-point-grid 0;
+          font-family: $base-font-family;
+          font-size: $base-font-size;
+          color: $brand-secondary;
+          margin-left: 1.5rem;
+          border: none;
+          cursor: auto;
+          position: relative;
+      }
+      /* clears the 'X' from Internet Explorer */
+      input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
+      input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }
+
+      /* clears the 'X' from Chrome */
+      input[type="search"]::-webkit-search-decoration,
+      input[type="search"]::-webkit-search-cancel-button,
+      input[type="search"]::-webkit-search-results-button,
+      input[type="search"]::-webkit-search-results-decoration { display: none; }
     }
 
     a {