reorganized account menu

less/account.less

@@ -12,6 +12,15 @@
 		left: auto;
 		right: 0px;
 
+		.avatar {
+			position: absolute;
+			left: 50%;
+			margin-left: -64px;
+			top: 230px;
+			border: 4px solid white;
+			border-radius: 50%;
+		}
+
 		&:hover {
 			.controls {
 				.opacity(0.8);
@@ -108,17 +117,19 @@
 }
 
 
+.account-fab {
+	.open #profile {
+		background-color: lighten(@brand-primary, 10%);
+	}
 
+	.fab {
+		color: white;
+		font-size: 20px;
+	}
+}
 
 
 //
-.nav-pills.account-sub-links {
-	border:none;
-
-	> li {
-		float:right;
-	}
-}
 
 .account-picture-block{
 	vertical-align:top;
@@ -159,13 +170,7 @@
 }
 
 
-.account-username-box {
-	margin-bottom:10px;
 
-	.open #profile {
-		background-color: lighten(@brand-primary, 10%);
-	}
-}
 
 .account-username{
   font-size:20px;

templates/partials/account_menu.tpl

@@ -1,15 +1,18 @@
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
-<div class="account-username-box" data-userslug="{userslug}" data-uid="{uid}">
+<div class="btn-group account-fab">
-	<ul class="nav nav-pills account-sub-links">
+	<button type="button" class="fab dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<i class="fa fa-ellipsis-v"></i>
+	</button>
+	<ul class="dropdown-menu dropdown-menu-right">
 		<li>
-			<a href="#" type="button" class="dropdown-toggle inline-block" data-toggle="dropdown">
+			<a href="{config.relative_path}/user/{userslug}" class="inline-block" id="profile"><i class="fa fa-user"></i> [[user:profile]]</a>
-				[[user:more]]
+		</li>
-				<span class="caret"></span>
+		<!-- IF showHidden -->
-				<span class="sr-only">Toggle Dropdown</span>
+		<li><a href="{config.relative_path}/user/{userslug}/settings"><i class="fa fa-gear"></i> [[user:settings]]</a></li>
-			</a>
+		<li><a href="{config.relative_path}/user/{userslug}/edit"><i class="fa fa-pencil-square-o"></i> [[user:edit]]</a></li>
-			<ul class="dropdown-menu pull-right" role="menu">
+		<!-- ENDIF showHidden -->
+		<li class="divider"></li>
 		<li><a href="{config.relative_path}/user/{userslug}/following"><i class="fa fa-fw fa-users"></i> [[user:following]]</a></li>
 		<li><a href="{config.relative_path}/user/{userslug}/followers"><i class="fa fa-fw fa-users"></i> [[user:followers]]</a></li>
 		<li class="divider"></li>
@@ -24,15 +27,6 @@
 		<li id="{profile_links.id}" class="plugin-link <!-- IF profile_links.public -->public<!-- ELSE -->private<!-- ENDIF profile_links.public -->"><a href="{config.relative_path}/user/{userslug}/{profile_links.route}"><i class="fa fa-fw {profile_links.icon}"></i> {profile_links.name}</a></li>
 		<!-- END profile_links -->
 	</ul>
-		</li>
-		<li>
-			<a href="{config.relative_path}/user/{userslug}" class="inline-block" id="profile"><i class="fa fa-user"></i> [[user:profile]]</a>
-		</li>
-		<!-- IF showHidden -->
-		<li><a href="{config.relative_path}/user/{userslug}/settings"><i class="fa fa-gear"></i> [[user:settings]]</a></li>
-		<li><a href="{config.relative_path}/user/{userslug}/edit"><i class="fa fa-pencil-square-o"></i> [[user:edit]]</a></li>
-		<!-- ENDIF showHidden -->
-	</ul>
 </div>
 
 <div class="cover" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
@@ -44,4 +38,12 @@
 	<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 -->
+	</div>
 </div>