FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Use <input type="search"> for search bar

Browse source
This commit is contained in:
silverpill 2023-02-19 19:02:36 +00:00
parent 318bbbdf7d
commit 7b2c4e83a5
2 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGELOG.md
View file

@ -9,7 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Changed ### Changed
- Remove invisible characters from display names. - Remove invisible characters from display names.
- Use `/api/v1/{status_id}/thread` API endpoint to load threads. - Use `/api/v1/statuses/{status_id}/thread` API endpoint to load threads.
- Use `<input type="search">` for search bar.
## [1.13.0] - 2023-02-06 ## [1.13.0] - 2023-02-06

9
src/components/Search.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<form class="search" @submit.prevent="search()"> <form class="search" @submit.prevent="search()">
<input type="text" placeholder="Search..." v-model="q"> <input type="search" placeholder="Search..." v-model="q">
<button v-if="q" type="button" @click="clear()"> <button v-if="q" type="button" @click="clear()">
<img :src="require('@/assets/feather/delete.svg')"> <img :src="require('@/assets/feather/delete.svg')">
</button> </button>
@ -38,7 +38,8 @@ function search() {
padding: 7px 15px; padding: 7px 15px;
} }
input { input[type="search"] {
appearance: none;
background-color: transparent; background-color: transparent;
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
@ -48,6 +49,10 @@ input {
padding: 0; padding: 0;
} }
input[type="search"]::-webkit-search-cancel-button {
appearance: none;
}
button { button {
border-radius: 0 $btn-border-radius $btn-border-radius 0; border-radius: 0 $btn-border-radius $btn-border-radius 0;
font-size: 15px; font-size: 15px;