From 070ccd745f9042395168780e3199b92c6f9634a8 Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Sat, 10 Apr 2021 03:05:48 -0700
Subject: [PATCH] Add search bar to channel page.

Closes #1923

(cherry picked from commit e93d8bee22bac4670bf79cfab82ab5e6eebae089)
---
 assets/css/default.css          | 19 +++++++++++++++++++
 src/invidious/views/channel.ecr | 13 ++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index 1b7e5993..0d9189db 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -164,6 +164,13 @@ img.thumbnail {
   top: -0.7em;
 }
 
+.search-button {
+    border: none;
+    color: #3E4446;
+    background: transparent;
+    font-size: 1.1em;
+}
+
 /*
  * Navbar
  */
@@ -442,6 +449,13 @@ body.dark-theme {
   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 {
   background-color: rgb(34, 36, 38)
 }
@@ -540,3 +554,8 @@ p,
 
 /* Center the "invidious" logo on the search page */
 #logo > h1 { text-align: center; }
+
+
+#content-navigation {
+    margin-bottom: 0.5em;
+}
diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr
index 47c1bd49..f285358e 100644
--- a/src/invidious/views/channel.ecr
+++ b/src/invidious/views/channel.ecr
@@ -41,7 +41,7 @@
     <%= rendered "components/subscribe_widget" %>
 </div>
 
-<div class="pure-g h-box">
+<div class="pure-g h-box" id="content-navigation">
     <div class="pure-u-1-3">
         <!-- <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> -->
@@ -70,6 +70,17 @@
                       </a>
                   <% end %>
               </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>
         </div>
     </div>