Improved UX on pages.meet collapsible posts

web/src/app/css/app.css

@@ -141,18 +141,27 @@ main {
 }
 .meet.item .status { color: #fff }
 .meet.item .status-content {
-	padding: 1em;
 	box-shadow: 0px 2px 1px #0000008c;
 	margin-bottom: 1em;
 }
+.meet.item .status-content.full {
+	position: fixed;
+	display: flex;
+	top: 0;
+	height: 100%;
+	z-index: 10;
+}
+.meet.item .status-content.full .text { margin: auto !important }
 .meet.item .status-content .text {
 	margin: 0;
+	padding: 1em;
 	text-align: center;
 	font-size: 1.2em;
 	word-break: break-word;
 }
 .meet.item .status-content .text p {
 	margin: 0 !important;
+	line-height: 1.3em;
 }
 .meet.item .status-content .text a {
 	text-decoration: none;
@@ -175,6 +184,11 @@ main {
 	font-size: .8em;
 }
 
+*[id*="collapse-link-"][collapsed="true"] .link {
+	padding: 2em;
+	padding-bottom: .8em;
+}
+
 .meet.item .content {
 	display: grid;
 }

web/src/app/css/base.css

@@ -38,6 +38,9 @@ body {
 *[collapsed="true"]::before {
 	content: '... ';
 }
+*[id*="collapse-link-"] .link {
+	user-select: none;
+}
 
 @media (max-width: 400px) { .media-max400 { display: none } }
 @media (max-width: 500px) { .media-max500 { display: none } }

web/src/app/js/app.js

@@ -124,20 +124,27 @@ app.post = {
 			return _default;
 		return app.post._collapsed[id] === true;
 	},
-	collapse: function(id, strs) {
+	collapse: function(id, strs, userClicked, cback) {
+		cback = cback || function() {};
 		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');
+			if (userClicked) {
+				co.style = 'background: #f4f4f436';
+				setTimeout(function() { co.removeAttribute('style') }, 1000);
+			}
 			cl.innerText = strs[1];
 			cl.parentNode.removeAttribute('collapsed');
+			cback(id, 'uncollapsed');
 		} else {
 			app.post._collapsed[id] = true;
 			co.classList.add('collapsed');
 			cl.innerText = strs[0];
 			cl.parentNode.setAttribute('collapsed', 'true');
+			cback(id, 'collapsed');
 		}
 	},
 	prepare4html: function(value, tags) {

web/src/app/js/pages/meet.js

@@ -99,15 +99,16 @@ app.pages.meet = {
 					}
 					if (ok && ti > 0) {
 						var value = ptext.innerHTML;
-						const id  = item._id;
-						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}'])`;
+						const id  = 'meet'+item._id;
+						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}'], true, app.pages.meet.onPostCollapse)`;
 						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>`;
+							`</span>&nbsp;<span id="collapse-link-${id}" collapsed="true"><br><a class="link" onclick="${act}">${t1}</a></span>`;
 						ptext.innerHTML = value;
 						if (!app.post.collapsed(id, true))
-							app.post.collapse(id, [t1, t2]);
+							app.post.collapse(id, [t1, t2],
+								false, app.pages.meet.onPostCollapse);
 					}
 				}
 			}
@@ -131,6 +132,14 @@ app.pages.meet = {
 		} else index = 0;
 		app.pages.meet.carousel.set(parseInt(index));
 	},
+	onPostCollapse: function(id, state) {
+		id = id.replace(/^meet/, '');
+		const elem = document.querySelector(`*[data-id="${id}"] .status-content`);
+		if (state === 'uncollapsed')
+			elem.classList.add('full');
+		else if (state === 'collapsed')
+			elem.classList.remove('full');
+	},
 	actions: {
 		crush: function() {
 			document.activeElement.blur();

web/src/app/js/templates/meet/item.html

@@ -20,9 +20,8 @@
 						</i>{.date}
 					</div>
 				</div>
-				<div class="status-content center width-max"
-					style="background: {postBgColor};">
-					<div class="text">
+				<div class="status-content center width-max">
+					<div class="text" style="background: {postBgColor}">
 						<p style="color: {postFgColor} !important">{.text}</p>
 					</div>
 				</div>