mirror of
https://github.com/iptv-org/iptv-org.github.io.git
synced 2025-05-11 17:40:05 -04:00
Added search button on mobile
This commit is contained in:
parent
ffc5290cb0
commit
63cbc15550
2 changed files with 47 additions and 7 deletions
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { query, hasQuery, search } from '~/store'
|
||||
import SearchButton from './SearchButton.svelte'
|
||||
import SearchFieldMini from './SearchFieldMini.svelte'
|
||||
import Divider from './Divider.svelte'
|
||||
import CreatePlaylistButton from './CreatePlaylistButton.svelte'
|
||||
|
@ -16,6 +17,10 @@
|
|||
hasQuery.set(false)
|
||||
search('')
|
||||
}
|
||||
|
||||
function scrollToTop() {
|
||||
document.body.scrollIntoView()
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav
|
||||
|
@ -43,13 +48,24 @@
|
|||
</div>
|
||||
|
||||
<div class="flex flex-end items-center space-x-4 pl-3">
|
||||
<CreatePlaylistButton
|
||||
on:click={() => {
|
||||
if ($page.url.pathname !== '/') {
|
||||
goto('/')
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div class="inline-flex space-x-2">
|
||||
{#if withSearch}
|
||||
<div class="block sm:hidden">
|
||||
<SearchButton
|
||||
on:click={() => {
|
||||
scrollToTop()
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<CreatePlaylistButton
|
||||
on:click={() => {
|
||||
if ($page.url.pathname !== '/') {
|
||||
goto('/')
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Divider />
|
||||
<div class="inline-flex space-x-2">
|
||||
<ToggleModeButton />
|
||||
|
|
24
src/components/SearchButton.svelte
Normal file
24
src/components/SearchButton.svelte
Normal file
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
import SquareButton from '~/components/SquareButton.svelte'
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<SquareButton
|
||||
on:click={() => {
|
||||
dispatch('click')
|
||||
}}
|
||||
aria-label="Go to search"
|
||||
title="Go to search"
|
||||
>
|
||||
<span class="inline">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||||
clip-rule="evenodd"
|
||||
></path>
|
||||
</svg>
|
||||
</span>
|
||||
</SquareButton>
|
Loading…
Add table
Add a link
Reference in a new issue