Adds flickr style gradient.

Adds Flickr Style gradients to albums. Fixes opening folder and opening images.
owncloud · Nov 6, 2015 · 41e1478 · 41e1478
1 parent 5628f45
commit 41e1478
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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 () {