From be6aa3cbf9064cbea54e1bb36cfcf7fae39df593 Mon Sep 17 00:00:00 2001 From: rabuzarus <> Date: Mon, 28 Aug 2017 14:29:11 +0200 Subject: [PATCH] Frio: provide single photo view template --- view/theme/frio/css/style.css | 57 ++++++++++++++++++ view/theme/frio/js/mod_photos.js | 32 ++++++++++ view/theme/frio/templates/like_noshare.tpl | 8 +++ view/theme/frio/templates/photo_item.tpl | 61 +++++++++++++++++++ view/theme/frio/templates/photo_view.tpl | 68 ++++++++++++++++++++++ view/theme/frio/templates/photos_head.tpl | 5 ++ 6 files changed, 231 insertions(+) create mode 100644 view/theme/frio/js/mod_photos.js create mode 100644 view/theme/frio/templates/like_noshare.tpl create mode 100644 view/theme/frio/templates/photo_item.tpl create mode 100644 view/theme/frio/templates/photo_view.tpl create mode 100644 view/theme/frio/templates/photos_head.tpl diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 8cc8997930..c782e62335 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -2415,6 +2415,63 @@ ul li:hover .contact-wrapper .contact-action-link:hover { .event-buttons .plink-event-link { 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 */ .profile-listing-table { display: table; diff --git a/view/theme/frio/js/mod_photos.js b/view/theme/frio/js/mod_photos.js new file mode 100644 index 0000000000..b8d03b5db9 --- /dev/null +++ b/view/theme/frio/js/mod_photos.js @@ -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 + }); +}); diff --git a/view/theme/frio/templates/like_noshare.tpl b/view/theme/frio/templates/like_noshare.tpl new file mode 100644 index 0000000000..d22804dcda --- /dev/null +++ b/view/theme/frio/templates/like_noshare.tpl @@ -0,0 +1,8 @@ + +
+ + {{if $nolike}} + + {{/if}} + +
diff --git a/view/theme/frio/templates/photo_item.tpl b/view/theme/frio/templates/photo_item.tpl new file mode 100644 index 0000000000..b86f404501 --- /dev/null +++ b/view/theme/frio/templates/photo_item.tpl @@ -0,0 +1,61 @@ + +
+ + + + {{* avatar picture *}} +
+ +
+ {{$name}} +
+
+
+ +
+ + {{* the header with the comment author name *}} +
+
+ {{$name}} +
+
+ + {{* comment content *}} +
+ {{if $title}} +
{{$title}}
+ {{/if}} + +
{{$body}}
+
+ +
+
+ + {{* comment text field *}} + {{if $comment}} +
+ {{$comment}} +
+ {{/if}} +
+ +
+
diff --git a/view/theme/frio/templates/photo_view.tpl b/view/theme/frio/templates/photo_view.tpl new file mode 100644 index 0000000000..17edb858bc --- /dev/null +++ b/view/theme/frio/templates/photo_view.tpl @@ -0,0 +1,68 @@ +{{* Template for singele photo view *}} + +{{* "live-photos" is needed for js autoupdate *}} +
+ +
+

{{$album.1}}

+ + + +
+
+ {{* The photo *}} +
+ +
+ + {{* Overlay buttons for previous and next photo *}} + {{if $prevlink}} + + {{/if}} + {{if $nextlink}} + + {{/if}} +
+ +
+ {{* The photo description *}} +
{{$desc}}
+ + {{* Tags and mentions *}} + {{if $tags}} +
{{$tags.1}}
+ {{/if}} + + {{if $tags.2}} + + {{/if}} + + {{* The part for editing the photo - only available for the edit subpage *}} + {{if $edit}}{{$edit}}{{/if}} + + {{if $likebuttons}} +
+ {{$likebuttons}} + {{$like}} + {{$dislike}} +
+ {{/if}} +
+
+ + {{* Insert the comments *}} +
+ {{$comments}} +
+ + {{$paginate}} +
diff --git a/view/theme/frio/templates/photos_head.tpl b/view/theme/frio/templates/photos_head.tpl new file mode 100644 index 0000000000..37a8e04966 --- /dev/null +++ b/view/theme/frio/templates/photos_head.tpl @@ -0,0 +1,5 @@ + + +