Add search bar to channel page.

Closes #1923

(cherry picked from commit e93d8bee22)
This commit is contained in:
syeopite 2021-04-10 03:05:48 -07:00
parent e0fdf5bcf7
commit 070ccd745f
No known key found for this signature in database
GPG key ID: 6FA616E5A5294A82
2 changed files with 31 additions and 1 deletions

View file

@ -164,6 +164,13 @@ img.thumbnail {
top: -0.7em; top: -0.7em;
} }
.search-button {
border: none;
color: #3E4446;
background: transparent;
font-size: 1.1em;
}
/* /*
* Navbar * Navbar
*/ */
@ -442,6 +449,13 @@ body.dark-theme {
color: inherit; color: inherit;
} }
.dark-theme .search-button {
border: none;
color: #B0ADA4;
background: transparent;
font-size: 1.1em;
}
.dark-theme .pure-menu-link:hover, .dark-theme .pure-menu-link:active { .dark-theme .pure-menu-link:hover, .dark-theme .pure-menu-link:active {
background-color: rgb(34, 36, 38) background-color: rgb(34, 36, 38)
} }
@ -540,3 +554,8 @@ p,
/* Center the "invidious" logo on the search page */ /* Center the "invidious" logo on the search page */
#logo > h1 { text-align: center; } #logo > h1 { text-align: center; }
#content-navigation {
margin-bottom: 0.5em;
}

View file

@ -41,7 +41,7 @@
<%= rendered "components/subscribe_widget" %> <%= rendered "components/subscribe_widget" %>
</div> </div>
<div class="pure-g h-box"> <div class="pure-g h-box" id="content-navigation">
<div class="pure-u-1-3"> <div class="pure-u-1-3">
<!-- <a href="https://www.youtube.com/channel/<%= channel.ucid %>"><%= translate(locale, "View channel on YouTube") %></a> --> <!-- <a href="https://www.youtube.com/channel/<%= channel.ucid %>"><%= translate(locale, "View channel on YouTube") %></a> -->
<!-- <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a> --> <!-- <a href="/redirect?referer=<%= env.get?("current_page") %>"><%= translate(locale, "Switch Invidious Instance") %></a> -->
@ -70,6 +70,17 @@
</a> </a>
<% end %> <% end %>
</li> </li>
<li class="pure-menu-item navbar" style="margin: 0 0 0 0.5em">
<div class="searchbar">
<form class="pure-form" action="/search" method="get">
<fieldset>
<button class="search-button"><i class="icon ion-md-search"></i></button>
<input type="search" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
<input type="hidden" name="channel" value="<%= channel.ucid %>">
</fieldset>
</form>
</div>
</li>
</ui> </ui>
</div> </div>
</div> </div>