Updated forum post styling.

assets/less/classes/forum/post.less

@@ -1,8 +1,5 @@
 .forum__post {
     display: flex;
-    border: 1px solid var(--accent-colour);
-    box-shadow: 0 1px 2px var(--accent-colour);
-    background-color: var(--background-colour);
     margin: 2px 0;
 
     @media (max-width: @site-mobile-width) {
@@ -16,6 +13,26 @@
         flex-shrink: 1;
         word-wrap: break-word;
         overflow: hidden;
+    }
+
+    &__details {
+        font-size: .9em;
+        line-height: 1.7em;
+        padding: 0 2px;
+        display: flex;
+        justify-content: space-between;
+        color: #888;
+    }
+
+    &__datetime,
+    &__id {
+        color: inherit;
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
 
     &__text {
         margin: 2px;
@@ -29,87 +46,79 @@
     }
 
     &__info {
-            font-size: .9em;
+        background-image: linear-gradient(90deg, var(--user-colour), transparent);
-            line-height: 1.7em;
+        min-width: 150px;
-            padding: 0 2px;
-            border-bottom: 1px solid var(--accent-colour);
-            display: flex;
-            justify-content: space-between;
-
-            &__link {
-                color: inherit;
-                text-decoration: none;
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-    }
-
-    &__author {
-        border-right: 1px solid var(--accent-colour);
         text-align: center;
-        flex-grow: 0;
-        flex-shrink: 0;
-        min-width: 170px;
         display: flex;
         flex-direction: column;
         align-items: center;
+        padding: 15px;
+        flex: 0 0 auto;
+        margin-right: 4px;
 
         @media (max-width: @site-mobile-width) {
-            border-right-width: 0;
+            background-image: linear-gradient(180deg, var(--user-colour), transparent);
-            border: 1px solid var(--accent-colour);
             flex-direction: row;
-            border-bottom-width: 2px;
+            margin: 0;
+            padding: 5px;
+        }
+    }
+
+    &__icons {
+        display: flex;
+        align-items: center;
+
+        @media (max-width: @site-mobile-width) {
+            flex-direction: column;
+            align-items: flex-end;
+        }
+    }
+
+    &__posts-count {
+        font-size: .9em;
+        margin-left: 4px;
     }
 
     &__joined {
-            flex-grow: 1;
+        flex: 1 1 auto;
-            flex-shrink: 1;
+        margin: 2px;
-            margin: 5px;
         max-width: 170px;
+        font-size: .9em;
+        justify-self: flex-end;
+        margin-top: 10px;
+        margin-bottom: -10px;
 
         @media (max-width: @site-mobile-width) {
             display: none;
         }
     }
 
-        &__link {
-            margin: 15px;
-            color: inherit;
-            text-decoration: none;
-            flex-grow: 0;
-            flex-shrink: 0;
-
-            @media (max-width: @site-mobile-width) {
-                display: flex;
-                align-items: center;
-                margin: 5px;
-                flex-grow: 1;
-            }
-        }
-
     &__avatar {
         width: 120px;
         height: 120px;
-            box-shadow: 0 1px 2px var(--accent-colour);
 
         @media (max-width: @site-mobile-width) {
             width: 40px;
             height: 40px;
-                margin-right: 5px;
+            margin-right: 4px;
         }
     }
 
     &__username {
-            color: var(--user-colour);
+        color: inherit;
-            font-size: 1.5em;
+        font-size: 1.4em;
-            line-height: 1.7em;
+        line-height: 1.5em;
+        text-decoration: none;
+        margin: 2px 0 1px;
+
+        &[href]:hover {
+            text-decoration: underline;
         }
 
-        &:not(&--deleted) &__username:hover {
+        @media (max-width: @site-mobile-width) {
-            text-decoration: underline;
+            flex: 1 1 auto;
+            text-align: left;
+            margin: 0 4px;
         }
     }
 }

src/Forum/post.php

@@ -53,7 +53,14 @@ define('MSZ_FORUM_POST_LISTING_QUERY_STANDARD', '
         u.`user_id` as `poster_id`,
         u.`username` as `poster_name`,
         u.`created_at` as `poster_joined`,
-        COALESCE(u.`user_colour`, r.`role_colour`) as `poster_colour`
+        u.`user_country` as `poster_country`,
+        COALESCE(u.`user_colour`, r.`role_colour`) as `poster_colour`,
+        (
+            SELECT COUNT(`post_id`)
+            FROM `msz_forum_posts`
+            WHERE `user_id` = p.`user_id`
+            AND `post_deleted` IS NULL
+        ) as `poster_post_count`
     FROM `msz_forum_posts` as p
     LEFT JOIN `msz_users` as u
     ON u.`user_id` = p.`user_id`

templates/forum/macros.twig

@@ -130,7 +130,7 @@
 {% macro forum_topic_buttons(topic) %}
     <div class="forum__actions forum__actions__content">
         <a  href="#reply"
-            class="input__button forum__actions__button"
+            class="input__button input__button--new forum__actions__button"
             onclick="openContainer('reply')">Reply</a>
     </div>
 {% endmacro %}
@@ -263,40 +263,41 @@
     {% set is_original_post = is_original_post|default(false) %}
     {% set is_original_poster = is_original_poster|default(false) %}
 
-    <div class="forum__post" id="p{{ post.post_id }}">
+    <div class="container container--new forum__post" id="p{{ post.post_id }}">
+        <div class="forum__post__info" style="{{ post.poster_colour|html_colour }}">
             {% if post.poster_id is not null %}
-            <div class="forum__post__author">
+                <a class="avatar avatar--new forum__post__avatar"
-                <a class="forum__post__author__link" href="/profile.php?u={{ post.poster_id }}">
+                    style="background-image:url('/profile.php?u={{ post.poster_id }}&amp;m=avatar');"
-                    <div
+                    href="/profile.php?u={{ post.poster_id }}">
-                        class="avatar forum__post__author__avatar"
-                        style="background-image:url('/profile.php?u={{ post.poster_id }}&amp;m=avatar');">
-                    </div>
-                    <div
-                        class="forum__post__author__username"
-                        style="{{ post.poster_colour|html_colour }}">{{ post.poster_name }}</div>
                 </a>
-                <div class="forum__post__author__joined">
+
+                <a class="forum__post__username" href="/profile.php?u={{ post.poster_id }}">{{ post.poster_name }}</a>
+
+                <div class="forum__post__icons">
+                    <div class="flag flag--{{ post.poster_country|lower }}" title="{{ post.poster_country|country_name }}"></div>
+                    <div class="forum__post__posts-count">{{ post.poster_post_count|number_format }} posts</div>
+                </div>
+
+                <div class="forum__post__joined">
                     joined <time datetime="{{ post.poster_joined|date('c') }}" title="{{ post.poster_joined|date('r') }}">{{ post.poster_joined|time_diff }}</time>
                 </div>
-            </div>
             {% else %}
-            <div class="forum__post__author forum__post__author--deleted">
+                <div class="forum__post__username">Deleted User</div>
-                <div class="forum__post__author__link">
-                    <div class="forum__post__author__username">Deleted User</div>
-                </div>
-            </div>
             {% endif %}
+        </div>
 
         <div class="forum__post__content">
-            <div class="forum__post__content__info">
+            <div class="forum__post__details">
-                <a class="forum__post__content__info__link" href="/forum/topic.php?t={{ post.topic_id }}#p{{ post.post_id }}">
+                <a class="forum__post__datetime" href="/forum/topic.php?t={{ post.topic_id }}#p{{ post.post_id }}">
                     <time datetime="{{ post.post_created|date('c') }}" title="{{ post.post_created|date('r') }}">{{ post.post_created|time_diff }}</time>
                 </a>
-                <a class="forum__post__content__info__link" href="/forum/topic.php?p={{ post.post_id }}#p{{ post.post_id }}">
+
+                <a class="forum__post__id" href="/forum/topic.php?p={{ post.post_id }}#p{{ post.post_id }}">
                     #{{ post.post_id }}
                 </a>
             </div>
-            <div class="forum__post__content__text">
+
+            <div class="forum__post__text">
                 {{ post.post_text|escape|parse_text(post.post_parse)|raw }}
             </div>
         </div>