From 3080e72caa1e6f41f7e977912b6e62ff91233236 Mon Sep 17 00:00:00 2001 From: flashwave Date: Fri, 28 Sep 2018 18:40:41 +0200 Subject: [PATCH] Forum index redesign. --- .gitignore | 1 + assets/less/classes/forum/actions.less | 6 +- assets/less/classes/forum/category.less | 208 ++++++++++++++++++++++++ assets/less/classes/forum/listing.less | 187 --------------------- assets/less/main.less | 2 +- build.php | 47 ++++++ package.json | 1 + templates/forum/index.twig | 13 +- templates/forum/macros.twig | 138 ++++++++-------- yarn.lock | 4 + 10 files changed, 340 insertions(+), 267 deletions(-) create mode 100644 assets/less/classes/forum/category.less delete mode 100644 assets/less/classes/forum/listing.less diff --git a/.gitignore b/.gitignore index 6d95bf11..18d196ae 100644 --- a/.gitignore +++ b/.gitignore @@ -23,4 +23,5 @@ # Compiled/copied assets /public/js /public/css +/public/webfonts /assets/typescript/*.d.ts diff --git a/assets/less/classes/forum/actions.less b/assets/less/classes/forum/actions.less index b33654ff..9beda2ac 100644 --- a/assets/less/classes/forum/actions.less +++ b/assets/less/classes/forum/actions.less @@ -1,8 +1,6 @@ .forum__actions { - &__content { - margin: 2px; - display: flex; - } + padding: 2px; + display: flex; &__button:not(:first-child) { margin-left: 2px; diff --git a/assets/less/classes/forum/category.less b/assets/less/classes/forum/category.less new file mode 100644 index 00000000..1a88bea9 --- /dev/null +++ b/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; + } + } +} diff --git a/assets/less/classes/forum/listing.less b/assets/less/classes/forum/listing.less deleted file mode 100644 index 9bfe868d..00000000 --- a/assets/less/classes/forum/listing.less +++ /dev/null @@ -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; - } - } - } - } -} diff --git a/assets/less/main.less b/assets/less/main.less index 6dfa81ec..80d5fde8 100644 --- a/assets/less/main.less +++ b/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"; diff --git a/build.php b/build.php index beea105c..a6ef22a1 100644 --- a/build.php +++ b/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 diff --git a/package.json b/package.json index c9fa9d16..65c762f7 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "@fortawesome/fontawesome-free": "^5.3.1", "highlightjs": "^9.10.0", "timeago.js": "^3.0.2" } diff --git a/templates/forum/index.twig b/templates/forum/index.twig index 6f88103b..f4d43ae5 100644 --- a/templates/forum/index.twig +++ b/templates/forum/index.twig @@ -12,14 +12,11 @@ {% endif %} {% endfor %} -
-
Actions
-
- Mark All Read - Unanswered Posts - New Posts - Your Posts -
+
+ Mark All Read + Unanswered Posts + New Posts + Your Posts
{% else %}
diff --git a/templates/forum/macros.twig b/templates/forum/macros.twig index 6047a798..e34c1e16 100644 --- a/templates/forum/macros.twig +++ b/templates/forum/macros.twig @@ -26,100 +26,104 @@
{% 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 %} -
- {{ forum_unread }} +
+ -
-
- {{ forum.forum_name }} +
+
+
-
- {{ forum.forum_description|nl2br }} +
+
+ {{ forum.forum_name }} +
+ +
+ {{ forum.forum_description|nl2br }} +
+ + {% if forum.forum_subforums is defined and forum.forum_subforums|length > 0 %} +
+ {% for subforum in forum.forum_subforums %} + + {{ subforum.forum_name }} + + {% endfor %} +
+ {% endif %}
- {% if forum.forum_subforums is defined and forum.forum_subforums|length > 0 %} -
- {% for subforum in forum.forum_subforums %} - - {{ subforum.forum_name }} - - {% endfor %} + {% if forum.forum_type == 2 %} + {% if forum.forum_link_clicks is not null %} +
+
{{ forum.forum_link_clicks|number_format }}
+
+ {% endif %} + {% elseif forum.forum_type != 1 %} +
+
{{ forum.forum_topic_count|number_format }}
+
{{ forum.forum_post_count|number_format }}
{% endif %} -
- {% if forum.forum_type == 2 %} - {% if forum.forum_link_clicks is not null %} -
-
{{ forum.forum_link_clicks|number_format }}
-
- {% endif %} - {% elseif forum.forum_type != 1 %} -
-
{{ forum.forum_topic_count|number_format }}
-
{{ forum.forum_post_count|number_format }}
-
- {% endif %} - - {% if forum.forum_type == 0 or forum.forum_link_clicks is not null %} -
- {% if forum.forum_type != 2 %} - {% if forum.recent_topic_id is null %} -
- There are no posts in this forum yet. -
- {% else %} -
-
- + {% if forum.forum_type != 2 %} + {% if forum.recent_topic_id is null %} +
+ There are no posts in this forum yet. +
+ {% else %} +
+ {{ forum.recent_topic_title }} -
-
- {% if forum.recent_post_user_id is not null %} - by {{ forum.recent_post_username }}, - {% endif %} - -
-
- {% if forum.recent_post_user_id is not null %} - - +
+ + {% if forum.recent_post_user_id is not null %} + by + + {{ forum.recent_post_username }} + + {% endif %} +
+
+ + {% if forum.recent_post_user_id is not null %} + + + {% endif %} {% endif %} {% endif %} - {% endif %} -
- {% endif %} +
+ {% endif %} +
{% endmacro %} diff --git a/yarn.lock b/yarn.lock index 2db90138..8ec18f56 100644 --- a/yarn.lock +++ b/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"