HTML: Reorder buttons on the channel and watch pages

3 files changed, 34 insertions, 30 deletions

diff --git a/src/invidious/views/components/channel_info.ecr b/src/invidious/views/components/channel_info.ecr
index 59888760..f4164f31 100644
--- a/src/invidious/views/components/channel_info.ecr
+++ b/src/invidious/views/components/channel_info.ecr
@@ -8,29 +8,30 @@
     </div>
 <% end %>
 
-<div class="pure-g h-box">
-    <div class="pure-u-2-3">
+<div class="pure-g h-box flexible title">
+    <div class="pure-u-1-2 flex-left flexible">
         <div class="channel-profile">
             <img src="/ggpht<%= channel_profile_pic %>" alt="" />
             <span><%= author %></span><% if !channel.verified.nil? && channel.verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %>
         </div>
     </div>
-    <div class="pure-u-1-3">
-        <h3 style="text-align:right">
-            <a href="/feed/channel/<%= ucid %>"><i class="icon ion-logo-rss"></i></a>
-        </h3>
-    </div>
-</div>
 
-<div class="h-box">
-    <div id="descriptionWrapper">
-        <p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
+    <div class="pure-u-1-2 flex-right flexible button-container">
+        <div class="pure-u">
+            <% sub_count_text = number_to_short_text(channel.sub_count) %>
+            <%= rendered "components/subscribe_widget" %>
+        </div>
+
+        <div class="pure-u">
+            <a class="pure-button pure-button-secondary" dir="auto" href="/feed/channel/<%= ucid %>">
+                <i class="icon ion-logo-rss"></i>&nbsp;<%= translate(locale, "generic_button_rss") %>
+            </a>
+        </div>
     </div>
 </div>
 
 <div class="h-box">
-    <% sub_count_text = number_to_short_text(channel.sub_count) %>
-    <%= rendered "components/subscribe_widget" %>
+    <div id="descriptionWrapper"><p><span style="white-space:pre-wrap"><%= channel.description_html %></span></p></div>
 </div>
 
 <div class="pure-g h-box">
diff --git a/src/invidious/views/components/subscribe_widget.ecr b/src/invidious/views/components/subscribe_widget.ecr
index b9d5f783..05e4e253 100644
--- a/src/invidious/views/components/subscribe_widget.ecr
+++ b/src/invidious/views/components/subscribe_widget.ecr
@@ -1,22 +1,18 @@
 <% if user %>
     <% if subscriptions.includes? ucid %>
-        <p>
             <form action="/subscription_ajax?action_remove_subscriptions=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post">
                 <input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
                 <button data-type="unsubscribe" id="subscribe" class="pure-button pure-button-primary">
                     <b><input style="all:unset" type="submit" value="<%= translate(locale, "Unsubscribe") %> | <%= sub_count_text %>"></b>
                 </button>
             </form>
-        </p>
     <% else %>
-        <p>
             <form action="/subscription_ajax?action_create_subscription_to_channel=1&c=<%= ucid %>&referer=<%= env.get("current_page") %>" method="post">
                 <input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
                 <button data-type="subscribe" id="subscribe" class="pure-button pure-button-primary">
                     <b><input style="all:unset" type="submit" value="<%= translate(locale, "Subscribe") %> | <%= sub_count_text %>"></b>
                 </button>
             </form>
-        </p>
     <% end %>
 
     <script id="subscribe_data" type="application/json">
@@ -33,10 +29,8 @@
     </script>
     <script src="/js/subscribe_widget.js?v=<%= ASSET_COMMIT %>"></script>
 <% else %>
-    <p>
         <a id="subscribe" class="pure-button pure-button-primary"
             href="/login?referer=<%= env.get("current_page") %>">
             <b><%= translate(locale, "Subscribe") %> | <%= sub_count_text %></b>
         </a>
-    </p>
 <% end %>
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 5b3190f3..4f4354a9 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -204,19 +204,28 @@ we're going to need to do it here in order to allow for translations.
     </div>
 
     <div class="pure-u-1 <% if params.related_videos || plid %>pure-u-lg-3-5<% else %>pure-u-md-4-5<% end %>">
-        <div class="h-box">
-            <a href="/channel/<%= video.ucid %>" style="display:block;width:fit-content;width:-moz-fit-content">
-                <div class="channel-profile">
-                    <% if !video.author_thumbnail.empty? %>
-                        <img src="/ggpht<%= URI.parse(video.author_thumbnail).request_target %>" alt="" />
-                    <% end %>
-                    <span id="channel-name"><%= author %><% if !video.author_verified.nil? && video.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></span>
-                </div>
-            </a>
 
-            <% sub_count_text = video.sub_count_text %>
-            <%= rendered "components/subscribe_widget" %>
+        <div class="pure-g h-box flexible title">
+            <div class="pure-u-1-2 flex-left flexible">
+                <a href="/channel/<%= video.ucid %>">
+                    <div class="channel-profile">
+                        <% if !video.author_thumbnail.empty? %>
+                            <img src="/ggpht<%= URI.parse(video.author_thumbnail).request_target %>" alt="" />
+                        <% end %>
+                        <span id="channel-name"><%= author %><% if !video.author_verified.nil? && video.author_verified %>&nbsp;<i class="icon ion ion-md-checkmark-circle"></i><% end %></span>
+                    </div>
+                </a>
+            </div>
 
+            <div class="pure-u-1-2 flex-right flexible button-container">
+                <div class="pure-u">
+                    <% sub_count_text = video.sub_count_text %>
+                    <%= rendered "components/subscribe_widget" %>
+                </div>
+            </div>
+        </div>
+
+        <div class="h-box">
             <p id="published-date">
                 <% if video.premiere_timestamp.try &.> Time.utc %>
                     <b><%= video.premiere_timestamp.try { |t| translate(locale, "Premieres `x`", t.to_s("%B %-d, %R UTC")) } %></b>