stancl/tenancy-docs
1
0
Fork 0
mirror of https://github.com/stancl/tenancy-docs.git synced 2025-12-12 02:04:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show search on mobile (#69)

Browse source 
* Show search on mobile

* Remove newline
This commit is contained in:
Ostap B 2020-08-17 14:14:18 +03:00 • committed by GitHub
parent b40d9dc633
commit 3915af0d8d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
source/_nav/search-input.blade.php
View file

@ -7,7 +7,7 @@
<img src="/docs/assets/img/magnifying-glass.svg" alt="search icon" class="max-w-none w-4 h-4">
</button> --}}
<div id="js-search-input" class="lg:px-6 lg:w-3/4 xl:px-12 flex-grow w-full">
<div id="js-search-input" class="hidden md:block pt-6 lg:pt-0 lg:px-6 lg:w-3/4 xl:px-12 flex-grow w-full">
<div class=" relative rounded-md">
<span class="algolia-autocomplete algolia-autocomplete-right" style="position: relative; display: inline-block; direction: ltr;"><input id="docsearch" class="focus:outline-0 ds-input block w-full py-2 pl-10 pr-4 leading-normal placeholder-gray-600 transition-colors duration-100 ease-in-out bg-gray-100 border border-transparent rounded-md" type="text" placeholder="Search the documentation" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-label="search input" aria-owns="algolia-autocomplete-listbox-0" style="position: relative; vertical-align: top;" dir="auto"><pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: Inter var, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: optimizelegibility; text-transform: none;">min</pre><span class="ds-dropdown-menu ds-with-1" style="position: absolute; top: 100%; z-index: 100; left: 0px; right: auto; display: none;" role="listbox" id="algolia-autocomplete-listbox-0"><div class="ds-dataset-1"></div></span></span>
<div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">

18
source/_partials/header-docs.blade.php
View file

@ -1,11 +1,11 @@
<div x-data="navMenu()" class="relative bg-white" data-turbolinks-permanent>
<div class="sm:px-6 md:justify-start md:space-x-10 flex items-center justify-between px-4 pt-3 pb-6">
<div class="lg:w-0 lg:flex-1">
<div class="sm:px-6 md:justify-start md:space-x-10 flex flex-wrap items-center justify-between px-4 pt-3 pb-2 lg:pb-6">
<div class="flex-grow lg:w-0 lg:flex-1">
<a href="{{ $page->baseUrl }}" class="flex" data-turbolinks="false">
<img src="/assets/img/tenancyforlaravel.svg" alt="" style="height: 70px">
</a>
</div>
<div class="md:hidden -my-2 -mr-2">
<div class="flex-grow md:hidden -my-2 -mr-2 flex justify-end">
<button @click="toggle()" type="button"
class="hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 inline-flex items-center justify-center p-2 text-gray-400 transition duration-150 ease-in-out rounded-md">
<svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
@ -13,7 +13,7 @@
</svg>
</button>
</div>
<nav class="md:flex flex-grow hidden">
<nav class="flex-basis-full md:flex-basis-auto md:flex flex-grow">
@include('_nav.search-input')
</nav>
<div class="md:flex md:flex-1 lg:w-0 items-center justify-end hidden space-x-8">
@ -72,11 +72,13 @@
toggle() {
const menu = document.getElementById('js-nav-menu');
menu.classList.toggle('hidden');
menu.classList.toggle('lg:block');
mobileMenuOpen = !mobileMenuOpen;
menu.classList.toggle('block')
const search = document.getElementById('js-search-input');
search.classList.toggle('hidden');
this.mobileMenuOpen = !this.mobileMenuOpen;
},
}
}
</script>