Updated forum/topic tools styling.

assets/less/classes/forum/actions.less

@@ -1,8 +1,27 @@
 .forum__actions {
-    padding: 2px;
+    margin: 2px 0;
+    padding: 5px;
     display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: stretch;
 
-    &__button:not(:first-child) {
+    &__pagination {
-        margin-left: 2px;
+        max-width: 500px;
+        flex: 1 1 auto;
+        display: flex;
+        align-items: stretch;
+        justify-content: space-between;
+
+        @media (max-width: @site-mobile-width) {
+            max-width: 100%;
+            flex-grow: 0;
+        }
+    }
+
+    &__buttons {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: stretch;
     }
 }

assets/less/classes/input/button.less

@@ -11,7 +11,9 @@
     color: var(--accent-colour);
     border: 1px solid var(--accent-colour);
     border-radius: 2px;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     text-decoration: none;
 
     &:hover,

assets/less/classes/pagination.less

@@ -1,10 +1,12 @@
 .pagination {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
+    width: 100%;
 
     &__section {
         display: flex;
+        align-items: stretch;
         overflow: auto;
         flex: 0 0 auto;
 
@@ -15,15 +17,18 @@
                 display: none;
             }
         }
+
+        &:not(:last-child) {
+            margin-right: 1px;
+        }
     }
 
     &__link {
-        display: block;
+        display: flex;
-        height: 30px;
+        min-width: 40px;
         font-size: 1.2em;
         line-height: 1.5em;
-        margin: 1px;
+        padding: 3px 10px 4px;
-        padding: 3px 10px;
         text-align: center;
         text-decoration: none;
         background-color: var(--background-colour);
@@ -31,11 +36,26 @@
         border: 1px solid var(--accent-colour);
         border-radius: 2px;
         transition: background-color .2s, color .2s;
+        text-align: center;
+        align-items: center;
+        justify-content: center;
+        flex: 1 0 auto;
+
+        &:not(:last-child) {
+            margin-right: 1px;
+        }
 
         &--disabled {
             --accent-colour: #555;
         }
 
+        &--first,
+        &--last,
+        &--next,
+        &--prev {
+            padding-top: 5px;
+        }
+
         &--current,
         &:not(&--disabled):hover,
         &:not(&--disabled):active,

public/forum/topic.php

@@ -29,6 +29,8 @@ if (!perms_check($perms, MSZ_FORUM_PERM_VIEW_FORUM)) {
     return;
 }
 
+tpl_var('topic_perms', $perms);
+
 $posts = forum_post_listing($topic['topic_id'], $postsOffset, $postsRange);
 
 if (!$posts) {

templates/forum/forum.twig

@@ -1,6 +1,5 @@
 {% extends 'forum/master.twig' %}
-{% from 'macros.twig' import pagination %}
+{% from 'forum/macros.twig' import forum_category_listing, forum_topic_listing, forum_category_buttons, forum_header, forum_category_tools %}
-{% from 'forum/macros.twig' import forum_category_listing, forum_topic_listing, forum_category_buttons, forum_header %}
 
 {% set title = forum_info.forum_name %}
 {% set canonical_url = '/forum/forum.php'|url_construct({
@@ -16,18 +15,9 @@
     {% endif %}
 
     {% if forum_may_have_topics %}
-        {% set fcbuttons = current_user is defined ? forum_category_buttons(forum_info, forum_perms) : '' %}
+        {% set category_tools = forum_category_tools(forum_info, forum_perms, forum_range, forum_offset) %}
-        {% set fcpagination = pagination(
+        {{ category_tools }}
-            forum_info.forum_topic_count,
-            forum_range,
-            forum_offset,
-            '/forum/forum.php'|url_construct({'f': forum_info.forum_id})
-        ) %}
-
-        {{ fcbuttons }}
-        {{ fcpagination }}
         {{ forum_topic_listing(forum_topics) }}
-        {{ fcpagination }}
+        {{ category_tools }}
-        {{ fcbuttons }}
     {% endif %}
 {% endblock %}

templates/forum/macros.twig

@@ -45,11 +45,51 @@
     </div>
 {% endmacro %}
 
-{% macro forum_category_buttons(forum, perms) %}
+{% macro forum_category_tools(info, perms, take, offset) %}
-    <div class="forum__actions forum__actions__content">
+    {% from 'macros.twig' import pagination %}
-        {% if perms|perms_check(constant('MSZ_FORUM_PERM_CREATE_TOPIC')) %}
+
-            <a href="/forum/posting.php?f={{ forum.forum_id }}" class="input__button forum__actions__button">New Topic</a>
+    <div class="container forum__actions">
-        {% endif %}
+        <div class="forum__actions__buttons">
+            {% if perms|perms_check(constant('MSZ_FORUM_PERM_CREATE_TOPIC')) %}
+                <a href="{{ '/forum/posting.php'|url_construct({'f':info.forum_id}) }}" class="input__button">New Topic</a>
+            {% endif %}
+        </div>
+
+        <div class="forum__actions__pagination">
+            {{ pagination(
+                info.forum_topic_count,
+                take,
+                offset,
+                '/forum/forum.php'|url_construct({'f':info.forum_id}),
+                false,
+                null,
+                5
+            ) }}
+        </div>
+    </div>
+{% endmacro %}
+
+{% macro forum_topic_tools(info, take, offset, can_reply) %}
+    {% from 'macros.twig' import pagination %}
+
+    <div class="container forum__actions">
+        <div class="forum__actions__buttons">
+            {% if can_reply %}
+                <a href="#reply" class="input__button" onclick="openContainer('reply')">Reply</a>
+            {% endif %}
+        </div>
+
+        <div class="forum__actions__pagination">
+            {{ pagination(
+                info.topic_post_count,
+                take,
+                offset,
+                '/forum/topic.php'|url_construct({'t':info.topic_id}),
+                false,
+                null,
+                5
+            ) }}
+        </div>
     </div>
 {% endmacro %}
 
@@ -154,14 +194,6 @@
     </div>
 {% endmacro %}
 
-{% macro forum_topic_buttons(topic) %}
-    <div class="forum__actions forum__actions__content">
-        <a  href="#reply"
-            class="input__button forum__actions__button"
-            onclick="openContainer('reply')">Reply</a>
-    </div>
-{% endmacro %}
-
 {% macro forum_topic_locked(locked, archived) %}
     {% if locked is not null or archived %}
         <div class="container forum__status">

templates/forum/topic.twig

@@ -7,7 +7,8 @@
         forum_topic_buttons,
         forum_topic_locked,
         forum_posting_form,
-        forum_header
+        forum_header,
+        forum_topic_tools
 %}
 
 {% set title = topic_info.topic_title %}
@@ -17,23 +18,15 @@
 }) %}
 
 {% set can_reply = current_user is defined and topic_info.topic_locked is null and not topic_info.topic_archived %}
-{% set ftbuttons = can_reply ? forum_topic_buttons(topic_info) : '' %}
+{% set topic_tools = forum_topic_tools(topic_info, topic_range, topic_offset, can_reply) %}
-{% set ftpagination = pagination(
-    topic_info.topic_post_count,
-    topic_range,
-    topic_offset,
-    '/forum/topic.php'|url_construct({'t': topic_info.topic_id})
-) %}
 
 {% block content %}
     {{ forum_header(topic_info.topic_title, topic_breadcrumbs) }}
 
     {{ forum_topic_locked(topic_info.topic_locked, topic_info.topic_archived) }}
 
-    {{ ftbuttons }}
+    {{ topic_tools }}
-    {{ ftpagination }}
     {{ forum_post_listing(topic_posts, topic_info.topic_first_post_id) }}
-    {{ ftpagination }}
 
     {% if can_reply %}
         {{ forum_posting_form('Reply', topic_info.topic_id, true, 'reply', true) }}
@@ -45,4 +38,6 @@
             });
         </script>
     {% endif %}
+
+    {{ topic_tools }}
 {% endblock %}