Thread Rating:
  • 1 Vote(s) - 4 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] Expandable Quotes
#1
Expandable Quotes like Xenforo with no-script support (overflow-y: scroll). This should be, at the moment, the most convenient way to achieve that.

Add in your global.css (possibly at the end):

.mycode_quote {
	position: relative;
	overflow-y: auto;
	max-height: 200px;
	transition: max-height 500ms ease-in-out;
}

.quote__expand {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	background: linear-gradient(to bottom, rgba(249,250,250,0) 0%, #f9fafa 60%);
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	text-align: center;
	height: 75px;
	cursor: pointer;
}

.quote__expand span {
	position: absolute;
	bottom: 10px; left: 0; right: 0;
}

Go to your footer template, add at the end:

<script>
const bbCodeQuoteExpandHtml = '<div class="quote__expand"><span>Click to expand...</span></div>';

const bbCodeQuotes = $('.mycode_quote');
bbCodeQuotes.each(function() {
	if ($(this).parent('.mycode_quote').length) {
		return $(this).css('max-height', 'initial');
	}

	if (this.scrollHeight > this.clientHeight) {
		return $(this).css('overflow', 'hidden').append(bbCodeQuoteExpandHtml)
	}
})

const bbCodeQuoteExpand = $('.quote__expand');
bbCodeQuoteExpand.on('click', function() {
	const bbCodeQuote = $(this).parent('.mycode_quote');

	$(this).remove();
	bbCodeQuote.css('max-height', bbCodeQuote.prop('scrollHeight'));
})
</script>

Preview

https://imgur.com/15FzZhp
Reply
#2
<-- snip -->
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#3
(08-30-2019, 04:51 PM)vintagedaddyo Wrote: Cool beans, I assume this is does the same as https://community.mybb.com/thread-206116.html ?

Yes, I believe both are same. Smile
@OP: Good work with the plugin.
Reply
#4
Seems Awesome thanks for sharing!
Reply


Forum Jump:


Users browsing this thread: 2 Guest(s)