From 6edbda306843bbba5aac2bd3c2ddb30c04357224 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Wed, 8 Nov 2017 07:45:38 -0500
Subject: [PATCH] Clean up Algolia integration

---
 docs/source/_assets/less/docsearch.less      | 56 +++++++++-----------
 docs/source/_assets/less/main.less           |  1 -
 docs/source/_assets/less/sidebar.less        |  3 --
 docs/source/_layouts/documentation.blade.php |  6 +--
 docs/source/_layouts/master.blade.php        | 40 ++++++--------
 5 files changed, 45 insertions(+), 61 deletions(-)
 delete mode 100644 docs/source/_assets/less/sidebar.less

diff --git a/docs/source/_assets/less/docsearch.less b/docs/source/_assets/less/docsearch.less
index af6faabd8..50084efc0 100644
--- a/docs/source/_assets/less/docsearch.less
+++ b/docs/source/_assets/less/docsearch.less
@@ -1,41 +1,37 @@
 .algolia-autocomplete {
-  width: 100%;
+  width: 100% !important;
 
   [class^="ds-dataset-"] {
     .algolia-docsearch-suggestion--text {
       .algolia-docsearch-suggestion--highlight {
-        box-shadow: inset 0 -2px 0 0 rgba(68, 168, 179,.8)
+        box-shadow: inset 0 -2px 0 0 rgba(68, 168, 179,.8);
       }
     }
+
     .algolia-docsearch-suggestion--highlight {
-      color: #44a8b3;
-      background: rgba(68, 168, 179, .1)
+      color: config('colors.tailwind-teal');
+      background: rgba(68, 168, 179, .1);
+    }
+  }
+
+  @media (max-width: config('screens.md')) {
+    .ds-dropdown-menu {
+      width: 100% !important;
+      max-width: 100% !important;
+      min-width: 0 !important;
+    }
+
+    .algolia-docsearch-suggestion--subcategory-column {
+      display: none !important;
+    }
+
+    .algolia-docsearch-suggestion--content {
+      width: 100% !important;
+      padding: 0 !important;
+
+      &:before {
+        display: none !important;
+      }
     }
   }
 }
-
-@media (max-width: 768px) {
-
-  .algolia-autocomplete.algolia-autocomplete-right {
-    .ds-dropdown-menu {
-      width: 100vw !important;
-      max-width: ~"calc(100vw - 32px) !important";
-      min-width: ~"calc(100vw - 32px) !important";
-    }
-
-    .algolia-docsearch-suggestion.algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
-      display: none;
-
-      &:before {
-        display: none;
-      }
-    }
-    .algolia-docsearch-suggestion.algolia-docsearch-suggestion .algolia-docsearch-suggestion--content {
-      width: 100%;
-
-      &:before {
-        display: none;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/docs/source/_assets/less/main.less b/docs/source/_assets/less/main.less
index 5cbf2c7f2..5e52af6d8 100644
--- a/docs/source/_assets/less/main.less
+++ b/docs/source/_assets/less/main.less
@@ -18,7 +18,6 @@ ul {
   @apply .list-reset;
 }
 
-@import "sidebar";
 @import "docsearch";
 @import "prism";
 @import "markdown";
diff --git a/docs/source/_assets/less/sidebar.less b/docs/source/_assets/less/sidebar.less
deleted file mode 100644
index 0ba32ad0f..000000000
--- a/docs/source/_assets/less/sidebar.less
+++ /dev/null
@@ -1,3 +0,0 @@
-#sidebar {
-  top: 11.8em
-}
diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php
index a3210fa8f..3bfbc82fd 100644
--- a/docs/source/_layouts/documentation.blade.php
+++ b/docs/source/_layouts/documentation.blade.php
@@ -11,7 +11,7 @@
 
 @section('body')
 <div class="min-h-screen">
-    <div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll scrolling-touch bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
+    <div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll md:overflow-visible scrolling-touch md:scrolling-auto bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
         <div class="border-b border-smoke flex-none px-8 py-6">
             <div class="mb-4">
                 <div class="hidden md:flex md:justify-center">
@@ -23,8 +23,8 @@
                     <a href="https://github.com/tailwindcss/tailwindcss/releases" class="text-sm hover:text-grey-dark text-grey font-semibold">v{{ $page->version }}</a>
                 </p>
             </div>
-            <div class="relative opacity-75">
-                <input class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full cursor-not-allowed" type="text" placeholder="Search coming soon!" disabled>
+            <div class="relative">
+                <input id="docsearch" class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full" type="text" placeholder="Search the docs">
                 <div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
                     <svg class="pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
                 </div>
diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php
index af31fc21b..52db4dae0 100644
--- a/docs/source/_layouts/master.blade.php
+++ b/docs/source/_layouts/master.blade.php
@@ -15,7 +15,7 @@
         <meta name="theme-color" content="#ffffff">
         <title>{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development' }}</title>
         <style>
-          @import url("https://use.typekit.net/iqy1okj.css");
+            @import url("https://use.typekit.net/iqy1okj.css");
         </style>
         <link rel="stylesheet" href="{{ mix('/css/main.css') }}">
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
@@ -25,30 +25,22 @@
     <body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
         @yield('body')
         @if ($page->production)
-        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-109068504-1"></script>
-        <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
-        <script type="text/javascript">
-            docsearch({
-              apiKey: '3df93446658cd9c4e314d4c02a052188',
-              indexName: 'tailwindcss',
-              inputSelector: '#searchbox'
-            });
+            <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+            <script type="text/javascript">
+                docsearch({
+                    apiKey: '3df93446658cd9c4e314d4c02a052188',
+                    indexName: 'tailwindcss',
+                    inputSelector: '#docsearch',
+                });
+            </script>
+            <script async src="https://www.googletagmanager.com/gtag/js?id=UA-109068504-1"></script>
+            <script>
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
 
-            // For mobile ( will be fixed soon, see : https://github.com/algolia/docsearch/issues/230 )
-            docsearch({
-              apiKey: '3df93446658cd9c4e314d4c02a052188',
-              indexName: 'tailwindcss',
-              inputSelector: '#searchbox-mobile',
-              debug: true
-            });
-        </script>
-        <script>
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-
-          gtag('config', 'UA-109068504-1');
-        </script>
+                gtag('config', 'UA-109068504-1');
+            </script>
         @endif
     </body>
 </html>