diff sat_templates/templates/bulma/forum/show_messages.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
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/forum/show_messages.html	Fri Sep 05 21:54:09 2025 +0200
@@ -0,0 +1,76 @@
+{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
+{% import 'components/avatar.html' as avatar with context %}
+{% import 'blog/macros.html' as blog with context %}
+
+{% block body %}
+
+    <div class="panel-header px-4 py-2">
+        <div class="level is-mobile">
+            <div class="level-left">
+                <div class="level-item">
+                    <button class="button is-small" id="left_panel-toggle" aria-label="Toggle left panel">
+                        <span class="icon"><i class="fas fa-bars"></i></span>
+                    </button>
+                </div>
+                <div class="level-item">
+                    <h1 class="title is-5 mb-0 pt-1">{{ topic_title }}</h1>
+                </div>
+            </div>
+            <div class="level-right">
+                <div class="level-item">
+                    <div class="field has-addons">
+                        <div class="control">
+                            <input id="search_thread" class="input is-small" type="text" placeholder="{{ _('Search in this forum') }}">
+                        </div>
+                        <div class="control">
+                            <button id="search_thread_button" class="button is-info is-small">
+                                <span class="icon is-small">
+                                    <i class="fas fa-search"></i>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="level-item">
+                    {% include 'forum/subscribe_button.html' %}
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <section id="forum_main_body" class="section is-flex is-flex-direction-column">
+        <div class="container is-max-desktop">
+            {# Messages Display #}
+            <section class="section has-background-white">
+                {{ blog.show_items(blog_items["items"], expanded=true) }}
+            </section>
+
+            {# New Message Section #}
+            <section class="section new-message-section">
+                <h2 class="subtitle is-4 mb-3">Add your reply</h2>
+                <div id="message_editor"></div>
+
+                {# Tags #}
+                <div id="tags_container" class="is-hidden">
+                    <label>Add you tags below</label>
+                    <input id="tags" type="text"  />
+                </div>
+                {# Attachments #}
+                <input id="forum-file-input" type="file" multiple="true" style="display: none" />
+
+                <div class="mt-4" id="attachments-area">
+                    <div id="forum-attachments" class="file-attachments is-flex is-flex-wrap-wrap">
+                    {# Attachments will be dynamically added here #}
+                    </div>
+                </div>
+
+                {# Submit Button #}
+                <div class="mt-4">
+                    <button class="button is-primary" id="send-message-button">Send Message</button>
+                </div>
+            </section>
+        </div>
+    </section>
+
+{% endblock body %}