Merge pull request #48 from TimP4w/master

Fix: edit, move and remove cover picture in groups
pichalite · Sep 16, 2016 · 6600634 · 6600634
2 parents a8599e4 + 9c690d3
commit 6600634
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 39 deletions.
diff --git a/less/groups.less b/less/groups.less
@@ -114,28 +114,43 @@
 		position: relative;
 		margin-bottom: 1em;
 
-		.change {
-			visibility: hidden;
+	&:hover {
+		.controls {
+			.opacity(0.8);
 		}
+	}
 
-		&.initialised:hover {
-			.change {
-				.opacity(1);
-				visibility: visible;
-			}
+	.controls {
+		text-align: center;
+		height: 200px;
+		line-height: 200px;
+		.opacity(0);
+		.transition(opacity .15s linear);
+		cursor: pointer;
+		pointer-events: none;
+
+		> * {
+			pointer-events: all;
 		}
 
-		&.active {
+		.fa {
+			color: white;
+			background-color: #333;
+			opacity: 1;
+			margin: 15px;
+			padding: 5px;
+		}
+	}
+
+	&.active {
 			&:hover {
 				cursor: move;
 			}
 
-			.instructions {
-				.opacity(1);
-			}
-
-			.change {
-				display: none;
+			.controls {
+				> * {
+					display: none;
+				}
 			}
 
 			.save {
@@ -153,48 +168,29 @@
 			}
 		}
 
-		.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 {
 				cursor: pointer;
 			}
 		}
 
-		.change {
-			.opacity(0);
-			.transition(opacity .15s linear);
-		}
-
 		.save {
 			display: none;
 		}
 
 		.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);
-		}
 	}
 
 	.card-body.card-padding {

diff --git a/templates/groups/details.tpl b/templates/groups/details.tpl
@@ -3,10 +3,15 @@
 	<div class="col-xs-12">
 		<div class="card">
 			<div class="card-body" 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>
+				<!-- IF group.isOwner -->
+				<div class="controls">
+					<span class="upload"><i class="fa fa-fw fa-3x fa-upload"></i></span>
+					<span class="resize"><i class="fa fa-fw fa-3x fa-arrows"></i></span>
+					<span class="remove"><i class="fa fa-fw fa-3x fa-times"></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>
+				<!-- ENDIF group.isOwner -->
 			</div>
 		</div>
 	</div>