From 41e147805979e2d7748e0a48f30d6444617e44c3 Mon Sep 17 00:00:00 2001
From: Raghu Nayyar <hey@raghunayyar.com>
Date: Thu, 29 Oct 2015 21:58:38 +0530
Subject: [PATCH] Adds flickr style gradient.

Adds Flickr Style gradients to albums.

Fixes opening folder and opening images.
---
 css/styles.css     | 16 +++++++++++++---
 js/galleryalbum.js | 10 +++++-----
 js/galleryimage.js | 11 ++++++-----
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index d4c9800c64..3799c9c0b1 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -139,10 +139,16 @@ div.crumb.last a {
 
 #gallery .item-container .album-label,
 #gallery .item-container .image-label {
-	background: rgba(0, 0, 0, 0.4);
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	transition: opacity 200ms linear;
+	opacity: 1;
+	background-image: linear-gradient(rgba(0,0,0,0) 65%,rgba(0,0,0,0.35));
 }
 
-#gallery .item-container .image-label .title {
+#gallery .item-container .image-label .title,
+#gallery .item-container .album-label .title {
 	display: inline-block;
 	color: #fff;
 	text-align: center;
@@ -152,9 +158,13 @@ div.crumb.last a {
 	overflow-x: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	left: 0;
+	bottom: 10px;
+	position: absolute;
 }
 
-#gallery .item-container .image-label .title:hover {
+#gallery .item-container .image-label .title:hover.
+#gallery .item-container .album-label .title {
 	overflow: visible;
 	white-space: normal;
 }
diff --git a/js/galleryalbum.js b/js/galleryalbum.js
index 930936907f..98dc877b32 100644
--- a/js/galleryalbum.js
+++ b/js/galleryalbum.js
@@ -6,10 +6,11 @@
 		'<div class="item-container album-container" ' +
 		'style="width: {{targetWidth}}px; height: {{targetHeight}}px;" ' +
 		'data-width="{{targetWidth}}" data-height="{{targetHeight}}">' +
-		'	<div class="album-loader loading"></div>' +
-		'	<span class="album-label">{{label}}</span>' +
-		'	<a class="album" href="{{targetPath}}"></a>' +
-		'</div>';
+		'<div class="album-loader loading"></div>' +
+		'<a class="album" href="{{targetPath}}">' + 
+		'<div class="album-label">' + 
+		'<span class="title">{{label}}</span>' +
+		'</div></a></div>';
 
 	/**
 	 * Creates a new album object to store information about an album
@@ -62,7 +63,6 @@
 				album.domDef.click(album._showLoader.bind(album));
 
 				album._fillSubAlbum(targetHeight);
-
 				return album.domDef;
 			});
 		},
diff --git a/js/galleryimage.js b/js/galleryimage.js
index bdd21595dc..fced11fffd 100644
--- a/js/galleryimage.js
+++ b/js/galleryimage.js
@@ -6,10 +6,11 @@
 		'<div class="item-container image-container" ' +
 		'style="width: {{targetWidth}}px; height: {{targetHeight}}px;" ' +
 		'data-width="{{targetWidth}}" data-height="{{targetHeight}}">' +
-		'	<span class="image-label">' +
-		'		<span class="title">{{label}}</span>' +
-		'	</span>' +
-		'	<a class="image" href="{{targetPath}}" data-path="{{path}}"></a>' +
+		'<a class="image" href="{{targetPath}}" data-path="{{path}}">'+ 
+		'<div class="image-label">' +
+		'<span class="title">{{label}}</span>' +
+		'</div>' + 
+		'</a>' + 
 		'</div>';
 
 	/**
@@ -127,7 +128,7 @@
 		 * @private
 		 */
 		_addLabel: function () {
-			var imageLabel = this.domDef.children('.image-label');
+			var imageLabel = this.domDef.find('.image-label');
 			this.domDef.hover(function () {
 				imageLabel.slideToggle(OC.menuSpeed);
 			}, function () {