Better style for forum messages

forum/templates/forum/macros.jinja

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

forum/templates/forum/topic.jinja

@@ -1,6 +1,7 @@
 {% extends "core/base.jinja" %}
 {% from 'core/macros.jinja' import user_profile_link %}
 {% from 'forum/macros.jinja' import display_message, display_breadcrumb, display_search_bar %}
+{% from 'core/macros.jinja' import paginate_jinja %}
 
 {% block title %}
   {{ topic }}
@@ -9,25 +10,7 @@
 
 {% block additional_css %}
   <link rel="stylesheet" href="{{ scss('forum/css/forum.scss') }}">
-{% endblock %}
-
-{% 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>
+  <link rel="stylesheet" href="{{ scss('core/pagination.scss') }}">
 {% endblock %}
 
 {% block content %}
@@ -45,30 +28,24 @@
     </p>
 
     {{ display_search_bar(request) }}
-    <p style="text-align: right; background: #d8e7f3;">
-      {% 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>
+    {{ paginate_jinja(msgs.number, msgs.paginator.num_pages) }}
 
-    {% for m in msgs %}
-      {% if m.id == first_unread_message_id %}
-        <span id="first_unread"></span>
-      {% endif %}
-      {% if m.id >= first_unread_message_id %}
-        {{ display_message(m, user, True) }}
-      {% else %}
-        {{ display_message(m, user, False) }}
-      {% endif %}
-    {% endfor %}
+    <main class="message-list">
+      {% for m in msgs %}
+        {% if m.id == first_unread_message_id %}
+          <span id="first_unread"></span>
+        {% endif %}
+        {% if m.id >= first_unread_message_id %}
+          {{ display_message(m, user, True) }}
+        {% else %}
+          {{ display_message(m, user, False) }}
+        {% endif %}
+      {% endfor %}
+    </main>
 
     <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;">
-      {% 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>
+    {{ paginate_jinja(msgs.number, msgs.paginator.num_pages) }}
   </div>
 {% endblock %}