Unify events / CSS in user cards and user profile header

The status icons were also moved from the headline tags, as this was not accessible.

ref #6518

Author: BurntimeX

com.woltlab.wcf/templates/userCard.tpl

@@ -40,18 +40,22 @@
 	</div>
 
 	<div class="userCard__content">
-		<h3 class="userCard__username">
-			<a href="{$user->getLink()}" class="userCard__link">{unsafe:$user->getFormattedUsername()}</a>
+		<div class="userCard__headline">
+			<h3 class="userCard__username">
+				<a href="{$user->getLink()}" class="userCard__link">{unsafe:$user->getFormattedUsername()}</a>
+			</h3>
 
-			{if $user->banned}
-				<span class="jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}">
-					{icon name='lock'}
-				</span>
-			{/if}
-
-			{event name='icons'}
-		</h3>
+			<div class="userCard__statusIcons">
+				{if $user->banned}
+					<span class="jsTooltip jsUserBanned" role="status" title="{lang}wcf.user.banned{/lang}">
+						{icon name='lock'}
+					</span>
+				{/if}
 
+				{event name='icons'}
+			</div>
+		</div>
+		
 		{event name='afterUsername'}
 
 		{if MODULE_USER_RANK}

com.woltlab.wcf/templates/userProfileHeader.tpl

@@ -65,14 +65,24 @@
 			</div>
 		</div>
 		<div class="userProfileHeader__title">
-			<h1 class="userProfileHeader__username">
-				<span class="userProfileUsername">{$view->user->username}</span>
-				{if $view->user->banned}
-					<span class="jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}">
-						{icon name='lock'}
-					</span>
-				{/if}
-			</h1>
+			<div class="userProfileHeader__headline">
+				<h1 class="userProfileHeader__username">
+					<span class="userProfileUsername">{$view->user->username}</span>
+				</h1>
+
+				<div class="userProfileHeader__statusIcons">
+					{if $view->user->banned}
+						<span class="jsTooltip jsUserBanned" role="status" title="{lang}wcf.user.banned{/lang}">
+							{icon name='lock'}
+						</span>
+					{/if}
+
+					{event name='icons'}
+				</div>
+			</div>
+			
+			{event name='afterUsername'}
+
 			<div class="userProfileHeader__rank">
 				{if MODULE_USER_RANK}
 					{if $view->user->getUserTitle()}
@@ -83,7 +93,7 @@
 					{/if}
 				{/if}
 			</div>
-			{event name='afterTitle'}
+			{event name='afterUserTitle'}
 		</div>
 		<div class="userProfileHeader__stats">
 			{foreach from=$view->getStatItems() item='statItem'}

wcfsetup/install/files/style/ui/userCard.scss

@@ -126,6 +126,8 @@
 }
 
 .userCard__username {
+	display: inline;
+
 	@include wcfFontHeadline;
 	@include wcfFontBold;
 }
@@ -145,6 +147,12 @@
 	}
 }
 
+.userCard__statusIcons {
+	display: inline;
+	position: relative;
+	z-index: 1;
+}
+
 .userCard__footer__stats {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);

wcfsetup/install/files/style/ui/userProfileHeader.scss

@@ -100,6 +100,7 @@ body[data-page-identifier="com.woltlab.wcf.User"] .userProfileContent:first-chil
 }
 
 .userProfileHeader__username {
+	display: inline;
 	font-size: var(--wcfFontSizeTitle);
 	font-weight: 600;
 	line-height: 1.05;
@@ -109,6 +110,12 @@ body[data-page-identifier="com.woltlab.wcf.User"] .userProfileContent:first-chil
 	}
 }
 
+.userProfileHeader__statusIcons {
+	display: inline;
+	position: relative;
+	z-index: 1;
+}
+
 .userProfileHeader__stats {
 	display: flex;
 	flex-wrap: wrap;