From 07c80400f753e797fff122f1181ae3ab54e0340c Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Sun, 21 Aug 2016 11:04:57 +0200
Subject: [PATCH] Improved user profile header

* Added online badge
* Fixed some mobile issues
---
 com.woltlab.wcf/templates/user.tpl            |  1 +
 .../install/files/style/layout/content.scss   |  2 +-
 .../install/files/style/ui/userProfile.scss   | 42 ++++++++++++++++++-
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/com.woltlab.wcf/templates/user.tpl b/com.woltlab.wcf/templates/user.tpl
index 4f1000671f..febc0cf60d 100644
--- a/com.woltlab.wcf/templates/user.tpl
+++ b/com.woltlab.wcf/templates/user.tpl
@@ -146,6 +146,7 @@
 			{else}
 				<span>{@$user->getAvatar()->getImageTag(128)}</span>
 			{/if}
+			{if $user->isOnline()}<span class="badge green badgeOnline">{lang}wcf.user.online{/lang}</span>{/if}
 		</div>
 		
 		<div class="contentHeaderTitle">
diff --git a/wcfsetup/install/files/style/layout/content.scss b/wcfsetup/install/files/style/layout/content.scss
index f87bac3ab4..62f112c31e 100644
--- a/wcfsetup/install/files/style/layout/content.scss
+++ b/wcfsetup/install/files/style/layout/content.scss
@@ -57,7 +57,7 @@
 		color: $wcfContentDimmedText;
 	}
 	
-	@include screen-md-down {
+	@include screen-sm-down {
 		.contentHeaderIcon {
 			display: none;
 		}
diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index 30c1c31ec4..c08a551fe8 100644
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -1,4 +1,40 @@
 .userProfileUser {
+	.contentHeaderIcon {
+		position: relative;
+		
+		a {
+			display: block;
+		}
+		
+		.badgeOnline {
+			left: 0;
+			pointer-events: none;
+			position: absolute;
+			
+			@include screen-md-up {
+				bottom: 0;
+			}
+			
+			@include screen-sm-down {
+				color: transparent;
+				padding: 0;
+				top: 0;
+				width: 0;
+				
+				&::before {
+					background-color: inherit;
+					border: 1px solid rgba(255, 255, 255, 1);
+					border-radius: 50%;
+					content: "";
+					height: 16px;
+					left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */
+					position: absolute;
+					width: 16px;
+				}
+			}
+		}
+	}
+	
 	.contentHeaderIcon a {
 		display: block;
 	}
@@ -7,7 +43,7 @@
 		margin-top: 20px;
 	}
 	
-	@include screen-md-down {
+	@include screen-sm-down {
 		display: flex;
 		flex-wrap: wrap;
 		
@@ -26,7 +62,9 @@
 			flex: 0 0 calc(100% - 58px);
 			max-width: calc(100% - 58px);
 		}
-		
+	}
+	
+	@include screen-xs {
 		.contentHeaderNavigation {
 			flex: 0 0 100%;
 			
-- 
2.20.1