SciPost Code Repository

Skip to content
Snippets Groups Projects
Commit d7ef0855 authored by George Katsikas's avatar George Katsikas :goat:
Browse files

attempt to beautify and simplify forum posts

parent d5962cf2
No related branches found
No related tags found
1 merge request!62[Forums] Simplify Forum posts UI and code
Hide whitespace changes
Inline Side-by-side
Showing
with 404 additions and 306 deletions
scipost_django/forums/templates/forums/_hx_post_form.html
+ 13
− 12
View file @ d7ef0855
{% load crispy_forms_tags %} {% load crispy_forms_tags %}
<div id="{{ origin }}" class="text-body bg-white m-2 p-2"> <div id="post-form-container" class="text-body bg-white m-2 p-2">
<h3 class="highlight"> <h3 class="highlight">
{{ text }} {{ text }}
<a class="ms-4 px-1 py-0 btn btn-sm btn-warning text-white" <a class="ms-4 px-1 py-0 btn btn-sm btn-warning text-white"
hx-get="{% url 'forums:_hx_post_form_button' slug=slug parent_model=parent_model parent_id=parent_id origin=origin target=target text=text %}" hx-get="{% url 'forums:_hx_post_form_button' slug=slug parent_model=parent_model parent_id=parent_id text=text %}"
hx-target="#{{ origin }}" hx-target="#post-form-container"
hx-swap="outerHTML" hx-swap="outerHTML"
hx-trigger="click, newPost-{{ target }} from:body" hx-trigger="click, newPost-{{ target }} from:body">Cancel</a>
>
Cancel
</a>
</h3> </h3>
<form hx-post="{% url 'forums:_hx_post_form' slug=slug parent_model=parent_model parent_id=parent_id origin=origin target=target text=text %}" <form hx-post="{% url 'forums:_hx_post_form' slug=slug parent_model=parent_model parent_id=parent_id text=text %}"
hx-confirm="Create this Post?" hx-confirm="Create this Post?"
hx-target="#{{ target }}" {% if parent_model == "forum" %}
hx-swap="beforebegin" hx-target="#thread-posts"
> hx-swap="beforestart"
{% elif parent_model == "post" %}
hx-target="#post-{{ parent_id }}-replies"
hx-swap="beforeend"
{% endif %}>
{% crispy form %} {% crispy form %}
</form> </form>
</div> </div>
scipost_django/forums/templates/forums/_hx_post_form_button.html
+ 12
− 9
View file @ d7ef0855
<div id="{{ origin }}"> <button class="btn btn-sm btn-primary ms-2 mt-1 px-1 py-0"
<button class="btn btn-sm btn-primary ms-2 mt-1 px-1 py-0" hx-get="{% url 'forums:_hx_post_form' slug=slug parent_model=parent_model parent_id=parent_id text=text %}"
hx-get="{% url 'forums:_hx_post_form' slug=slug parent_model=parent_model parent_id=parent_id origin=origin target=target text=text %}" hx-swap="innerHTML"
hx-target="#{{ origin }}" {% if parent_model == 'forum' %}
hx-swap="outerHTML" hx-target="#new-post-form"
> {% elif parent_model == 'post' %}
{% include "bi/arrow-return-right.html" %} <small>{{ text }}</small> hx-target="#post-{{ parent_id }}-reply"
</button> {% endif %}
</div> >
{% include "bi/arrow-return-right.html" %}
<small>{{ text }}</small>
</button>
scipost_django/forums/templates/forums/forum_detail.html
+ 251
− 175
View file @ d7ef0855
...@@ -7,10 +7,30 @@ ...@@ -7,10 +7,30 @@
{% block breadcrumb_items %} {% block breadcrumb_items %}
{{ block.super }} {{ block.super }}
<span class="breadcrumb-item">{% if forum.meeting %}Meeting{% else %}Forum{% endif %} Details</span> <span class="breadcrumb-item">
{% if forum.meeting %}
Meeting
{% else %}
Forum
{% endif %}
Details</span>
{% endblock %} {% endblock %}
{% block pagetitle %}: {% if forum.meeting %}Meeting{% else %}Forum{% endif %} details{% endblock pagetitle %}
{% block pagetitle %}
:
{% if forum.meeting %}
Meeting
{% else %}
Forum
{% endif %}
details
{% endblock pagetitle %}
{% block content %} {% block content %}
...@@ -19,78 +39,126 @@ ...@@ -19,78 +39,126 @@
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h2 class="highlight"> <h2 class="highlight">
{% if forum.meeting %}
{% with context_colors=forum.meeting.context_colors %} {% if forum.meeting %}
<span class="badge bg-{{ context_colors.bg }} mx-0 mb-2 p-2 text-{{ context_colors.text }}"> {% with context_colors=forum.meeting.context_colors %}
{{ context_colors.message }}&emsp; <span class="badge bg-{{ context_colors.bg }} mx-0 mb-2 p-2 text-{{ context_colors.text }}">
<span class="small"> [{{ forum.meeting.date_from|date:"Y-m-d" }} to {{ forum.meeting.date_until|date:"Y-m-d" }}]</span> {{ context_colors.message }}&emsp;
</span> <span class="small">[{{ forum.meeting.date_from|date:"Y-m-d" }} to {{ forum.meeting.date_until|date:"Y-m-d" }}]</span>
{% endwith %} </span>
<br/> {% endwith %}
{% endif %} <br />
{% endif %}
<span class="d-flex flex-wrap justify-content-between">
<a href="{{ forum.get_absolute_url }}">{{ forum }}</a> <span class="d-flex flex-wrap justify-content-between">
<span class="badge bg-primary rounded-pill">{{ forum.cf_nr_posts }} post{{ forum.cf_nr_posts|pluralize }}</span> <a href="{{ forum.get_absolute_url }}">{{ forum }}</a>
</span> <span class="badge bg-primary rounded-pill">{{ forum.cf_nr_posts }} post{{ forum.cf_nr_posts|pluralize }}</span>
</span>
</h2> </h2>
{% if forum.parent %} {% if forum.parent %}
<p>Parent: <a href="{{ forum.parent.get_absolute_url }}">{{ forum.parent }}</a></p> <p>
Parent: <a href="{{ forum.parent.get_absolute_url }}">{{ forum.parent }}</a>
</p>
{% endif %} {% endif %}
{% if forum.child_forums.all|length > 0 %} {% if forum.child_forums.all|length > 0 %}
<p>Descendants: {% for child in forum.child_forums.all %}<a href="{{ child.get_absolute_url }}">{{ child }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}</p> <p>
Descendants:
{% for child in forum.child_forums.all %}
<a href="{{ child.get_absolute_url }}">{{ child }}</a>
{% if not forloop.last %},{% endif %}
{% endfor %}
</p>
{% endif %} {% endif %}
{% if "can_administer_forum" in forum_user_perms %} {% if "can_administer_forum" in forum_user_perms %}
<div class="container border border-danger m-2 p-2"> <div class="container border border-danger m-2 p-2">
<h4>Admin actions:</h4> <h4>Admin actions:</h4>
<ul> <ul>
<li> <li>
{% if forum.meeting %}
<a href="{% url 'forums:meeting_update' slug=forum.meeting.slug %}" class="text-warning">Update this Meeting</a> {% if forum.meeting %}
{% else %} <a href="{% url 'forums:meeting_update' slug=forum.meeting.slug %}"
<a href="{% url 'forums:forum_update' slug=forum.slug %}" class="text-warning">Update this Forum</a> class="text-warning">Update this Meeting</a>
{% endif %} {% else %}
</li> <a href="{% url 'forums:forum_update' slug=forum.slug %}"
<li> class="text-warning">Update this Forum</a>
{% if not forum.child_forums.all|length > 0 %} {% endif %}
<a href="{% url 'forums:forum_delete' slug=forum.slug %}" class="text-danger">Delete this {% if forum.meeting %}Meeting{% else %}Forum{% endif %} (and all Posts {% if forum.meeting %}and Motions {% endif %}it contains)</a>
{% else %} </li>
<span class="text-danger" style="text-decoration: line-through;">Delete this Forum</span> Please delete descendant Forums first. <li>
{% endif %}
</li> {% if not forum.child_forums.all|length > 0 %}
{% if not forum.meeting %} <a href="{% url 'forums:forum_delete' slug=forum.slug %}"
<li><a href="{% url 'forums:forum_create' parent_model='forum' parent_id=forum.id %}">Create a (sub)Forum within this one</a></li> class="text-danger">Delete this
<li><a href="{% url 'forums:meeting_create' parent_model='forum' parent_id=forum.id %}">Create a Meeting within this Forum</a></li>
{% endif %} {% if forum.meeting %}
</ul> Meeting
{% else %}
{% if "can_administer_forum" in forum_user_perms %} Forum
<details id="forum-permissions-details" {% endif %}
class="border border-danger bg-danger bg-opacity-10 m-2">
<summary class="bg-danger bg-opacity-10 p-2"> (and all Posts
Permissions on this {% if forum.meeting %}Meeting{% else %}Forum{% endif %} instance (view/manage)
<span id="forum-permissions-details-contents-indicator" class="htmx-indicator p-2"> {% if forum.meeting %}and Motions{% endif %}
<button class="btn btn-warning" type="button" disabled>
<strong>Loading...</strong> it contains)</a>
<div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div> {% else %}
</button> <span class="text-danger" style="text-decoration: line-through;">Delete this Forum</span> Please delete descendant Forums first.
</span> {% endif %}
</summary>
<div id="forum-permissions-details-contents" </li>
class="p-2"
hx-get="{% url 'forums:_hx_forum_permissions' slug=forum.slug %}" {% if not forum.meeting %}
hx-trigger="toggle once from:#forum-permissions-details" <li>
hx-target="#forum-permissions-details-contents" <a href="{% url 'forums:forum_create' parent_model='forum' parent_id=forum.id %}">Create a (sub)Forum within this one</a>
hx-indicator="#forum-permissions-details-contents-indicator" </li>
> <li>
</div> <a href="{% url 'forums:meeting_create' parent_model='forum' parent_id=forum.id %}">Create a Meeting within this Forum</a>
</details> </li>
{% endif %} {% endif %}
</div> </ul>
{% if "can_administer_forum" in forum_user_perms %}
<details id="forum-permissions-details"
class="border border-danger bg-danger bg-opacity-10 m-2">
<summary class="bg-danger bg-opacity-10 p-2">
Permissions on this
{% if forum.meeting %}
Meeting
{% else %}
Forum
{% endif %}
instance (view/manage)
<span id="forum-permissions-details-contents-indicator"
class="htmx-indicator p-2">
<button class="btn btn-warning" type="button" disabled>
<strong>Loading...</strong>
<div class="spinner-grow spinner-grow-sm ms-2"
role="status"
aria-hidden="true"></div>
</button>
</span>
</summary>
<div id="forum-permissions-details-contents"
class="p-2"
hx-get="{% url 'forums:_hx_forum_permissions' slug=forum.slug %}"
hx-trigger="toggle once from:#forum-permissions-details"
hx-target="#forum-permissions-details-contents"
hx-indicator="#forum-permissions-details-contents-indicator"></div>
</details>
{% endif %}
</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
...@@ -98,121 +166,130 @@ ...@@ -98,121 +166,130 @@
<div class="col"> <div class="col">
<h2>Table of Contents</h2> <h2>Table of Contents</h2>
<div class="m-2"> <div class="m-2">
<ul> <ul>
<li><a href="#Description">Description</a></li> <li>
{% if forum.meeting %} <a href="#Description">Description</a>
<li><a href="#Preamble">Preamble</a></li> </li>
<li><a href="#Motions">Motions</a></li>
{% endif %} {% if forum.meeting %}
<li><a href="#Posts">Posts</a> <li>
</li> <a href="#Preamble">Preamble</a>
{% if forum.meeting %} </li>
<li><a href="#Minutes">Minutes</a></li> <li>
{% endif %} <a href="#Motions">Motions</a>
</ul> </li>
{% endif %}
<li>
<a href="#Posts">Posts</a>
</li>
{% if forum.meeting %}
<li>
<a href="#Minutes">Minutes</a>
</li>
{% endif %}
</ul>
</div> </div>
</div> </div>
</div> </div>
<details id="forum-quick-links-all-details" <details id="forum-quick-links-all-details"
class="border border-dark m-1 mb-2"> class="border border-dark m-1 mb-2">
<summary class="bg-dark text-white my-0 ps-4 py-1"> <summary class="bg-dark text-white my-0 ps-4 py-1">
<strong> <strong>Quick links: all posts and motions&emsp;(click to toggle)</strong>
Quick links: all posts and motions&emsp;(click to toggle) <span id="forum-quick-links-all-details-contents-indicator"
</strong> class="htmx-indicator p-2">
<span id="forum-quick-links-all-details-contents-indicator" class="htmx-indicator p-2"> <button class="btn btn-warning" type="button" disabled>
<button class="btn btn-warning" type="button" disabled> <strong>Loading...</strong>
<strong>Loading...</strong> <div class="spinner-grow spinner-grow-sm ms-2"
<div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div> role="status"
</button> aria-hidden="true"></div>
</button>
</span> </span>
</summary> </summary>
<div id="forum-quick-links-all-details-contents" <div id="forum-quick-links-all-details-contents"
class="mx-2 mt-0" class="mx-2 mt-0"
hx-get="{% url 'forums:_hx_forum_quick_links_all' slug=forum.slug %}" hx-get="{% url 'forums:_hx_forum_quick_links_all' slug=forum.slug %}"
hx-trigger="toggle once from:#forum-quick-links-all-details" hx-trigger="toggle once from:#forum-quick-links-all-details"
hx-target="#forum-quick-links-all-details-contents" hx-target="#forum-quick-links-all-details-contents"
hx-indicator="#forum-quick-links-all-details-contents-indicator" hx-indicator="#forum-quick-links-all-details-contents-indicator"></div>
>
</div>
</details> </details>
<details id="forum-quick-links-followups-details" <details id="forum-quick-links-followups-details"
class="border border-dark m-1 mb-4"> class="border border-dark m-1 mb-4">
<summary class="bg-dark text-white my-0 ps-4 py-1"> <summary class="bg-dark text-white my-0 ps-4 py-1">
<strong> <strong>Quick links: anchor posts, latest followup&emsp;(click to toggle)</strong>
Quick links: anchor posts, latest followup&emsp;(click to toggle) <span id="forum-quick-links-followups-details-contents-indicator"
</strong> class="htmx-indicator p-2">
<span id="forum-quick-links-followups-details-contents-indicator" class="htmx-indicator p-2"> <button class="btn btn-warning" type="button" disabled>
<button class="btn btn-warning" type="button" disabled> <strong>Loading...</strong>
<strong>Loading...</strong> <div class="spinner-grow spinner-grow-sm ms-2"
<div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div> role="status"
</button> aria-hidden="true"></div>
</button>
</span> </span>
</summary> </summary>
<div id="forum-quick-links-followups-details-contents" <div id="forum-quick-links-followups-details-contents"
class="mx-2 mt-0" class="mx-2 mt-0"
hx-get="{% url 'forums:_hx_forum_quick_links_followups' slug=forum.slug %}" hx-get="{% url 'forums:_hx_forum_quick_links_followups' slug=forum.slug %}"
hx-trigger="toggle once from:#forum-quick-links-followups-details" hx-trigger="toggle once from:#forum-quick-links-followups-details"
hx-target="#forum-quick-links-followups-details-contents" hx-target="#forum-quick-links-followups-details-contents"
hx-indicator="#forum-quick-links-followups-details-contents-indicator" hx-indicator="#forum-quick-links-followups-details-contents-indicator"></div>
>
</div>
</details> </details>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h2 class="highlight" id="Description">Description</h2> <h2 class="highlight" id="Description">Description</h2>
<div class="m-2"> <div class="m-2">{% automarkup forum.description %}</div>
{% automarkup forum.description %}
</div>
</div> </div>
</div> </div>
{% if forum.meeting %} {% if forum.meeting %}
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h2 class="highlight" id="Preamble">Preamble</h2> <h2 class="highlight" id="Preamble">Preamble</h2>
<div class="m-2"> <div class="m-2">{% automarkup forum.meeting.preamble %}</div>
{% automarkup forum.meeting.preamble %}
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h2 class="highlight" id="Motions">Motions</h2> <h2 class="highlight" id="Motions">Motions</h2>
<ul> <ul>
{% if forum.meeting.future %}
<li>Adding Motions will be activated once the meeting starts</li> {% if forum.meeting.future %}
{% elif forum.meeting.past %} <li>Adding Motions will be activated once the meeting starts</li>
<li><span class="text-danger">Adding Motions is deactivated</span> (Meeting is over)</li> {% elif forum.meeting.past %}
{% else %} <li>
<li> <span class="text-danger">Adding Motions is deactivated</span> (Meeting is over)
<div id="new-motion-form"> </li>
{% include "forums/_hx_motion_form_button.html" with slug=forum.slug %} {% else %}
</div> <li>
</li> <div id="new-motion-form">{% include "forums/_hx_motion_form_button.html" with slug=forum.slug %}</div>
{% endif %} </li>
</ul> {% endif %}
{% for motion in forum.motions.all %}
<div id="thread-{{ motion.post.id }}" </ul>
hx-get="{% url 'forums:_hx_thread_from_post' slug=forum.slug post_id=motion.post.id %}"
hx-target="#thread-{{ motion.post.id }}" {% for motion in forum.motions.all %}
hx-trigger="load" <div id="thread-{{ motion.post.id }}"
> hx-get="{% url 'forums:_hx_thread_from_post' slug=forum.slug post_id=motion.post.id %}"
<div id="thread-{{ motion.post.id }}-indicator" hx-target="#thread-{{ motion.post.id }}"
class="htmx-indicator p-2" hx-trigger="load">
> <div id="thread-{{ motion.post.id }}-indicator" class="htmx-indicator p-2"></div>
</div> <button class="btn btn-warning" type="button" disabled>
<button class="btn btn-warning" type="button" disabled> <strong>Loading thread {{ motion.post.id }}</strong>
<strong>Loading thread {{ motion.post.id }}</strong> <div class="spinner-grow spinner-grow-sm ms-2"
<div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div> role="status"
</button> aria-hidden="true"></div>
</div> </button>
{% endfor %} </div>
{% endfor %}
<div id="thread-motions"></div>
<div id="thread-motions"></div>
</div> </div>
</div> </div>
...@@ -222,35 +299,35 @@ ...@@ -222,35 +299,35 @@
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h2 class="highlight" id="Posts">Posts</h2> <h2 class="highlight" id="Posts">Posts</h2>
{% if not forum.meeting or forum.meeting.ongoing %} {% if not forum.meeting or forum.meeting.ongoing %}
<ul> <ul>
<li> <li>
<div id="new-post-form"> <div id="new-post-form">
{% include "forums/_hx_post_form_button.html" with slug=forum.slug parent_model='forum' parent_id=forum.id origin="new-post-form" target="thread-posts" text="Add a new Post" %} {% include "forums/_hx_post_form_button.html" with slug=forum.slug parent_model='forum' parent_id=forum.id text="Add a new Post" %}
</div> </div>
</li> </li>
</ul> </ul>
{% endif %} {% endif %}
{% for post in forum.posts.motions_excluded %} {% for post in forum.posts.motions_excluded %}
<div id="thread-{{ post.id }}" <div id="thread-{{ post.id }}"
hx-get="{% url 'forums:_hx_thread_from_post' slug=forum.slug post_id=post.id %}" hx-get="{% url 'forums:_hx_thread_from_post' slug=forum.slug post_id=post.id %}"
hx-target="#thread-{{ post.id }}" hx-target="#thread-{{ post.id }}"
hx-swap="outerHTML" hx-swap="outerHTML"
hx-trigger="load" hx-trigger="load"
hx-indicator="#thread-{{ post.id }}-indicator" hx-indicator="#thread-{{ post.id }}-indicator">
> <div id="thread-{{ post.id }}-indicator" class="htmx-indicator p-2"></div>
<div id="thread-{{ post.id }}-indicator" <button class="btn btn-warning" type="button" disabled>
class="htmx-indicator p-2" <strong>Loading thread {{ post.id }}</strong>
> <div class="spinner-grow spinner-grow-sm ms-2"
</div> role="status"
<button class="btn btn-warning" type="button" disabled> aria-hidden="true"></div>
<strong>Loading thread {{ post.id }}</strong> </button>
<div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div> </div>
</button>
</div>
{% endfor %} {% endfor %}
<div id="thread-posts"></div> <div id="thread-posts"></div>
</div> </div>
...@@ -259,16 +336,15 @@ ...@@ -259,16 +336,15 @@
{% if forum.meeting %} {% if forum.meeting %}
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<h2 class="highlight" id="Minutes">Minutes</h2> <h2 class="highlight" id="Minutes">Minutes</h2>
<div class="m-2"> <div class="m-2">{% automarkup forum.meeting.minutes %}</div>
{% automarkup forum.meeting.minutes %}
</div>
</div> </div>
</div> </div>
{% endif %} {% endif %}
{% endblock content %} {% endblock content %}
{% block footer_script %} {% block footer_script %}
<script nonce="{{ request.csp_nonce }}"> <script nonce="{{ request.csp_nonce }}">
document.body.addEventListener("newPost", function(evt) { document.body.addEventListener("newPost", function(evt) {
......
scipost_django/forums/templates/forums/post_card.html
+ 117
− 75
View file @ d7ef0855
{% load automarkup %} {% load automarkup %}
{% load guardian_tags %} {% load guardian_tags %}
{% get_obj_perms request.user for forum as "forum_user_perms" %} {% get_obj_perms request.user for forum as "forum_user_perms" %}
<div id="thread-{{ post.id }}"> {% with post.get_followups|length as nr_followup_threads %}
<div class="card m-2 {% if post.motion %}text-white bg-dark{% else %}text-body{% endif %}" id="post{{ post.id }}"> <div id="post{{ post.id }}"
<div class="card-header"> class="mt-3 border border-secondary rounded rounded-sm">
{{ post.subject }}
<div class="postInfo"> <div id="post-{{ post.id }}-header" class="p-2
{{ post.posted_by.first_name }} {{ post.posted_by.last_name }} on {{ post.posted_on|date:"Y-m-d" }} {% if post.motion %}bg-warning{% else %}bg-primary{% endif %}
- {% include 'permalink.html' with object=post %} bg-opacity-25 d-flex align-content-center justify-content-between">
{% if post.parent and not post.motion %}
- regarding <a href="{{ post.parent.get_absolute_url }}">{{ post.parent }}</a> <div>
{% endif %} <span class="me-1">{{ post.posted_by.first_name }} {{ post.posted_by.last_name }}</span>
<span class="text-muted me-1">on {{ post.posted_on|date:"Y-m-d" }}</span>
{% include 'permalink.html' with object=post %}
</div>
<div class="fs-5 me-1">
{% if "Re:" not in post.subject %}{{ post.subject }}{% endif %}
</div> </div>
</div> </div>
<div class="card-body">
<div id="post-{{ post.id }}-body" class="p-3">
{% automarkup post.text %} {% automarkup post.text %}
</div>
<div class="card-footer">
<div class="d-flex flex-wrap justify-content-end align-items-center">
<div class="flex-grow-1"> {% if post.motion %}
{% with post.get_followups|length as nr_followup_threads %} <hr class="bg-primary" />
{% if nr_followup_threads > 0 %} <div id="post-{{ post.id }}-motion-voting"
<span class="badge bg-info rounded-pill text-dark me-2 px-2">{{ nr_followup_threads }} followup thread{{ nr_followup_threads|pluralize }}, {% with nr_followups=post.cf_nr_followups %}{{ nr_followups }} post{{ nr_followups|pluralize }}{% endwith %} in total</span> class="d-flex justify-content-start">
{% endif %} <div id="motion-{{ post.motion.id }}-voting"
{% endwith %} class="align-self-center px-2"
</div> hx-get="{% url 'forums:_hx_motion_voting' slug=forum.slug motion_id=post.motion.id %}"
hx-trigger="load"
{% if post.motion %} hx-target="#motion-{{ post.motion.id }}-voting"
<div id="motion-{{ post.motion.id }}-voting-indicator" hx-swap="innerHTML"
class="htmx-indicator p-2" hx-indicator="#motion-{{ post.motion.id }}-voting-indicator"></div>
>
<button class="btn btn-warning" type="button" disabled> <div id="motion-{{ post.motion.id }}-voting-indicator"
<strong>Loading voting data...</strong> class="htmx-indicator p-2">
<div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div> <button class="btn btn-warning" type="button" disabled>
</button> <strong>Loading voting data...</strong>
</div> <div class="spinner-grow spinner-grow-sm ms-2"
<div id="motion-{{ post.motion.id }}-voting" role="status"
class="align-self-center px-2" aria-hidden="true"></div>
hx-get="{% url 'forums:_hx_motion_voting' slug=forum.slug motion_id=post.motion.id %}" </button>
hx-trigger="load" </div>
hx-target="#motion-{{ post.motion.id }}-voting" </div>
hx-swap="innerHTML" {% endif %}
hx-indicator="#motion-{{ post.motion.id }}-voting-indicator"
> <div id="post-{{ post.id }}-reply"
</div> class="mt-2 d-flex justify-content-start">
{% endif %}
{% if posting_open %}
{% if post.motion %}
{% include "forums/_hx_post_form_button.html" with slug=forum.slug parent_model='motion' parent_id=post.id text="Comment on this Motion" %}
{% else %}
{% include "forums/_hx_post_form_button.html" with slug=forum.slug parent_model='post' parent_id=post.id text="Reply" %}
{% endif %}
{% endif %}
</div> </div>
</div> </div>
</div>
<details open id="post-{{ post.id }}-replies-details" class="mt-1">
{% if posting_open %} {% if nr_followup_threads > 0 %}
{% with id_str=post.id|stringformat:"s" %} <summary class="ms-1 text-info list-triangle d-none-empty">
{% with thread_str="thread-"|add:id_str %} <span class="badge bg-info bg-opacity-50 rounded-pill text-dark me-2 px-2">Show/Collapse {{ nr_followup_threads }} followup thread{{ nr_followup_threads|pluralize }}</span>
<div id="{{ thread_str|add:'-origin' }}"> </summary>
{% if post.motion %} {% else %}
{% include "forums/_hx_post_form_button.html" with slug=forum.slug parent_model='motion' parent_id=post.id origin=thread_str|add:"-origin" target=thread_str|add:"-new" text="Comment on this Motion" %} <summary class="d-none-empty"></summary>
{% else %}
{% include "forums/_hx_post_form_button.html" with slug=forum.slug parent_model='post' parent_id=post.id origin=thread_str|add:"-origin" target=thread_str|add:"-new" text="Reply" %}
{% endif %}
</div>
{% endwith %}
{% endwith %}
{% endif %} {% endif %}
<div class="followupPosts{% if post.motion %}AfterMotion{% endif %}"
> <div id="post-{{ post.id }}-replies"
class="ms-3 ps-4 border-start border-secondary">
{% for followup in post.get_followups %} {% for followup in post.get_followups %}
<div id="thread-{{ followup.id }}" <div id="thread-{{ followup.id }}"
hx-get="{% url 'forums:_hx_thread_from_post' slug=forum.slug post_id=followup.id %}" hx-get="{% url 'forums:_hx_thread_from_post' slug=forum.slug post_id=followup.id %}"
hx-target="#thread-{{ followup.id }}" hx-target="#thread-{{ followup.id }}"
hx-swap="outerHTML" hx-swap="outerHTML"
hx-trigger="load delay:1s" hx-trigger="load delay:1s"
hx-indicator="#thread-{{ followup.id }}-indicator" hx-indicator="#thread-{{ followup.id }}-indicator">
> <div id="thread-{{ followup.id }}-indicator" class="htmx-indicator p-2">
<div id="thread-{{ followup.id }}-indicator" <button class="btn btn-warning" type="button" disabled>
class="htmx-indicator p-2" <strong>Loading thread {{ followup.id }}</strong>
> <div class="spinner-grow spinner-grow-sm ms-2"
<button class="btn btn-warning" type="button" disabled> role="status"
<strong>Loading thread {{ followup.id }}</strong> aria-hidden="true"></div>
<div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div> </button>
</button> </div>
</div> </div>
</div>
{% endfor %} {% endfor %}
<div id="thread-{{ post.id }}-new" style="height: 0px;"></div>
</div> </div>
</details>
{% endwith %}
</div>
<div id="post-{{ post.parent_object_id }}-reply" hx-swap-oob="innerHTML">
{% if posting_open %}
{% if post.motion %}
{% include "forums/_hx_post_form_button.html" with slug=forum.slug parent_model='motion' parent_id=post.parent_object_id text="Comment on this Motion" %}
{% else %}
{% include "forums/_hx_post_form_button.html" with slug=forum.slug parent_model='post' parent_id=post.parent_object_id text="Reply" %}
{% endif %}
{% endif %}
</div>
<div id="new-post-form" hx-swap-oob="innerHTML">
{% include "forums/_hx_post_form_button.html" with slug=forum.slug parent_model='forum' parent_id=forum.id text="Add a new Post" %}
</div> </div>
scipost_django/forums/urls.py
+ 1
− 4
View file @ d7ef0855
...@@ -150,10 +150,7 @@ urlpatterns = [ ...@@ -150,10 +150,7 @@ urlpatterns = [
), ),
), ),
path( path(
( ("_hx_post_form/<str:parent_model>/<int:parent_id>/<str:text>/"),
"_hx_post_form/<str:parent_model>/<int:parent_id>/"
"<str:origin>/<str:target>/<str:text>/"
),
include( include(
[ [
path( path(
......
scipost_django/forums/views.py
+ 10
− 31
View file @ d7ef0855
...@@ -245,62 +245,41 @@ class ForumListView(LoginRequiredMixin, ListView): ...@@ -245,62 +245,41 @@ class ForumListView(LoginRequiredMixin, ListView):
@permission_required_or_403("forums.can_post_to_forum", (Forum, "slug", "slug")) @permission_required_or_403("forums.can_post_to_forum", (Forum, "slug", "slug"))
def _hx_post_form_button(request, slug, parent_model, parent_id, origin, target, text): def _hx_post_form_button(request, slug, parent_model, parent_id, text):
context = { context = {
"slug": slug, "slug": slug,
"parent_model": parent_model, "parent_model": parent_model,
"parent_id": parent_id, "parent_id": parent_id,
"origin": origin,
"target": target,
"text": text, "text": text,
} }
return render(request, "forums/_hx_post_form_button.html", context) return render(request, "forums/_hx_post_form_button.html", context)
@permission_required_or_403("forums.can_post_to_forum", (Forum, "slug", "slug")) @permission_required_or_403("forums.can_post_to_forum", (Forum, "slug", "slug"))
def _hx_post_form(request, slug, parent_model, parent_id, origin, target, text): def _hx_post_form(request, slug, parent_model, parent_id, text):
forum = get_object_or_404(Forum, slug=slug) forum = get_object_or_404(Forum, slug=slug)
context = { context = {
"slug": slug, "slug": slug,
"parent_model": parent_model, "parent_model": parent_model,
"parent_id": parent_id, "parent_id": parent_id,
"origin": origin,
"target": target,
"text": text, "text": text,
} }
if request.method == "POST": if request.method == "POST":
form = PostForm(request.POST, forum=forum) form = PostForm(request.POST, forum=forum)
if form.is_valid(): if form.is_valid():
post = form.save() post = form.save()
thread_initiator = post.get_thread_initiator()
response = render( response = render(
request, request,
"forums/post_card.html", "forums/post_card.html",
context={"forum": forum, "post": thread_initiator}, context={
"forum": forum,
"post": post,
"posting_open": True, # If a post has just been made, posting is open
},
)
response["HX-Trigger-After-Settle"] = json.dumps(
{"newPost": f"post{post.id}"}
) )
# if the parent is a forum, then this is a new Motion or Post,
# and we keep the requested target and swap (== beforebegin).
# Otherwise, we retarget to the initiator post, and swap outerHTML.
# In both cases we refocus the browser after settle.
if parent_model in ["forum", "meeting"]:
# trigger new post form closure
response["HX-Trigger"] = f"newPost-{target}"
# refocus browser on new post
response["HX-Trigger-After-Settle"] = json.dumps(
{
"newPost": f"{target}",
}
)
else:
# force rerendering of whole thread from initiator down
response["HX-Retarget"] = f"#thread-{thread_initiator.id}"
response["HX-Reswap"] = "outerHTML"
# refocus browser on initiator
response["HX-Trigger-After-Settle"] = json.dumps(
{
"newPost": f"thread-{thread_initiator.id}",
}
)
return response return response
else: else:
subject = "" subject = ""
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

SciPost Code Repository