Updated manage roles listing.
This commit is contained in:
parent
fb5ddbeba4
commit
21c2fd9ffe
4 changed files with 206 additions and 37 deletions
133
assets/less/classes/manage/role.less
Normal file
133
assets/less/classes/manage/role.less
Normal file
|
|
@ -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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
7
assets/less/classes/manage/roles.less
Normal file
7
assets/less/classes/manage/roles.less
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
.manage__roles {
|
||||||
|
|
||||||
|
&__collection,
|
||||||
|
&__pagination {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -130,6 +130,8 @@ html {
|
||||||
@import "classes/manage/manage";
|
@import "classes/manage/manage";
|
||||||
@import "classes/manage/navigation";
|
@import "classes/manage/navigation";
|
||||||
@import "classes/manage/blacklist";
|
@import "classes/manage/blacklist";
|
||||||
|
@import "classes/manage/role";
|
||||||
|
@import "classes/manage/roles";
|
||||||
|
|
||||||
// Profile
|
// Profile
|
||||||
@import "classes/profile/container";
|
@import "classes/profile/container";
|
||||||
|
|
|
||||||
|
|
@ -1,53 +1,80 @@
|
||||||
{% extends 'manage/users/master.twig' %}
|
{% 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 %}
|
{% block manage_content %}
|
||||||
{% if can_manage_roles %}
|
<div class="container manage__roles">
|
||||||
<a href="{{ url('manage-role-create') }}" class="input__button">Create new Role</a>
|
{{ container_title('<i class="fas fa-user-check fa-fw"></i> Roles') }}
|
||||||
|
|
||||||
|
{% if roles_pagination|trim|length > 0 %}
|
||||||
|
<div class="manage__roles__pagination">
|
||||||
|
{{ roles_pagination }}
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div class="userlist">
|
<div class="manage__roles__collection">
|
||||||
{% for role in manage_roles %}
|
{% if can_manage_roles %}
|
||||||
<div class="userlist__item">
|
<div class="manage__role manage__role--create">
|
||||||
|
<a href="{{ url('manage-role-create') }}" class="manage__role__background"></a>
|
||||||
<div class="usercard">
|
<div class="manage__role__container">
|
||||||
<a href="{{ url('manage-role-edit', {'role': role.role_id}) }}"
|
<div class="manage__role__icon">
|
||||||
class="usercard__background"></a>
|
<div class="manage__role__icon__background"></div>
|
||||||
|
<div class="manage__role__icon__content">
|
||||||
<div class="usercard__container">
|
<i class="fas fa-plus-circle fa-fw"></i>
|
||||||
<div class="usercard__main">
|
|
||||||
<div class="avatar usercard__avatar"
|
|
||||||
style="{{ role.role_colour|html_colour('background-color') }}">
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="manage__role__info">
|
||||||
|
<div class="manage__role__name">
|
||||||
|
Create a new role
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<div class="usercard__details">
|
{% for role in manage_roles %}
|
||||||
<div class="usercard__name">
|
<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 }}
|
{{ role.role_name }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="manage__role__details">
|
||||||
<div class="usercard__info">
|
{% if role.users > 0 %}
|
||||||
<span class="usercard__item usercard__item--title">
|
<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 }}
|
{{ role.role_title }}
|
||||||
</span>
|
</div>
|
||||||
|
{% endif %}
|
||||||
<span class="usercard__item usercard__item--title">
|
|
||||||
{{ role.users|number_format }} users
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="manage__role__actions">
|
||||||
|
<a href="{{ url('members-role', {'role': role.role_id}) }}" class="manage__role__action" title="Members">
|
||||||
<div class="usercard__actions">
|
<i class="fas fa-users fa-fw"></i>
|
||||||
<a class="usercard__action" href="{{ url('members-role', {'role': role.role_id}) }}">
|
|
||||||
Members
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ pagination(manage_roles_pagination, '/manage/users.php', null, {'v': 'roles'}) }}
|
{% if roles_pagination|trim|length > 0 %}
|
||||||
|
<div class="manage__roles__pagination">
|
||||||
|
{{ roles_pagination }}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue