Enhance chan about page to show channel description

assets/css/channel.css

@@ -23,8 +23,19 @@
   #link-holder {
     display: none;
   }
+
+  #about-content-container > *  {
+    margin-bottom: 25px;
+  }
 }
 
+@media screen and (min-width: 640px) {
+  #about-content-container > *  {
+    margin-bottom: 50px;
+  }
+}
+
+
 #link-widget-primary {
   margin-right: 1.5em;
 }
@@ -51,6 +62,8 @@
   color: #e1e1e1 !important;
 }
 
+
+
 /* Featured channels page */
 
 .channel-section details {

locales/ar.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/de.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/el.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/en-US.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "After which you should try to: ",
     "next_steps_error_message_refresh": "Refresh",
     "next_steps_error_message_go_to_youtube": "Go to Youtube",
+    "Description": "Description",
     "Details": "Details",
     "Country: ": "Country: ",
     "Stats": "Stats",

locales/eo.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/es.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/fa.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/fi.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/fr.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/he.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/hr.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/id.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "next_steps_error_message",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/is.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/it.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/ja.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/nb-NO.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/nl.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/pl.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/pt-BR.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/pt-PT.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/ro.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/ru.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/sv-SE.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/tr.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/uk.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/zh-CN.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

locales/zh-TW.json

@@ -425,6 +425,7 @@
     "next_steps_error_message": "",
     "next_steps_error_message_refresh": "",
     "next_steps_error_message_go_to_youtube": "",
+    "Description": "",
     "Details": "",
     "Country: ": "",
     "Stats": "",

src/invidious/views/channel/about.ecr

@@ -1,46 +1,50 @@
 <% content_for "header" do %>
 <title><%= channel.author %> - Invidious</title>
 <link rel="stylesheet" href="/css/channel.css?v=<%= ASSET_COMMIT %>">
+
+<!-- Channel description on the header should always be hidden on the about page -->
+<style>
+  #channel-description-container {
+    display: none
+  }
+</style>
+
 <% end %>
 
 <% content_type =  5 %>
 <% sort_options = Tuple.new %>
 <%= rendered "components/channel-information" %>
 
-<div class="pure-g">
+<div class="pure-g h-box" id="about-content-container">
-    <% stats_style_append = ""%>
+    <div class="pure-u-1 pure-u-md-3-4">
-    <% if !channel.country.empty? %>
+        <h3> <%= translate(locale, "Description") %> </h3>
-        <div class="pure-u-1 pure-u-md-3-4">
+        <p id="channel-description" class="pure-u-md-22-24" style="margin: 0"><span style="white-space:pre-wrap"><%= channel.description_html %></span></p>
-            <div class="h-box">
-                <h3> <%= translate(locale, "Details") %> </h3>
-                <p><%= translate(locale, "Country: ") %><%=channel.country%></p> <!-- Translate Country Names -->
-            </div>
-        </div>
-    <% else %>
-        <% stats_style_append = "style=\"order: 1;\"" %>
-    <% end %>
-
-    <div class="pure-u-1 pure-u-md-1-4" <%= stats_style_append %>>
-        <div class="h-box">
-            <h3> <%= translate(locale, "Stats") %> </h3>
-            <p> <%= translate(locale, "Joined") %>
-                <time datetime="<%=channel.joined.to_s("%Y-%m-%d")%>">
-                    <%= channel.joined.to_s(translate(locale, "%B %-d, %Y")) %>
-                </time>
-            </p>
-            <p><%= channel.total_views ? translate(locale, "`x` views", number_with_separator(channel.total_views || 0)) : "" %></p>
-        </div>
     </div>
 
-    <div class="pure-u-1 pure-u-md-2-3" id="external-links">
+    <div class="pure-u-1 pure-u-md-1-4">
-        <div class="h-box">
+        <h3> <%= translate(locale, "Stats") %> </h3>
+        <p> <%= translate(locale, "Joined") %>
+            <time datetime="<%=channel.joined.to_s("%Y-%m-%d")%>">
+                <%= channel.joined.to_s(translate(locale, "%B %-d, %Y")) %>
+            </time>
+        </p>
+        <p><%= channel.total_views ? translate(locale, "`x` views", number_with_separator(channel.total_views || 0)) : "" %></p>
+    </div>
+
+    <div class="pure-u-1 pure-u-md-3-4">
+        <h3> <%= translate(locale, "Details") %> </h3>
+        <p><%= translate(locale, "Country: ") %><%=channel.country%></p> <!-- Translate Country Names -->
+    </div>
+
+    <% if !channel.links.empty? %>
+        <div class="pure-u-1 pure-u-md-2-3" id="external-links">
             <h3> <%= translate(locale, "Links") %> </h3>
             <% channel.links.each do |link_tuple| %>
                 <div class="pure-u-11-24" style="margin-bottom: 2em;">
                     <img src="/fetch_link_favicon?url=<%=link_tuple[2]%>">
-                    <a href="<%=link_tuple[1]%>"><%=link_tuple[0]%></a>
+                    <a href="<%=link_tuple[1]%>"><%=HTML.escape(link_tuple[0])%></a>
                 </div>
             <% end %>
         </div>
-    </div>
+    <% end %>
 </div>