TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1766 from Bnyro/clear-search

Browse source 
Add a clear search button
This commit is contained in:
Bnyro 2022-11-17 11:47:38 +01:00 committed by GitHub
commit e186bed3f0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/NavBar.vue
View file

@ -11,10 +11,10 @@
/>iped</router-link />iped</router-link
> >
</div> </div>
<div class="lt-md:hidden"> <div class="lt-md:hidden search-container">
<input <input
v-model="searchText" v-model="searchText"
class="input w-72 h-10" class="input w-72 h-10 pr-20"
type="text" type="text"
role="search" role="search"
ref="videoSearch" ref="videoSearch"
@ -25,6 +25,7 @@
@focus="onInputFocus" @focus="onInputFocus"
@blur="onInputBlur" @blur="onInputBlur"
/> />
<span v-if="searchText" class="delete-search" @click="searchText = ''">x</span>
</div> </div>
<!-- three vertical lines for toggling the hamburger menu on mobile --> <!-- three vertical lines for toggling the hamburger menu on mobile -->
<button class="md:hidden flex flex-col justify-end mr-3" @click="showTopNav = !showTopNav"> <button class="md:hidden flex flex-col justify-end mr-3" @click="showTopNav = !showTopNav">
@ -86,7 +87,7 @@
</li> </li>
</ul> </ul>
<!-- search suggestions for mobile devices --> <!-- search suggestions for mobile devices -->
<div class="w-{full - 4} md:hidden mx-2"> <div class="mobile-search md:hidden mx-2 search-container">
<input <input
v-model="searchText" v-model="searchText"
class="input h-10 w-full" class="input h-10 w-full"
@ -99,6 +100,7 @@
@focus="onInputFocus" @focus="onInputFocus"
@blur="onInputBlur" @blur="onInputBlur"
/> />
<span v-if="searchText" class="delete-search" @click="searchText = ''">x</span>
</div> </div>
<SearchSuggestions <SearchSuggestions
v-show="(searchText || showSearchHistory) && suggestionsVisible" v-show="(searchText || showSearchHistory) && suggestionsVisible"
@ -178,3 +180,17 @@ export default {
}, },
}; };
</script> </script>
<style>
.search-container {
@apply relative inline-flex items-center;
}
.delete-search {
@apply absolute right-3 cursor-pointer rounded-full bg-[#ccc] w-4 h-4 text-center text-black opacity-50 hover:(opacity-70) text-size-[13px];
line-height: 1.05;
}
.mobile-search {
width: calc(100% - 1rem);
@apply mx-2;
}
</style>