Mercurial > libervia-templates
changeset 124:11e729a7d8e9
photo: photos handling, first draft:
this template is a specialized file view for photo albums. A comments panel is added if a comments link is found.
author | Goffi <goffi@goffi.org> |
---|---|
date | Sun, 18 Mar 2018 11:31:36 +0100 (2018-03-18) |
parents | 44b838bcc0d6 |
children | 04609722add0 |
files | default/file/overview.html default/photo/album.html default/static/photo.css |
diffstat | 3 files changed, 89 insertions(+), 1 deletions(-) [+] |
line wrap: on
line diff
--- a/default/file/overview.html Wed Mar 14 08:43:30 2018 +0100 +++ b/default/file/overview.html Sun Mar 18 11:31:36 2018 +0100 @@ -1,7 +1,7 @@ {% extends 'base/base.html' %} {% block body %} -{{ icon_defs('level-up', 'doc','folder-open-empty') }} +{{ icon_defs('level-up', 'doc','folder-open-empty', 'comment-empty') }} <ul id="files"> {% if parent_url is defined %} <li class="file">
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/photo/album.html Sun Mar 18 11:31:36 2018 +0100 @@ -0,0 +1,33 @@ +{% extends 'base/base.html' %} +{% import 'input/textbox.html' as textbox with context %} +{% import 'blog/macros.html' as blog with context %} + +{% block body %} +{{ icon_defs('comment-empty') }} +<div class="album"> + {% for file in files_data %} + {% if file.type == C.FILE_TYPE_FILE %} + <div class="album__item"> + <div class="album__vignette"> + <img src="{{file.thumb_url}}" class="album__thumbnail" alt="{{file.name}}"> + </div> + {% if file.comments_url is defined %} + <span class='album__comments-bar' onclick="clicked_mh_fix('{{'comments_panel'|next_gidx}}')"> + {% trans %}comments{% endtrans %} + {% if file.comments_count %} + <span class='comments__count'>({{file.comments_count}})</span> + {% endif %} + {{ icon('comment-empty', cls='icon--small') }} + </span> + <div id='{{'comments_panel'|cur_gidx}}' class="panel-drawer"> + {{ blog.show_items(file.comments, expanded=true, dates_fmt='relative') }} + <div class="comment_post"> + {{- textbox.comment_or_login(service=file.comments_service, node=file.comments_node) -}} + </div> + </div> + {% endif %} + </div> + {% endif %} + {% endfor %} +</div> +{% endblock body %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/static/photo.css Sun Mar 18 11:31:36 2018 +0100 @@ -0,0 +1,55 @@ +@import 'blog.css'; /* needed for comments */ + +.album { + display: flex; + flex-wrap: wrap; +} + +.album__item { + width: 400px; + margin: 0 0.1em 2em 0.1em; +} + +.album__vignette { + background-color: #444; + height: 300px; + position: relative; +} + +.album__thumbnail { + height: 100%; + display: block; + margin: 0 auto; +} + +.album__comments-bar { + display: block; + font-size: 0.8em; + color: black; + text-align: right; + cursor: pointer; +} + +.album__comments-bar:hover { + background-color: #ddd; + font-weight: bold; +} + +.icon--small { + height: 1em; +} + +.comments__count { + font-weight: bold; +} + +.panel-drawer { + max-height: 0; + opacity: 0; + transition: max-height 1s, opacity 2s; + overflow: hidden; +} + +.panel-drawer.clicked { + opacity: 1; +}