From: rabuzarus <>
Date: Mon, 30 Jan 2017 14:00:26 +0000 (+0100)
Subject: style the photo album page of the vier theme
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=ec4e60ce3a321b804194691966270a0134d56c18;p=friendica.git

style the photo album page of the vier theme
---

diff --git a/view/templates/photo_album.tpl b/view/templates/photo_album.tpl
index 5416066cf0..d3e7ca4874 100644
--- a/view/templates/photo_album.tpl
+++ b/view/templates/photo_album.tpl
@@ -9,9 +9,9 @@
 {{/if}}
 
 {{foreach $photos as $photo}}
-<div class="photo-album-image-wrapper" id="photo-album-image-wrapper-{{$id}}">
-	<a href="{{$photo.link}}" class="photo-album-photo-link" id="photo-album-photo-link-{{$id}}" title="{{$photo.title}}">
-		<img src="{{$photo.src}}" alt="{{if $photo.album.name}}{{$photo.album.name}}{{elseif $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" title="{{$photo.title}}" class="photo-album-photo lframe resize{{$twist}}" id="photo-album-photo-{{$id}}" />
+<div class="photo-album-image-wrapper" id="photo-album-image-wrapper-{{$photo.id}}">
+	<a href="{{$photo.link}}" class="photo-album-photo-link" id="photo-album-photo-link-{{$photo.id}}" title="{{$photo.title}}">
+		<img src="{{$photo.src}}" alt="{{if $photo.album.name}}{{$photo.album.name}}{{elseif $photo.desc}}{{$photo.desc}}{{elseif $photo.alt}}{{$photo.alt}}{{else}}{{$photo.unknown}}{{/if}}" title="{{$photo.title}}" class="photo-album-photo lframe resize{{$photo.twist}}" id="photo-album-photo-{{$photo.id}}" />
 		<p class='caption'>{{$photo.desc}}</p>		
 	</a>
 </div>
diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index cbb850c130..8454c7e0ae 100644
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -3024,7 +3024,8 @@ a.btn#contact-edit-actions-button {
 }
 
 /* photo album page */
-.photo-top-image-wrapper {
+.photo-top-image-wrapper,
+.photo-album-image-wrapper {
   position: relative;
   float: left;
   margin-top: 15px;
@@ -3054,11 +3055,33 @@ a.btn#contact-edit-actions-button {
   float: left;
   width: 175px;
 }
-img.photo-top-photo {
+img.photo-top-photo,
+img.photo-album-photo {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
+.photo-album-photo {
+  float: none;
+}
+.photo-album-image-wrapper .caption {
+  opacity: 0;
+  width: 100%;
+  position: absolute;
+  bottom: 0px;
+  padding: 3px 5px;
+  background-color: rgb(255, 255, 255);
+  margin: 0;
+  overflow: hidden;
+  -webkit-transition: all 0.5s ease-in-out;
+  -moz-transition: all 0.5s ease-in-out;
+  -o-transition: all 0.5s ease-in-out;
+  -ms-transition: all 0.5s ease-in-out;
+  transition: all 0.5s ease-in-out;
+}
+.photo-album-image-wrapper:hover .caption {
+  opacity: 1;
+}
 
 .menu-profile-list{
   height: auto;