archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Responsive dropdown

Browse Source
This commit is contained in:
Lucas Bonomi 2017-11-06 18:07:26 +01:00
parent 661aee1e5f
commit 4f866c568e
3 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
docs/source/_assets/less/docsearch.less
View File

@ -1,7 +1,7 @@
.algolia-autocomplete {
width: 100%;
.ds-dataset-1 {
[class^="ds-dataset-"] {
.algolia-docsearch-suggestion--text {
.algolia-docsearch-suggestion--highlight {
box-shadow: inset 0 -2px 0 0 rgba(68, 168, 179,.8)
@ -12,4 +12,30 @@
background: rgba(68, 168, 179, .1)
}
}
}
@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;
}
}
}
}

9
docs/source/_layouts/documentation.blade.php
View File

@ -5,7 +5,7 @@
@section('body')
<div class="min-h-screen">
<div class="border-b border-smoke flex-none px-8 py-6 w-14/5 md:w-full md:max-w-xs fixed border-smoke bg-smoke-light border-r-2 z-50">
<div class="hidden border-b border-smoke flex-none px-8 py-6 w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col fixed border-smoke bg-smoke-light border-r-2 z-50">
<div class="mb-4">
<div class="hidden md:flex md:justify-center">
<a href="/" class="flex justify-center">
@ -23,6 +23,7 @@
</div>
</div>
</div>
<div id="sidebar" class="hidden z-40 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 class="p-8 flex-1 overflow-y-scroll">
<nav id="nav" class="text-base overflow-y-scroll">
@ -177,6 +178,12 @@
<svg class="w-4 h-4 cursor-pointer text-grey" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></svg>
</div>
</div>
<div id="search-mobile" class="absolute pin-r pin-y px-4 flex items-center relative">
<input type="text" id="searchbox-mobile" class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full opacity-75 ds-input">
<div class="pointer-events-none absolute pin-y pin-l pl-8 flex items-center opacity-75">
<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>
</div>
</div>
</div>
<div id="content" class="px-6 pb-8 pt-20 md:pt-16 w-full max-w-lg mx-auto">

12
docs/source/_layouts/master.blade.php
View File

@ -28,11 +28,17 @@
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
docsearch({
// appId: 'FMDGKF8GP7',
apiKey: '3df93446658cd9c4e314d4c02a052188',
indexName: 'tailwindcss',
inputSelector: '#searchbox',
debug: true // Set debug to true if you want to inspect the dropdown
inputSelector: '#searchbox'
});
// 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>