From f2039d6dcf32bd964a312c8882148a3e02ac65b5 Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Thu, 24 Jun 2021 10:57:45 -0700
Subject: [PATCH] Move sorting options to separate bar

---
 assets/css/channel.css                        |  5 ++
 .../views/components/channel-information.ecr  | 59 +++++++++----------
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/assets/css/channel.css b/assets/css/channel.css
index 90ecd25c..6fb95c1a 100644
--- a/assets/css/channel.css
+++ b/assets/css/channel.css
@@ -179,3 +179,8 @@ only show up when the screen is wide enough */
 .light-theme .trailer-timestamp {
   color: rgb(127, 127, 127);
 }
+
+
+#content-navigation {
+  display: flex;
+}
\ No newline at end of file
diff --git a/src/invidious/views/components/channel-information.ecr b/src/invidious/views/components/channel-information.ecr
index 9759a8e7..56854668 100644
--- a/src/invidious/views/components/channel-information.ecr
+++ b/src/invidious/views/components/channel-information.ecr
@@ -52,8 +52,8 @@
     <%= rendered "components/subscribe_widget" %>
 </div>
 
-<div class="pure-g h-box" id="content-navigation">
-    <div class="pure-u-1-3">
+<div class="h-box" id="content-navigation">
+    <div class="">
         <!-- TODO Add these!
         <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> -->
@@ -164,36 +164,33 @@
           </ui>
         </div>
     </div>
-    <div class="pure-u-1-3"></div>
-
-    <% if content_type == 1 || content_type == 2 %>
-        <% route = content_type == 1 ? "/playlists" : "" %>
-        <% url = "/channel/#{channel.ucid + route}" %>
-
-        <div class="pure-u-1-3"> <!-- Sort by -->
-            <div class="pure-menu pure-menu-horizontal" style="">
-                <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">
-                                <a class="pure-menu-link" href="<%= url %>?sort_by=<%= sort %>">
-                                    <b><%= translate(locale, sort) %></b>
-                                </a>
-                            </li>
-                        <% else %>
-                            <li class="pure-menu-item">
-                                <a class="pure-menu-link" href="<%= url %>?sort_by=<%= sort %>">
-                                    <%= translate(locale, sort) %>
-                                </a>
-                            </li>
-                        <% end %>
-                    <% end %>
-                </ul>
-            </div>
-        </div>
-    <% end %>
 </div>
 
 <div class="h-box">
     <hr>
-</div>
+    <% if content_type == 1 || content_type == 2 %>
+        <% route = content_type == 1 ? "/playlists" : "" %>
+        <% url = "/channel/#{channel.ucid + route}" %>
+
+        <div class="pure-menu pure-menu-horizontal" style="display: flex;">
+            <ul class="pure-menu-list" style="margin-left: auto;">
+                <% sort_options.each do |sort| %>
+                    <% if sort_by == sort %>
+                        <li class="pure-menu-item pure-menu-selected">
+                            <a class="pure-menu-link" href="<%= url %>?sort_by=<%= sort %>">
+                                <b><%= translate(locale, sort) %></b>
+                            </a>
+                        </li>
+                    <% else %>
+                        <li class="pure-menu-item">
+                            <a class="pure-menu-link" href="<%= url %>?sort_by=<%= sort %>">
+                                <%= translate(locale, sort) %>
+                            </a>
+                        </li>
+                    <% end %>
+                <% end %>
+            </ul>
+        </div>
+    <% end %>
+    <hr>
+</div>
\ No newline at end of file