account page profile cover

less/account.less

@@ -1,9 +1,115 @@
-// TODO: Needs to be cleaned up - do not child theme or you will lose your work.
-
 .account {
+	.cover {
+		background-size: cover;
+		background-repeat: no-repeat;
+		min-height: 200px;
+		position: relative;
+		margin-bottom: 1em;
+		background-origin: content-box;
+		width: 100%;
+		top: 50px;
+		position: absolute;
+		left: auto;
+		right: 0px;
+
+		&:hover {
+			.controls {
+				.opacity(0.8);
+			}
+		}
+
+		.controls {
+			text-align: center;
+			min-height: 200px;
+			line-height: 200px;
+			.opacity(0);
+			.transition(opacity .15s linear);
+			cursor: pointer;
+			pointer-events: none;
+
+			> * {
+				pointer-events: all;
+			}
+
+			.fa {
+				color: white;
+				background-color: #333;
+				opacity: 1;
+				margin: 15px;
+				padding: 5px;
+			}
+		}
+
+		&.active {
+			&:hover {
+				cursor: move;
+			}
+
+			.controls {
+				> * {
+					display: none;
+				}
+			}
+
+			.save {
+				display: inline-block;
+			}
+		}
+
+		&.saving {
+			.save {
+				display: none;
+			}
+
+			.indicator {
+				display: inline-block;
+			}
+		}
+
+		.save, .indicator {
+			display: inline-block;
+			position: absolute;
+			top: 1em;
+			right: 2em;
+			opacity: 1;
+			background-color: @brand-primary;
+			color: #eee;
+			padding: 0.5em;
+			font-weight: bold;
+
+			&:hover {
+				cursor: pointer;
+			}
+		}
+
+		.save {
+			display: none;
+		}
+
+		.indicator {
+			display: none;
+		}
+	}
 
+	@media (min-width: @screen-md-min) {
+		margin-top: 300px;
+		
+		.cover {
+			min-height: 300px;
+
+			.controls {
+				min-height: 300px;
+				line-height: 300px;
+			}
+		}
+	}
 }
 
+
+
+
+
+// 
 .nav-pills.account-sub-links {
 	border:none;
 

templates/account/profile.tpl

@@ -1,6 +1,14 @@
-<!-- IMPORT partials/account_menu.tpl -->
-
 <div class="account">
+	<!-- IMPORT partials/account_menu.tpl -->
+
+	<div class="cover" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
+		<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-alt"></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>
+	</div>
 
 	<div class="row">
 		<div class="col-md-5 account-block">