#410: polished events list little

misago/static/misago/css/misago/events.less

@@ -0,0 +1,68 @@
+//
+// Posts Events Styles
+// --------------------------------------------------
+
+
+// Events list
+//
+//==
+.posts-list {
+  .post-events {
+    .event {
+      color: @text-muted;
+
+      .fa-stack {
+        margin-right: @line-height-computed / 3;
+
+        &>.fa-stack-2x {
+          color: @post-panel-border;
+        }
+
+        &>.fa-inverse {
+          position: relative;
+          bottom: 1px;
+        }
+      }
+
+      img {
+        border-radius: @border-radius-small;
+        height: 18px;
+        width: 18px;
+      }
+
+      a {
+        &:link, &:visited {
+          color: @state-hover;
+          font-weight: bold;
+        }
+
+        &:hover {
+          color: @state-hover;
+          text-decoration: underline;
+        }
+
+        &:active, &:focus {
+          color: @state-clicked;
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .divider {
+      padding-left: @line-height-computed / 4;
+      color: @post-panel-border;
+
+      abbr {
+        margin-left: @line-height-computed / 2;
+        position: relative;
+        bottom: 2px;
+
+        font-size: @font-size-small;
+
+        &:hover {
+          color: @text-muted;
+        }
+      }
+    }
+  }
+}

misago/static/misago/css/misago/misago.less

@@ -36,3 +36,4 @@
 @import "warnings.less";
 @import "usercp.less";
 @import "posts.less";
+@import "events.less";

misago/templates/misago/thread/events.html

@@ -1,9 +1,23 @@
-{% load i18n %}
+{% load i18n misago_avatars %}
 <ul class="list-unstyled post-events">
   {% for event in post.events %}
+  <li class="divider">
+    <span class="fa fa-arrow-down fa-fw"></span>
+    <abbr class="tooltip-top dynamic time-ago-compact" title="{% blocktrans with date=event.occured_on %}This event occured on {{ date }}.{% endblocktrans %}" data-timestamp="{{ event.occured_on|date:"c" }}">
+      {{ event.occured_on|date }}
+    </abbr>
+  </li>
   <li class="event">
-    <span class="fa fa-{{ event.icon }} fa-fw fa-lg"></span>
-    {{ event.message|safe }}
+    <span class="fa-stack">
+      <i class="fa fa-circle fa-stack-2x"></i>
+      <i class="fa fa-{{ event.icon }} fa-stack-1x fa-inverse"></i>
+    </span>
+    <img src="{{ event.author_id|avatar:18 }}" alt="{% trans "Avatar" %}">
+    {% if event.is_valid %}
+      {{ event.message|safe }}
+    {% else %}
+      <em>{% trans "Event message is invalid." %}</em>
+    {% endif %}
   </li>
   {% endfor %}
 </ul>

misago/templates/misago/thread/post.html

@@ -51,8 +51,10 @@
         le footer
       </div>
     </div>
+
+    {% if post.events %}
+    {% include "misago/thread/events.html" %}
+    {% endif %}
+
   </div>
-  {% if post.events %}
-  {% include "misago/thread/events.html" %}
-  {% endif %}
 </div>