Show avatar using "span" instead of "div"

Visually it makes no difference, but as the ".avatar" element is inside
a "span" element it can not be a block element to be compliant with the
HTML specification.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

apps/comments/js/commentstabview.js

@@ -198,20 +198,20 @@
 				displayTpl: function (item) {
 					return '<li>'
 						+ '<span class="avatar-name-wrapper">'
-						+ '<div class="avatar" '
+						+ '<span class="avatar" '
 						+ ' data-username="' + escapeHTML(item.id) + '"'	// for avatars
 						+ ' data-user="' + escapeHTML(item.id) + '"'		// for contactsmenu
-						+ ' data-user-display-name="' + escapeHTML(item.label) + '"></div>'
+						+ ' data-user-display-name="' + escapeHTML(item.label) + '"></span>'
 						+ ' <strong>' + escapeHTML(item.label) + '</strong>'
 						+ '</span></li>';
 				},
 				insertTpl: function (item) {
 					return ''
 						+ '<span class="avatar-name-wrapper">'
-						+ '<div class="avatar" '
+						+ '<span class="avatar" '
 						+ ' data-username="' + escapeHTML(item.id) + '"'	// for avatars
 						+ ' data-user="' + escapeHTML(item.id) + '"'		// for contactsmenu
-						+ ' data-user-display-name="' + escapeHTML(item.label) + '"></div>'
+						+ ' data-user-display-name="' + escapeHTML(item.label) + '"></span>'
 						+ ' <strong>' + escapeHTML(item.label) + '</strong>'
 						+ '</span>';
 				},
@@ -224,7 +224,7 @@
 					// passing the whole comments form would re-apply and request
 					// avatars from the server
 					$(je.target).find(
-						'div[data-username="' + $el.find('[data-username]').data('username') + '"]'
+						'span[data-username="' + $el.find('[data-username]').data('username') + '"]'
 					).parent(),
 					editionMode
 				);
@@ -486,11 +486,11 @@
 		},
 
 		_composeHTMLMention: function(uid, displayName) {
-			var avatar = '<div class="avatar" '
+			var avatar = '<span class="avatar" '
 				+ 'data-username="' + _.escape(uid) + '"'
 				+ ' data-user="' + _.escape(uid) + '"'
 				+ ' data-user-display-name="'
-				+ _.escape(displayName) + '"></div>';
+				+ _.escape(displayName) + '"></span>';
 
 			var isCurrentUser = (uid === OC.getCurrentUser().uid);
 

apps/comments/tests/js/commentstabviewSpec.js

@@ -309,7 +309,7 @@ describe('OCA.Comments.CommentsTabView tests', function() {
 
 			expect(createStub.calledOnce).toEqual(false);
 			expect($newCommentForm.find('.message').html()).toContain('Mention to <span');
-			expect($newCommentForm.find('.message').html()).toContain('<div class="avatar"');
+			expect($newCommentForm.find('.message').html()).toContain('<span class="avatar"');
 			expect($newCommentForm.find('.message').html()).toContain('<strong>User Name</strong>');
 			expect($newCommentForm.find('.message').text()).not.toContain('@');
 			// In this case the default behaviour is prevented by the