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/navigation";
|
||||
@import "classes/manage/blacklist";
|
||||
@import "classes/manage/role";
|
||||
@import "classes/manage/roles";
|
||||
|
||||
// Profile
|
||||
@import "classes/profile/container";
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue