From 5b81d429eae9bc05ec160690c0e28503278ea79f Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Mon, 29 Mar 2021 11:31:41 -0700
Subject: [PATCH] Refactor channel sorting links to dropdown

---
 src/invidious/views/channel.ecr | 37 +++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/invidious/views/channel.ecr b/src/invidious/views/channel.ecr
index a996f283..232342c8 100644
--- a/src/invidious/views/channel.ecr
+++ b/src/invidious/views/channel.ecr
@@ -74,19 +74,30 @@
         </div>
     </div>
     <div class="pure-u-1-3"></div>
-    <div class="pure-u-1-3">
-        <div class="pure-g" style="text-align:right">
-            <% sort_options.each do |sort| %>
-                <div class="pure-u-1 pure-md-1-3">
-                    <% if sort_by == sort %>
-                        <b><%= translate(locale, sort) %></b>
-                    <% else %>
-                        <a href="/channel/<%= ucid %>?page=<%= page %>&sort_by=<%= sort %>">
-                            <%= translate(locale, sort) %>
-                        </a>
-                    <% end %>
-                </div>
-            <% end %>
+    <div class="pure-u-1-3"> <!-- Sort by -->
+        <div class="pure-menu pure-menu-horizontal" style="">
+            <ul class="pure-menu-list", style="float: right">
+                <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
+                    <a class="pure-menu-link">Sort By</a> <!-- Translate! -->
+                    <ul class="pure-menu-children">
+                        <% sort_options.each do |sort| %>
+                              <% if sort_by == sort %>
+                                  <li class="pure-menu-item pure-menu-selected">
+                                      <a class="pure-menu-link" href="/channel/<%= channel.ucid %>?page=<%= page %>&sort_by=<%= sort %>">
+                                          <b><%= translate(locale, sort) %></b>
+                                      </a>
+                                  </li>
+                              <% else %>
+                                  <li class="pure-menu-item">
+                                      <a class="pure-menu-link" href="/channel/<%= channel.ucid %>?page=<%= page %>&sort_by=<%= sort %>">
+                                          <%= translate(locale, sort) %>
+                                      </a>
+                                  </li>
+                              <% end %>
+                        <% end %>
+                    </ul>
+                </li>
+            </ul>
         </div>
     </div>
 </div>