changes for latest group cover uploading

less/groups.less

@@ -50,14 +50,23 @@
 			min-height: 250px;
 		}
 
-		.change {
-			visibility: hidden;
+		&.initialised:hover {
+			.controls {
+				opacity: 0.5;
+			}
 		}
 
-		&.initialised:hover {
-			.change {
-				.opacity(1);
-				visibility: visible;
+		.controls {
+			text-align: center;
+			min-height: 250px;
+			line-height: 250px;
+			.opacity(0);
+			.transition(opacity .15s linear);
+			cursor: pointer;
+			pointer-events: none;
+
+			> * {
+				pointer-events: all;
 			}
 		}
 
@@ -66,12 +75,10 @@
 				cursor: move;
 			}
 
-			.instructions {
-				.opacity(1);
-			}
-
-			.change {
-				display: none;
+			.controls {
+				> * {
+					display: none;
+				}
 			}
 
 			.save {
@@ -89,15 +96,15 @@
 			}
 		}
 
-		.change, .save, .indicator {
+		.save, .indicator {
 			display: inline-block;
 			position: absolute;
 			top: 1em;
-			right: 1em;
-			background: rgba(0, 0, 0, 0.2);
+			right: 2em;
+			opacity: 1;
+			background-color: @brand-primary;
 			color: #eee;
 			padding: 0.5em;
-			border-radius: 5px;
 			font-weight: bold;
 
 			&:hover {
@@ -105,11 +112,6 @@
 			}
 		}
 
-		.change {
-			.opacity(0);
-			.transition(opacity .15s linear);
-		}
-
 		.save {
 			display: none;
 		}
@@ -117,20 +119,6 @@
 		.indicator {
 			display: none;
 		}
-
-		.instructions {
-			display: inline-block;
-			position: absolute;
-			right: 1em;
-			bottom: 1em;
-			background: rgba(0, 0, 0, 0.2);
-			color: #eee;
-			padding: 0.5em;
-			border-radius: 5px;
-			margin-top: 2em;
-			.opacity(0);
-			.transition(opacity .15s linear);
-		}
 	}
 
 	[component="groups/members"], [component="groups/pending"], [component="groups/invited"] {

templates/groups/details.tpl

@@ -2,10 +2,12 @@
 
 <div component="groups/container" class="details row">
 	<div class="col-xs-12" component="groups/cover" style="background-origin: content-box; background-image: url({group.cover:url}); background-position: {group.cover:position};">
-		<div class="change">[[groups:cover-change]] <i class="fa fa-fw fa-pencil-square-o"></i></div>
+		<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 class="instructions">[[groups:cover-instructions]]</div>
 	</div>
 	<div class="col-lg-6 col-xs-12">
 		<div class="panel panel-default">