{.text}
diff --git a/web/src/app/css/app.css b/web/src/app/css/app.css
index 67218e6..cfd625f 100644
--- a/web/src/app/css/app.css
+++ b/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;
}
diff --git a/web/src/app/css/base.css b/web/src/app/css/base.css
index 208b06e..14a7a9b 100644
--- a/web/src/app/css/base.css
+++ b/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 } }
diff --git a/web/src/app/js/app.js b/web/src/app/js/app.js
index aebf22e..47ddcd7 100644
--- a/web/src/app/js/app.js
+++ b/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) {
diff --git a/web/src/app/js/pages/meet.js b/web/src/app/js/pages/meet.js
index 4456988..7b46164 100644
--- a/web/src/app/js/pages/meet.js
+++ b/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)+ ``+value.substr(gi)+
- ` ${t1}`;
+ `
${t1}`;
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();
diff --git a/web/src/app/js/templates/meet/item.html b/web/src/app/js/templates/meet/item.html
index 719aef0..db2e6e8 100644
--- a/web/src/app/js/templates/meet/item.html
+++ b/web/src/app/js/templates/meet/item.html
@@ -20,9 +20,8 @@
{.date}
-
{.text}