Gekko Forum
Forum: Fix idiotic multi-quote view (+sample fix) - Printable Version

+- Gekko Forum (https://forum.gekko.wizb.it)
+-- Forum: Gekko (https://forum.gekko.wizb.it/forum-13.html)
+--- Forum: General Discussion (https://forum.gekko.wizb.it/forum-14.html)
+--- Thread: Forum: Fix idiotic multi-quote view (+sample fix) (/thread-56683.html)

Forum: Fix idiotic multi-quote view (+sample fix) - tommiehansen - 04-08-2018

Problem

When in discussions and users quote eachother it becomes unruly as soon as the text length and number of quotes exceed 1.
The reading experience simply degrades quite quickly and it becomes quite distracting with the 3-4 levels of quotes.

-

Quick and dirty solution

1. Add this JS in the template(s) footer somewhere (preferrably last):

Code:
var posts = $('#posts'),
    bodies = posts.find('.post_body');

bodies.each(function(){
  var $t = $(this),
  quotes = $t.find('blockquote');
  
  if( quotes.length > 1 ){
    quotes.first().append('<a href="#" class="postbit_quote bradius btn" onclick="this.parentNode.classList.toggle(\'on\');return false;"><span>Expand Quotes ('+ (quotes.length-1) +')</span></a>');
  }
})



2. Add this CSS to the template:


Code:
.post_body .mycode_quote .mycode_quote {
    display: none;
}

.post_body > blockquote { position: relative; }

.post_body .btn {
    position: absolute;
    top:55px; right:10px;
    font-size: 0.8rem;
    border-radius: 2px;
    color: #1565C0;
    border: 1px solid #42A5F5;
    padding: 5px 12px;
    _transition: none !important;
}

.post_body .btn:hover {
    background: #1E88E5;
    border-color: #1E88E5;
    color: #fff;
}

.post_body > .mycode_quote.on .btn {
    background: #FF9800;
    border-color: #FF9800;
    color: #fff;
}

.post_body > .mycode_quote.on .btn span {
   display: none;
}

.post_body > .mycode_quote.on .btn:before {
    content: 'Hide Quotes';
    display: inline-block;
}

.post_body > .mycode_quote.on .mycode_quote {
    display: block;
}


.post_body > .mycode_quote > .mycode_quote {
    margin-top: 60px;
}


Screen sample -- 'Expand Quotes (4):

[Image: z0Z7OnH.png]

-

To try this live do this in Chrome (or any other sufficient browser with dev-tools):

1. Copy-paste JS and paste+run @ console when in a thread with quotes on quotes etc..
2. Copy-paste CSS and append to cache/themes/theme3/global.min.css

RE: Forum: Fix idiotic multi-quote view (+sample fix) - askmike - 04-10-2018

Great idea. Done!

RE: Forum: Fix idiotic multi-quote view (+sample fix) - tommiehansen - 04-10-2018

(04-10-2018, 03:46 PM)askmike Wrote: Great idea. Done!

Awesome, thanks. Smile

Edit: You suck Smile
...and implemented the code badly:

Code:
bodies.each(function(){
    var  = $(this),
    quotes = .find('blockquote');
    
    if( quotes.length > 1 ){
      quotes.first().append('<a href="#" class="postbit_quote bradius btn" onclick="this.parentNode.classList.toggle(\'on\');return false;"><span>Expand Quotes ('+ (quotes.length-1) +')</span></a>');
    }
  })

Somehow you managed to remove the correct var $t = $(this) --and-- quotes = $t.find...