Archives/invidious
2
0
Fork 0
mirror of https://github.com/iv-org/invidious synced 2024-11-03 03:40:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the search box

Browse Source 
Fix #277 : autoselect search field
Fix #1107: no spell checking/auto-correct on search field
This commit is contained in:
Samantaz Fox 2021-12-07 04:30:05 +01:00
parent 4f219362fe
commit 68cbc11810
No known key found for this signature in database
GPG Key ID: F42821059186176E
4 changed files with 25 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/css/default.css
View File

@ -192,22 +192,26 @@ img.thumbnail {
display: inline; display: inline;
} }
.searchbar .pure-form input[type="search"] { .searchbar .pure-form fieldset { padding: 0; }
margin-bottom: 1px;
border-top: 0; .searchbar input[type="search"] {
border-left: 0; width: 100%;
border-right: 0; margin: 1px;
border-bottom: 1px solid #ccc;
border: 1px solid;
border-color: #0000 #0000 #CCC #0000;
border-radius: 0; border-radius: 0;
padding: initial 0;
box-shadow: none; box-shadow: none;
-webkit-appearance: none; -webkit-appearance: none;
} }
.searchbar input[type="search"]:focus {
margin: 0 0 0.5px 0;
border: 2px solid;
border-color: #0000 #0000 #FED #0000;
}
/* https://stackoverflow.com/a/55170420 */ /* https://stackoverflow.com/a/55170420 */
input[type="search"]::-webkit-search-cancel-button { input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none; -webkit-appearance: none;
@ -217,16 +221,6 @@ input[type="search"]::-webkit-search-cancel-button {
background-size: 14px; background-size: 14px;
} }
.searchbar .pure-form fieldset {
padding: 0;
}
/* attract focus to the searchbar by adding a subtle transition */
.searchbar .pure-form input[type="search"]:focus {
margin-bottom: 0px;
border-bottom: 2px solid #aaa;
}
.user-field { .user-field {
display: flex; display: flex;
flex-direction: row; flex-direction: row;

9
src/invidious/views/components/search_box.ecr Normal file
View File

@ -0,0 +1,9 @@
<form class="pure-form" action="/search" method="get">
<fieldset>
<input type="search" id="searchbox" autocomplete="off" autocorrect="off"
autocapitalize="none" spellcheck="false" autofocus name="q"
placeholder="<%= translate(locale, "search") %>"
title="<%= translate(locale, "search") %>"
value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
</fieldset>
</form>

6
src/invidious/views/search_homepage.ecr
View File

@ -14,11 +14,7 @@
</div> </div>
<div class="pure-u-1-4"></div> <div class="pure-u-1-4"></div>
<div class="pure-u-1 pure-u-md-12-24 searchbar"> <div class="pure-u-1 pure-u-md-12-24 searchbar">
<form class="pure-form" action="/search" method="get"> <%= rendered "components/search_box" %>
<fieldset>
<input autofocus type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
</fieldset>
</form>
</div> </div>
<div class="pure-u-1-4"></div> <div class="pure-u-1-4"></div>
</div> </div>

6
src/invidious/views/template.ecr
View File

@ -35,11 +35,7 @@
<a href="/" class="index-link pure-menu-heading">Invidious</a> <a href="/" class="index-link pure-menu-heading">Invidious</a>
</div> </div>
<div class="pure-u-1 pure-u-md-12-24 searchbar"> <div class="pure-u-1 pure-u-md-12-24 searchbar">
<form class="pure-form" action="/search" method="get"> <%= rendered "components/search_box" %>
<fieldset>
<input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
</fieldset>
</form>
</div> </div>
<% end %> <% end %>