redesign user status, user picture

less/account.less

@@ -2,11 +2,11 @@
 	.breadcrumb {
 		margin-bottom: 30px;
 	}
-	
+
 	.cover {
 		background-size: cover;
 		background-repeat: no-repeat;
-		min-height: 200px;
+		height: 200px;
 		position: relative;
 		margin-bottom: 1em;
 		background-origin: content-box;
@@ -23,6 +23,13 @@
 			top: 94px;
 			border: 4px solid white;
 			border-radius: 50%;
+
+			.status {
+				position: absolute;
+				font-size: 23px;
+				top: 17px;
+				right: -3px;
+			}
 		}
 
 		&:hover {
@@ -33,7 +40,7 @@
 
 		.controls {
 			text-align: center;
-			min-height: 200px;
+			height: 200px;
 			line-height: 200px;
 			.opacity(0);
 			.transition(opacity .15s linear);
@@ -107,7 +114,7 @@
 	margin-top: 200px;
 
 	.container {
-		min-height: 200px;
+		height: 200px;
 		position: relative;
 	}
 	
@@ -115,10 +122,10 @@
 		margin-top: 300px;
 		
 		.cover,  .container {
-			min-height: 300px;
+			height: 300px;
 
 			.controls {
-				min-height: 300px;
+				height: 300px;
 				line-height: 300px;
 			}
 
@@ -159,10 +166,6 @@
 	.dropdown-toggle {
 		cursor: pointer;
 	}
-
-	.status {
-		padding-bottom: 5px;
-	}
 }
 
 .user-profile-picture {

templates/account/profile.tpl

@@ -6,18 +6,9 @@
 
 			<div class="account-picture-block panel panel-default">
 				<div class="panel-body">
-					<div class="text-center">
-						<!-- IF picture -->
-						<img src="{picture}" class="user-profile-picture" />
-						<!-- ELSE -->
-						<div class="user-icon user-profile-picture" style="background-color: {icon:bgColor};" title="{username}">{icon:text}</div>
-						<!-- ENDIF picture -->
-					</div>
-
 					<div>
 						<div class="text-center">
 							<span>
-								<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>
 								<span class="account-username"> {username}</span>
 							</span>
 

templates/partials/account/header.tpl

@@ -1,24 +1,25 @@
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
 <div class="cover" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
-	<!-- IF isSelf -->
-	<div class="controls">
-		<span class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></span>
-		<span class="resize"><i class="fa fa-fw fa-4x fa-arrows"></i></span>
-	</div>
-	<div class="save">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
-	<div class="indicator">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
-	<!-- ENDIF isSelf -->
-
 	<div class="avatar">
 		<!-- IF picture -->
 		<img src="{picture}" class="user-profile-picture" />
 		<!-- ELSE -->
 		<div class="user-icon user-profile-picture" style="background-color: {icon:bgColor};" title="{username}">{icon:text}</div>
 		<!-- ENDIF picture -->
+		<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>
 	</div>
 
 	<div class="container">
 		<!-- IMPORT partials/account/menu.tpl -->
+
+		<!-- IF isSelf -->
+		<div class="controls">
+			<span class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></span>
+			<span class="resize"><i class="fa fa-fw fa-4x fa-arrows"></i></span>
+		</div>
+		<div class="save">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
+		<div class="indicator">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
+		<!-- ENDIF isSelf -->
 	</div>
 </div>