Tip for SMF 2.1.x: Change the quote expand feature to behave similar to XenForo

[live627]

Find in ./Themes/default/scripts/script.js, at or near line 1776

Code Select Expand

if ((typeof(smf_quote_expand) != 'undefined') && (smf_quote_expand > 0))Replace with

Code Select Expand

if (typeof smf_quote_expand != 'undefined' && !/\D/.test(smf_quote_expand))
for (const el of document.getElementsByTagName('blockquote'))
{
if (el.offsetHeight < smf_quote_expand)
return;

const a = document.createElement('a');
a.textContent = smf_txt_expand;
a.className = 'expand';
a.role = 'button';
a.tabindex = '0';
a.addEventListener('click', function()
{
const d = this.parentNode;
d.classList.remove('expand');
d.style.height = 'auto';
this.remove();
}, false);
el.classList.add('expand');
el.style.height = smf_quote_expand + 'px';
el.append(a);
}
if (false && (typeof(smf_quote_expand) != 'undefined') && (smf_quote_expand > 0))Find in ./Themes/default/css/index.css, at or near line 344

blockquote cite {

Replace with

Code Select Expand

blockquote.expand {
position: relative;
overflow: hidden;
}
blockquote a.expand {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 75px;
display: flex;
justify-content: center;
align-items: end;
background: linear-gradient(to bottom,rgba(249,249,249,0) 0%,#F9F9F9 80%);
padding: 5px;
}
blockquote cite {In Administration Center ► Posts and Topics ► Post Settings, set the very last setting to 150

Minimum quote height to add an expand link on large quotes

Before
You cannot view this attachment.

After
You cannot view this attachment.

The Expanse
You cannot view this attachment.

[Steve]

Having never dealt with Xenforo, I'm not really sure what this does.

I've looked over your images and is it allowing an extra 'expand'? Sorry I'm confused.

[Kindred]

If I am reading correctly - it's a styling thing to make the SHRUNK quotebox fade to indicate that there is more content that can be expanded

[Aleksi "Lex" Kilpinen]

That's actually pretty neat. Like it!

[TwitchisMental]

Oh that is awesome.  Thank you for sharing this trick Live .

[live627]

I've looked over your images and is it allowing an extra 'expand'? Sorry I'm confused.

it replaces the default behavior; click the bottom faded part to expand.

[gevv]

Hi thanks @live627 ,


Quote height is large but expand link above 129px is not added

[live627]

This might prove to be a difficult problem to fix. Got a link to that page?