From f5de6230cd08542a06c249c291d8aa117d3744c9 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 30 Dec 2014 17:29:08 +0100
Subject: [PATCH] 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
---
 com.woltlab.wcf/templates/quoteBBCodeTag.tpl  |  17 +-
 .../js/3rdParty/redactor/plugins/wbbcode.js   |  11 +-
 wcfsetup/install/files/style/bbcode.less      | 182 +++++++++---------
 wcfsetup/install/files/style/redactor.less    |   7 +-
 4 files changed, 108 insertions(+), 109 deletions(-)

diff --git a/com.woltlab.wcf/templates/quoteBBCodeTag.tpl b/com.woltlab.wcf/templates/quoteBBCodeTag.tpl
index b655fccf42..acefb454e4 100644
--- 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 7a0e0139f6..aefb3fe47f 100644
--- 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(/&nbsp;/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 a0db3e11ed..07e357458e 100644
--- 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 304dbd5943..3b035c2b47 100644
--- 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;
 	}
 }
 
-- 
2.20.1