From 82d51429c1c3f6c8b63e0deff4bc968c0f515543 Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Tue, 13 Apr 2021 00:23:17 -0700
Subject: [PATCH] Improve styling for search filters

---
 assets/css/search.css                         |  25 ++-
 .../views/components/channel-information.ecr  |   2 +-
 src/invidious/views/search.ecr                | 182 +++++++++---------
 3 files changed, 116 insertions(+), 93 deletions(-)

diff --git a/assets/css/search.css b/assets/css/search.css
index 52880077..48d505b8 100644
--- a/assets/css/search.css
+++ b/assets/css/search.css
@@ -1,12 +1,7 @@
 #filters {
-  display: inline;
   margin-top: 15px;
 }
 
-#filters > div {
-  display: inline-block;
-}
-
 #filters > summary {
   display: block;
   margin-bottom: 15px;
@@ -22,6 +17,20 @@
   font-size: 1.5em;
 }
 
+#filters .pure-menu-item {
+  margin-top: 10px;
+}
+
+#filters hr {
+  width: 80%;
+  margin: 10px 0 15px 0 !important
+}
+
+.filter-catagory {
+  display: inline-block;
+  margin-bottom: 20px;
+}
+
 .remove-filter {
   margin-left: 6px;
   vertical-align: middle;
@@ -30,3 +39,9 @@
 .dark-theme .remove-filter {
   color: #CAC5BE
 }
+
+@media (prefers-color-scheme: dark) {
+  .no-theme .remove-filter {
+    color: #CAC5BE
+  }
+}
diff --git a/src/invidious/views/components/channel-information.ecr b/src/invidious/views/components/channel-information.ecr
index 6e636922..b6ed41e7 100644
--- a/src/invidious/views/components/channel-information.ecr
+++ b/src/invidious/views/components/channel-information.ecr
@@ -119,7 +119,7 @@
 
         <div class="pure-u-1-3"> <!-- Sort by -->
             <div class="pure-menu pure-menu-horizontal" style="">
-                <ul class="pure-menu-list", style="float: right">
+                <ul class="pure-menu-list" style="float: right">
                     <% sort_options.each do |sort| %>
                         <% if sort_by == sort %>
                             <li class="pure-menu-item pure-menu-selected">
diff --git a/src/invidious/views/search.ecr b/src/invidious/views/search.ecr
index 8d110e05..38d677ab 100644
--- a/src/invidious/views/search.ecr
+++ b/src/invidious/views/search.ecr
@@ -19,98 +19,106 @@
       <% filter_params = env.request.query_params.to_s.gsub(/q=.+?(?=&|$)/, "") %>
       <% base_url = "/search?q=#{HTML.escape(query.not_nil!)}" %>
 
-        <div class="pure-u-1-3 pure-u-md-1-5" id="filter-date">
-            <b><%= translate(locale, "date") %></b>
-            <hr/>
-            <% ["hour", "today", "week", "month", "year"].each do |date| %>
-                <div class="pure-u-1 pure-md-1-5">
-                    <% if operator_hash.fetch("date", "all") == date %>
-                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&date=[a-z]+/, "")}"%>">
-                            <b><%= translate(locale, date) %></b>
-                            <i class="remove-filter icon ion-md-close"></i>
-                        </a>
-                    <% else %>
-                        <a href="<%= base_url + "#{filter_params.gsub(/&date=[a-z]+/, "")}&date=#{date}"%>">
-                            <%= translate(locale, date) %>
-                        </a>
-                    <% end %>
-                </div>
-            <% end %>
-        </div>
+      <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-date">
+          <b><%= translate(locale, "date") %></b>
+          <hr/>
+          <ul class="pure-menu-list">
+              <% ["hour", "today", "week", "month", "year"].each do |date| %>
+                  <li class="pure-menu-item">
+                      <% if operator_hash.fetch("date", "all") == date %>
+                          <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&date=[a-z]+/, "")}"%>">
+                              <b><%= translate(locale, date) %></b>
+                              <i class="remove-filter icon ion-md-close"></i>
+                          </a>
+                      <% else %>
+                          <a href="<%= base_url + "#{filter_params.gsub(/&date=[a-z]+/, "")}&date=#{date}"%>">
+                              <%= translate(locale, date) %>
+                          </a>
+                      <% end %>
+                  </li>
+              <% end %>
+          </ul>
+      </div>
 
-        <div class="pure-u-1-3 pure-u-md-1-5" id="filter-content_type">
-            <b><%= translate(locale, "content_type") %></b>
-            <hr/>
-            <% ["video", "channel", "playlist", "movie", "show"].each do |content_type| %>
-                <div class="pure-u-1 pure-md-1-5">
-                    <% if operator_hash.fetch("content_type", "all") == content_type %>
-                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&content_type=[a-z]+/, "")}"%>">
-                            <b><%= translate(locale, content_type) %></b>
-                            <i class="remove-filter icon ion-md-close"></i>
-                        </a>
-                    <% else %>
-                        <a href="<%= base_url + "#{filter_params.gsub(/&content_type=[a-z]+/, "")}&content_type=#{content_type}"%>">
-                            <%= translate(locale, content_type) %>
-                        </a>
-                    <% end %>
-                </div>
-            <% end %>
-        </div>
+      <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-content_type">
+          <b><%= translate(locale, "content_type") %></b>
+          <hr/>
+          <ul class="pure-menu-list">
+              <% ["video", "channel", "playlist", "movie", "show"].each do |content_type| %>
+                  <li class="pure-menu-item">
+                      <% if operator_hash.fetch("content_type", "all") == content_type %>
+                          <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&content_type=[a-z]+/, "")}"%>">
+                              <b><%= translate(locale, content_type) %></b>
+                              <i class="remove-filter icon ion-md-close"></i>
+                          </a>
+                      <% else %>
+                          <a href="<%= base_url + "#{filter_params.gsub(/&content_type=[a-z]+/, "")}&content_type=#{content_type}"%>">
+                              <%= translate(locale, content_type) %>
+                          </a>
+                      <% end %>
+                  </li>
+              <% end %>
+          </ul>
+      </div>
 
-        <div class="pure-u-1-3 pure-u-md-1-5" id="filter-duration">
-            <b><%= translate(locale, "duration") %></b>
-            <hr/>
-            <% ["short", "long"].each do |duration| %>
-                <div class="pure-u-1 pure-md-1-5">
-                    <% if operator_hash.fetch("duration", "all") == duration %>
-                        <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&duration=[a-z]+/, "")}"%>">
-                            <b><%= translate(locale, duration) %></b>
-                            <i class="remove-filter icon ion-md-close"></i>
-                        </a>
-                    <% else %>
-                        <a href="<%= base_url + "#{filter_params.gsub(/&duration=[a-z]+/, "")}&duration=#{duration}"%>">
-                            <%= translate(locale, duration) %>
-                        </a>
-                    <% end %>
-                </div>
-            <% end %>
-        </div>
+      <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-duration">
+          <b><%= translate(locale, "duration") %></b>
+          <hr/>
+          <ul class="pure-menu-list">
+              <% ["short", "long"].each do |duration| %>
+                  <li class="pure-menu-item">
+                      <% if operator_hash.fetch("duration", "all") == duration %>
+                          <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&duration=[a-z]+/, "")}"%>">
+                              <b><%= translate(locale, duration) %></b>
+                              <i class="remove-filter icon ion-md-close"></i>
+                          </a>
+                      <% else %>
+                          <a href="<%= base_url + "#{filter_params.gsub(/&duration=[a-z]+/, "")}&duration=#{duration}"%>">
+                              <%= translate(locale, duration) %>
+                          </a>
+                      <% end %>
+                  </li>
+              <% end %>
+          </ul>
+      </div>
 
-        <div class="pure-u-1-3 pure-u-md-1-5" id="filter-features">
-            <b><%= translate(locale, "features") %></b>
-            <hr/>
-            <% ["hd", "subtitles", "creative_commons", "3d", "live", "purchased", "4k", "360", "location", "hdr"].each do |feature| %>
-                <div class="pure-u-1 pure-md-1-5">
-                    <% if operator_hash.fetch("features", "all").includes?(feature) %>
-                        <% if operator_hash["features"].split(",").size == 1 %>
-                            <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&features=[a-z]+/, "")}"%>">
-                                <b><%= translate(locale, feature) %></b>
-                                <i class="remove-filter icon ion-md-close"></i>
-                            </a>
-                        <% else %>
-                            <% data = filter_params.match(/.*features=.*(#{feature}(%2C|&|$)).*/).not_nil! %>
-                            <% start = data.begin(1) %>
-                            <% last =  data.end(1) %>
+      <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-features">
+          <b><%= translate(locale, "features") %></b>
+          <hr/>
+          <ul class="pure-menu-list">
+              <% ["hd", "subtitles", "creative_commons", "3d", "live", "purchased", "4k", "360", "location", "hdr"].each do |feature| %>
+                  <li class="pure-menu-item">
+                      <% if operator_hash.fetch("features", "all").includes?(feature) %>
+                          <% if operator_hash["features"].split(",").size == 1 %>
+                              <a style="color: inherit;" href="<%= base_url + "#{filter_params.gsub(/&features=[a-z]+/, "")}"%>">
+                                  <b><%= translate(locale, feature) %></b>
+                                  <i class="remove-filter icon ion-md-close"></i>
+                              </a>
+                          <% else %>
+                              <% data = filter_params.match(/.*features=.*(#{feature}(%2C|&|$)).*/).not_nil! %>
+                              <% start = data.begin(1) %>
+                              <% last =  data.end(1) %>
 
-                            <a style="color: inherit;" href="<%= base_url + "#{filter_params[0...start] + filter_params[last..-1]}"%>">
-                                <b><%= translate(locale, feature) %></b>
-                                <i class="remove-filter icon ion-md-close"></i>
-                            </a>
-                        <% end %>
-                    <% elsif operator_hash.has_key?("features") %>
-                        <a href="<%= base_url + filter_params.gsub(/features=/, "features=#{feature},")%>">
-                            <%= translate(locale, feature) %>
-                        </a>
-                    <% else %>
-                        <a href="<%= "#{base_url}#{filter_params}&features=#{feature}"%>">
-                            <%= translate(locale, feature) %>
-                        </a>
-                    <% end %>
-                </div>
-            <% end %>
-        </div>
+                              <a style="color: inherit;" href="<%= base_url + "#{filter_params[0...start] + filter_params[last..-1]}"%>">
+                                  <b><%= translate(locale, feature) %></b>
+                                  <i class="remove-filter icon ion-md-close"></i>
+                              </a>
+                          <% end %>
+                      <% elsif operator_hash.has_key?("features") %>
+                          <a href="<%= base_url + filter_params.gsub(/features=/, "features=#{feature},")%>">
+                              <%= translate(locale, feature) %>
+                          </a>
+                      <% else %>
+                          <a href="<%= "#{base_url}#{filter_params}&features=#{feature}"%>">
+                              <%= translate(locale, feature) %>
+                          </a>
+                      <% end %>
+                  </li>
+              <% end %>
+          </ul>
+      </div>
 
-        <div class="pure-u-1-3 pure-u-md-1-5" id="filter-sort">
+        <div class="pure-u-1-3 pure-u-md-1-5 filter-catagory" id="filter-sort">
             <b><%= translate(locale, "sort") %></b>
             <hr/>
             <% ["relevance", "rating", "date", "views"].each do |sort| %>