From 68cbc11810fd746a776f6b8fefd61cec89ac9b55 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Tue, 7 Dec 2021 04:30:05 +0100 Subject: [PATCH] Fix the search box Fix #277 : autoselect search field Fix #1107: no spell checking/auto-correct on search field --- assets/css/default.css | 34 ++++++++----------- src/invidious/views/components/search_box.ecr | 9 +++++ src/invidious/views/search_homepage.ecr | 6 +--- src/invidious/views/template.ecr | 6 +--- 4 files changed, 25 insertions(+), 30 deletions(-) create mode 100644 src/invidious/views/components/search_box.ecr diff --git a/assets/css/default.css b/assets/css/default.css index 95c1f55c..2cda980c 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -192,20 +192,24 @@ img.thumbnail { display: inline; } -.searchbar .pure-form input[type="search"] { - margin-bottom: 1px; +.searchbar .pure-form fieldset { padding: 0; } - border-top: 0; - border-left: 0; - border-right: 0; - border-bottom: 1px solid #ccc; - border-radius: 0; +.searchbar input[type="search"] { + width: 100%; + margin: 1px; - padding: initial 0; + border: 1px solid; + border-color: #0000 #0000 #CCC #0000; + border-radius: 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 */ @@ -217,16 +221,6 @@ input[type="search"]::-webkit-search-cancel-button { 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 { display: flex; flex-direction: row; diff --git a/src/invidious/views/components/search_box.ecr b/src/invidious/views/components/search_box.ecr new file mode 100644 index 00000000..4144d161 --- /dev/null +++ b/src/invidious/views/components/search_box.ecr @@ -0,0 +1,9 @@ +
+
+ " + title="<%= translate(locale, "search") %>" + value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>"> +
+
diff --git a/src/invidious/views/search_homepage.ecr b/src/invidious/views/search_homepage.ecr index 7d2dab83..45561d1e 100644 --- a/src/invidious/views/search_homepage.ecr +++ b/src/invidious/views/search_homepage.ecr @@ -14,11 +14,7 @@
diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr index 5b6e6ab8..efa434bf 100644 --- a/src/invidious/views/template.ecr +++ b/src/invidious/views/template.ecr @@ -35,11 +35,7 @@ Invidious <% end %>