comparison sat_templates/templates/bulma/forum/show_topics.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
comparison
equal deleted inserted replaced
412:c1d33d7e4b96 413:0190a0d32909
1 {% import 'components/avatar.html' as avatar with context %}
2
3 {% block body %}
4
5 <div class="panel-header px-4 py-2">
6 <div class="level is-mobile">
7 <div class="level-left">
8 <div class="level-item">
9 <button class="button is-small" id="left_panel-toggle" aria-label="Toggle left panel">
10 <span class="icon"><i class="fas fa-bars"></i></span>
11 </button>
12 </div>
13 <div class="level-item">
14 <h1 class="title is-5 mb-0 pt-1">{{ target_jid }}</h1>
15 </div>
16 </div>
17 <div class="level-right">
18 <div class="level-item">
19 <div class="field has-addons">
20 <div class="control">
21 <input class="input is-small" type="text" placeholder="{{ _('Search topics…') }}">
22 </div>
23 <div class="control">
24 <button class="button is-info is-small">
25 <span class="icon is-small">
26 <i class="fas fa-search"></i>
27 </span>
28 </button>
29 </div>
30 </div>
31 </div>
32 </div>
33 </div>
34 </div>
35
36 {% if not blog_items or not blog_items['items'] %}
37 <div class="message">
38 <div class="message-body">
39 {% trans %}There is not message yet in this forum.{% endtrans %}
40 {% if profile %}
41 {% trans %}You can start a topic of interest by filling the form below.{% endtrans %}
42 {% else %}
43 {% trans %}You can login to create a new topic.{% endtrans %}
44 {% endif %}
45 </div>
46 </div>
47 {% else %}
48 <div class="topics-container px-3 pb-3">
49 {% for item in blog_items['items'] %}
50 {% if "http_url" in item %}
51 <a class="topic-item box has-background-white-ter transition-all p-4 mb-3 is-clickable" href="{{ item.http_url }}">
52 {% endif %}
53 <article class="media">
54 <figure class="media-left mt-1">
55 {{ avatar.avatar(item['author_jid']) }}
56 </figure>
57 <div class="media-content">
58 <div class="columns is-mobile is-gapless">
59 <div class="column">
60 <p class="title is-6 mb-1 has-text-black has-text-left">
61 {{ item.title | truncate(65) }}
62 </p>
63
64 <p class="is-size-7 has-text-grey mb-2">
65 <span >{{ item.author }}</span>
66 <span>—</span>
67 <span>{{ item.published | date_fmt('short') }}</span>
68 {% if item.nb_items is defined %}
69 <span class="icon-text mx-1 is-size-7">
70 <span class="icon is-small"><i class="fas fa-comment" aria-hidden="true"></i></span>
71 <span>{{ item.nb_items }}</span>
72 </span>
73 {% endif %}
74 </p>
75 </div>
76
77 {% if item.published != item.updated %}
78 <div class="column is-narrow has-text-right">
79 <div class="tags has-addons">
80 <span class="tag is-light is-size-7">{{ _('Updated') }}</span>
81 <span class="tag is-info is-light is-size-7">
82 {{ item.updated | date_fmt('relative') }}
83 </span>
84 </div>
85 </div>
86 {% endif %}
87 </div>
88 </div>
89 </article>
90 {% if "http_url" in item %}
91 </a>
92 {% endif %}
93 {% endfor %}
94 </div>
95 {% endif %}
96
97 {% endblock body %}