Frio: provide single photo view template
rabuzarus
parent
0c1c39b679
commit
be6aa3cbf9
|
|
@ -2415,6 +2415,63 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
|
||||||
.event-buttons .plink-event-link {
|
.event-buttons .plink-event-link {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Photos Pages */
|
||||||
|
#photo-photo {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.photo-next-link, .photo-prev-link {
|
||||||
|
height: 64px;
|
||||||
|
margin-top: -32px;
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateZ(0);
|
||||||
|
transition: opacity .2s;
|
||||||
|
/*width: 27px;*/
|
||||||
|
width: 100px;
|
||||||
|
z-index: 11;
|
||||||
|
font-size: 64px;
|
||||||
|
color: #fff;
|
||||||
|
text-shadow:
|
||||||
|
-1px -1px 0 #000,
|
||||||
|
1px -1px 0 #000,
|
||||||
|
-1px 1px 0 #000,
|
||||||
|
1px 1px 0 #000;
|
||||||
|
}
|
||||||
|
.photo-next-link > i, .photo-prev-link > i {
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
|
.photo-next-link > i {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.photo-prev-link {
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
.photo-next-link {
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
|
#photo-photo:hover .photo-next-link,
|
||||||
|
#photo-photo:hover .photo-prev-link {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
#photo-photo .photo-next-link:hover,
|
||||||
|
#photo-photo .photo-prev-link:hover {
|
||||||
|
opacity: 1;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.photo-comment-wrapper .comment {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.photo-comment-wrapper .wall-item-content {
|
||||||
|
color: #555;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.photo-comment-wrapper .comment-wwedit-wrapper,
|
||||||
|
.photo-comment-wrapper .wall-item-outside-wrapper.media:first-child {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
/* Profiles Page */
|
/* Profiles Page */
|
||||||
.profile-listing-table {
|
.profile-listing-table {
|
||||||
display: table;
|
display: table;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
$('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() {
|
||||||
|
var selstr;
|
||||||
|
$('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() {
|
||||||
|
selstr = $(this).text();
|
||||||
|
$('#jot-perms-icon').removeClass('unlock').addClass('lock');
|
||||||
|
$('#jot-public').hide();
|
||||||
|
});
|
||||||
|
if(selstr == null) {
|
||||||
|
$('#jot-perms-icon').removeClass('lock').addClass('unlock');
|
||||||
|
$('#jot-public').show();
|
||||||
|
}
|
||||||
|
|
||||||
|
}).trigger('change');
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$(window).load(function() {
|
||||||
|
// Get picture dimensions
|
||||||
|
var pheight = $("#photo-photo img").height();
|
||||||
|
var pwidth = $("#photo-photo img").width();
|
||||||
|
|
||||||
|
// Append the diminsons of the picture to the css of the photo-photo div
|
||||||
|
// we do this to make it possible to have overlay navigation buttons for the photo
|
||||||
|
$("#photo-photo").css({
|
||||||
|
"width": pwidth,
|
||||||
|
"height": pheight
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
|
||||||
|
<div class="wall-item-actions" id="wall-item-like-buttons-{{$id}}">
|
||||||
|
<button type="button" class="btn-link button-likes" id="like-{{$id}}" title="{{$likethis}}" onclick="dolike({{$id}},'like'); return false;" data-toggle="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i> </button>
|
||||||
|
{{if $nolike}}
|
||||||
|
<button type="button" class="btn-link button-likes" id="dislike-{{$id}}" title="{{$nolike}}" onclick="dolike({{$id}},'dislike'); return false;" data-toggle="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i> </button>
|
||||||
|
{{/if}}
|
||||||
|
<img id="like-rotator-{{$id}}" class="like-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" />
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
|
||||||
|
<div class="wall-item-outside-wrapper{{$indent}} media" id="wall-item-outside-wrapper-{{$id}}">
|
||||||
|
|
||||||
|
<ul class="nav nav-pills preferences">
|
||||||
|
{{* The time of the comment *}}
|
||||||
|
<li><span><small><time class="dt-published">{{$ago}}</time></small></span></li>
|
||||||
|
|
||||||
|
{{* Dropdown menu with actions (e.g. delete comment) *}}
|
||||||
|
{{if $drop.dropping }}
|
||||||
|
<li class="dropdown">
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" id="dropdownMenuTools-{{$id}}" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-angle-down"></i></a>
|
||||||
|
|
||||||
|
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenuTools-{{$id}}">
|
||||||
|
<li role="menuitem">
|
||||||
|
<a onclick="dropItem('item/drop/{{$id}}', '#wall-item-outside-wrapper-{{$id}}'); return false;" class="delete" title="{{$drop.delete}}"><i class="fa fa-trash"></i> {{$drop.delete}}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
{{/if}}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{{* avatar picture *}}
|
||||||
|
<div class="contact-photo-wrapper mframe p-author h-card pull-left">
|
||||||
|
<a class="userinfo" id="wall-item-photo-menu-{{$id}} u-url" href="{{$profile_url}}">
|
||||||
|
<div class="contact-photo-image-wrapper">
|
||||||
|
<img src="{{$thumb}}" class="contact-photo-xs media-object p-name u-photo" id="wall-item-photo-{{$item.id}}" alt="{{$name}}" />
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="media-body">
|
||||||
|
|
||||||
|
{{* the header with the comment author name *}}
|
||||||
|
<div role="heading " class="contact-info-comment">
|
||||||
|
<h5 class="media-heading">
|
||||||
|
<a href="{{$profile_url}}" title="View {{$name}}'s profile" class="wall-item-name-link userinfo"><span class="btn-link">{{$name}}</span></a>
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{* comment content *}}
|
||||||
|
<div itemprop="description" class="wall-item-content" id="wall-item-content-{{$id}}">
|
||||||
|
{{if $title}}
|
||||||
|
<div class="wall-item-title" id="wall-item-title-{{$id}}">{{$title}}</div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<div class="wall-item-body {{if !$title}}p-name{{/if}}" id="wall-item-body-{{$id}}" >{{$body}}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wall-item-wrapper-end clear"></div>
|
||||||
|
<div class="wall-item-comment-separator"></div>
|
||||||
|
|
||||||
|
{{* comment text field *}}
|
||||||
|
{{if $comment}}
|
||||||
|
<div class="wall-item-comment-wrapper" id="item-comments-{{$item.id}}">
|
||||||
|
{{$comment}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="wall-item-outside-wrapper-end{{$indent}} clear"></div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
{{* Template for singele photo view *}}
|
||||||
|
|
||||||
|
{{* "live-photos" is needed for js autoupdate *}}
|
||||||
|
<div id="live-photos"></div>
|
||||||
|
|
||||||
|
<div id="photo-view-{{$id}}" class="general-content-wrapper">
|
||||||
|
<h3><a href="{{$album.0}}">{{$album.1}}</a></h3>
|
||||||
|
|
||||||
|
<div id="photo-edit-link-wrap">
|
||||||
|
{{if $tools}}
|
||||||
|
<a id="photo-edit-link" href="{{$tools.edit.0}}">{{$tools.edit.1}}</a>
|
||||||
|
|
|
||||||
|
<a id="photo-toprofile-link" href="{{$tools.profile.0}}">{{$tools.profile.1}}</a>
|
||||||
|
{{/if}}
|
||||||
|
{{if $lock}} | <img src="images/lock_icon.gif" class="lockview" alt="{{$lock}}" onclick="lockview(event,'photo/{{$id}}');" /> {{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="photo-view-wrapper">
|
||||||
|
<div id="photo-photo">
|
||||||
|
{{* The photo *}}
|
||||||
|
<div class="photo-container">
|
||||||
|
<a href="{{$photo.href}}" title="{{$photo.title}}"><img src="{{$photo.src}}" /></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{* Overlay buttons for previous and next photo *}}
|
||||||
|
{{if $prevlink}}
|
||||||
|
<a class="photo-prev-link" href="{{$prevlink.0}}"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
|
||||||
|
{{/if}}
|
||||||
|
{{if $nextlink}}
|
||||||
|
<a class="photo-next-link" href="{{$nextlink.0}}"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="photo-photo-end"></div>
|
||||||
|
{{* The photo description *}}
|
||||||
|
<div id="photo-caption">{{$desc}}</div>
|
||||||
|
|
||||||
|
{{* Tags and mentions *}}
|
||||||
|
{{if $tags}}
|
||||||
|
<div id="photo-tags">{{$tags.1}}</div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{if $tags.2}}
|
||||||
|
<div id="tag-remove">
|
||||||
|
<a href="{{$tags.2}}">{{$tags.3}}</a>
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
{{* The part for editing the photo - only available for the edit subpage *}}
|
||||||
|
{{if $edit}}{{$edit}}{{/if}}
|
||||||
|
|
||||||
|
{{if $likebuttons}}
|
||||||
|
<div id="photo-like-div">
|
||||||
|
{{$likebuttons}}
|
||||||
|
{{$like}}
|
||||||
|
{{$dislike}}
|
||||||
|
</div>
|
||||||
|
{{/if}}
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{* Insert the comments *}}
|
||||||
|
<div id="photo-comment-wrapper-{{$id}}" class="photo-comment-wrapper">
|
||||||
|
{{$comments}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{$paginate}}
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
|
||||||
|
<script type="text/javascript" src="view/theme/frio/js/mod_photos.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var ispublic = "{{$ispublic}}";
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue