diff options
| author | syeopite <syeopite@syeopite.dev> | 2021-04-02 01:03:26 -0700 |
|---|---|---|
| committer | syeopite <syeopite@syeopite.dev> | 2021-05-10 00:25:20 -0700 |
| commit | c5fae8426358c511bb8b66f01c931094e7418812 (patch) | |
| tree | 4872c0f7e286f4d61c96b3eb429240f99283d693 | |
| parent | 533d0a1fd4661ff85b8b3d82edf34cef581fd79c (diff) | |
| download | invidious-c5fae8426358c511bb8b66f01c931094e7418812.tar.gz invidious-c5fae8426358c511bb8b66f01c931094e7418812.tar.bz2 invidious-c5fae8426358c511bb8b66f01c931094e7418812.zip | |
Add functionality to read more button
| -rw-r--r-- | assets/css/default.css | 25 | ||||
| -rw-r--r-- | 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> |