Add functionality to read more button

This commit is contained in:
syeopite 2021-04-02 01:03:26 -07:00
parent 533d0a1fd4
commit c5fae84263
No known key found for this signature in database
GPG key ID: 6FA616E5A5294A82
2 changed files with 44 additions and 7 deletions

View file

@ -669,3 +669,28 @@ See https://stackoverflow.com/a/34372979 for more info */
hr { hr {
margin: auto 0 auto 0; 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;
}

View file

@ -25,6 +25,19 @@
<link rel="alternate" href="https://www.youtube.com/watch?v=<%= video.id %>"> <link rel="alternate" href="https://www.youtube.com/watch?v=<%= video.id %>">
<%= rendered "components/player_sources" %> <%= rendered "components/player_sources" %>
<title><%= HTML.escape(video.title) %> - Invidious</title> <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 %> <% end %>
<script id="video_data" type="application/json"> <script id="video_data" type="application/json">
@ -227,18 +240,17 @@
<% end %> <% end %>
</p> </p>
<div> <div id="description-box"> <!-- Description -->
<% if video.description.size < 200 || params.extend_desc %> <% if video.description.size < 200 || params.extend_desc %>
<%= video.description_html %> <%= video.description_html %>
<% else %> <% 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 %> <%= video.description_html %>
</div> </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 %> <% end %>
</div> </div>