diff --git a/tubearchivist/home/templates/home/channel_id_about.html b/tubearchivist/home/templates/home/channel_id_about.html
index 2b7a439..3e27ceb 100644
--- a/tubearchivist/home/templates/home/channel_id_about.html
+++ b/tubearchivist/home/templates/home/channel_id_about.html
@@ -53,12 +53,10 @@
{% if channel_info.channel_description %}
-
Description
-
-
-
- {{ channel_info.channel_description|linebreaks }}
-
+
+ {{ channel_info.channel_description|linebreaksbr|urlizetrunc:50 }}
+
+
{% endif %}
diff --git a/tubearchivist/home/templates/home/playlist_id.html b/tubearchivist/home/templates/home/playlist_id.html
index 1f5569c..7d96f20 100644
--- a/tubearchivist/home/templates/home/playlist_id.html
+++ b/tubearchivist/home/templates/home/playlist_id.html
@@ -56,11 +56,11 @@
{% if playlist_info.playlist_description %}
-
-
Description:
-
- {{ playlist_info.playlist_description|linebreaks }}
-
+
+
+ {{ playlist_info.playlist_description|linebreaksbr|urlizetrunc:50 }}
+
+
{% endif %}
diff --git a/tubearchivist/home/templates/home/video.html b/tubearchivist/home/templates/home/video.html
index 3848f16..1aa9590 100644
--- a/tubearchivist/home/templates/home/video.html
+++ b/tubearchivist/home/templates/home/video.html
@@ -77,11 +77,11 @@
{% if video.description %}
-
-
Description:
-
- {{ video.description|linebreaks }}
-
+
+
+ {{ video.description|linebreaksbr|urlizetrunc:50 }}
+
+
{% endif %}
{% if playlist_nav %}
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index e34f74a..0b860ba 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -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 {
diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js
index 47ef727..96cc45b 100644
--- a/tubearchivist/static/script.js
+++ b/tubearchivist/static/script.js
@@ -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;