Add flickr style gradients.

(cherry picked from commit b87aaf1)
owncloud · Feb 25, 2016 · ec94b9f · ec94b9f
1 parent 4c2a374
commit ec94b9f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -146,10 +146,16 @@ div.crumb.last a {
 
 #gallery .row > a > .album-label,
 #gallery .row > a > .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 .row > a > .image-label .title {
+#gallery .row > a > .image-label .title,
+#gallery .row > a > .album-label .title {
 	display: inline-block;
 	color: #fff;
 	text-align: center;
@@ -159,9 +165,13 @@ div.crumb.last a {
 	overflow-x: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
+	left: 0;
+	bottom: 10px;
+	position: absolute;
 }
 
-#gallery .row > a > .image-label .title:hover {
+#gallery .row > a > .image-label .title:hover,
+#gallery .row > a > .album-label .title:hover {
 	overflow: visible;
 	white-space: normal;
 }

diff --git a/js/galleryalbum.js b/js/galleryalbum.js
@@ -7,7 +7,9 @@
 		'data-width="{{targetWidth}}" data-height="{{targetHeight}}"' +
 		'href="{{targetPath}}">' +
 		'	<div class="album-loader loading"></div>' +
-		'	<span class="album-label">{{label}}</span>' +
+		'	<span class="album-label">' +
+		'		<span class="title">{{label}}</span>' +
+		'	</span>' +
 		'	<div class="album container" style="width: {{targetWidth}}px; height: {{targetHeight}}px;" >' +
 		'	</div>' +
 		'</a>';