Better description view for videos and playlists (#272)
* 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:
parent
79996f6838
commit
411b09629a
|
@ -53,12 +53,10 @@
|
||||||
</div>
|
</div>
|
||||||
{% if channel_info.channel_description %}
|
{% if channel_info.channel_description %}
|
||||||
<div class="description-box">
|
<div class="description-box">
|
||||||
<h2>Description</h2>
|
<p id="text-expand" class="description-text">
|
||||||
</div>
|
{{ channel_info.channel_description|linebreaksbr|urlizetrunc:50 }}
|
||||||
<div class="info-box-item description-box">
|
</p>
|
||||||
<div class="description-text">
|
<button onclick="textExpand()" id="text-expand-button">Show more</button>
|
||||||
{{ channel_info.channel_description|linebreaks }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="description-box">
|
<div class="description-box">
|
||||||
|
|
|
@ -56,11 +56,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% if playlist_info.playlist_description %}
|
{% if playlist_info.playlist_description %}
|
||||||
<div class="info-box-item description-box">
|
<div class="description-box">
|
||||||
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
|
<p id="text-expand" class="description-text">
|
||||||
<div id="text-reveal" class="description-text">
|
{{ playlist_info.playlist_description|linebreaksbr|urlizetrunc:50 }}
|
||||||
{{ playlist_info.playlist_description|linebreaks }}
|
</p>
|
||||||
</div>
|
<button onclick="textExpand()" id="text-expand-button">Show more</button>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -77,11 +77,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% if video.description %}
|
{% if video.description %}
|
||||||
<div class="info-box-item description-box">
|
<div class="description-box">
|
||||||
<p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
|
<p id="text-expand" class="description-text">
|
||||||
<div id="text-reveal" class="description-text">
|
{{ video.description|linebreaksbr|urlizetrunc:50 }}
|
||||||
{{ video.description|linebreaks }}
|
</p>
|
||||||
</div>
|
<button onclick="textExpand()" id="text-expand-button">Show more</button>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if playlist_nav %}
|
{% if playlist_nav %}
|
||||||
|
|
|
@ -365,10 +365,17 @@ button:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
#text-reveal {
|
#text-reveal {
|
||||||
height: 0px;
|
height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#text-expand {
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-inline-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* video player */
|
/* video player */
|
||||||
.player-wrapper {
|
.player-wrapper {
|
||||||
|
@ -591,6 +598,8 @@ button:hover {
|
||||||
|
|
||||||
.description-box {
|
.description-box {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
padding: 15px;
|
||||||
|
background-color: var(--highlight-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-box-3 {
|
.info-box-3 {
|
||||||
|
|
|
@ -967,6 +967,7 @@ function createPlaylist(playlist, viewStyle) {
|
||||||
|
|
||||||
|
|
||||||
// generic
|
// generic
|
||||||
|
|
||||||
function sendPost(payload) {
|
function sendPost(payload) {
|
||||||
var http = new XMLHttpRequest();
|
var http = new XMLHttpRequest();
|
||||||
http.open("POST", "/process/", true);
|
http.open("POST", "/process/", true);
|
||||||
|
@ -991,19 +992,57 @@ function getCookie(c_name) {
|
||||||
|
|
||||||
|
|
||||||
// animations
|
// animations
|
||||||
|
|
||||||
function textReveal() {
|
function textReveal() {
|
||||||
var textBox = document.getElementById('text-reveal');
|
var textBox = document.getElementById("text-reveal");
|
||||||
var button = document.getElementById('text-reveal-button');
|
var button = document.getElementById("text-reveal-button");
|
||||||
var textBoxHeight = textBox.style.height;
|
var textBoxHeight = textBox.style.height;
|
||||||
if (textBoxHeight === 'unset') {
|
if (textBoxHeight === "unset") {
|
||||||
textBox.style.height = '0px';
|
textBox.style.height = "0px";
|
||||||
button.innerText = 'Show';
|
button.innerText = "Show";
|
||||||
} else {
|
} else {
|
||||||
textBox.style.height = 'unset';
|
textBox.style.height = "unset";
|
||||||
button.innerText = 'Hide';
|
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() {
|
function showForm() {
|
||||||
var formElement = document.getElementById('hidden-form');
|
var formElement = document.getElementById('hidden-form');
|
||||||
var displayStyle = formElement.style.display;
|
var displayStyle = formElement.style.display;
|
||||||
|
|
Loading…
Reference in New Issue