Mercurial > libervia-templates

diff 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
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 %}