New topic listing styling.

assets/less/classes/forum/category.less

@@ -40,6 +40,7 @@
     }
 
     &__icon {
+        flex: 0 0 auto;
         border-radius: 2px;
         width: 40px;
         height: 40px;

assets/less/classes/forum/pagination.less

@@ -1,4 +1,5 @@
 .forum__pagination {
+    margin: 2px 0;
     box-shadow: 0 1px 2px var(--accent-colour);
     background-color: var(--background-colour);
 }

assets/less/classes/forum/topic.less

@@ -1,2 +1,187 @@
 .forum__topic {
+    border-radius: 2px;
+    background-color: #111;
+    transition: background-color .2s, box-shadow .2s;
+
+    &:nth-child(even) {
+        background-color: #191919;
+    }
+
+    &:hover {
+        background-color: #222;
+        box-shadow: 0 1px 4px #222;
+    }
+
+    &:not(:last-child) {
+        margin-bottom: 4px;
+    }
+
+    &__link {
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &__container {
+        display: flex;
+        padding: 5px;
+        align-items: center;
+        min-height: 40px;
+        pointer-events: none;
+
+        @media (max-width: @site-mobile-width) {
+            flex-wrap: wrap;
+        }
+    }
+
+    &__icon {
+        flex: 0 0 auto;
+        border-radius: 2px;
+        width: 30px;
+        height: 30px;
+        margin-right: 4px;
+        background-color: #333;
+        background-size: 60px 60px;
+        background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
+        box-shadow: 0 1px 4px #111;
+        font-size: 1.5em;
+        line-height: 1.5em;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-bottom: 1px; // fixes centering
+
+        &--unread {
+            background-color: var(--accent-colour);
+        }
+    }
+
+    &__details {
+        margin: 0 4px;
+        flex: 1 1 auto;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        line-height: 1.5em;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__title {
+        font-size: 1.3em;
+    }
+
+    &__info {
+        font-size: .9em;
+    }
+
+    &__stats,
+    &__activity {
+        display: flex;
+        flex: 0 0 auto;
+    }
+
+    &__stats {
+        text-align: center;
+        min-width: 80px;
+        flex-direction: column;
+
+        @media (max-width: @site-mobile-width) {
+            min-width: initial;
+            border-left-width: 0;
+            align-self: flex-start;
+            align-items: flex-end;
+        }
+    }
+
+    &__stat {
+        font-size: .9em;
+        line-height: 1.3em;
+        opacity: .7;
+
+        &:first-child {
+            font-size: 1.4em;
+            opacity: 1;
+        }
+
+        @media (max-width: @site-mobile-width) {
+            font-size: 1em;
+            margin: 0 4px;
+        }
+    }
+
+    &__activity {
+        display: flex;
+        align-items: center;
+        text-align: right;
+        min-width: 120px;
+        line-height: 1.5em;
+
+        @media (max-width: @site-mobile-width) {
+            min-width: 100%;
+        }
+
+        &__details {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+            margin: 0 8px;
+            flex: 1 1 auto;
+
+            @media (max-width: @site-mobile-width) {
+                margin: 1px 4px 0;
+                flex-direction: row;
+            }
+        }
+
+        &__post {
+            color: var(--accent-colour);
+            text-decoration: none;
+            pointer-events: initial;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 120px;
+
+            &:hover {
+                text-decoration: underline;
+            }
+
+            @media (max-width: @site-mobile-width) {
+                flex: 1 1 auto;
+                text-align: left;
+            }
+        }
+    }
+
+    &__username {
+        color: var(--user-colour);
+        text-decoration: none;
+        pointer-events: initial;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    &__avatar {
+        display: block;
+        flex: 0 0 auto;
+        text-decoration: none;
+        color: inherit;
+        width: 30px;
+        height: 30px;
+        pointer-events: initial;
+
+        @media (max-width: @site-mobile-width) {
+            display: none;
+        }
+    }
 }

assets/less/classes/forum/topics.less

@@ -1,142 +1,19 @@
 .forum__topics {
-    &__listing {
+    margin-bottom: 2px;
-        margin: 1px;
+    box-sizing: content-box;
+    overflow: auto;
+
+    &__empty {
+        font-size: 1.2em;
+        line-height: 1.5em;
+        text-align: center;
+        padding: 10px;
     }
 
-    &__none {
+    &__list {
-        margin: 0 3px;
-    }
-
-    &__entry {
         display: flex;
-        align-items: stretch;
+        flex-direction: column;
-        min-height: 40px;
+        margin: 5px;
-
+        overflow: hidden;
-        &:not(:first-child) {
-            margin-top: 1px;
-            padding-top: 1px;
-            border-top: 1px solid var(--accent-colour);
-        }
-
-        &__icon {
-            flex-shrink: 0;
-            flex-grow: 0;
-            align-self: center;
-        }
-
-        &__info {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            flex-grow: 1;
-            flex-shrink: 1;
-            padding: 0 2px;
-            word-wrap: break-word;
-            overflow: hidden;
-        }
-
-        &__stats,
-        &__activity {
-            display: flex;
-            flex-shrink: 0;
-            flex-grow: 0;
-            border-left: 1px solid var(--accent-colour);
-        }
-
-        &__info,
-        &__activity {
-            &__datetime,
-            &__title {
-                line-height: 1.4em;
-                margin-bottom: 2px;
-
-                &__link {
-                    text-decoration: none;
-                    color: inherit;
-
-                    &:hover {
-                        text-decoration: underline;
-                    }
-                }
-
-                &--unread {
-                    font-weight: 700;
-                }
-            }
-
-            &__author {
-                font-size: .9em;
-                line-height: 1.2em;
-
-                &__name {
-                    color: var(--user-colour);
-                    font-weight: 700;
-                    text-decoration: none;
-
-                    &:hover {
-                        text-decoration: underline;
-                    }
-                }
-            }
-        }
-
-        &__stat {
-            line-height: 1.2em;
-
-            &--posts {
-                font-size: 1.3em;
-                color: #111;
-            }
-
-            &--views {
-                font-size: 0.8em;
-                color: #555;
-            }
-
-            @media (max-width: @site-mobile-width) {
-                font-size: 1em;
-                margin: 0 4px;
-            }
-        }
-
-        &__stats {
-            text-align: center;
-            padding-left: 1px;
-            min-width: 70px;
-            flex-direction: column;
-            justify-content: center;
-
-            @media (max-width: @site-mobile-width) {
-                min-width: initial;
-                border-left-width: 0;
-                align-self: flex-end;
-                align-items: flex-end;
-            }
-        }
-
-        &__activity {
-            min-width: 200px;
-            padding-left: 3px;
-            align-items: center;
-
-            @media (max-width: @site-mobile-width) {
-                min-width: initial;
-                width: 120px;
-            }
-
-            &__info {
-                flex-grow: 1;
-                flex-shrink: 1;
-                margin-left: 3px;
-            }
-
-            &__avatar {
-                width: 40px;
-                height: 40px;
-                flex-grow: 0;
-                flex-shrink: 0;
-                margin: 1px;
-            }
-        }
     }
 }

templates/forum/macros.twig

@@ -156,15 +156,15 @@
 {% macro forum_topic_listing(topics) %}
     {% from _self import forum_topic_entry %}
 
-    <div class="container forum__topics">
+    <div class="container container--new forum__topics">
         <div class="container__title">Topics</div>
-        <div class="forum__topics__listing">
+        <div class="forum__topics__list">
             {% if topics|length > 0 %}
                 {% for topic in topics %}
                     {{ forum_topic_entry(topic) }}
                 {% endfor %}
             {% else %}
-                <div class="forum__topics__none">
+                <div class="forum__topics__empty">
                     There are no topics in this forum.
                 </div>
             {% endif %}
@@ -192,61 +192,59 @@
         {% endif %}
     {% endif %}
 
-    <div class="forum__topics__entry">
+    <div class="forum__topic">
-        <div class="forum__topics__entry__icon forum__topics__entry__icon--{{ topic_unread }}">
+        <a href="/forum/topic.php?t={{ topic.topic_id }}" class="forum__topic__link"></a>
-            <i class="{{ topic_type }}"></i>
-        </div>
 
-        <div class="forum__topics__entry__info">
+        <div class="forum__topic__container">
-            <div class="forum__topics__entry__info__title forum__topics__entry__info__title--{{ topic_unread }}">
+            <div class="forum__topic__icon forum__topic__icon--{{ topic_unread }}">
-                <a href="/forum/topic.php?t={{ topic.topic_id }}" class="forum__topics__entry__info__title__link">{{ topic.topic_title }}</a>
+                <i class="{{ topic_type }}"></i>
             </div>
-            <div class="forum__topics__entry__info__author">
-                {% if topic.author_id is not null %}
-                    by <a
-                        href="/profile.php?u={{ topic.author_id }}"
-                        class="forum__topics__entry__info__author__name"
-                        style="{{ topic.author_colour|html_colour }}">{{ topic.author_name }}</a>,
 
-                {% endif %}
+            <div class="forum__topic__details">
-                <time datetime="{{ topic.topic_created|date('c') }}" title="{{ topic.topic_created|date('r') }}">{{ topic.topic_created|time_diff }}</time>
+                <div class="forum__topic__title">
-            </div>
+                    <span class="forum__topic__title__inner">
-        </div>
+                        {{ topic.topic_title }}
+                    </span>
+                </div>
 
-        <div class="forum__topics__entry__stats">
+                <div class="forum__topic__info">
-            <div class="forum__topics__entry__stat forum__topics__entry__stat--posts" title="Posts">
+                    {% if topic.author_id is not null %}
-                {{ topic.topic_post_count|number_format }}
+                        by <a
-            </div>
+                            href="/profile.php?u={{ topic.author_id }}"
-            <div class="forum__topics__entry__stat forum__topics__entry__stat--views" title="Views">
+                            class="forum__topic__username"
-                {{ topic.topic_view_count|number_format }}
+                            style="{{ topic.author_colour|html_colour }}">{{ topic.author_name }}</a>,
-            </div>
-        </div>
 
-        <div class="forum__topics__entry__activity">
+                    {% endif %}
-            <div class="forum__topics__entry__activity__info">
+                    <time datetime="{{ topic.topic_created|date('c') }}" title="{{ topic.topic_created|date('r') }}">{{ topic.topic_created|time_diff }}</time>
-                <div class="forum__topics__entry__activity__datetime">
+                </div>
-                    <a href="/forum/topic.php?p={{ topic.response_id }}#p{{ topic.response_id }}" class="forum__topics__entry__activity__datetime__link">
+            </div>
-                        <time
+
-                            datetime="{{ topic.response_created|date('c') }}"
+            <div class="forum__topic__stats">
+                <div class="forum__topic__stat" title="Posts">{{ topic.topic_post_count|number_format }}</div>
+                <div class="forum__topic__stat" title="Views">{{ topic.topic_view_count|number_format }}</div>
+            </div>
+
+            <div class="forum__topic__activity">
+                <div class="forum__topic__activity__details">
+                    {% if topic.respondent_id is not null %}
+                        <a href="/profile.php?u={{ topic.respondent_id }}" class="forum__topic__username"
+                            style="{{ topic.respondent_colour|html_colour }}">{{ topic.respondent_name }}</a>
+                    {% endif %}
+
+                    <a class="forum__topic__activity__post"
+                        href="/forum/topic.php?p={{ topic.response_id }}#p{{ topic.response_id }}">
+                        <time datetime="{{ topic.response_created|date('c') }}"
                             title="{{ topic.response_created|date('r') }}">{{ topic.response_created|time_diff }}</time>
                     </a>
                 </div>
+
                 {% if topic.respondent_id is not null %}
-                    <div class="forum__topics__entry__activity__author">
+                    <a href="/profile.php?u={{ topic.respondent_id }}"
-                        by <a href="/profile.php?u={{ topic.respondent_id }}" class="forum__topics__entry__activity__author__name" style="{{ topic.respondent_colour|html_colour }}">
+                        class="avatar avatar--new forum__topic__avatar"
-                            {{ topic.respondent_name }}
+                        style="background-image:url('/profile.php?u={{ topic.respondent_id }}&amp;m=avatar')">
-                        </a>
+                    </a>
-                    </div>
                 {% endif %}
             </div>
-
-            {% if topic.respondent_id is not null %}
-                <a
-                    href="/profile.php?u={{ topic.respondent_id }}"
-                    class="avatar forum__topics__entry__activity__avatar"
-                    style="background-image:url('/profile.php?u={{ topic.respondent_id }}&amp;m=avatar')">
-                </a>
-            {% endif %}
         </div>
     </div>
 {% endmacro %}