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)+ ` ${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}