Added post collapse fa icon (instead of "view_less/view_more"

This commit is contained in:
Niko 2022-02-21 17:53:25 +01:00
parent ccda81bb2d
commit fd84cd7e58
6 changed files with 18 additions and 12 deletions

View File

@ -218,6 +218,15 @@ main {
padding: 2em; padding: 2em;
padding-top: .2em; padding-top: .2em;
} }
*[id*="collapse-link-"][collapsed="true"] .fa {
line-height: 0px !important;
}
*[id*="collapse-link-"] .fa {
font-size: 1.8em;
position: relative;
top: 4px;
line-height: 2em;
}
.item .acct { .item .acct {
font-size: .8em; font-size: .8em;
@ -276,7 +285,7 @@ main {
border-radius: 2.6em; border-radius: 2.6em;
box-shadow: 0px 0px 2em #00000087; box-shadow: 0px 0px 2em #00000087;
border: 1px solid #00000012; border: 1px solid #00000012;
min-width: 15em; min-width: 20em;
max-width: 90%; max-width: 90%;
margin: 1em auto auto auto; margin: 1em auto auto auto;
padding: .5em; padding: .5em;

View File

@ -136,13 +136,13 @@ app.post = {
co.style = 'background: #f4f4f436'; co.style = 'background: #f4f4f436';
setTimeout(function() { co.removeAttribute('style') }, 1000); setTimeout(function() { co.removeAttribute('style') }, 1000);
} }
cl.innerText = strs[1]; cl.innerHTML = strs[1];
cl.parentNode.removeAttribute('collapsed'); cl.parentNode.removeAttribute('collapsed');
cback(id, 'uncollapsed'); cback(id, 'uncollapsed');
} else { } else {
app.post._collapsed[id] = true; app.post._collapsed[id] = true;
co.classList.add('collapsed'); co.classList.add('collapsed');
cl.innerText = strs[0]; cl.innerHTML = strs[0];
cl.parentNode.setAttribute('collapsed', 'true'); cl.parentNode.setAttribute('collapsed', 'true');
cback(id, 'collapsed'); cback(id, 'collapsed');
} }

View File

@ -93,6 +93,8 @@ function animateTimeout(elem, style, time) {
elem.classList.remove(style) }, time); elem.classList.remove(style) }, time);
} }
function fa(icon) { return `<i class="fa fa-${icon} fa-fw"></i>` }
function isVisible(element) { function isVisible(element) {
const rect = element.getBoundingClientRect(); const rect = element.getBoundingClientRect();
return ( return (

View File

@ -98,14 +98,13 @@ app.pages.meet = {
if (ok && ti > 0) { if (ok && ti > 0) {
var value = ptext.innerHTML; var value = ptext.innerHTML;
const id = 'meet'+item._id; const id = 'meet'+item._id;
const t1 = (app.strings.app.view_more || 'view more').replaceAll(/('|")/g, '') + ' >>'; const act = `app.post.collapse('${id}', [fa('sort-down'), fa('sort-up')], true, app.pages.meet.onPostCollapse)`;
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)+ value = value.substr(0, gi)+ `<span id="collapse-${id}" class="collapse collapsed">`+value.substr(gi)+
`</span>&nbsp;<span id="collapse-link-${id}" collapsed="true"><br><a class="link" onclick="${act}">${t1}</a></span>`; `</span>&nbsp;<span id="collapse-link-${id}" collapsed="true"><br><a class="link" onclick="${act}">`+fa('sort-down')+`</a></span>`;
ptext.innerHTML = value; ptext.innerHTML = value;
if (!app.post.collapsed(id, true)) if (!app.post.collapsed(id, true))
app.post.collapse(id, [t1, t2], false, app.pages.meet.onPostCollapse); app.post.collapse(id, [fa('sort-down'), fa('sort-up')],
false, app.pages.meet.onPostCollapse);
} }
} }
} }

View File

@ -13,8 +13,6 @@ $strings = [
'app' => [ 'app' => [
'years_old' => 'y/o', 'years_old' => 'y/o',
'the_fediverse' => 'The Fediverse', 'the_fediverse' => 'The Fediverse',
'view_more' => 'view more',
'view_less' => 'view less',
'yes' => 'Yes', 'yes' => 'Yes',
'no' => 'No', 'no' => 'No',
'ok' => [ 'ok' => [

View File

@ -13,8 +13,6 @@ $strings = [
'app' => [ 'app' => [
'years_old' => 'Años', 'years_old' => 'Años',
'the_fediverse' => 'El Fediverso', 'the_fediverse' => 'El Fediverso',
'view_more' => 'ver más',
'view_less' => 'ver menos',
'yes' => 'Sí', 'yes' => 'Sí',
'no' => 'No', 'no' => 'No',
'ok' => [ 'ok' => [