klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-22 14:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better style for forum messages

Browse Source
This commit is contained in:
thomas girod 2024-08-16 22:43:54 +02:00
parent 3e5d4c5fbb
commit 6179c3e7d4
6 changed files with 181 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
core/templates/core/macros.jinja
View File

@ -156,6 +156,38 @@
</nav> </nav>
{% endmacro %} {% endmacro %}
{% macro paginate_jinja(page, nb_pages) %}
<nav class="pagination">
{% if page <= 1 %}
<button disabled="disabled"><i class="fa fa-caret-left"></i></button>
{% else %}
<a href="?href={{ page - 1 }}">
<button>
<i class="fa fa-caret-left"></i>
</button>
</a>
{% endif %}
{% for i in range(1, nb_pages + 1) %}
{% if i == page %}
<button class="active">{{ i }}</button>
{% else %}
<a href="?page={{ i }}">
<button>{{ i }}</button>
</a>
{% endif %}
{% endfor %}
{% if page >= nb_pages %}
<button disabled="disabled"><i class="fa fa-caret-right"></i></button>
{% else %}
<a href="?href={{ page - 1 }}">
<button>
<i class="fa fa-caret-right"></i>
</button>
</a>
{% endif %}
</nav>
{% endmacro %}
{% macro paginate(page_obj, paginator, js_action) %} {% macro paginate(page_obj, paginator, js_action) %}
{% set js = js_action|default('') %} {% set js = js_action|default('') %}
{% if page_obj.has_previous() or page_obj.has_next() %} {% if page_obj.has_previous() or page_obj.has_next() %}

8
forum/models.py
View File

@ -170,7 +170,7 @@ class Forum(models.Model):
def is_owned_by(self, user): def is_owned_by(self, user):
if user.is_anonymous: if user.is_anonymous:
return False return False
if user.is_in_group(pk=settings.SITH_GROUP_FORUM_ADMIN_ID): if user.is_root or user.is_in_group(pk=settings.SITH_GROUP_FORUM_ADMIN_ID):
return True return True
try: try:
m = Forum._club_memberships[self.id][user.id] m = Forum._club_memberships[self.id][user.id]
@ -273,10 +273,10 @@ class ForumTopic(models.Model):
return self.forum.is_owned_by(user) return self.forum.is_owned_by(user)
def can_be_edited_by(self, user): def can_be_edited_by(self, user):
return user.can_edit(self.forum) return user.is_root or user.can_edit(self.forum)
def can_be_viewed_by(self, user): def can_be_viewed_by(self, user):
return user.can_view(self.forum) return user.is_root or user.can_view(self.forum)
def get_first_unread_message(self, user: User) -> ForumMessage | None: def get_first_unread_message(self, user: User) -> ForumMessage | None:
if not hasattr(user, "forum_infos"): if not hasattr(user, "forum_infos"):
@ -355,7 +355,7 @@ class ForumMessage(models.Model):
return not self._deleted return not self._deleted
def can_be_moderated_by(self, user): def can_be_moderated_by(self, user):
return self.topic.forum.is_owned_by(user) or user.id == self.author.id return self.topic.forum.is_owned_by(user) or user.id == self.author_id
def get_url(self): def get_url(self):
return ( return (

124
forum/static/forum/css/forum.scss
View File

@ -6,21 +6,26 @@
padding: 10px; padding: 10px;
font-weight: bold; font-weight: bold;
border-radius: 5px; border-radius: 5px;
&:hover { &:hover {
background-color: rgb(211, 211, 211); background-color: rgb(211, 211, 211);
} }
} }
.topic { .topic {
border: solid $primary-neutral-color 1px; border: solid $primary-neutral-color 1px;
padding: 1px; padding: 1px;
margin: 1px; margin: 1px;
p { p {
margin: 1px; margin: 1px;
font-size: smaller; font-size: smaller;
} }
a { a {
color: $black-color; color: $black-color;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -30,6 +35,7 @@
font-size: x-small; font-size: x-small;
border: none; border: none;
font-weight: bold; font-weight: bold;
a { a {
padding: 1px; padding: 1px;
} }
@ -41,10 +47,6 @@
padding: 2px; padding: 2px;
} }
.last_message date {
white-space: nowrap;
}
.last_message span { .last_message span {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -57,31 +59,36 @@
background: $primary-neutral-light-color; background: $primary-neutral-light-color;
padding: 1px; padding: 1px;
margin: 1px; margin: 1px;
p { p {
margin: 1px; margin: 1px;
font-size: smaller; font-size: smaller;
} }
a { a {
color: $black-color; color: $black-color;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.search_bar { .search_bar {
margin: 10px 0; margin: 10px 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: 20px;
align-items: center; align-items: center;
} }
.search_check { .search_check {
margin-left: 10px; margin-left: 10px;
} }
.search_bouton { .search_bouton {
margin-left: 10px; margin-left: 10px;
} }
.category { .category {
margin-top: 5px; margin-top: 5px;
background: $secondary-color; background: $secondary-color;
@ -93,66 +100,67 @@
} }
.message { .message {
padding: 1px; padding: 15px;
margin: 1px; margin: 20px;
display: flex;
flex-direction: column;
gap: 10px;
background: $secondary-neutral-light-color; background: $secondary-neutral-light-color;
border-radius: 5px;
border: 1px darken($secondary-neutral-light-color, 10%) solid;
&:nth-child(odd) { &:nth-child(odd) {
background: $primary-neutral-light-color; background: $primary-neutral-light-color;
} }
.title {
font-size: 100%; .message-header {
display: flex;
gap: 20px;
border-bottom: 0.0625rem grey dotted;
padding-bottom: 10px;
img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.message-metadata {
display: flex;
flex-direction: column;
justify-content: center;
}
.message-options {
flex: 2;
display: flex;
justify-content: right;
gap: 15px;
}
} }
.message-content {
padding: 0 20px;
&.delete > * {
margin-top: 0;
}
.markdown blockquote h5 {
padding-top: 0;
margin-top: 0;
}
}
.forum-signature {
margin: 0;
font-size: small;
font-style: italic;
border-top: 0.0625rem grey dotted;
}
&.unread { &.unread {
background: #e9eea1; background: #e9eea1;
} }
} }
.msg_author.deleted {
background: #ffcfcf;
}
.msg_content {
&.deleted {
background: #ffefef;
}
display: inline-block;
width: 80%;
vertical-align: top;
}
.msg_author {
display: inline-block;
width: 19%;
text-align: center;
img {
max-width: 70%;
margin: 0 auto;
}
}
.msg_header {
display: inline-block;
width: 100%;
font-size: small;
}
.msg_meta {
font-size: small;
list-style-type: none;
li {
padding: 1px;
margin: 1px;
}
}
.forum_signature {
color: hsl(0, 0%, 75%);
border-top: 1px solid hsl(0, 0%, 75%);
a {
color: hsl(0, 0%, 75%);
&:hover {
text-decoration: underline;
}
}
}
} }

110
forum/templates/forum/macros.jinja
View File

@ -97,73 +97,81 @@
{% endmacro %} {% endmacro %}
{% macro display_message(m, user, unread=False) %} {% macro display_message(m, user, unread=False) %}
{% if user.can_view(m) %} {% set user_is_admin = m.topic.is_owned_by(user) %}
<div id="msg_{{ m.id }}" class="message {% if unread %}unread{% endif %}"> <article id="msg_{{ m.id }}" class="message {% if unread %}unread{% endif %}">
<div class="msg_author {% if m.deleted %}deleted{% endif %}"> {% if user_is_admin or not m._deleted %}
<div class="message-header">
{% if m.author.avatar_pict %} {% if m.author.avatar_pict %}
<img src="{{ m.author.avatar_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" id="picture" /> <img src="{{ m.author.avatar_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" id="picture" />
{% elif m.author.profile_pict %}
<img src="{{ m.author.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" id="picture" />
{% else %} {% else %}
<img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Profile{% endtrans %}" id="picture" /> <img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Profile{% endtrans %}" id="picture" />
{% endif %} {% endif %}
<br/> <div class="message-metadata">
<strong><a href="{{ m.author.get_absolute_url() }}">{{ m.author.get_short_name() }}</a></strong> <a href="{{ m.author.get_absolute_url() }}">
</div> <strong>{{ m.author.get_short_name() }}</strong>
<div class="msg_content {% if m.deleted %}deleted{% endif %}" {% if m.id == first_unread_message_id %}id="first_unread"{% endif %}> </a>
<div class="msg_header"> <a href="{{ m.get_absolute_url() }}">
<div class="ib w_big title"> {{ m.date|localtime|date(DATETIME_FORMAT) }}
<a href="{{ m.get_absolute_url() }}"> {{ m.date|localtime|time(DATETIME_FORMAT) }}
{{ m.date|localtime|date(DATETIME_FORMAT) }} </a>
{{ m.date|localtime|time(DATETIME_FORMAT) }} </div>
{%- if m.title -%} <div class="message-options">
- {{ m.title }} <a href="{{ url('forum:new_message', topic_id=m.topic.id) }}?quote_id={{ m.id }}">
{%- endif -%} <i class="fa fa-quote-right"></i>
</a>
{% if user.can_edit(m) %}
<a href="{{ url('forum:edit_message', message_id=m.id) }}">
<i class="fa fa-pencil"></i>
</a> </a>
</div> {% endif %}
<div class="ib w_small">
<span><a href="{{ m.get_absolute_url() }}">#{{ m.id }}</a></span> {% if user_is_admin and m._deleted %}
<br/> <span>
<span><a href="{{ url('forum:new_message', topic_id=m.topic.id) }}?quote_id={{ m.id }}"> <a href="{{ url('forum:undelete_message', message_id=m.id) }}">
{% trans %}Reply as quote{% endtrans %}</a></span> {% trans %}Undelete{% endtrans %}
{% if user.can_edit(m) %} </a>
<span> <a href="{{ url('forum:edit_message', message_id=m.id) }}">{% trans %}Edit{% endtrans %}</a></span> </span>
{% endif %} {% endif %}
{% if m.can_be_moderated_by(user) %} {% if not m._deleted and (user_is_admin or user.id == m.author_id) %}
{% if m.deleted %} <span>
<span> <a href="{{ url('forum:undelete_message', message_id=m.id) }}">{% trans %}Undelete{% endtrans %}</a></span> <a href="{{ url('forum:delete_message', message_id=m.id) }}">
{% else %} <i class="fa fa-trash"></i>
<span> <a href="{{ url('forum:delete_message', message_id=m.id) }}">{% trans %}Delete{% endtrans %}</a></span> </a>
{% endif %} </span>
{% endif %} {% endif %}
</div>
</div>
<hr>
<div>
{{ m.message|markdown }}
</div> </div>
</div>
{% endif %} {# close `user.can_view(m) or user_is_admin` #}
{% if user.can_view(m) %}
<div
class="message-content {%- if m.deleted -%}deleted{%- endif -%}"
{%- if m.id == first_unread_message_id -%}id="first_unread"{%- endif -%}
>
{{ m.message|markdown }}
{% if m.can_be_moderated_by(user) %} {% if m.can_be_moderated_by(user) %}
<ul class="msg_meta"> <ul class="msg_meta">
{% for meta in m.metas.select_related('user').order_by('id') %} {% for meta in m.metas.select_related('user').order_by('id') %}
<li style="background: {% if m.author == meta.user %}#bfffbf{% else %}#ffffbf{% endif %}"> <li style="background: {% if m.author == meta.user %}#bfffbf{% else %}#ffffbf{% endif %}">
{{ meta.get_action_display() }} {{ meta.user.get_short_name() }} {{ meta.get_action_display() }} {{ meta.user.get_short_name() }}
{% trans %} at {% endtrans %}{{ meta.date|localtime|time(DATETIME_FORMAT) }} {% trans %} at {% endtrans %}{{ meta.date|localtime|time(DATETIME_FORMAT) }}
{% trans %} the {% endtrans %}{{ meta.date|localtime|date(DATETIME_FORMAT)}}</li> {% trans %} the {% endtrans %}{{ meta.date|localtime|date(DATETIME_FORMAT)}}
</li>
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}
<div class="forum_signature">{{ m.author.forum_signature|markdown }}</div>
</div> </div>
</div> {% if m.author.forum_signature %}
{% else %} <div class="forum-signature">{{ m.author.forum_signature|markdown }}</div>
<div id="msg_{{ m.id }}" class="message"> {% endif %}
<div class="msg_author deleted"> {% else %}
</div> <div class="message-content delete">
<div class="msg_content deleted"> <p>{% trans %}Deleted or unreadable message.{% endtrans %}</p>
<p class="ib w_big">{% trans %}Deleted or unreadable message.{% endtrans %}</p> </div>
<p class="ib w_small">{{ m.date|localtime|date(DATETIME_FORMAT) }} {{ m.date|localtime|time(DATETIME_FORMAT) }}</p> {% endif %}
</div> </article>
</div> {{ m.mark_as_read(user) or "" }}
{% endif %}
{{ m.mark_as_read(user) or "" }}
{% endmacro %} {% endmacro %}
{% macro display_search_bar(request) %} {% macro display_search_bar(request) %}

55
forum/templates/forum/topic.jinja
View File

@ -1,6 +1,7 @@
{% extends "core/base.jinja" %} {% extends "core/base.jinja" %}
{% from 'core/macros.jinja' import user_profile_link %} {% from 'core/macros.jinja' import user_profile_link %}
{% from 'forum/macros.jinja' import display_message, display_breadcrumb, display_search_bar %} {% from 'forum/macros.jinja' import display_message, display_breadcrumb, display_search_bar %}
{% from 'core/macros.jinja' import paginate_jinja %}
{% block title %} {% block title %}
{{ topic }} {{ topic }}
@ -9,25 +10,7 @@
{% block additional_css %} {% block additional_css %}
<link rel="stylesheet" href="{{ scss('forum/css/forum.scss') }}"> <link rel="stylesheet" href="{{ scss('forum/css/forum.scss') }}">
{% endblock %} <link rel="stylesheet" href="{{ scss('core/pagination.scss') }}">
{% block head %}
{{ super() }}
<style type="text/css" media="all">
.topic {
border: solid skyblue 1px;
padding: 2px;
margin: 2px;
}
.forum {
background: lightblue;
padding: 2px;
margin: 2px;
}
.category {
background: skyblue;
}
</style>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
@ -45,30 +28,24 @@
</p> </p>
{{ display_search_bar(request) }} {{ display_search_bar(request) }}
<p style="text-align: right; background: #d8e7f3;"> {{ paginate_jinja(msgs.number, msgs.paginator.num_pages) }}
{% for p in msgs.paginator.page_range %}
<span class="ib" style="background: {% if p == msgs.number %}white{% endif %}; margin: 0;"><a href="?page={{ p }}">{{ p }}</a></span>
{% endfor %}
</p>
{% for m in msgs %} <main class="message-list">
{% if m.id == first_unread_message_id %} {% for m in msgs %}
<span id="first_unread"></span> {% if m.id == first_unread_message_id %}
{% endif %} <span id="first_unread"></span>
{% if m.id >= first_unread_message_id %} {% endif %}
{{ display_message(m, user, True) }} {% if m.id >= first_unread_message_id %}
{% else %} {{ display_message(m, user, True) }}
{{ display_message(m, user, False) }} {% else %}
{% endif %} {{ display_message(m, user, False) }}
{% endfor %} {% endif %}
{% endfor %}
</main>
<p><a class="ib button" href="{{ url('forum:new_message', topic_id=topic.id) }}">{% trans %}Reply{% endtrans %}</a></p> <p><a class="ib button" href="{{ url('forum:new_message', topic_id=topic.id) }}">{% trans %}Reply{% endtrans %}</a></p>
<p style="text-align: right; background: #d8e7f3;"> {{ paginate_jinja(msgs.number, msgs.paginator.num_pages) }}
{% for p in msgs.paginator.page_range %}
<span class="ib" style="background: {% if p == msgs.number %}white{% endif %}; margin: 0;"><a href="?page={{ p }}">{{ p }}</a></span>
{% endfor %}
</p>
</div> </div>
{% endblock %} {% endblock %}

5
forum/views.py
View File

@ -306,14 +306,15 @@ class ForumTopicDetailView(CanViewMixin, DetailView):
queryset = ForumTopic.objects.select_related("forum__parent") queryset = ForumTopic.objects.select_related("forum__parent")
def get_context_data(self, **kwargs): def get_context_data(self, **kwargs):
topic: ForumTopic = self.object
kwargs = super().get_context_data(**kwargs) kwargs = super().get_context_data(**kwargs)
msg = self.object.get_first_unread_message(self.request.user) msg = topic.get_first_unread_message(self.request.user)
if msg is None: if msg is None:
kwargs["first_unread_message_id"] = math.inf kwargs["first_unread_message_id"] = math.inf
else: else:
kwargs["first_unread_message_id"] = msg.id kwargs["first_unread_message_id"] = msg.id
paginator = Paginator( paginator = Paginator(
self.object.messages.select_related("author__avatar_pict") topic.messages.select_related("author__avatar_pict", "topic__forum")
.prefetch_related("topic__forum__edit_groups", "readers") .prefetch_related("topic__forum__edit_groups", "readers")
.order_by("date"), .order_by("date"),
settings.SITH_FORUM_PAGE_LENGTH, settings.SITH_FORUM_PAGE_LENGTH,