From c5fae8426358c511bb8b66f01c931094e7418812 Mon Sep 17 00:00:00 2001
From: syeopite <syeopite@syeopite.dev>
Date: Fri, 2 Apr 2021 01:03:26 -0700
Subject: [PATCH] Add functionality to read more button

---
 assets/css/default.css        | 25 +++++++++++++++++++++++++
 src/invidious/views/watch.ecr | 26 +++++++++++++++++++-------
 2 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index a725b456..919f13ec 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -669,3 +669,28 @@ See https://stackoverflow.com/a/34372979 for more info */
 hr {
   margin: auto 0 auto 0;
 }
+
+/* Description Expandsion Styling*/
+#description-box {
+  display: flex;
+  flex-direction: column;
+}
+
+#readmorebutton {
+  display: none
+}
+
+#readmorebutton ~ div {
+  overflow: hidden;
+  height: 8.3em;
+}
+
+#readmorebutton:checked ~ div {
+  overflow: unset;
+  height: 100%;
+}
+
+#readmorebutton + label {
+  order: 1;
+  margin-top: 20px;
+}
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 788b0dcb..90a20335 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -25,6 +25,19 @@
 <link rel="alternate" href="https://www.youtube.com/watch?v=<%= video.id %>">
 <%= rendered "components/player_sources" %>
 <title><%= HTML.escape(video.title) %> - Invidious</title>
+
+<!-- Description expandsion also updates the Read More button to Read Less so
+we're going to need to do it here in order to allow for translations.
+ -->
+<style>
+#readmorebutton + label > a::after {
+    content: "<%= translate(locale, "Read more") %>"
+}
+
+#readmorebutton:checked + label > a::after {
+    content: "<%= translate(locale, "Read less") %>"
+}
+</style>
 <% end %>
 
 <script id="video_data" type="application/json">
@@ -227,18 +240,17 @@
                 <% end %>
             </p>
 
-            <div>
+            <div id="description-box"> <!-- Description -->
                 <% if video.description.size < 200 || params.extend_desc %>
                     <%= video.description_html %>
                 <% else %>
-                    <div style="overflow: hidden;height: 8.3em;" id="descriptionWrapper">
+                    <input id="readmorebutton" type="checkbox"/>
+                    <label for="readmorebutton" style="order: 1;" class="simulated_a">
+                        <a></a>
+                    </label>
+                    <div id="descriptionWrapper">
                         <%= video.description_html %>
                     </div>
-                    <div class="pure-u-23-24">
-                        <p>
-                            <a href="javascript:void(0)" onclick="read_more_description(this)"><%= translate(locale, "Read more") %></a>
-                        </p>
-                    </div>
                 <% end %>
             </div>