Restyled the manage user listing.
This commit is contained in:
parent
21c2fd9ffe
commit
2379d953ac
5 changed files with 185 additions and 20 deletions
113
assets/less/classes/manage/user.less
Normal file
113
assets/less/classes/manage/user.less
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
.manage__user {
|
||||
display: flex;
|
||||
text-shadow: 0 1px 4px #000;
|
||||
box-shadow: 0 1px 4px #000A;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&--deleted {
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
&__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);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__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;
|
||||
}
|
||||
|
||||
&__detail {
|
||||
border-radius: 10px;
|
||||
background-color: var(--accent-colour);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
padding: 3px 8px;
|
||||
pointer-events: initial;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
&__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/users.less
Normal file
7
assets/less/classes/manage/users.less
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.manage__users {
|
||||
|
||||
&__collection,
|
||||
&__pagination {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -132,6 +132,8 @@ html {
|
|||
@import "classes/manage/blacklist";
|
||||
@import "classes/manage/role";
|
||||
@import "classes/manage/roles";
|
||||
@import "classes/manage/user";
|
||||
@import "classes/manage/users";
|
||||
|
||||
// Profile
|
||||
@import "classes/profile/container";
|
||||
|
|
|
|||
|
|
@ -35,10 +35,12 @@ switch ($_GET['v'] ?? null) {
|
|||
$getManageUsers = db_prepare('
|
||||
SELECT
|
||||
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
|
||||
u.`user_created`, u.`user_active`, u.`user_deleted`,
|
||||
INET6_NTOA(u.`register_ip`) AS `register_ip`, INET6_NTOA(u.`last_ip`) AS `last_ip`,
|
||||
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
|
||||
ON u.`display_role` = r.`role_id`
|
||||
ORDER BY `user_id`
|
||||
LIMIT :offset, :take
|
||||
|
|
|
|||
|
|
@ -1,21 +1,62 @@
|
|||
{% extends 'manage/users/master.twig' %}
|
||||
{% from 'macros.twig' import pagination %}
|
||||
{% from 'user/macros.twig' import user_card %}
|
||||
{% from 'macros.twig' import pagination, container_title %}
|
||||
|
||||
{% set users_pagination = pagination(manage_users_pagination, '/manage/users.php', null, {'v': 'listing'}) %}
|
||||
|
||||
{% block manage_content %}
|
||||
<div class="userlist">
|
||||
{% for user in manage_users %}
|
||||
<div class="userlist__item">
|
||||
{{ user_card(user, '?v=view&u=%d', '?v=role&r=%d', [
|
||||
{
|
||||
'href': '/profile.php?u=%d'|format(user.user_id),
|
||||
'title': 'Profile',
|
||||
'icon': 'fas fa-user',
|
||||
}
|
||||
]) }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="container manage__users">
|
||||
{{ container_title('<i class="fas fa-users fa-fw"></i> Users') }}
|
||||
|
||||
{{ pagination(manage_users_pagination, '/manage/users.php', null, {'v': 'listing'}) }}
|
||||
{% if users_pagination|trim|length > 0 %}
|
||||
<div class="manage__users__pagination">
|
||||
{{ users_pagination }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="manage__users__collection">
|
||||
{% for user in manage_users %}
|
||||
<div class="manage__user{% if user.user_deleted is not null %} manage__user--deleted{% endif %}" style="{{ user.user_colour|html_colour('--accent-colour') }}">
|
||||
<a href="{{ url('manage-user-edit', {'user': user.user_id}) }}" class="manage__user__background"></a>
|
||||
|
||||
<div class="manage__user__container">
|
||||
<div class="avatar manage__user__avatar" style="background-image: url('{{ url('user-avatar', {'user': user.user_id}) }}')"></div>
|
||||
<div class="manage__user__info">
|
||||
<div class="manage__user__name">
|
||||
{{ user.username }}
|
||||
</div>
|
||||
<div class="manage__user__details">
|
||||
<div class="manage__user__detail">
|
||||
<i class="fas fa-user-plus fa-fw"></i>
|
||||
<time datetime="{{ user.user_created|date('c') }}" title="{{ user.user_created|date('r') }}">{{ user.user_created|time_diff }}</time> /
|
||||
<span>{{ user.register_ip }}</span>
|
||||
</div>
|
||||
<div class="manage__user__detail">
|
||||
<i class="fas fa-user-clock fa-fw"></i>
|
||||
<time datetime="{{ user.user_active|date('c') }}" title="{{ user.user_active|date('r') }}">{{ user.user_active|time_diff }}</time> /
|
||||
<span>{{ user.last_ip }}</span>
|
||||
</div>
|
||||
{% if user.user_deleted is not null %}
|
||||
<div class="manage__user__detail">
|
||||
<i class="fas fa-trash-alt fa-fw"></i>
|
||||
<time datetime="{{ user.user_deleted|date('c') }}" title="{{ user.user_deleted|date('r') }}">{{ user.user_deleted|time_diff }}</time>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="manage__role__actions">
|
||||
<a href="{{ url('user-profile', {'user': user.user_id}) }}" class="manage__user__action" title="Profile">
|
||||
<i class="fas fa-user fa-fw"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if users_pagination|trim|length > 0 %}
|
||||
<div class="manage__users__pagination">
|
||||
{{ users_pagination }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue