Mercurial > libervia-templates

comparison sat_templates/templates/bulma/photo/album.html @ 243:2b8d18a9df00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (photo/album): change for dynamic content: - added drop zone and file selector to upload photos - moved item template to its own file, so it can be used for dynamic content - added delete button - changes to manage progression bar and other stuff
author Goffi <goffi@goffi.org>
date Fri, 19 Jun 2020 17:57:13 +0200
parents 0e69b5843c2f
children a0e889d73bad
comparison
equal deleted inserted replaced
242:bb5193cef770 243:2b8d18a9df00
2 {% import 'components/avatar.html' as avatar with context %} 2 {% import 'components/avatar.html' as avatar with context %}
3 {% import 'input/textbox.html' as textbox with context %} 3 {% import 'input/textbox.html' as textbox with context %}
4 {% import 'blog/macros.html' as blog with context %} 4 {% import 'blog/macros.html' as blog with context %}
5 5
6 {% block body %} 6 {% block body %}
7 {{ icon_defs('comment-empty') }} 7 {{ icon_defs('comment-empty', 'trash-empty') }}
8 <div class="columns album is-multiline has-margin-top-1"> 8 <div id="album_items" class="columns album is-multiline mt-4">
9 {% set ns_photos = namespace(empty=true) %}
9 {% for file in files_data %} 10 {% for file in files_data %}
10 {% if file.type == C.FILE_TYPE_FILE %} 11 {% if file.type == C.FILE_TYPE_FILE %}
11 <div class="column is-4"> 12 {% set ns_photos.empty = false %}
12 <div class="card x-is-hoverable"> 13 {% include 'photo/item.html' %}
13 <div class="card-image is-photo-thumbnail-container is-flex has-items-centered has-background-light">
14 <a href="{{file.url}}" class="is-wrapping">
15 <img class="is-photo-thumbnail" src="{{file.thumb_url}}" alt="{{file.name}}">
16 </a>
17 </div>
18 <div class="card-content" onclick="clicked_mh_fix('{{'comments_panel'|next_gidx}}')">
19 <div class="level">
20 <div class="level-left"></div>
21 <div class="level-right">
22 <div class="level-item is-size-7">
23 {% if file.comments_url is defined %}
24 {% if file.comments_count %}
25 <span class='comments__count'>{{file.comments_count}} </span>
26 {% endif %}
27 {{ icon('comment-empty', cls='icon is-small') }}
28 {% endif %}
29 </div>
30 </div>
31 </div>
32 </div>
33 </div>
34 <div id='{{'comments_panel'|cur_gidx}}' class="has-margin-top-1 panel-drawer">
35 {{ blog.show_items(file.comments, expanded=true, dates_fmt='relative') }}
36 <div class="comment_post has-margin-top-1">
37 {{- textbox.comment_or_login(service=file.comments_service, node=file.comments_node) -}}
38 </div>
39 </div>
40 </div>
41 {% endif %} 14 {% endif %}
42 {% endfor %} 15 {% endfor %}
43 </div> 16 </div>
17 {# {% if ns_photos.empty %} #}
18 {% if true %}
19 <div id="file_drop" class="box column has-border-dashed has-border-grey-light is-hidden-touch">
20 <div class="has-text-weight-bold has-text-centered has-text-grey-light is-size-3">
21 {% trans %}
22 Drop photos here
23 {% endtrans %}
24 </div>
25 </div>
26 <h2 class="title is-4 has-text-centered is-hidden-touch">OR</h2>
27 <div class="file is-large is-boxed is-centered">
28 <label class="file-label">
29 <input id="file_input" class="file-input" type="file" accept="image/*" name="photos_upload" multiple>
30 <span class="file-cta">
31 <span class="file-icon is-marginless">
32 <i class="icon-upload"></i>
33 </span>
34 <span class="file-label">
35 {% trans %}
36 Select photos to upload…
37 {% endtrans %}
38 </span>
39 </span>
40 </label>
41 </div>
42 <div id="list" class="column"></div>
43 {% endif %}
44 {% endblock body %} 44 {% endblock body %}