tubearchivist/tubearchivist
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist.git synced 2025-02-18 14:00:21 +00:00
Code Issues Projects Releases Wiki Activity

Better description view for videos and playlists (#272)

Browse Source 
* draft

* proper implementation of description line clamping

* use a JS event that's potentially faster for text expand button visibility update

* remove desc title text, move show button after desc

Co-authored-by: simon <simobilleter@gmail.com>
This commit is contained in:
p0358 2022-07-16 17:06:26 +02:00 committed by GitHub
parent 79996f6838
commit 411b09629a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 70 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
tubearchivist/home/templates/home/channel_id_about.html
View File

@ -53,12 +53,10 @@
</div>
{% if channel_info.channel_description %}
<div class="description-box">
<h2>Description</h2>
</div>
<div class="info-box-item description-box">
<div class="description-text">
{{ channel_info.channel_description|linebreaks }}
</div>
<p id="text-expand" class="description-text">
{{ channel_info.channel_description|linebreaksbr|urlizetrunc:50 }}
</p>
<button onclick="textExpand()" id="text-expand-button">Show more</button>
</div>
{% endif %}
<div class="description-box">

10
tubearchivist/home/templates/home/playlist_id.html
View File

@ -56,11 +56,11 @@
</div>
</div>
{% if playlist_info.playlist_description %}
<div class="info-box-item description-box">
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
<div id="text-reveal" class="description-text">
{{ playlist_info.playlist_description|linebreaks }}
</div>
<div class="description-box">
<p id="text-expand" class="description-text">
{{ playlist_info.playlist_description|linebreaksbr|urlizetrunc:50 }}
</p>
<button onclick="textExpand()" id="text-expand-button">Show more</button>
</div>
{% endif %}
</div>

10
tubearchivist/home/templates/home/video.html
View File

@ -77,11 +77,11 @@
</div>
</div>
{% if video.description %}
<div class="info-box-item description-box">
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
<div id="text-reveal" class="description-text">
{{ video.description|linebreaks }}
</div>
<div class="description-box">
<p id="text-expand" class="description-text">
{{ video.description|linebreaksbr|urlizetrunc:50 }}
</p>
<button onclick="textExpand()" id="text-expand-button">Show more</button>
</div>
{% endif %}
{% if playlist_nav %}

11
tubearchivist/static/css/style.css
View File

@ -365,10 +365,17 @@ button:hover {
}
#text-reveal {
height: 0px;
height: 0;
overflow: hidden;
}
#text-expand {
overflow: hidden;
display: -webkit-inline-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
/* video player */
.player-wrapper {
@ -591,6 +598,8 @@ button:hover {
.description-box {
margin-top: 1rem;
padding: 15px;
background-color: var(--highlight-bg);
}
.info-box-3 {

53
tubearchivist/static/script.js
View File

@ -967,6 +967,7 @@ function createPlaylist(playlist, viewStyle) {
// generic
function sendPost(payload) {
var http = new XMLHttpRequest();
http.open("POST", "/process/", true);
@ -991,19 +992,57 @@ function getCookie(c_name) {
// animations
function textReveal() {
var textBox = document.getElementById('text-reveal');
var button = document.getElementById('text-reveal-button');
var textBox = document.getElementById("text-reveal");
var button = document.getElementById("text-reveal-button");
var textBoxHeight = textBox.style.height;
if (textBoxHeight === 'unset') {
textBox.style.height = '0px';
button.innerText = 'Show';
if (textBoxHeight === "unset") {
textBox.style.height = "0px";
button.innerText = "Show";
} else {
textBox.style.height = 'unset';
button.innerText = 'Hide';
textBox.style.height = "unset";
button.innerText = "Hide";
}
}
function textExpand() {
var textBox = document.getElementById("text-expand");
var button = document.getElementById("text-expand-button");
var textBoxLineClamp = textBox.style["-webkit-line-clamp"];
if (textBoxLineClamp === "none") {
textBox.style["-webkit-line-clamp"] = "4";
button.innerText = "Show more";
} else {
textBox.style["-webkit-line-clamp"] = "none";
button.innerText = "Show less";
}
}
// hide "show more" button if all text is already visible
function textExpandButtonVisibilityUpdate() {
var textBox = document.getElementById("text-expand");
var button = document.getElementById("text-expand-button");
if (!textBox || !button)
return;
var textBoxLineClamp = textBox.style["-webkit-line-clamp"];
if (textBoxLineClamp === "none")
return; // text box is in revealed state
if (textBox.offsetHeight < textBox.scrollHeight
|| textBox.offsetWidth < textBox.scrollWidth) {
// the element has an overflow, show read more button
button.style.display = "inline-block";
} else {
// the element doesn't have overflow
button.style.display = "none";
}
}
document.addEventListener("readystatechange", textExpandButtonVisibilityUpdate);
window.addEventListener("resize", textExpandButtonVisibilityUpdate);
function showForm() {
var formElement = document.getElementById('hidden-form');
var displayStyle = formElement.style.display;