flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Forum index redesign.

Browse source
This commit is contained in:
flash 2018-09-28 18:40:41 +02:00
parent 20aaa0f926
commit 3080e72caa
10 changed files with 340 additions and 267 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

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

4
assets/less/classes/forum/actions.less
View file

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

208
assets/less/classes/forum/category.less Normal file
View file

@ -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;
}
}
}

187
assets/less/classes/forum/listing.less
View file

@ -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;
}
}
}
}
}

2
assets/less/main.less
View file

@ -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";

47
build.php
View file

@ -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

1
package.json
View file

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

13
templates/forum/index.twig
View file

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

76
templates/forum/macros.twig
View file

@ -26,42 +26,46 @@
</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">
<img src="{{ forum_icon|format(forum_type, forum_unread) }}" alt="{{ forum_unread }}" class="forum__listing__entry__icon">
<div class="forum__category">
<a href="/forum/forum.php?f={{ forum.forum_id }}" class="forum__category__link"></a>
<div class="forum__listing__entry__info">
<div class="forum__listing__entry__title">
<a href="/forum/forum.php?f={{ forum.forum_id }}" class="forum__listing__entry__title__link">{{ forum.forum_name }}</a>
<div class="forum__category__container">
<div class="forum__category__icon forum__category__icon--{{ forum_unread }}">
<i class="{{ forum_type }}"></i>
</div>
<div class="forum__listing__entry__description">
<div class="forum__category__details">
<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__listing__entry__subforums">
<div class="forum__category__subforums">
{% for subforum in forum.forum_subforums %}
<a href="/forum/forum.php?f={{ subforum.forum_id }}"
class="forum__listing__entry__subforum{% if subforum.forum_unread %} forum__listing__entry__subforum--unread{% endif %}">
class="forum__category__subforum{% if subforum.forum_unread %} forum__category__subforum--unread{% endif %}">
{{ subforum.forum_name }}
</a>
{% endfor %}
@ -71,48 +75,47 @@
{% if forum.forum_type == 2 %}
{% if forum.forum_link_clicks is not null %}
<div class="forum__listing__entry__stats">
<div class="forum__listing__entry__topics" title="Clicks">{{ forum.forum_link_clicks|number_format }}</div>
<div class="forum__category__stats">
<div class="forum__category__stat" title="Clicks">{{ forum.forum_link_clicks|number_format }}</div>
</div>
{% endif %}
{% elseif forum.forum_type != 1 %}
<div class="forum__listing__entry__stats">
<div class="forum__listing__entry__topics" title="Topics">{{ forum.forum_topic_count|number_format }}</div>
<div class="forum__listing__entry__posts" title="Posts">{{ forum.forum_post_count|number_format }}</div>
<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 %}
{% 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 %}">
<div class="forum__category__activity{% if forum.forum_link_clicks is not null %} forum__category__activity--empty{% endif %}">
{% if forum.forum_type != 2 %}
{% if forum.recent_topic_id is null %}
<div class="forum__listing__entry__activity__none">
<div class="forum__category__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"
<div class="forum__category__activity__details">
<a class="forum__category__activity__post"
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') }}"
<div class="forum__category__activity__info">
<time datetime="{{ forum.recent_post_created|date('c') }}"
title="{{ forum.recent_post_created|date('r') }}">{{ forum.recent_post_created|time_diff }}</time>
{% if forum.recent_post_user_id is not null %}
by
<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 forum__listing__entry__activity__avatar"
<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 %}
@ -121,6 +124,7 @@
</div>
{% endif %}
</div>
</div>
{% endmacro %}
{% macro forum_topic_buttons(topic) %}

4
yarn.lock
View file

@ -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"