diff sat_templates/templates/bulma/components/attachment_preview.html @ 413:0190a0d32909 default tip

Forum: Major redesign of forums: Forums have been redesigned. They follow the new general design with 2 or 3 panels, allowing to have directly a forum if one is found/set up, and a panel on the left to search/discover other ones. Categories have been rewritten to be usable with pubsub relationships, a XEP-0277 type node is used for topics, and each item has a comments node for the threads. The thread view is set in `forum/show_messages.html` template. It has a header with a search box and a button to (un)subscribe. Items are displayed with the same macros as for the blog items. Below a room is set for editor, tags and attachments. rel 463
author Goffi <goffi@goffi.org>
date Fri, 05 Sep 2025 21:54:09 +0200
parents sat_templates/templates/bulma/chat/attachment_preview.html@b2b859a62e70
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/components/attachment_preview.html	Fri Sep 05 21:54:09 2025 +0200
@@ -0,0 +1,26 @@
+<div class="attachment-preview is-flex is-flex-direction-column is-align-items-center mx-2">
+    {% if file.mime_type|media_type_main == 'image' %}
+        <!-- Show image thumbnail -->
+        <div class="thumbnail-container">
+            <img src="{{ file.url }}" class="thumbnail-image" alt="{{file.name}}">
+        </div>
+    {% elif file.mime_type|media_type_main == 'video' %}
+        <!-- Show video thumbnail with play icon -->
+        <a href="{{file.url}}" class="is-video-thumbnail-wrapper is-wrapping photo_thumb_click">
+            <img class="is-photo-thumbnail" src="{{file.thumb_url}}">
+            <div class="media_overlay_play is-flex has-items-centered">
+                <span class="icon">
+                    <i class="icon-play-circled"></i>
+                </span>
+            </div>
+        </a>
+    {% else %}
+        <!-- Show a generic file icon if not an image or video -->
+        {{ icon('doc', cls='icon is-large') }}
+    {% endif %}
+    <div class="attachment-name mx-2 has-text-weight-bold" title="{{ file.name }}">{{ file.name }}</div>
+    <button class="delete is-small attachment-delete-button action_delete"></button>
+    {% if uploading %}
+        <progress class="progress is-info has-background-white" value="0" max="100">0%</progress>
+    {% endif %}
+</div>