From 9d443c94d45a10edb61f9f9c78678ff8d8d44364 Mon Sep 17 00:00:00 2001
From: Niko <niko@nobigtech.es>
Date: Fri, 18 Feb 2022 15:13:30 +0100
Subject: [PATCH] Add '...' before collapse view_more link (when collapsed)

---
 web/src/app/css/base.css     | 3 +++
 web/src/app/js/app.js        | 6 ++++--
 web/src/app/js/pages/meet.js | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/web/src/app/css/base.css b/web/src/app/css/base.css
index 9e5a452..208b06e 100644
--- a/web/src/app/css/base.css
+++ b/web/src/app/css/base.css
@@ -35,6 +35,9 @@ body {
 .collapse.collapsed {
 	display: none !important;
 }
+*[collapsed="true"]::before {
+	content: '... ';
+}
 
 @media (max-width: 400px) { .media-max400 { display: none } }
 @media (max-width: 500px) { .media-max500 { display: none } }
diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js
index c605c69..aebf22e 100644
--- a/web/src/app/js/app.js
+++ b/web/src/app/js/app.js
@@ -125,17 +125,19 @@ app.post = {
 		return app.post._collapsed[id] === true;
 	},
 	collapse: function(id, strs) {
-		const co = document.getElementById('collapse-'+id);
-		const cl = document.getElementById('collapse-link-'+id);
+		const co = document.querySelector(`#collapse-${id}`);
+		const cl = document.querySelector(`#collapse-link-${id} .link`);
 		const collapsed = co.classList.contains('collapsed');
 		if (collapsed) {
 			app.post._collapsed[id] = false;
 			co.classList.remove('collapsed');
 			cl.innerText = strs[1];
+			cl.parentNode.removeAttribute('collapsed');
 		} else {
 			app.post._collapsed[id] = true;
 			co.classList.add('collapsed');
 			cl.innerText = strs[0];
+			cl.parentNode.setAttribute('collapsed', 'true');
 		}
 	},
 	prepare4html: function(value, tags) {
diff --git a/web/src/app/js/pages/meet.js b/web/src/app/js/pages/meet.js
index c04a91c..8ec28e4 100644
--- a/web/src/app/js/pages/meet.js
+++ b/web/src/app/js/pages/meet.js
@@ -103,8 +103,8 @@ app.pages.meet = {
 						const t1  = (app.strings.app.view_more || 'view more').replaceAll(/('|")/g, '');
 						const t2  = (app.strings.app.view_less || 'view less').replaceAll(/('|")/g, '');
 						const act = `app.post.collapse('${id}', ['${t1}', '${t2}'])`;
-						value = value.substr(0, gi)+ '<span id="collapse-'+id+'" class="collapse collapsed">'+
-							value.substr(gi)+'</span>'+ '&nbsp;<a id="collapse-link-'+id+'" class="link" onclick="'+act+'">ver más</a>';
+						value = value.substr(0, gi)+ `<span id="collapse-${id}" class="collapse collapsed">`+value.substr(gi)+
+							`</span>&nbsp;<span id="collapse-link-${id}" collapsed="true"><a class="link" onclick="${act}">${t1}</a></span>`;
 						ptext.innerHTML = value;
 						if (!app.post.collapsed(id, true))
 							app.post.collapse(id, [t1, t2]);