Forum index redesign.

.gitignore

@@ -23,4 +23,5 @@
 # Compiled/copied assets
 /public/js
 /public/css
+/public/webfonts
 /assets/typescript/*.d.ts

assets/less/classes/forum/actions.less

@@ -1,8 +1,6 @@
 .forum__actions {
-    &__content {
+    padding: 2px;
-        margin: 2px;
+    display: flex;
-        display: flex;
-    }
 
     &__button:not(:first-child) {
         margin-left: 2px;

assets/less/classes/forum/category.less

@@ -0,0 +1,208 @@
+.forum__category {
+    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: 50px;
+        pointer-events: none;
+
+        @media (max-width: @site-mobile-width) {
+            flex-wrap: wrap;
+        }
+    }
+
+    &__icon {
+        border-radius: 2px;
+        width: 40px;
+        height: 40px;
+        margin-right: 4px;
+        background-color: #333;
+        background-size: 80px 80px;
+        background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
+        box-shadow: 0 1px 4px #111;
+        font-size: 2em;
+        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;
+    }
+
+    &__title {
+        font-size: 1.3em;
+    }
+
+    &__description,
+    &__subforums {
+        font-size: .9em;
+    }
+
+    &__subforums {
+        display: flex;
+    }
+
+    &__subforum {
+        padding: 2px;
+        pointer-events: initial;
+        color: var(--accent-colour);
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+
+        &--unread {
+            font-weight: 700;
+        }
+    }
+
+    &__stats,
+    &__activity {
+        display: flex;
+        flex: 0 0 auto;
+    }
+
+    &__stats {
+        text-align: center;
+        min-width: 100px;
+        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.5em;
+            opacity: 1;
+        }
+
+        @media (max-width: @site-mobile-width) {
+            font-size: 1em;
+            margin: 0 4px;
+        }
+    }
+
+    &__activity {
+        text-align: right;
+        min-width: 270px;
+        line-height: 1.5em;
+
+        @media (max-width: @site-mobile-width) {
+            min-width: 100%;
+
+            &--empty {
+                display: none;
+            }
+        }
+
+        &__none,
+        &__details {
+            margin: 0 8px;
+            flex: 1 1 auto;
+
+            @media (max-width: @site-mobile-width) {
+                margin: 1px 4px 0;
+            }
+        }
+
+        &__details {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+
+            @media (max-width: @site-mobile-width) {
+                flex-direction: row;
+            }
+        }
+
+        &__post {
+            color: var(--accent-colour);
+            text-decoration: none;
+            pointer-events: initial;
+
+            &: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: 40px;
+        height: 40px;
+        pointer-events: initial;
+
+        @media (max-width: @site-mobile-width) {
+            display: none;
+        }
+    }
+}

assets/less/classes/forum/listing.less

@@ -1,187 +0,0 @@
-.forum__listing {
-    &__forums {
-        margin: 2px;
-    }
-
-    &__none {
-        margin: 0 3px;
-    }
-
-    &__entry {
-        display: flex;
-        align-items: stretch;
-        min-height: 50px;
-
-        &:not(:last-child) {
-            border-bottom: 1px solid var(--accent-colour);
-            margin-bottom: 2px;
-            padding-bottom: 2px;
-        }
-
-        &__icon {
-            flex-shrink: 0;
-            flex-grow: 0;
-            align-self: center;
-        }
-
-        &__info {
-            flex-grow: 1;
-            flex-shrink: 1;
-            padding-left: 4px;
-            display: inline-flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-
-        &__title {
-            font-size: 1.2em;
-            line-height: 1.5em;
-            color: var(--text-colour-header);
-
-            &__link {
-                color: inherit;
-                text-decoration: none;
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
-
-        &__description,
-        &__subforums {
-            font-size: .8em;
-            line-height: 1.3em;
-        }
-
-        &__subforum {
-            content: inherit;
-            text-decoration: none;
-
-            &:hover {
-                text-decoration: underline;
-            }
-
-            &--unread {
-                font-weight: 700;
-            }
-        }
-
-        &__stats,
-        &__activity {
-            display: flex;
-            flex-shrink: 0;
-            flex-grow: 0;
-            border-left: 1px solid var(--accent-colour);
-        }
-
-        &__stats {
-            text-align: center;
-            justify-content: center;
-            min-width: 100px;
-            flex-direction: column;
-
-            @media (max-width: @site-mobile-width) {
-                min-width: initial;
-                border-left-width: 0;
-                align-self: flex-end;
-                align-items: flex-end;
-            }
-        }
-
-        &__topics {
-            font-size: 1.5em;
-            color: #222;
-        }
-
-        &__posts {
-            font-size: .9em;
-            color: #555;
-        }
-
-        @media (max-width: @site-mobile-width) {
-            &__topics,
-            &__posts {
-                font-size: 1em;
-                margin: 0 4px;
-            }
-        }
-
-        &__activity {
-            min-width: 270px;
-            min-height: 50px;
-            align-items: center;
-
-            @media (max-width: @site-mobile-width) {
-                min-width: 150px;
-
-                &--empty {
-                    display: none;
-                }
-            }
-
-            &__title {
-                line-height: 1.4em;
-                margin-bottom: 2px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                width: 200px;
-
-                &__link {
-                    color: inherit;
-                    text-decoration: none;
-
-                    &:hover {
-                        text-decoration: underline;
-                    }
-                }
-
-                &--unread {
-                    font-weight: 700;
-                }
-            }
-
-            &__info {
-                font-size: .9em;
-                line-height: 1.2em;
-            }
-
-            &__user {
-                color: var(--user-colour);
-                font-weight: 700;
-                text-decoration: none;
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-
-            &__avatar {
-                display: block;
-                text-decoration: none;
-                color: inherit;
-                width: 46px;
-                height: 46px;
-                margin: 1px;
-                flex-grow: 0;
-                flex-shrink: 0;
-            }
-
-            &__none,
-            &__details {
-                margin-left: 5px;
-                flex-grow: 1;
-                flex-shrink: 1;
-            }
-
-            @media (max-width: @site-mobile-width) {
-                &__title,
-                &__info,
-                &__none {
-                    width: 90px;
-                }
-            }
-        }
-    }
-}

assets/less/main.less

@@ -128,7 +128,7 @@ body {
 // Forums
 @import "classes/forum/actions";
 @import "classes/forum/categories";
-@import "classes/forum/listing";
+@import "classes/forum/category";
 @import "classes/forum/pagination";
 @import "classes/forum/post";
 @import "classes/forum/posting";

build.php

@@ -18,6 +18,14 @@ define('NODE_IMPORT_JS', [
 define('NODE_IMPORT_CSS', [
     'highlightjs/styles/default.css',
     'highlightjs/styles/tomorrow-night.css',
+    '@fortawesome/fontawesome-free/css/all.min.css',
+]);
+
+/**
+ * Directories to copy to the public folder
+ */
+define('NODE_COPY_DIRECTORY', [
+    '@fortawesome/fontawesome-free/webfonts' => 'webfonts',
 ]);
 
 /**
@@ -84,6 +92,34 @@ function deleteAllFilesInDir(string $dir, string $pattern): void
     }
 }
 
+function recursiveCopy(string $source, string $dest): bool
+{
+    if (is_link($source)) {
+        return symlink(readlink($source), $dest);
+    }
+
+    if (is_file($source)) {
+        return copy($source, $dest);
+    }
+
+    if (!is_dir($dest)) {
+        mkdir($dest);
+    }
+
+    $dir = dir($source);
+
+    while (($entry = $dir->read()) !== false) {
+        if ($entry === '.' || $entry === '..') {
+            continue;
+        }
+
+        recursiveCopy($source . DIRECTORY_SEPARATOR . $entry, $dest . DIRECTORY_SEPARATOR . $entry);
+    }
+
+    $dir->close();
+    return true;
+}
+
 misuzu_log('Cleanup');
 createDirIfNotExist(CSS_DIR);
 createDirIfNotExist(JS_DIR);
@@ -147,6 +183,17 @@ foreach (IMPORT_SEQ as $sequence) {
     file_put_contents($sequence['destination'], $contents);
 }
 
+misuzu_log();
+misuzu_log('Copying data...');
+
+foreach (NODE_COPY_DIRECTORY as $source => $dest) {
+    misuzu_log("=> " . basename($dest));
+    $source = realpath(NODE_MODULES_DIR . DIRECTORY_SEPARATOR . $source);
+    $dest = PUBLIC_DIR . DIRECTORY_SEPARATOR . $dest;
+    deleteAllFilesInDir($dest, '*');
+    recursiveCopy($source, $dest);
+}
+
 // no need to do this in debug mode, auto reload is enabled and cache is disabled
 if (!file_exists(__DIR__ . '/.debug')) {
     // Clear Twig cache

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.3.1",
     "highlightjs": "^9.10.0",
     "timeago.js": "^3.0.2"
   }

templates/forum/index.twig

@@ -12,14 +12,11 @@
             {% endif %}
         {% endfor %}
 
-        <div class="container forum__actions">
+        <div class="container container--new forum__actions">
-            <div class="container__title">Actions</div>
+            <a class="input__button input__button--new forum__actions__button">Mark All Read</a>
-            <div class="forum__actions__content">
+            <a class="input__button input__button--new forum__actions__button">Unanswered Posts</a>
-                <a class="input__button forum__actions__button">Mark All Read</a>
+            <a class="input__button input__button--new forum__actions__button">New Posts</a>
-                <a class="input__button forum__actions__button">Unanswered Posts</a>
+            <a class="input__button input__button--new forum__actions__button">Your Posts</a>
-                <a class="input__button forum__actions__button">New Posts</a>
-                <a class="input__button forum__actions__button">Your Posts</a>
-            </div>
         </div>
     {% else %}
         <div class="container">

templates/forum/macros.twig

@@ -26,100 +26,104 @@
     </div>
 {% endmacro %}
 
-{% macro forum_category_entry(forum, forum_unread, forum_type, forum_icon) %}
+{% macro forum_category_entry(forum, forum_unread, forum_type) %}
     {% set forum_type = forum_type|default(null) %}
     {% set forum_unread = forum_unread|default(forum.forum_unread|default(false)) ? 'unread' : 'read' %}
-    {% set forum_icon = forum_icon|default('https://static.flash.moe/images/forum-icons/forum-%s-%s.png') %}
 
     {% if forum_type is null %}
         {% if forum.forum_archived is defined and forum.forum_archived %}
-            {% set forum_type = 'archive' %}
+            {% set forum_type = 'fas fa-archive' %}
         {% elseif forum.forum_type is defined and forum.forum_type != 0 %}
             {% if forum.forum_type == 2 %}
-                {% set forum_type = 'link' %}
+                {% set forum_type = 'fas fa-link' %}
             {% elseif forum.forum_type == 1 %}
-                {% set forum_type = 'category' %}
+                {% set forum_type = 'fas fa-folder' %}
             {% endif %}
         {% else %}
-            {% set forum_type = 'default' %}
+            {% set forum_type = 'fas fa-comments' %}
         {% endif %}
     {% endif %}
 
-    <div class="forum__listing__entry">
+    <div class="forum__category">
-        <img src="{{ forum_icon|format(forum_type, forum_unread) }}" alt="{{ forum_unread }}" class="forum__listing__entry__icon">
+        <a href="/forum/forum.php?f={{ forum.forum_id }}" class="forum__category__link"></a>
 
-        <div class="forum__listing__entry__info">
+        <div class="forum__category__container">
-            <div class="forum__listing__entry__title">
+            <div class="forum__category__icon forum__category__icon--{{ forum_unread }}">
-                <a href="/forum/forum.php?f={{ forum.forum_id }}" class="forum__listing__entry__title__link">{{ forum.forum_name }}</a>
+                <i class="{{ forum_type }}"></i>
             </div>
 
-            <div class="forum__listing__entry__description">
+            <div class="forum__category__details">
-                {{ forum.forum_description|nl2br }}
+                <div class="forum__category__title">
+                    {{ forum.forum_name }}
+                </div>
+
+                <div class="forum__category__description">
+                    {{ forum.forum_description|nl2br }}
+                </div>
+
+                {% if forum.forum_subforums is defined and forum.forum_subforums|length > 0 %}
+                    <div class="forum__category__subforums">
+                        {% for subforum in forum.forum_subforums %}
+                            <a href="/forum/forum.php?f={{ subforum.forum_id }}"
+                                class="forum__category__subforum{% if subforum.forum_unread %} forum__category__subforum--unread{% endif %}">
+                                {{ subforum.forum_name }}
+                            </a>
+                        {% endfor %}
+                    </div>
+                {% endif %}
             </div>
 
-            {% if forum.forum_subforums is defined and forum.forum_subforums|length > 0 %}
+            {% if forum.forum_type == 2 %}
-                <div class="forum__listing__entry__subforums">
+                {% if forum.forum_link_clicks is not null %}
-                    {% for subforum in forum.forum_subforums %}
+                    <div class="forum__category__stats">
-                        <a  href="/forum/forum.php?f={{ subforum.forum_id }}"
+                        <div class="forum__category__stat" title="Clicks">{{ forum.forum_link_clicks|number_format }}</div>
-                            class="forum__listing__entry__subforum{% if subforum.forum_unread %} forum__listing__entry__subforum--unread{% endif %}">
+                    </div>
-                            {{ subforum.forum_name }}
+                {% endif %}
-                        </a>
+            {% elseif forum.forum_type != 1 %}
-                    {% endfor %}
+                <div class="forum__category__stats">
+                    <div class="forum__category__stat" title="Topics">{{ forum.forum_topic_count|number_format }}</div>
+                    <div class="forum__category__stat" title="Posts">{{ forum.forum_post_count|number_format }}</div>
                 </div>
             {% endif %}
-        </div>
 
-        {% if forum.forum_type == 2 %}
+            {% if forum.forum_type == 0 or forum.forum_link_clicks is not null %}
-            {% if forum.forum_link_clicks is not null %}
+                <div class="forum__category__activity{% if forum.forum_link_clicks is not null %} forum__category__activity--empty{% endif %}">
-                <div class="forum__listing__entry__stats">
+                    {% if forum.forum_type != 2 %}
-                    <div class="forum__listing__entry__topics" title="Clicks">{{ forum.forum_link_clicks|number_format }}</div>
+                        {% if forum.recent_topic_id is null %}
-                </div>
+                            <div class="forum__category__activity__none">
-            {% endif %}
+                                There are no posts in this forum yet.
-        {% elseif forum.forum_type != 1 %}
+                            </div>
-            <div class="forum__listing__entry__stats">
+                        {% else %}
-                <div class="forum__listing__entry__topics" title="Topics">{{ forum.forum_topic_count|number_format }}</div>
+                            <div class="forum__category__activity__details">
-                <div class="forum__listing__entry__posts" title="Posts">{{ forum.forum_post_count|number_format }}</div>
+                                <a class="forum__category__activity__post"
-            </div>
-        {% endif %}
-
-        {% if forum.forum_type == 0 or forum.forum_link_clicks is not null %}
-            <div class="forum__listing__entry__activity{% if forum.forum_link_clicks is not null %} forum__listing__entry__activity--empty{% endif %}">
-                {% if forum.forum_type != 2 %}
-                    {% if forum.recent_topic_id is null %}
-                        <div class="forum__listing__entry__activity__none">
-                            There are no posts in this forum yet.
-                        </div>
-                    {% else %}
-                        <div class="forum__listing__entry__activity__details">
-                            <div class="forum__listing__entry__activity__title">
-                                <a  class="forum__listing__entry__activity__title__link"
                                     href="/forum/topic.php?p={{ forum.recent_post_id }}#p{{ forum.recent_post_id }}">
                                     {{ forum.recent_topic_title }}
                                 </a>
-                            </div>
-                            <div class="forum__listing__entry__activity__info">
-                                {% if forum.recent_post_user_id is not null %}
-                                    by <a href="/profile.php?u={{ forum.recent_post_user_id }}"
-                                        style="{{ forum.recent_post_user_colour|html_colour }}"
-                                        class="forum__listing__entry__activity__user">{{ forum.recent_post_username }}</a>,
-                                {% endif %}
-                                <time
-                                    datetime="{{ forum.recent_post_created|date('c') }}"
-                                    title="{{ forum.recent_post_created|date('r') }}">{{ forum.recent_post_created|time_diff }}</time>
-                            </div>
-                        </div>
 
-                        {% if forum.recent_post_user_id is not null %}
+                                <div class="forum__category__activity__info">
-                            <a
+                                    <time datetime="{{ forum.recent_post_created|date('c') }}"
-                                href="/profile.php?u={{ forum.recent_post_user_id }}"
+                                        title="{{ forum.recent_post_created|date('r') }}">{{ forum.recent_post_created|time_diff }}</time>
-                                class="avatar forum__listing__entry__activity__avatar"
+                                    {% if forum.recent_post_user_id is not null %}
-                                style="background-image:url('/profile.php?u={{ forum.recent_post_user_id }}&amp;m=avatar')">
+                                        by
-                            </a>
+                                        <a href="/profile.php?u={{ forum.recent_post_user_id }}" class="forum__category__username"
+                                            style="{{ forum.recent_post_user_colour|html_colour }}">
+                                            {{ forum.recent_post_username }}
+                                        </a>
+                                    {% endif %}
+                                </div>
+                            </div>
+
+                            {% if forum.recent_post_user_id is not null %}
+                                <a href="/profile.php?u={{ forum.recent_post_user_id }}"
+                                    class="avatar avatar--new forum__category__avatar"
+                                    style="background-image:url('/profile.php?u={{ forum.recent_post_user_id }}&amp;m=avatar')">
+                                </a>
+                            {% endif %}
                         {% endif %}
                     {% endif %}
-                {% endif %}
+                </div>
-            </div>
+            {% endif %}
-        {% endif %}
+        </div>
     </div>
 {% endmacro %}
 

yarn.lock

@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+"@fortawesome/fontawesome-free@^5.3.1":
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.3.1.tgz#5466b8f31c1f493a96754c1426c25796d0633dd9"
+
 "@types/jquery@^2.0.40":
   version "2.0.49"
   resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-2.0.49.tgz#95bd7064caebf65bde10429dff491a1aea05b67d"