diff options
| author | Samantaz Fox <coding@samantaz.fr> | 2024-08-24 19:38:48 +0200 |
|---|---|---|
| committer | Samantaz Fox <coding@samantaz.fr> | 2024-08-24 19:38:48 +0200 |
| commit | febf18cbf724715101e55e261062c23691ff39ad (patch) | |
| tree | 8e81c9484f6e4c2741c9ff1bc3f27c44f9abd7bb | |
| parent | e319c35f097e08590e705378c7e5b479720deabc (diff) | |
| parent | b200ebfb6bc9de169d288c3d816332ea439fbdb6 (diff) | |
| download | invidious-febf18cbf724715101e55e261062c23691ff39ad.tar.gz invidious-febf18cbf724715101e55e261062c23691ff39ad.tar.bz2 invidious-febf18cbf724715101e55e261062c23691ff39ad.zip | |
UI: Add search button to search bar (#4706)
Closes issue 529
| -rw-r--r-- | assets/css/default.css | 19 | ||||
| -rw-r--r-- | src/invidious/views/components/search_box.ecr | 3 |
2 files changed, 21 insertions, 1 deletions
diff --git a/assets/css/default.css b/assets/css/default.css index a47762ec..2cedcf0c 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -278,7 +278,14 @@ div.thumbnail > .bottom-right-overlay { display: inline; } -.searchbar .pure-form fieldset { padding: 0; } +.searchbar .pure-form { + display: flex; +} + +.searchbar .pure-form fieldset { + padding: 0; + flex: 1; +} .searchbar input[type="search"] { width: 100%; @@ -310,6 +317,16 @@ input[type="search"]::-webkit-search-cancel-button { background-size: 14px; } +.searchbar #searchbutton { + border: none; + background: none; + margin-top: 0; +} + +.searchbar #searchbutton:hover { + color: rgb(0, 182, 240); +} + .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 index a03785d1..29da2c52 100644 --- a/src/invidious/views/components/search_box.ecr +++ b/src/invidious/views/components/search_box.ecr @@ -6,4 +6,7 @@ title="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>"> </fieldset> + <button type="submit" id="searchbutton" aria-label="<%= translate(locale, "search") %>"> + <i class="icon ion-ios-search"></i> + </button> </form> |