Clean up Algolia integration

This commit is contained in:
Jonathan Reinink 2017-11-08 07:45:38 -05:00
parent 31ee73ad56
commit 6edbda3068
5 changed files with 45 additions and 61 deletions

View File

@ -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;
}
}
}
}

View File

@ -18,7 +18,6 @@ ul {
@apply .list-reset;
}
@import "sidebar";
@import "docsearch";
@import "prism";
@import "markdown";

View File

@ -1,3 +0,0 @@
#sidebar {
top: 11.8em
}

View File

@ -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>

View File

@ -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>