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

[tommiehansen]

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):



-

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

[askmike]

Great idea. Done!

[tommiehansen]

Great idea. Done!

Awesome, thanks.

Edit: You suck
...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...