Enhance chan about page to show channel description

4 years ago · 5979e8f114
parent 4c18ecfcf2
commit 5979e8f114
29 changed files with 70 additions and 26 deletions
--- a/assets/css/channel.css
+++ b/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 {
--- a/locales/ar.json
+++ b/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": "",
--- a/locales/de.json
+++ b/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": "",
--- a/locales/el.json
+++ b/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": "",
--- a/locales/en-US.json
+++ b/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",
--- a/locales/eo.json
+++ b/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": "",
--- a/locales/es.json
+++ b/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": "",
--- a/locales/fa.json
+++ b/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": "",
--- a/locales/fi.json
+++ b/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": "",
--- a/locales/fr.json
+++ b/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": "",
--- a/locales/he.json
+++ b/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": "",
--- a/locales/hr.json
+++ b/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": "",
--- a/locales/id.json
+++ b/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": "",
--- a/locales/is.json
+++ b/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": "",
--- a/locales/it.json
+++ b/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": "",
--- a/locales/ja.json
+++ b/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": "",
--- a/locales/nb-NO.json
+++ b/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": "",
--- a/locales/nl.json
+++ b/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": "",
--- a/locales/pl.json
+++ b/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": "",
--- a/locales/pt-BR.json
+++ b/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": "",
--- a/locales/pt-PT.json
+++ b/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": "",
--- a/locales/ro.json
+++ b/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": "",
--- a/locales/ru.json
+++ b/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": "",
--- a/locales/sv-SE.json
+++ b/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": "",
--- a/locales/tr.json
+++ b/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": "",
--- a/locales/uk.json
+++ b/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": "",
--- a/locales/zh-CN.json
+++ b/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": "",
--- a/locales/zh-TW.json
+++ b/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": "",
--- a/src/invidious/views/channel/about.ecr
+++ b/src/invidious/views/channel/about.ecr
@ -1,27 +1,27 @@
 <% 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">
-    <% stats_style_append = ""%>
-    <% if !channel.country.empty? %>
+<div class="pure-g h-box" id="about-content-container">
    <div class="pure-u-1 pure-u-md-3-4">
-            <div class="h-box">
-                <h3> <%= translate(locale, "Details") %> </h3>
-                <p><%= translate(locale, "Country: ") %><%=channel.country%></p> <!-- Translate Country Names -->
-            </div>
+        <h3> <%= translate(locale, "Description") %> </h3>
+        <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>
-    <% 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">
+    <div class="pure-u-1 pure-u-md-1-4">
        <h3> <%= translate(locale, "Stats") %> </h3>
        <p> <%= translate(locale, "Joined") %>
            <time datetime="<%=channel.joined.to_s("%Y-%m-%d")%>">
@ -30,17 +30,21 @@
        </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">
-        <div class="h-box">
            <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>