# HG changeset patch # User Goffi # Date 1757102049 -7200 # Node ID 0190a0d329097c08fda0f4fd09fee60aa9f1934f # Parent c1d33d7e4b96f0de07944581abb311de7d4f43e9 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 diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/base/base.html --- a/sat_templates/templates/bulma/base/base.html Sun Aug 31 12:38:49 2025 +0200 +++ b/sat_templates/templates/bulma/base/base.html Fri Sep 05 21:54:09 2025 +0200 @@ -80,6 +80,7 @@ {{script.content|safe}} {% endfor %} + {% block favicon %} {% endblock favicon %} diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/chat/attachment_preview.html --- a/sat_templates/templates/bulma/chat/attachment_preview.html Sun Aug 31 12:38:49 2025 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,26 +0,0 @@ -
- {% if file.mime_type|media_type_main == 'image' %} - -
- {{file.name}} -
- {% elif file.mime_type|media_type_main == 'video' %} - - - -
- - - -
- - {% else %} - - {{ icon('doc', cls='icon is-large') }} - {% endif %} -
{{ file.name }}
- - {% if uploading %} - 0% - {% endif %} -
diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/components/attachment_preview.html --- /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 @@ +
+ {% if file.mime_type|media_type_main == 'image' %} + +
+ {{file.name}} +
+ {% elif file.mime_type|media_type_main == 'video' %} + + + +
+ + + +
+ + {% else %} + + {{ icon('doc', cls='icon is-large') }} + {% endif %} +
{{ file.name }}
+ + {% if uploading %} + 0% + {% endif %} +
diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/forum/categories.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/forum/categories.html Fri Sep 05 21:54:09 2025 +0200 @@ -0,0 +1,112 @@ +{% if not embedded %}{% extends 'base/base.html' %}{% endif %} + +{% macro generate_forums(forums_data, level=0) %} +
+ {% for forum in forums_data %} +
+ {% if forum.forum_type == "main_category" %} + + {# Main Categories #} +
+
+
+ + + +
+
+ {% if 'http_url' in forum %} + + {% endif %} +

+ {{ forum.title }} +

+ {% if forum.description %} +

{{ forum.description }}

+ {% endif %} + {% if 'http_url' in forum %} + + {% endif %} +
+ {% if level == 0 %} +
+ + + {{ forum.children|length }} Forums + +
+ {% endif %} +
+
+ + {% if forum.children %} +
+ {{ generate_forums(forum.children, level+1) }} +
+ {% endif %} + + {% else %} + + {# Subcategories #} + +
+
+ + + +
+
+
+ {{ forum.title }} + {% if forum.description %} +

{{ forum.description }}

+ {% endif %} +
+
+ {% if 'nb_items' in forum %} + + + {{ forum.nb_items }} Topics + + {% endif %} + {% if forum.last_activity %} + + + {{ forum.last_activity|date_fmt('short', tz_name=tz_name)}} + + {% endif %} +
+
+
+ {% if 'http_url' in forum %} + + + + {% endif %} +
+
+ + {% endif %} +
+ {% endfor %} +
+{% endmacro %} + +{% block body %} +
+ {% if not forums %} +
+
+ + + +

{% trans %}No forums found{% endtrans %}

+

{% trans %}You may ask your service administrator to create some.{% endtrans %}

+
+
+ {% else %} + {{ generate_forums(forums) }} + {% endif %} +
+{% endblock body %} diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/forum/discover_panel.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/forum/discover_panel.html Fri Sep 05 21:54:09 2025 +0200 @@ -0,0 +1,19 @@ +{% import 'input/form.html' as form with context %} +{% import 'input/field.html' as field with context %} + +{{ icon_defs('magnifying-glass') }} + + diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/forum/forum.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/forum/forum.html Fri Sep 05 21:54:09 2025 +0200 @@ -0,0 +1,15 @@ +{% if not embedded %}{% extends 'base/base.html' %}{% set blog_page = True %}{% endif %} + +{% block body %} + +
+ + +
+ {% include 'forum/categories.html' %} +
+
+ +{% endblock body %} diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/forum/overview.html --- a/sat_templates/templates/bulma/forum/overview.html Sun Aug 31 12:38:49 2025 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,51 +0,0 @@ -{% extends 'base/base.html' %} - -{% macro generate_forums(forums_data, level=0) %} - {% if level == 0 %} -
- {% for forum in forums_data %} -
-

{{ forum.title }}

- {% if 'short-desc' in forum %} -

{{ forum['short-desc'] }} - {% endif %} -

- {% if 'sub-forums' in forum %} - {{ generate_forums(forum['sub-forums'], level=level+1) }} - {% endif %} - {% endfor %} -
- {% else %} -
- {% for forum in forums_data %} -
- {% if 'http_url' in forum %} - - {% else %} - - {% endif %} -

{{ forum.title }}

- {% if 'short-desc' in forum %} -

{{ forum['short-desc'] }}

- {% endif %} - - {% if 'sub-forums' in forum %} - {{ generate_forums(forum['sub-forums'], level=level+1) }} - {% endif %} -
- {% endfor %} -
-{% endif %} -{% endmacro %} - -{% block body %} -{% if not forums %} -
-
{% trans %}No forums found on this server!{% endtrans %}
-
-{% else %} -
- {{ generate_forums(forums) }} -
-{% endif %} -{% endblock body %} diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/forum/show_messages.html --- /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 %} + +
+
+
+
+ +
+
+

{{ topic_title }}

+
+
+
+
+
+
+ +
+
+ +
+
+
+
+ {% include 'forum/subscribe_button.html' %} + +
+
+
+
+ +
+
+ {# Messages Display #} +
+ {{ blog.show_items(blog_items["items"], expanded=true) }} +
+ + {# New Message Section #} +
+

Add your reply

+
+ + {# Tags #} + + {# Attachments #} + + +
+
+ {# Attachments will be dynamically added here #} +
+
+ + {# Submit Button #} +
+ +
+
+
+
+ +{% endblock body %} diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/forum/show_topics.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/forum/show_topics.html Fri Sep 05 21:54:09 2025 +0200 @@ -0,0 +1,97 @@ +{% import 'components/avatar.html' as avatar with context %} + +{% block body %} + +
+
+
+
+ +
+
+

{{ target_jid }}

+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ + {% if not blog_items or not blog_items['items'] %} +
+
+ {% trans %}There is not message yet in this forum.{% endtrans %} + {% if profile %} + {% trans %}You can start a topic of interest by filling the form below.{% endtrans %} + {% else %} + {% trans %}You can login to create a new topic.{% endtrans %} + {% endif %} +
+
+ {% else %} +
+ {% for item in blog_items['items'] %} + {% if "http_url" in item %} + + {% endif %} +
+
+ {{ avatar.avatar(item['author_jid']) }} +
+
+
+
+

+ {{ item.title | truncate(65) }} +

+ +

+ {{ item.author }} + — + {{ item.published | date_fmt('short') }} + {% if item.nb_items is defined %} + + + {{ item.nb_items }} + + {% endif %} +

+
+ + {% if item.published != item.updated %} +
+
+ {{ _('Updated') }} + + {{ item.updated | date_fmt('relative') }} + +
+
+ {% endif %} +
+
+
+ {% if "http_url" in item %} + + {% endif %} + {% endfor %} +
+ {% endif %} + +{% endblock body %} diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/forum/subscribe_button.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/forum/subscribe_button.html Fri Sep 05 21:54:09 2025 +0200 @@ -0,0 +1,9 @@ + diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/forum/view.html --- a/sat_templates/templates/bulma/forum/view.html Sun Aug 31 12:38:49 2025 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,21 +0,0 @@ -{% if not embedded %}{% extends 'base/base.html' %}{% endif %} -{% set dates_format='relative' if single else 'short' %} -{% import 'components/avatar.html' as avatar with context %} -{% import 'blog/macros.html' as blog with context %} -{% import 'input/textbox.html' as textbox with context %} -{% import 'input/navigation.html' as navigation with context %} - -{% block body %} - - -
- {{ blog.show_items(blog_items["items"], expanded=true) }} -
- -
- {{- textbox.comment_or_login(service=service, node=node, placeholder=_("Enter your message here")) -}} -
- - -{{ navigation.prev_next(_("older articles"), _("newer articles")) }} -{% endblock body %} diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/forum/view_messages.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/forum/view_messages.html Fri Sep 05 21:54:09 2025 +0200 @@ -0,0 +1,24 @@ +{% if not embedded %}{% extends 'base/base.html' %}{% endif %} +{% set dates_format='relative' if single else 'short' %} +{% import 'components/avatar.html' as avatar with context %} +{% import 'blog/macros.html' as blog with context %} +{% import 'input/textbox.html' as textbox with context %} +{% import 'input/navigation.html' as navigation with context %} + +{% block body %} + +{{ icon_defs( +"ellipsis", "regular face-smile", "reply", "share", "star" +) }} + +
+ + +
+ {% include 'forum/show_messages.html' %} +
+
+ +{% endblock body %} diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/forum/view_topics.html --- a/sat_templates/templates/bulma/forum/view_topics.html Sun Aug 31 12:38:49 2025 +0200 +++ b/sat_templates/templates/bulma/forum/view_topics.html Fri Sep 05 21:54:09 2025 +0200 @@ -6,44 +6,13 @@ {% block body %} - {% if not topics %} -
-
- {% trans %}There is not message yet in this forum.{% endtrans %} - {% if profile %} - {% trans %}You can start a topic of interest by filling this form.{% endtrans %} - {% else %} - {% trans %}You can login to create a new topic.{% endtrans %} - {% endif %} -
-
- {% endif %} - -
- -
- {% for topic in topics|reverse %} -
-
- {{ avatar.avatar(topic.author) }} -
-
-

- - {{topic.title}} - -

-
-
- {% endfor %} -
-
- - {{ navigation.prev_next(_("older topics"), _("newer topics")) }} +
+ + +
+ {% include 'forum/show_topics.html' %} +
+
{% endblock body %} diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/input/field.html --- a/sat_templates/templates/bulma/input/field.html Sun Aug 31 12:38:49 2025 +0200 +++ b/sat_templates/templates/bulma/input/field.html Fri Sep 05 21:54:09 2025 +0200 @@ -1,6 +1,6 @@ {# macros to create form fields #} -{% macro field(type, name, label="", value=none, class="", control_class="", help="", required=false, icon_left=none, icon_right=none, in_group=false, attrs=none) %} +{% macro field(type, name, label="", value=none, class="", control_class="", help="", required=false, icon_left=none, icon_right=none, in_group=false, attrs=none, delete_button=false) %} {# generic field "class" keyword can be used to add classes additional kwargs will be passed as attributes #} @@ -12,17 +12,22 @@ {% if label %} {% endif %} -
+
{% if icon_left %} {# we use with font from CSS instead of SVG, because using directly SVG doesn't play way with Bulma's control #} - + {% endif %} {% if icon_right %} - + + + {% endif %} + {% if delete_button %} + + {% endif %}
@@ -77,8 +82,8 @@ {{ field("text", name=name, label=label, value=value, class=class, control_class=control_class, help=help, required=required, icon_left=icon_left, icon_right=icon_right, attrs={'placeholder': placeholder, 'pattern': pattern, 'title': title, 'autocomplete': autocomplete}, in_group=in_group, caller=caller) }} {% endmacro %} -{% macro search(name, label="", value=none, class="", control_class="", placeholder=none, help="", required=false, pattern=none, title=none, autocomplete=none, icon_left=none, icon_right=none, in_group=false) %} - {{ field("search", name=name, label=label, value=value, class=class, control_class=control_class, help=help, required=required, icon_left=icon_left, icon_right=icon_right, attrs={'placeholder': placeholder, 'pattern': pattern, 'title': title, 'autocomplete': autocomplete}, in_group=in_group, caller=caller) }} +{% macro search(name, label="", value=none, class="", control_class="", placeholder=none, help="", required=false, pattern=none, title=none, autocomplete=none, icon_left=none, icon_right=none, in_group=false, delete_button=false) %} + {{ field("search", name=name, label=label, value=value, class=class, control_class=control_class, help=help, required=required, icon_left=icon_left, icon_right=icon_right, attrs={'placeholder': placeholder, 'pattern': pattern, 'title': title, 'autocomplete': autocomplete}, in_group=in_group, delete_button=delete_button, caller=caller) }} {% endmacro %} {% macro password(name, label="", value=none, required=false, minlength=none, icon_left=none, icon_right=none) %} diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/static/chat.css --- a/sat_templates/templates/bulma/static/chat.css Sun Aug 31 12:38:49 2025 +0200 +++ b/sat_templates/templates/bulma/static/chat.css Fri Sep 05 21:54:09 2025 +0200 @@ -105,11 +105,6 @@ opacity: 1; } -.attachments { - overflow-x: auto; - white-space: nowrap; -} - .message-core:hover, .message-core.has-popup-focus { background-color: #f5f5f5; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); @@ -141,34 +136,6 @@ transition: box-shadow 0.3s ease; } -/* Attachments */ - -.attachments { - opacity: 1; - max-height: 1000px; - transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out; - overflow-x: auto; - overflow-y: hidden; - padding: 1.25rem 0; - margin: 0; -} - -.attachments.is-contracted { - opacity: 0; - max-height: 0; - padding: 0; -} - -.attachment-preview { - position: relative; - border: 1px solid #dbdbdb; - padding: 0.3rem 0.5rem; - border-radius: 4px; - background-color: #f5f5f5; - width: 9rem; - height: 6rem; -} - /* Reply to indicator */ #reply-to { diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/static/forum.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/static/forum.css Fri Sep 05 21:54:09 2025 +0200 @@ -0,0 +1,133 @@ +#body { + display: flex; + flex-grow: 1; + overflow: auto; +} + +#forum_main_body { + overflow-y: auto; +} + +.topics-container { + max-height: calc(100vh - 100px); + overflow-y: auto; +} + +.topic-item { + border-radius: 8px; + border: 1px solid #e8e8e8; + transition: all 0.2s ease; + box-shadow: 0 2px 4px rgba(10, 10, 10, 0.03); +} + + +.topic-item:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; + transform: translateY(-1px); + border-color: #3273dc; +} + +.no-topics-message { + border-radius: 12px; + background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%); + max-width: 500px; + margin: 2rem auto 1rem !important; +} + + +.no-topics-message i.fa-comments { + color: #3273dc; + opacity: 0.7; +} + + +@media (max-width: 768px) { + .topic-item { + padding: 0.75rem !important; + } + + .media-left { + margin-right: 0.5rem !important; + } + + .title.is-6 { + font-size: 0.95rem !important; + } + + .tags { + flex-wrap: wrap; + } +} + +.transition-all { + transition: all 0.25s ease; +} + +.tags.has-addons .tag:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-right: none; + background: rgba(235, 245, 255, 0.5); +} + +[data-theme="dark"] .tags.has-addons .tag:first-child { + background: rgba(0, 50, 100, 0.3); +} + +.tags.has-addons .tag:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.new-message-section { + border-top: 1px solid #dbdbdb; + padding-top: 1.5rem; + margin-top: 1.5rem; +} + +[data-theme="dark"] .topic-item { + background-color: #1a1a1a !important; + border-color: #333333; +} + +[data-theme="dark"] .no-topics-message { + background: linear-gradient(135deg, #1a1d22 0%, #14171c 100%); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); +} + +[data-theme="dark"] .no-topics-message i.fa-comments { + color: #48c0ff; +} + +[data-theme="dark"] .new-message-section { + border-top: 1px solid #4a4a4a; +} + +.extra-buttons { + display: inline-block; + vertical-align: middle; +} + +/* Custom Quill toolbar buttons */ +.extra-btn-tag, .extra-btn-attachment { + background: none; + border: none; + cursor: pointer; + padding: 4px 8px; + border-radius: 3px; + display: inline-block; +} + +.extra-btn-tag:hover, .extra-btn-attachment:hover { + background-color: #f0f0f0; +} + +[data-theme="dark"] .extra-btn-tag:hover, +[data-theme="dark"] .extra-btn-attachment:hover { + background-color: #4a4a4a; +} + +#message_editor.drag-over, #attachments-area.drag-over { + border-color: #3273dc; + background-color: rgba(50, 115, 220, 0.05); +} diff -r c1d33d7e4b96 -r 0190a0d32909 sat_templates/templates/bulma/static/styles.css --- a/sat_templates/templates/bulma/static/styles.css Sun Aug 31 12:38:49 2025 +0200 +++ b/sat_templates/templates/bulma/static/styles.css Fri Sep 05 21:54:09 2025 +0200 @@ -64,6 +64,12 @@ padding-top: 0.225em; } + +.is-text-content { + white-space: break-spaces; +} + + .avatar { width: 40px; height: 40px; @@ -85,7 +91,6 @@ background-color: var(--selected-item-bg); } - .collapsible-content { overflow: hidden; max-height: 0; @@ -315,6 +320,49 @@ transform: translateY(100%) !important; } +.thumbnail-image { + max-height: 100%; +} + +/* Tags */ + +.tag_input { + display: inline-block; + width: 6rem; +} + +/* Attachments */ + +.attachments { + opacity: 1; + max-height: 1000px; + transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out; + overflow-x: auto; + overflow-y: hidden; + padding: 1.25rem 0; + margin: 0; + white-space: nowrap; +} + +.attachments.is-contracted { + opacity: 0; + max-height: 0; + padding: 0; +} + +.attachment-preview { + position: relative; + border: 1px solid #dbdbdb; + padding: 0.3rem 0.5rem; + border-radius: 4px; + background-color: #f5f5f5; + margin: 0 1rem 0 0 !important; + width: 9rem; +} + +.progress_finished progress { + opacity: 0; +} /* Responsive */