More updates to integrate manage into the main site.

assets/less/manage/classes/header.less

@@ -6,7 +6,7 @@
 
     &__wrapper {
         display: flex;
-        max-width: 1200px;
+        max-width: var(--site-max-width);
         margin: 0 auto;
     }
 

assets/less/manage/classes/user-listing.less

@@ -1,27 +0,0 @@
-.user-listing {
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    &__entry {
-        margin: 2px;
-        min-width: 296px;
-
-        &__content {
-            display: flex;
-        }
-    }
-
-    &__info {
-        display: flex;
-        flex-grow: 1;
-        flex-shrink: 1;
-    }
-
-    &__avatar {
-        width: 46px;
-        height: 46px;
-        flex-grow: 0;
-        flex-shrink: 0;
-    }
-}

assets/less/manage/main.less

@@ -2,8 +2,5 @@
 @import "classes/header";
 @import "classes/listing";
 
-@import "classes/user-listing";
-@import "classes/permissions";
-
 @import "classes/changelog-change";
 @import "classes/changelog-tags";

assets/less/mio/classes/header.less

@@ -7,7 +7,7 @@
         display: flex;
         align-items: center;
         padding: 3px 1px;
-        max-width: @site-max-width;
+        max-width: var(--site-max-width);
 
         @media (max-width: @site-mobile-width) {
             flex-direction: column;

assets/less/mio/classes/heading.less

@@ -1,5 +0,0 @@
-.heading {
-    &--1 {
-        line-height: 1.2em;
-    }
-}

assets/less/mio/classes/input/select.less

@@ -1,8 +1,10 @@
 .input__select {
     border: 1px solid #aaa;
     padding: 1px;
+    margin: 1px;
     background: #fff;
     color: #111;
+    min-width: 150px;
 
     &:focus {
         border-color: #9475b2;

assets/less/mio/classes/management.less

@@ -0,0 +1,13 @@
+.management {
+    display: flex;
+
+    &__navigation {
+        flex: 0 0 auto;
+        width: 300px;
+        margin-right: 2px;
+    }
+
+    &__content {
+        flex: 1 1 auto;
+    }
+}

assets/less/mio/classes/members/user.less

@@ -1,93 +0,0 @@
-.members__user {
-    display: flex;
-    text-decoration: none;
-    color: inherit;
-
-    margin: 1px;
-    padding: 5px;
-    background-color: #fbeeff;
-    border: 1px solid #9475b2;
-    box-shadow: 0 1px 2px #9475b2;
-    width: 396px;
-    transition: background-color .2s, box-shadow .2s;
-    z-index: 1;
-
-    &:hover {
-        box-shadow: 0 1px 1em #9475b2;
-        background-color: #ecddee;
-        z-index: 2;
-    }
-
-    &__avatar {
-        width: 100px;
-        height: 100px;
-        flex: 0 0 auto;
-        box-shadow: 0 1px 2px #9475b2;
-        margin-right: 5px;
-    }
-
-    &__info {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        flex: 1 1 auto;
-    }
-
-    &__name {
-        font-size: 1.5em;
-        line-height: 1.3em;
-    }
-
-    &__sub {
-        font-size: .9em;
-        display: flex;
-        align-items: baseline;
-        vertical-align: middle;
-    }
-
-    &__title {
-        flex: 1 1 auto;
-        margin-left: 2px;
-    }
-
-    &__country {
-        flex: 0 0 auto;
-        display: flex;
-        align-items: baseline;
-        vertical-align: middle;
-
-        &__name {
-            margin-right: 2px;
-        }
-
-        &__flag {
-            margin-right: 4px;
-        }
-    }
-
-    &__supporter {
-        background-image: url('https://static.flash.moe/images/tenshi.png');
-        width: 37px;
-        height: 11px;
-        font-size: 0;
-        margin-right: 2px;
-    }
-
-    &__stats {
-        display: flex;
-        justify-content: space-evenly;
-        font-size: .9em;
-        line-height: 1.5em;
-    }
-
-    &__stat {
-        width: 50%;
-        margin-right: 2px;
-        display: inline-flex;
-
-        &__title {
-            font-weight: 700;
-            flex-grow: 1;
-        }
-    }
-}

assets/less/mio/classes/members/users.less

@@ -1,8 +0,0 @@
-.members__users {
-
-    &__content {
-        margin: 1px;
-        display: flex;
-        flex-wrap: wrap;
-    }
-}

assets/less/mio/classes/pagination.less

@@ -4,6 +4,12 @@
     padding: 1px;
     border: 1px solid #9475b2;
 
+    &__wrapper {
+        background-color: #fbeeff;
+        margin: 2px 0;
+        box-shadow: 0 1px 2px #9475b2;
+    }
+
     &__separator {
         flex-grow: 1;
         flex-shrink: 1;

assets/less/mio/classes/permissions.less

@@ -5,14 +5,15 @@
 
     &__line {
         display: flex;
-        font-size: 1.1em;
+        font-size: .9em;
-        line-height: 1.4em;
+        line-height: 1.2em;
 
         &--header {
             font-size: 1.2em;
-            line-height: 1.5em;
+            line-height: 1.4em;
-            border-bottom: 1px solid #333;
+            border-bottom: 1px solid #9475b2;
             padding-bottom: 1px;
+            font-family: @mio-font-heading;
 
             &:not(:first-child) {
                 margin-top: 4px;
@@ -25,6 +26,10 @@
         padding: 4px;
     }
 
+    &__line:not(&__line--header) &__title {
+        border-bottom: 1px solid #ded5e7;
+    }
+
     &__input {
         cursor: pointer;
     }
@@ -36,7 +41,7 @@
 
         &--radio {
             cursor: pointer;
-            border-left: 1px solid #333;
+            border-left: 1px solid #9475b2;
         }
 
         &--yes:hover {

assets/less/mio/classes/side-navigation.less

@@ -0,0 +1,25 @@
+.side-navigation {
+    list-style: none;
+    padding: 2px 5px;
+
+    &:not(.side-navigation--layer-0) {
+        padding-left: 1em;
+    }
+
+    &__title {
+        color: #306;
+        font-family: @mio-font-heading;
+        display: block;
+        font-weight: 700;
+    }
+
+    &__link {
+        display: block;
+        text-decoration: none;
+        color: inherit;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}

assets/less/mio/classes/usercard.less

@@ -0,0 +1,90 @@
+.usercard {
+    box-shadow: 0 1px 2px #9475b2;
+    width: 300px;
+    height: 70px;
+    transition: box-shadow .5s;
+    z-index: 1;
+    color: #fff;
+
+    &:hover {
+        box-shadow: 0 1px 1em #9475b2;
+        z-index: 2;
+    }
+
+    &__background {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        background-color: #9475b2;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    &__container {
+        padding: 4px;
+        height: 100%;
+        width: 100%;
+        //border: 1px solid #9475b2;
+        pointer-events: none;
+        display: flex;
+        background-color: rgba(0, 0, 0, .7);
+    }
+
+    &__avatar {
+        width: 60px;
+        height: 60px;
+        flex: 0 0 auto;
+        margin-right: 5px;
+    }
+
+    &__content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex: 1 1 auto;
+    }
+
+    &__name {
+        font-size: 1.4em;
+        line-height: 1.4em;
+    }
+
+    &__info {
+        font-size: .9em;
+        display: flex;
+        align-items: baseline;
+        vertical-align: middle;
+    }
+
+    &__item {
+        margin-left: 2px;
+        color: inherit;
+        text-decoration: none;
+
+        &--active {
+            pointer-events: auto;
+        }
+
+        &--title {
+            flex: 1 1 auto;
+        }
+
+        &--country {
+            flex: 0 0 auto;
+            align-items: baseline;
+            vertical-align: middle;
+            margin-right: 4px;
+        }
+
+        &--donator {
+            flex: 0 0 auto;
+            background-image: url('https://static.flash.moe/images/tenshi.png');
+            width: 37px;
+            height: 11px;
+            font-size: 0;
+        }
+    }
+}

assets/less/mio/classes/userlist.less

@@ -0,0 +1,14 @@
+.userlist {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    &__item {
+        margin: 2px;
+    }
+
+    &__selection {
+        margin: 6px;
+        text-align: center;
+    }
+}

assets/less/mio/main.less

@@ -3,11 +3,16 @@
 @site-max-width: 1200px;
 @site-mobile-width: 800px;
 
+:root {
+    --site-max-width: @site-max-width;
+}
+
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     position: relative;
+    outline-style: none;
 }
 
 html,
@@ -24,7 +29,7 @@ body {
     color: #000;
 
     &__wrapper {
-        max-width: @site-max-width;
+        max-width: var(--site-max-width);
         width: 100%;
         margin: 0 auto;
         padding: 1px;
@@ -49,9 +54,10 @@ body {
 @import "classes/avatar";
 @import "classes/container";
 @import "classes/flag";
-@import "classes/heading";
 @import "classes/navigation";
 @import "classes/pagination";
+@import "classes/management";
+@import "classes/side-navigation";
 
 // Specific styles
 @import "classes/footer";
@@ -59,6 +65,7 @@ body {
 @import "classes/profile";
 @import "classes/index";
 @import "classes/changelog";
+@import "classes/permissions";
 
 // Settings
 @import "classes/settings/description";
@@ -87,9 +94,9 @@ body {
 @import "classes/forum/topic";
 @import "classes/forum/topics";
 
-// Member listing
+// User stuff
-@import "classes/members/user";
+@import "classes/usercard";
-@import "classes/members/users";
+@import "classes/userlist";
 
 // Comments
 @import "classes/comment"; // entries

public/manage/users.php

@@ -29,7 +29,8 @@ switch ($_GET['v'] ?? null) {
 
         $getManageUsers = Database::prepare('
             SELECT
-                u.`user_id`, u.`username`,
+                u.`user_id`, u.`username`, u.`user_country`, r.`role_id`,
+                COALESCE(u.`user_title`, r.`role_title`, r.`role_name`) as `user_title`,
                 COALESCE(u.`user_colour`, r.`role_colour`) as `user_colour`
             FROM `msz_users` as u
             LEFT JOIN `msz_roles` as r

public/members.php

@@ -4,7 +4,7 @@ use Misuzu\Database;
 require_once __DIR__ . '/../misuzu.php';
 
 $usersOffset = max((int)($_GET['o'] ?? 0), 0);
-$usersTake = max(min((int)($_GET['t'] ?? 15), 30), 6);
+$usersTake = 30;
 
 $roleId = (int)($_GET['r'] ?? MSZ_ROLE_MAIN);
 $orderBy = strtolower($_GET['ss'] ?? '');
@@ -86,22 +86,9 @@ $roles = Database::query('
 
 $getUsers = Database::prepare("
     SELECT
-        u.`user_id`, u.`username`, u.`user_country`,
+        u.`user_id`, u.`username`, u.`user_country`, r.`role_id`,
-        u.`created_at` as `user_joined`, u.`last_seen` as `user_last_seen`,
+        COALESCE(u.`user_title`, r.`role_title`, r.`role_name`) as `user_title`,
-        COALESCE(u.`user_title`, r.`role_title`) as `user_title`,
+        COALESCE(u.`user_colour`, r.`role_colour`) as `user_colour`
-        COALESCE(u.`user_colour`, r.`role_colour`) as `user_colour`,
-        (
-            SELECT COUNT(`topic_id`)
-            FROM `msz_forum_topics`
-            WHERE `user_id` = u.`user_id`
-            AND `topic_deleted` IS NULL
-        ) as `user_topic_count`,
-        (
-            SELECT COUNT(`post_id`)
-            FROM `msz_forum_posts`
-            WHERE `user_id` = u.`user_id`
-            AND `post_deleted` IS NULL
-        ) as `user_post_count`
     FROM `msz_users` as u
     LEFT JOIN `msz_roles` as r
     ON r.`role_id` = u.`display_role`

src/manage.php

@@ -25,8 +25,6 @@ function manage_get_menu(int $userId): array
         $perms['general'],
         MSZ_GENERAL_PERM_MANAGE_EMOTICONS | MSZ_GENERAL_PERM_MANAGE_SETTINGS
     )) {
-        $menu['General'][] = '_';
-
         if (perms_check($perms['general'], MSZ_GENERAL_PERM_MANAGE_EMOTICONS)) {
             $menu['General']['Emoticons'] = '/manage/index.php?v=emoticons';
         }
@@ -55,8 +53,6 @@ function manage_get_menu(int $userId): array
             $perms['user'],
             MSZ_USER_PERM_MANAGE_REPORTS | MSZ_USER_PERM_MANAGE_RESTRICTIONS | MSZ_USER_PERM_MANAGE_BLACKLISTS
         )) {
-            $menu['Users'][] = '_';
-
             if (perms_check($perms['user'], MSZ_USER_PERM_MANAGE_REPORTS)) {
                 $menu['Users']['Reports'] = '/manage/users.php?v=reports';
             }

templates/manage/changelog/action_edit.twig

@@ -1,6 +1,6 @@
 {% extends 'manage/changelog/master.twig' %}
 
-{% block content %}
+{% block manage_content %}
     <div class="container">
         <form action="?v=action{{ edit_action is defined ? '&a=' ~ edit_action.action_id : '' }}" method="post">
             <h1 class="container__title">

templates/manage/changelog/actions.twig

@@ -1,7 +1,7 @@
 {% extends 'manage/changelog/master.twig' %}
-{% from 'manage/macros.twig' import pagination %}
+{% from 'macros.twig' import pagination %}
 
-{% block content %}
+{% block manage_content %}
     <div class="container">
         <a href="?v=action" class="input__button">Create new action</a>
     </div>

templates/manage/changelog/change_edit.twig

@@ -1,6 +1,6 @@
 {% extends 'manage/changelog/master.twig' %}
 
-{% block content %}
+{% block manage_content %}
     <div class="container">
         <form action="?v=change{{ edit_change is defined ? '&c=' ~ edit_change.change_id : '' }}" method="post">
             <h1 class="container__title">

templates/manage/changelog/changes.twig

@@ -1,7 +1,7 @@
 {% extends 'manage/changelog/master.twig' %}
-{% from 'manage/macros.twig' import pagination %}
+{% from 'macros.twig' import pagination %}
 
-{% block content %}
+{% block manage_content %}
     <div class="container">
         <a href="?v=change" class="input__button">Create new change</a>
     </div>

templates/manage/changelog/tag_edit.twig

@@ -1,6 +1,6 @@
 {% extends 'manage/changelog/master.twig' %}
 
-{% block content %}
+{% block manage_content %}
     <div class="container">
         <form action="?v=tag{{ edit_tag is defined ? '&t=' ~ edit_tag.tag_id : '' }}" method="post">
             <h1 class="container__title">

templates/manage/changelog/tags.twig

@@ -1,7 +1,7 @@
 {% extends 'manage/changelog/master.twig' %}
-{% from 'manage/macros.twig' import pagination %}
+{% from 'macros.twig' import pagination %}
 
-{% block content %}
+{% block manage_content %}
     <div class="container">
         <a href="?v=tag" class="input__button">Create new tag</a>
     </div>

templates/manage/general/overview.twig

@@ -1,8 +1,8 @@
 {% extends 'manage/general/master.twig' %}
 
-{% block content %}
+{% block manage_content %}
     <div class="container">
-        <div class="container__title">The Broom Closet</div>
+        <div class="container__title">Overview</div>
         <div class="container__content">
             Welcome to Manage, here you can manage things.
         </div>

templates/manage/macros.twig

@@ -1,95 +1,19 @@
-{% macro pagination_segment(url_window, base_url, currentPage) %}
+{% macro manage_navigation(navi, level) %}
-    {% for page, url in url_window %}
+    {% from _self import manage_navigation %}
-        <li class="pagination__option{{ currentPage == page ? ' pagination__option--active' : '' }}">
+    {% set level = level|default(0) %}
-            <a href="{{ base_url ~ url|slice(2) }}" class="pagination__link{{ currentPage == page ? ' pagination__link--active' : '' }}">
-                {{ page }}
-            </a>
-        </li>
-    {% endfor %}
-{% endmacro %}
 
-{% macro pagination(itemCount, itemRange, currentOffset, baseUrl, classPrefix, alwaysRender, useRanges, offsetParam, pageRange) %}
+    <ul class="side-navigation side-navigation--layer-{{ level }}">
-    {% set alwaysRender = alwaysRender|default(false) %}
+        {% for name, value in navi %}
-
+            <li class="side-navigation__item">
-    {% if alwaysRender or itemCount > itemRange %}
+                {% if value is iterable %}
-        {% set classPrefix  = classPrefix|default('') %}
+                    <span class="side-navigation__title">{{ name }}</span>
-        {% set separator    = '%3F' in baseUrl|default('')|url_encode ? '&' : '?' %}
+                    {{ manage_navigation(value, level + 1) }}
-        {% set baseUrl      = baseUrl ~ separator %}
+                {% else %}
-        {% set pageCount    = (itemCount / itemRange)|round(0, 'ceil') %}
+                    <a href="{{ value }}" class="side-navigation__link">{{ name }}</a>
-        {% set currentPage  = currentOffset // itemRange %}
-        {% set useRanges    = useRanges|default(true) %}
-        {% set offsetParam  = offsetParam|default(useRanges ? 'o' : 'p') %}
-        {% set pageRange    = pageRange|default(3) %}
-
-        <ul class="{{ classPrefix }}pagination">
-            {% if currentPage < 1 %}
-                <li class="{{ classPrefix }}pagination__option {{ classPrefix }}pagination__option--first {{ classPrefix }}pagination__option--disabled">
-                    <span class="{{ classPrefix }}pagination__link {{ classPrefix }}pagination__link--first">
-                        &laquo;
-                    </span>
-                </li>
-                <li class="{{ classPrefix }}pagination__option {{ classPrefix }}pagination__option--prev {{ classPrefix }}pagination__option--disabled">
-                    <span class="{{ classPrefix }}pagination__link {{ classPrefix }}pagination__link--prev">
-                        &lsaquo;
-                    </span>
-                </li>
-            {% else %}
-                {% set firstUrl = baseUrl|slice(0, (baseUrl|length) - (separator|length)) %}
-
-                <li class="{{ classPrefix }}pagination__option {{ classPrefix }}pagination__option--first">
-                    <a href="{{ firstUrl }}" class="{{ classPrefix }}pagination__link {{ classPrefix }}pagination__link--first" rel="first">
-                        &laquo;
-                    </a>
-                </li>
-                <li class="{{ classPrefix }}pagination__option {{ classPrefix }}pagination__option--prev">
-                    <a href="{{ currentPage < 2 ? firstUrl : baseUrl ~ offsetParam ~ '=' ~ (useRanges ? ((currentPage - 1) * itemRange) : currentPage) }}" class="{{ classPrefix }}pagination__link {{ classPrefix }}pagination__link--prev" rel="prev">
-                        &lsaquo;
-                    </a>
-                </li>
-            {% endif %}
-
-            <li class="{{ classPrefix }}pagination__separator"></li>
-
-            {% set paginationStart = currentPage - pageRange %}
-            {% set paginationStop = currentPage + pageRange %}
-
-            {% for i in paginationStart..paginationStop %}
-                {% if i >= 0 and i < pageCount %}
-                    <li class="{{ classPrefix }}pagination__option{{ currentPage == i ? ' ' ~ classPrefix ~ 'pagination__option--active' : '' }}">
-                        <a href="{{ baseUrl ~ offsetParam ~ '=' ~ (useRanges ? i * itemRange : i + 1) }}" class="{{ classPrefix }}pagination__link{{ currentPage == i ? ' ' ~ classPrefix ~ 'pagination__link--active' : '' }}">
-                            {{ i + 1 }}
-                        </a>
-                    </li>
                 {% endif %}
-            {% endfor %}
+            </li>
-
+        {% endfor %}
-            <li class="{{ classPrefix }}pagination__separator"></li>
+    </ul>
-
-            {% if currentPage >= pageCount - 1 %}
-                <li class="{{ classPrefix }}pagination__option {{ classPrefix }}pagination__option--next {{ classPrefix }}pagination__option--disabled">
-                    <span class="{{ classPrefix }}pagination__link {{ classPrefix }}pagination__link--next">
-                        &rsaquo;
-                    </span>
-                </li>
-                <li class="{{ classPrefix }}pagination__option {{ classPrefix }}pagination__option--last {{ classPrefix }}pagination__option--disabled">
-                    <span class="{{ classPrefix }}pagination__link {{ classPrefix }}pagination__link--last">
-                        &raquo;
-                    </span>
-                </li>
-            {% else %}
-                <li class="{{ classPrefix }}pagination__option {{ classPrefix }}pagination__option--next">
-                    <a href="{{ baseUrl ~ offsetParam ~ '=' ~ (useRanges ? ((currentPage + 1) * itemRange) : currentPage + 2) }}" class="{{ classPrefix }}pagination__link {{ classPrefix }}pagination__link--next" rel="next">
-                        &rsaquo;
-                    </a>
-                </li>
-                <li class="{{ classPrefix }}pagination__option {{ classPrefix }}pagination__option--last">
-                    <a href="{{ baseUrl ~ offsetParam ~ '=' ~ (useRanges ? ((pageCount - 1) * itemRange) : pageCount) }}" class="{{ classPrefix }}pagination__link {{ classPrefix }}pagination__link--last" rel="last">
-                        &raquo;
-                    </a>
-                </li>
-            {% endif %}
-        </ul>
-    {% endif %}
 {% endmacro %}
 
 {% macro permissions_table(permissions) %}

templates/manage/master.twig

@@ -1,51 +1,30 @@
 {% extends 'master.twig' %}
+{% from 'manage/macros.twig' import manage_navigation %}
 {% set title = 'Broom Closet' %}
 {% set is_manage = true %}
 
-{% block before_content %}
+{% block content %}
-    <nav class="manage-header">
+    <div class="management">
-        <div class="manage-header__wrapper">
+        <nav class="management__navigation">
-            <a class="manage-header__logo" href="/manage/index.php">
+            <div class="container">
-                Broom Closet
+                <div class="container__title">
-            </a>
+                    The Broom Closet
-
+                </div>
-            <div class="manage-header__navigation">
+                <div class="side-navigation__wrapper">
-                {% for name, menu in manage_menu %}
+                    {{ manage_navigation(manage_menu) }}
-                    <div class="manage-header__menu">
-                        <input type="checkbox" id="menu-{{ name|lower }}-state" class="manage-header__menu__state">
-                        <label for="menu-{{ name|lower }}-state" class="manage-header__menu__toggle">{{ name }}</label>
-                        <div class="manage-header__menu__options">
-                            <div class="manage-header__menu__section">
-                            {% for title, link in menu %}
-                                {% if link == '_' %}
-                            </div>
-                            <div class="manage-header__menu__section">
-                                {% else %}
-                                <a class="manage-header__menu__link" href="{{ link }}">{{ title }}</a>
-                                {% endif %}
-                            {% endfor %}
-                            </div>
-                        </div>
-                    </div>
-                {% endfor %}
-            </div>
-
-            <div class="manage-header__user">
-                <div class="manage-header__menu">
-                    <input type="checkbox" id="menu-user-state" class="manage-header__menu__state">
-                    <label for="menu-user-state" class="manage-header__menu__toggle manage-header__menu__toggle--profile" style="background-image:url('/profile.php?u={{ current_user.user_id }}&amp;m=avatar');{{ current_user.user_colour|html_colour }}">{{ current_user.username }}</label>
-                    <div class="manage-header__menu__options manage-header__menu__options--user">
-                        <div class="manage-header__menu__section">
-                            <a class="manage-header__menu__link" href="/profile.php?u={{ current_user.user_id }}">Profile</a>
-                            <a class="manage-header__menu__link" href="/settings.php">Settings</a>
-                        </div>
-                        <div class="manage-header__menu__section">
-                            <a class="manage-header__menu__link" href="/">Return</a>
-                            <a class="manage-header__menu__link" href="/auth.php?m=logout&amp;s={{ csrf_token() }}">Logout</a>
-                        </div>
-                    </div>
                 </div>
             </div>
+        </nav>
+
+        <div class="management__content">
+            {% block manage_content %}
+                <div class="container">
+                    <div class="container__title">No brooms</div>
+                    <div class="container__content">
+                        This broom closet is empty.
+                    </div>
+                </div>
+            {% endblock %}
         </div>
-    </nav>
+    </div>
 {% endblock %}

templates/manage/users/listing.twig

@@ -1,19 +1,13 @@
 {% extends 'manage/users/master.twig' %}
-{% from 'manage/macros.twig' import pagination %}
+{% from 'macros.twig' import pagination %}
+{% from 'user/macros.twig' import user_card %}
 
-{% block content %}
+{% block manage_content %}
-    <div class="listing user-listing">
+    <div class="userlist">
         {% for user in manage_users %}
-            <a href="?v=view&amp;u={{ user.user_id }}" class="listing__entry user-listing__entry"{% if not user.user_colour|colour_get_inherit %} style="{{ user.user_colour|html_colour({'border-color':'%s'}) }}"{% endif %}>
+            <div class="userlist__item">
-                <div class="listing__entry__content user-listing__entry__content">
+                {{ user_card(user, '?v=view&u=%d', '?v=role&r=%d') }}
-                    <div class="user-listing__info">
+            </div>
-                        <div class="user-listing__username">
-                            {{ user.username }}
-                        </div>
-                    </div>
-                    <div class="avatar user-listing__avatar" style="background-image:url('/profile.php?u={{ user.user_id }}&amp;m=avatar');"></div>
-                </div>
-            </a>
         {% endfor %}
     </div>
 

templates/manage/users/roles.twig

@@ -1,7 +1,7 @@
 {% extends 'manage/users/master.twig' %}
-{% from 'manage/macros.twig' import pagination %}
+{% from 'macros.twig' import pagination %}
 
-{% block content %}
+{% block manage_content %}
     {% if can_manage_roles %}
         <div class="container">
             <a href="?v=role" class="input__button">Create new Role</a>

templates/manage/users/roles_create.twig

@@ -1,7 +1,7 @@
 {% extends 'manage/users/master.twig' %}
 {% from 'manage/macros.twig' import permissions_table %}
 
-{% block content %}
+{% block manage_content %}
     <form action="?v=role{{ edit_role is defined ? '&r=' ~ edit_role.role_id : '' }}" method="post">
         <div class="container">
             <h1 class="container__title">
@@ -40,7 +40,10 @@
                 </div>
             </label>
 
-            <h2 class="container__subtitle">Colour</h2>
+        </div>
+
+        <div class="container">
+            <div class="container__title">Colour</div>
 
             <label class="form__label">
                 <div class="form__label__text">Inherit Colour</div>
@@ -70,7 +73,10 @@
                 </div>
             </label>
 
-            <h2 class="container__subtitle">Additional</h2>
+        </div>
+
+        <div class="container">
+            <div class="container__title">Additional</div>
 
             <label class="form__label">
                 <div class="form__label__text">Description</div>
@@ -82,7 +88,7 @@
 
         {% if can_manage_perms %}
             <div class="container">
-                <h2 class="container__subtitle">Permissions</h2>
+                <div class="container__title">Permissions</div>
                 {{ permissions_table(permissions) }}
             </div>
         {% endif %}

templates/manage/users/view.twig

@@ -1,7 +1,7 @@
 {% extends 'manage/users/master.twig' %}
 {% from 'manage/macros.twig' import permissions_table %}
 
-{% block content %}
+{% block manage_content %}
     {% if can_manage_users %}
         <form method="post" enctype="multipart/form-data" action="">
             <div class="container">
@@ -173,7 +173,7 @@
                     <label class="form__label">
                         <div class="form__label__text">Has Roles</div>
                         <div class="form__label__input">
-                            <select name="manage_roles[role]" class="input input--select">
+                            <select name="manage_roles[role]" class="input__select">
                                 {% for role in has_roles %}
                                     <option value="{{ role.role_id }}"{% if role.role_id == view_user.display_role %} selected{% endif %}>
                                         {{ role.role_name }}
@@ -197,7 +197,7 @@
                     <label class="form__label">
                         <div class="form__label__text">Available Roles</div>
                         <div class="form__label__input">
-                            <select name="add_role[role]" class="input input--select">
+                            <select name="add_role[role]" class="input__select">
                                 {% for role in available_roles %}
                                     <option value="{{ role.role_id }}">
                                         {{ role.role_name }}

templates/master.twig

@@ -8,13 +8,17 @@
         <link href="{{ '/css/libraries.css'|asset_url }}" rel="stylesheet">
         {% if is_manage|default(false) %}
             <link href="{{ '/css/manage.css'|asset_url }}" rel="stylesheet">
+            <style>
+                :root {
+                    --site-max-width: 1500px;
+                }
+            </style>
         {% endif %}
     </head>
     <body class="main">
         {% include '_layout/header.twig' %}
 
         <div class="main__wrapper">
-            {% block before_content %}{% endblock %}
             {% block content %}
                 <div class="container">
                     <div class="container__title">Hello!</div>

templates/user/listing.twig

@@ -1,5 +1,6 @@
 {% extends 'user/master.twig' %}
 {% from 'macros.twig' import pagination %}
+{% from 'user/macros.twig' import user_card %}
 
 {% set canonical_url = '/members.php'|url_construct({
     'r': role.role_id != 1 ? role.role_id : 0,
@@ -17,118 +18,63 @@
 {% set manage_link = '/manage/users.php?v=listing' %}
 
 {% block content %}
-    <form onchange="this.submit()">
+    <form class="container" onchange="this.submit()">
-        <select class="input__select" name="r"
+        <div class="container__title">
-            style="{{ role.role_colour|html_colour }}">
+            Member Listing
-            {% for r in roles %}
+        </div>
-                <option
+        <div class="userlist__selection">
-                    value="{{ r.role_id }}"
+            <select class="input__select" name="r"
-                    style="{{ r.role_colour|html_colour }}"
+                style="{{ role.role_colour|html_colour }}">
-                    {% if r.role_id == role.role_id %} selected{% endif %}>
+                {% for r in roles %}
-                    {{ r.role_name }}
+                    <option
-                </option>
+                        value="{{ r.role_id }}"
-            {% endfor %}
+                        style="{{ r.role_colour|html_colour }}"
-        </select>
+                        {% if r.role_id == role.role_id %} selected{% endif %}>
+                        {{ r.role_name }}
+                    </option>
+                {% endfor %}
+            </select>
 
-        <select class="input__select" name="ss">
+            <select class="input__select" name="ss">
-            {% for name, info in order_fields %}
+                {% for name, info in order_fields %}
-                <option
+                    <option
-                    value="{{ name }}"
+                        value="{{ name }}"
-                    {% if name == order_field %} selected{% endif %}>
+                        {% if name == order_field %} selected{% endif %}>
-                    {{ info.title }}
+                        {{ info.title }}
-                </option>
+                    </option>
-            {% endfor %}
+                {% endfor %}
-        </select>
+            </select>
 
-        <select class="input__select" name="sd">
+            <select class="input__select" name="sd">
-            {% for name, title in order_directions %}
+                {% for name, title in order_directions %}
-                <option value="{{ name }}"
+                    <option value="{{ name }}"
-                    {% if name == order_direction %} selected{% endif %}>
+                        {% if name == order_direction %} selected{% endif %}>
-                    {{ title }}
+                        {{ title }}
-                </option>
+                    </option>
-            {% endfor %}
+                {% endfor %}
-        </select>
+            </select>
 
-        <noscript>
+            <noscript>
-            <button class="input__button"Go</button>
+                <button class="input__button">Go</button>
-        </noscript>
+            </noscript>
+        </div>
     </form>
 
-    <div class="container members__users">
+    {% set mpagination = pagination(role.role_user_count, users_take, users_offset, full_url) %}
-        <div class="container__title">{{ title }}</div>
-        <div class="members__users__content">
-            {% for user in users %}
-                <a class="members__user" href="/profile.php?u={{ user.user_id }}">
-                    <div
-                        class="avatar members__user__avatar"
-                        style="background-image:url('/profile.php?u={{ user.user_id }}&amp;m=avatar')">
-                    </div>
 
-                    <div class="members__user__info">
+    <div class="pagination__wrapper">
-                        <div
+        {{ mpagination }}
-                            class="members__user__name"
-                            style="{{ user.user_colour|html_colour }}">
-                            {{ user.username }}
-                        </div>
-
-                        <div class="members__user__sub">
-                            <div class="members__user__country">
-                                <div class="members__user__country__name">
-                                    {{ user.user_country|country_name }}
-                                </div>
-
-                                <div class="flag flag--{{ user.user_country|lower }} members__user__country__flag">
-                                    {{ user.user_country }}
-                                </div>
-                            </div>
-
-                            {#<div class="members__user__supporter" title="Supporter">
-                                Supporter
-                            </div>#}
-
-                            <div class="members__user__title">
-                                {{ user.user_title }}
-                            </div>
-                        </div>
-
-                        <div class="members__user__stats">
-                            <div class="members__user__stat" title="{{ user.user_joined|date('r') }}">
-                                <span class="members__user__stat__title">Joined</span>
-                                <time class="members__user__stat__value" datetime="{{ user.user_joined|date('c') }}">
-                                    {{ user.user_joined|time_diff }}
-                                </time>
-                            </div>
-
-                            <div class="members__user__stat" title="{{ user.user_last_seen|date('r') }}">
-                                <span class="members__user__stat__title">Last seen</span>
-                                {% if user.user_last_seen is not null %}
-                                    <time class="members__user__stat__value" datetime="{{ user.user_last_seen|date('c') }}">
-                                        {{ user.user_last_seen|date('U') + 10 >= ''|date('U') ? 'just now' : user.user_last_seen|time_diff }}
-                                    </time>
-                                {% else %}
-                                    <span class="members__user__stat__value">
-                                        Never
-                                    </span>
-                                {% endif %}
-                            </div>
-                        </div>
-
-                        <div class="members__user__stats">
-                            <div class="members__user__stat">
-                                <span class="members__user__stat__title">Topics</span>
-                                <span class="members__user__stat__value">{{ user.user_topic_count|number_format }}</span>
-                            </div>
-
-                            <div class="members__user__stat">
-                                <span class="members__user__stat__title">Posts</span>
-                                <span class="members__user__stat__value">{{ user.user_post_count|number_format }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </a>
-            {% endfor %}
-        </div>
     </div>
 
-    {{ pagination(role.role_user_count, users_take, users_offset, full_url) }}
+    <div class="userlist">
+        {% for user in users %}
+            <div class="userlist__item">
+                {{ user_card(user) }}
+            </div>
+        {% endfor %}
+    </div>
+
+    <div class="pagination__wrapper">
+        {{ mpagination }}
+    </div>
 {% endblock %}

templates/user/macros.twig

@@ -0,0 +1,40 @@
+{% macro user_card(user, profile_url, rank_url) %}
+    <div class="usercard">
+        <a  href="{{ profile_url|default('/profile.php?u=%d')|format(user.user_id) }}"
+            class="usercard__background"></a>
+
+        <div class="usercard__container">
+            <div class="avatar usercard__avatar"
+                style="background-image:url('/profile.php?u={{ user.user_id }}&amp;m=avatar')">
+            </div>
+
+            <div class="usercard__content">
+                <div class="usercard__name"
+                    {% if user.user_colour is defined %}style="{{ user.user_colour|html_colour({
+                        'color': '%s',
+                        'text-shadow': '0 0 5px %s',
+                    }) }}"{% endif %}>
+                    {{ user.username }}
+                </div>
+
+                <div class="usercard__info">
+                    {% if user.user_country is defined %}
+                        <div class="flag flag--{{ user.user_country|lower }} usercard__item usercard__item--country" title="{{ user.user_country|country_name }}">
+                            {{ user.user_country }}
+                        </div>
+                    {% endif %}
+
+                    {#<a class="usercard__item usercard__item--donator" href="/donate.php">
+                        Donator
+                    </a>#}
+
+                    {% if user.user_title is defined %}
+                        <a class="usercard__item usercard__item--title{% if user.role_id is defined %} usercard__item--active{% endif %}"{% if user.role_id is defined %} href="{{ rank_url|default('/members.php?r=%d')|format(user.role_id) }}"{% endif %}>
+                            {{ user.user_title }}
+                        </a>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endmacro %}