From 21c2fd9ffea84eb792be8a55aed74c18061d8963 Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Mon, 4 Feb 2019 12:15:40 +0100
Subject: [PATCH] Updated manage roles listing.

---
 assets/less/classes/manage/role.less  | 133 ++++++++++++++++++++++++++
 assets/less/classes/manage/roles.less |   7 ++
 assets/less/main.less                 |   2 +
 templates/manage/users/roles.twig     | 101 ++++++++++++-------
 4 files changed, 206 insertions(+), 37 deletions(-)
 create mode 100644 assets/less/classes/manage/role.less
 create mode 100644 assets/less/classes/manage/roles.less

diff --git a/assets/less/classes/manage/role.less b/assets/less/classes/manage/role.less
new file mode 100644
index 00000000..2443e3b0
--- /dev/null
+++ b/assets/less/classes/manage/role.less
@@ -0,0 +1,133 @@
+.manage__role {
+    display: flex;
+    text-shadow: 0 1px 4px #000;
+    box-shadow: 0 1px 4px #000A;
+    margin-bottom: 4px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &__background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--accent-colour);
+    }
+
+    &__container {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        background-color: var(--background-colour-translucent-9);
+        width: 100%;
+        height: 100%;
+        margin-left: 5px;
+        pointer-events: none;
+        transition: background-color .2s;
+    }
+
+    &:hover &__container,
+    &:focus &__container,
+    &:focus-within &__container {
+        background-color: var(--background-colour-translucent-8);
+    }
+
+    &__icon {
+        border-radius: 100%;
+        width: 40px;
+        height: 40px;
+        box-shadow: 0 1px 4px #111;
+        margin: 10px;
+        flex: 0 0 auto;
+        overflow: hidden;
+
+        &__content {
+            background-color: var(--background-colour-translucent-6);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            font-size: 1.5em;
+            transition: background-color .2s;
+        }
+
+        &__background {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--accent-colour);
+        }
+    }
+
+    &:hover &__icon__content,
+    &:focus &__icon__content,
+    &:focus-within &__icon__content {
+        background-color: var(--background-colour-translucent-4);
+    }
+
+    &__info {
+        display: inline-flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+    }
+
+    &__name {
+        font-size: 1.4em;
+        line-height: 1.4em;
+    }
+
+    &__details {
+        font-size: .9em;
+        line-height: 1.3em;
+        display: inline-flex;
+        align-items: center;
+        padding: 1px 0;
+    }
+
+    &__users {
+        border-radius: 10px;
+        background-color: var(--accent-colour);
+        box-shadow: 0 1px 4px #111;
+        padding: 2px 5px;
+    }
+
+    &__title {
+        padding: 2px 5px;
+    }
+
+    &__actions {
+        display: flex;
+        flex: 0 0 auto;
+        margin: 10px;
+    }
+
+    &__action {
+        width: 32px;
+        height: 32px;
+        line-height: 32px;
+        font-size: 1.5em;
+        border-radius: 2px;
+        margin: 5px;
+        margin-right: 0;
+        color: #fff;
+        cursor: pointer;
+        pointer-events: initial;
+        transition: background-color .2s;
+        text-align: center;
+
+        &:hover,
+        &:focus {
+            background-color: fade(#fff, 20%);
+        }
+
+        &:active {
+            background-color: fade(#fff, 10%);
+        }
+    }
+}
diff --git a/assets/less/classes/manage/roles.less b/assets/less/classes/manage/roles.less
new file mode 100644
index 00000000..a05933ab
--- /dev/null
+++ b/assets/less/classes/manage/roles.less
@@ -0,0 +1,7 @@
+.manage__roles {
+
+    &__collection,
+    &__pagination {
+        padding: 5px;
+    }
+}
diff --git a/assets/less/main.less b/assets/less/main.less
index 169dca02..2a4ab808 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -130,6 +130,8 @@ html {
 @import "classes/manage/manage";
 @import "classes/manage/navigation";
 @import "classes/manage/blacklist";
+@import "classes/manage/role";
+@import "classes/manage/roles";
 
 // Profile
 @import "classes/profile/container";
diff --git a/templates/manage/users/roles.twig b/templates/manage/users/roles.twig
index 1cef01b6..18ec86de 100644
--- a/templates/manage/users/roles.twig
+++ b/templates/manage/users/roles.twig
@@ -1,53 +1,80 @@
 {% extends 'manage/users/master.twig' %}
-{% from 'macros.twig' import pagination %}
+{% from 'macros.twig' import pagination, container_title %}
+
+{% set roles_pagination = pagination(manage_roles_pagination, '/manage/users.php', null, {'v': 'roles'}) %}
 
 {% block manage_content %}
-    {% if can_manage_roles %}
-        <a href="{{ url('manage-role-create') }}" class="input__button">Create new Role</a>
-    {% endif %}
+    <div class="container manage__roles">
+        {{ container_title('<i class="fas fa-user-check fa-fw"></i> Roles') }}
 
-    <div class="userlist">
-        {% for role in manage_roles %}
-            <div class="userlist__item">
+        {% if roles_pagination|trim|length > 0 %}
+            <div class="manage__roles__pagination">
+                {{ roles_pagination }}
+            </div>
+        {% endif %}
 
-                <div class="usercard">
-                    <a  href="{{ url('manage-role-edit', {'role': role.role_id}) }}"
-                        class="usercard__background"></a>
-
-                    <div class="usercard__container">
-                        <div class="usercard__main">
-                            <div class="avatar usercard__avatar"
-                                style="{{ role.role_colour|html_colour('background-color') }}">
-                            </div>
-
-                            <div class="usercard__details">
-                                <div class="usercard__name">
-                                    {{ role.role_name }}
-                                </div>
-
-                                <div class="usercard__info">
-                                    <span class="usercard__item usercard__item--title">
-                                        {{ role.role_title }}
-                                    </span>
-
-                                    <span class="usercard__item usercard__item--title">
-                                        {{ role.users|number_format }} users
-                                    </span>
-                                </div>
+        <div class="manage__roles__collection">
+            {% if can_manage_roles %}
+                <div class="manage__role manage__role--create">
+                    <a href="{{ url('manage-role-create') }}" class="manage__role__background"></a>
+                    <div class="manage__role__container">
+                        <div class="manage__role__icon">
+                            <div class="manage__role__icon__background"></div>
+                            <div class="manage__role__icon__content">
+                                <i class="fas fa-plus-circle fa-fw"></i>
                             </div>
                         </div>
+                        <div class="manage__role__info">
+                            <div class="manage__role__name">
+                                Create a new role
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
 
-                        <div class="usercard__actions">
-                            <a class="usercard__action" href="{{ url('members-role', {'role': role.role_id}) }}">
-                                Members
+            {% for role in manage_roles %}
+                <div class="manage__role" style="{{ role.role_colour|html_colour('--accent-colour') }}">
+                    <a href="{{ url('manage-role-edit', {'role': role.role_id}) }}" class="manage__role__background"></a>
+
+                    <div class="manage__role__container">
+                        <div class="manage__role__icon">
+                            <div class="manage__role__icon__background"></div>
+                            <div class="manage__role__icon__content">
+                                <i class="fas fa-toilet-paper fa-fw"></i>
+                            </div>
+                        </div>
+                        <div class="manage__role__info">
+                            <div class="manage__role__name">
+                                {{ role.role_name }}
+                            </div>
+                            <div class="manage__role__details">
+                                {% if role.users > 0 %}
+                                    <div class="manage__role__users">
+                                        <i class="fas fa-users fa-fw"></i> {{ role.users|number_format }}
+                                    </div>
+                                {% endif %}
+                                {% if role.role_title|default('')|length > 0 %}
+                                    <div class="manage__role__title">
+                                        {{ role.role_title }}
+                                    </div>
+                                {% endif %}
+                            </div>
+                        </div>
+                        <div class="manage__role__actions">
+                            <a href="{{ url('members-role', {'role': role.role_id}) }}" class="manage__role__action" title="Members">
+                                <i class="fas fa-users fa-fw"></i>
                             </a>
                         </div>
                     </div>
                 </div>
+            {% endfor %}
+        </div>
 
+        {% if roles_pagination|trim|length > 0 %}
+            <div class="manage__roles__pagination">
+                {{ roles_pagination }}
             </div>
-        {% endfor %}
+        {% endif %}
     </div>
-
-    {{ pagination(manage_roles_pagination, '/manage/users.php', null, {'v': 'roles'}) }}
 {% endblock %}