Overhauled quote DOM

- Removed inner <div />
- Instead of nesting the quote author avatar inside the quote element, it is now a sibling with a surrounding <div /> box
- Quote arrow is now generated by the avatar element rather than the quote itself
- Improved overflow/clearing to prevent unintended side-effects, e.g. cropping of the arrow next to the quote element

diff --git a/com.woltlab.wcf/templates/quoteBBCodeTag.tpl b/com.woltlab.wcf/templates/quoteBBCodeTag.tpl
index b655fccf428db42eb1d3fa8d28dea858efe3eae2..acefb454e4e3b3e81034814a93ddffc2316a21a6 100644 (file)
--- a/com.woltlab.wcf/templates/quoteBBCodeTag.tpl
+++ b/com.woltlab.wcf/templates/quoteBBCodeTag.tpl
@@ -1,9 +1,8 @@
-<blockquote class="quoteBox"{if $quoteLink} cite="{$quoteLink}"{/if}>
-       {if $quoteAuthorObject}
-               <div class="quoteAuthorAvatar"><a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink framed" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(64)}</a></div>
-       {/if}
-       
-       <div class="container containerPadding">
+{if $quoteAuthorObject}
+<div class="quoteBoxAuthor">
+       <div class="quoteAuthorAvatar"><a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink framed" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(64)}</a></div>
+{/if}
+       <blockquote class="quoteBox container containerPadding{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
                {if $quoteAuthor}
                        <header>
                                <h3>
@@ -19,5 +18,7 @@
                <div>
                        {@$content}
                </div>
-       </div>
-</blockquote>
\ No newline at end of file
+       </blockquote>
+{if $quoteAuthorObject}
+</div>
+{/if}

diff --git a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
index 7a0e0139f62ff8ea96045bf40b3baf1e4123ebd2..aefb3fe47fdfdd0c1a6b13962a70488e73d268a8 100644 (file)
--- a/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
+++ b/wcfsetup/install/files/js/3rdParty/redactor/plugins/wbbcode.js
@@ -295,7 +295,7 @@ RedactorPlugins.wbbcode = function() {
                        html = html.replace(/ /gi, " ");
                        
                        // [quote]
-                       html = html.replace(/<blockquote([^>]+)>\n?<div[^>]+>\n?<header[^>]*?>[\s\S]*?<\/header>/gi, function(match, attributes, innerContent) {
+                       html = html.replace(/<blockquote([^>]+)>\n?<header[^>]*?>[\s\S]*?<\/header>/gi, function(match, attributes, innerContent) {
                                var $quote;
                                var $author = '';
                                var $link = '';
@@ -1024,8 +1024,7 @@ RedactorPlugins.wbbcode = function() {
                                                        $link = WCF.String.escapeHTML($unquoteString($.trim($link)));
                                                }
                                                
-                                               var $quote = '<blockquote class="quoteBox" cite="' + $link + '" data-author="' + $author + '">'
-                                                       + '<div class="container containerPadding">'
+                                               var $quote = '<blockquote class="quoteBox container containerPadding quoteBoxSimple" cite="' + $link + '" data-author="' + $author + '">'
                                                                + '<header contenteditable="false">'
                                                                        + '<h3>'
                                                                                + self.wbbcode._buildQuoteHeader($author, $link)
@@ -1059,7 +1058,7 @@ RedactorPlugins.wbbcode = function() {
                                                }
                                                
                                                $quote += $tmp;
-                                               $quote += '</div></blockquote>';
+                                               $quote += '</blockquote>';
                                                
                                                return $quote;
                                        });
@@ -1438,7 +1437,7 @@ RedactorPlugins.wbbcode = function() {
                        // check for empty <blockquote
                        this.$editor.find('blockquote').each(function(index, blockquote) {
                                var $blockquote = $(blockquote);
-                               if (!$blockquote.find('> div > header').length) {
+                               if (!$blockquote.children('header').length) {
                                        $blockquote.remove();
                                }
                        });
@@ -1483,7 +1482,7 @@ RedactorPlugins.wbbcode = function() {
                        $tooltip.appendTo(document.body);
                        
                        // prevent the cursor being placed in the quote header
-                       $('<div contenteditable="true" />').appendTo(document.body).focus().remove();
+                       this.selection.remove();
                },
                
                /**

diff --git a/wcfsetup/install/files/style/bbcode.less b/wcfsetup/install/files/style/bbcode.less
index a0db3e11ede0a21f7f469e627f2e57576711f8a4..07e357458ea48cd7af6585e5fe2f627181b6ba06 100644 (file)
--- a/wcfsetup/install/files/style/bbcode.less
+++ b/wcfsetup/install/files/style/bbcode.less
@@ -219,76 +219,95 @@ html[dir='rtl'] {
 
 /* Quote Box */
 .quoteBox {
-       clear: both;
+       background-color: @wcfContentBackgroundColor;
+       min-height: 28px;
+       position: relative;
        
-       > .container {
-               background-color: @wcfContentBackgroundColor;
-               min-height: 28px;
-               margin-bottom: @wcfGapTiny;
-               overflow: hidden;
-               position: relative;
+       .clearfix;
+       
+       &.quoteBoxSimple {
+               clear: both;
+               margin: (@wcfGapSmall + @wcfGapTiny) 0;
+               padding-left: 54px;
+       }
+       
+       > header {
+               padding-bottom: @wcfGapTiny;
+               border-bottom: 1px dotted @wcfContainerBorderColor;
+               margin-bottom: @wcfGapSmall;
                
-               &.containerPadding {
-                       padding-left: 54px;
-               }
+               .userSelectNone;
                
-               > header {
-                       padding-bottom: @wcfGapTiny;
-                       border-bottom: 1px dotted @wcfContainerBorderColor;
-                       margin-bottom: @wcfGapSmall;
-                       
-                       .userSelectNone;
-                       
-                       > h3 {
-                               font-weight: bold;
-                       }
+               > h3 {
+                       font-weight: bold;
                }
+       }
+       
+       /* quote icon */
+       > div:first-of-type {
+               &::before {
+                       content: "\f10d";
+                       color: @wcfDimmedColor;
+                       font-family: FontAwesome;
+                       font-size: 28px;
+                       position: absolute;
+                       left: @wcfGapMedium;
+                       top: @wcfGapSmall;
+               }
+       }
+       
+       /* nested quotes */
+       .quoteBox {
+               margin-left: 0;
+               padding-left: @wcfGapLarge;
+               min-height: 0;
                
-               /* quote icon */
                > div:first-of-type {
                        &::before {
-                               content: "\f10d";
-                               color: @wcfDimmedColor;
-                               font-family: FontAwesome;
-                               font-size: 28px;
-                               position: absolute;
-                               left: @wcfGapMedium;
-                               top: @wcfGapSmall;
+                               display: none;
                        }
                }
        }
+}
+
+.quoteBoxAuthor {
+       clear: both;
+       margin: (@wcfGapSmall + @wcfGapTiny) 0;
+       position: relative;
+       
+       .clearfix;
        
        > .quoteAuthorAvatar {
                float: left;
                
-               + .container {
+               &::before,
+               &::after {
+                       border-style: inset solid inset none;
+                       border-width: 15px;
+                       content: "";
+                       display: block;
+                       height: 0;
+                       position: absolute;
+                       top: 15px;
+                       width: 0;
+               }
+               
+               &::before {
+                       border-color: transparent @wcfContainerBorderColor transparent transparent;
+                       left: 75px;
+                       z-index: 100;
+               }
+               
+               &::after {
+                       border-color: transparent @wcfContentBackgroundColor transparent transparent;
+                       left: 76px;
+                       z-index: 101;
+               }
+               
+               + .quoteBox {
                        margin-left: 90px;
                        padding-left: @wcfGapLarge;
                        
-                       &::before,
-                       &::after {
-                               border-style: inset solid inset none;
-                               border-width: 15px;
-                               content: "";
-                               display: block;
-                               height: 0;
-                               position: absolute;
-                               top: 15px;
-                               width: 0;
-                       }
-                       
-                       &::before {
-                               border-color: transparent @wcfContainerBorderColor transparent transparent;
-                               left: -15px;
-                               z-index: 100;
-                       }
-                       
-                       &::after {
-                               border-color: transparent @wcfContentBackgroundColor transparent transparent;
-                               left: -14px;
-                               z-index: 101;
-                       }
-                       
                        /* hide quote icon */
                        > div:first-of-type {
                                &::before {
@@ -303,60 +322,43 @@ html[dir='rtl'] {
        }
        
        /* nested quotes */
-       .quoteBox {
+       .quoteBoxAuthor {
                > .quoteAuthorAvatar {
                        display: none;
-               }
-               
-               > .container {
-                       margin-left: 0;
-                       padding-left: @wcfGapLarge;
-                       min-height: 0;
-                       
-                       &::before,
-                       &::after {
-                               display: none;
-                       }
                        
-                       > div:first-of-type {
-                               &::before {
-                                       display: none;
-                               }
+                       + .quoteBox {
+                               margin-left: 0;
                        }
                }
        }
 }
 
 @media only screen and (max-width: 800px) {
-       .quoteBox {
+       .quoteBoxAuthor {
                > .quoteAuthorAvatar {
                        display: none;
                }
+       }
+       
+       .quoteBox {
+               margin-left: 0 !important;
+               padding-left: 28px !important;
                
-               > .container {
-                       margin-left: 0 !important;
-                       
-                       &.containerPadding {
-                               padding-left: 28px;
-                       }
-                       
-                       > div:first-of-type {
-                               &::before {
-                                       display: block !important;
-                                       font-size: 14px;
-                                       left: @wcfGapSmall;
-                               }
+               > div:first-of-type {
+                       &::before {
+                               display: block !important;
+                               font-size: 14px;
+                               left: @wcfGapSmall;
                        }
                }
                
+               /* nested quotes */
                .quoteBox {
-                       > .container {
-                               padding-left: @wcfGapSmall;
-                               
-                               > div:first-of-type {
-                                       &::before {
-                                               display: none !important;
-                                       }
+                       padding-left: @wcfGapSmall !important;
+                       
+                       > div:first-of-type {
+                               &::before {
+                                       display: none !important;
                                }
                        }
                }

diff --git a/wcfsetup/install/files/style/redactor.less b/wcfsetup/install/files/style/redactor.less
index 304dbd5943babd2ca4881c0854ec092d3ee8cef3..3b035c2b47162088838fda0610057f1e11429a7b 100644 (file)
--- a/wcfsetup/install/files/style/redactor.less
+++ b/wcfsetup/install/files/style/redactor.less
@@ -151,7 +151,7 @@
        .quoteBox {
                clear: none;
                
-               > div > header {
+               > header {
                        position: relative;
                        
                        > .redactorQuoteEdit {
@@ -166,12 +166,9 @@
                }
        }
        
-       &.msie .quoteBox > .container {
+       &.msie .quoteBox {
                /* resets 'hasLayout' causing IE to display resize handle and wonky editing behavior */
                min-height: auto;
-               overflow: visible;
-               
-               .clearfix;
        }
 }