Mercurial > libervia-templates
changeset 243:2b8d18a9df00
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 | bb5193cef770 |
| children | a62822c6a114 |
| files | sat_templates/templates/bulma/photo/album.html sat_templates/templates/bulma/photo/item.html |
| diffstat | 2 files changed, 70 insertions(+), 32 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/photo/album.html Fri Jun 19 17:57:13 2020 +0200 +++ b/sat_templates/templates/bulma/photo/album.html Fri Jun 19 17:57:13 2020 +0200 @@ -4,41 +4,41 @@ {% import 'blog/macros.html' as blog with context %} {% block body %} -{{ icon_defs('comment-empty') }} -<div class="columns album is-multiline has-margin-top-1"> +{{ icon_defs('comment-empty', 'trash-empty') }} +<div id="album_items" class="columns album is-multiline mt-4"> + {% set ns_photos = namespace(empty=true) %} {% for file in files_data %} {% if file.type == C.FILE_TYPE_FILE %} - <div class="column is-4"> - <div class="card x-is-hoverable"> - <div class="card-image is-photo-thumbnail-container is-flex has-items-centered has-background-light"> - <a href="{{file.url}}" class="is-wrapping"> - <img class="is-photo-thumbnail" src="{{file.thumb_url}}" alt="{{file.name}}"> - </a> - </div> - <div class="card-content" onclick="clicked_mh_fix('{{'comments_panel'|next_gidx}}')"> - <div class="level"> - <div class="level-left"></div> - <div class="level-right"> - <div class="level-item is-size-7"> - {% if file.comments_url is defined %} - {% if file.comments_count %} - <span class='comments__count'>{{file.comments_count}} </span> - {% endif %} - {{ icon('comment-empty', cls='icon is-small') }} - {% endif %} - </div> - </div> - </div> - </div> - </div> - <div id='{{'comments_panel'|cur_gidx}}' class="has-margin-top-1 panel-drawer"> - {{ blog.show_items(file.comments, expanded=true, dates_fmt='relative') }} - <div class="comment_post has-margin-top-1"> - {{- textbox.comment_or_login(service=file.comments_service, node=file.comments_node) -}} - </div> - </div> - </div> + {% set ns_photos.empty = false %} + {% include 'photo/item.html' %} {% endif %} {% endfor %} </div> +{# {% if ns_photos.empty %} #} +{% if true %} + <div id="file_drop" class="box column has-border-dashed has-border-grey-light is-hidden-touch"> + <div class="has-text-weight-bold has-text-centered has-text-grey-light is-size-3"> + {% trans %} + Drop photos here + {% endtrans %} + </div> + </div> + <h2 class="title is-4 has-text-centered is-hidden-touch">OR</h2> + <div class="file is-large is-boxed is-centered"> + <label class="file-label"> + <input id="file_input" class="file-input" type="file" accept="image/*" name="photos_upload" multiple> + <span class="file-cta"> + <span class="file-icon is-marginless"> + <i class="icon-upload"></i> + </span> + <span class="file-label"> + {% trans %} + Select photos to upload… + {% endtrans %} + </span> + </span> + </label> + </div> + <div id="list" class="column"></div> +{% endif %} {% endblock body %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/photo/item.html Fri Jun 19 17:57:13 2020 +0200 @@ -0,0 +1,38 @@ +<div class="column is-4 item" data-item='{{file|tojson}}'> + <div class="card x-is-hoverable"> + <div class="card-image is-photo-thumbnail-container is-flex has-items-centered has-background-light"> + <a href="{{file.url}}" class="is-wrapping"> + <img class="is-photo-thumbnail" src="{{file.thumb_url}}" alt="{{file.name}}"> + </a> + </div> + <div class="card-content" onclick="clicked_mh_fix('{{'comments_panel'|next_gidx}}')"> + <div class="level"> + <div class="level-left"> + <div class="level-item is-size-7 x-is-hoverable-primary action_delete"> + {{ icon('trash-empty', cls='icon is-small') }} + </div> + </div> + <div class="level-right"> + <div class="level-item is-size-7"> + {% if file.comments_url is defined %} + {% if file.comments_count %} + <span class='comments__count'>{{file.comments_count}} </span> + {% endif %} + {{ icon('comment-empty', cls='icon is-small') }} + {% endif %} + </div> + </div> + </div> + </div> + </div> + {% if uploading %} + <progress class="progress is-info mt-4 has-background-white" value="0" max="100">0%</progress> + {% else %} + <div id='{{'comments_panel'|cur_gidx}}' class="mt-4 panel-drawer"> + {{ blog.show_items(file.comments, expanded=true, dates_fmt='relative') }} + <div class="comment_post mt-4"> + {{- textbox.comment_or_login(service=file.comments_service, node=file.comments_node) -}} + </div> + </div> + {% endif %} +</div>