diff --git a/assets/less/classes/manage/user.less b/assets/less/classes/manage/user.less new file mode 100644 index 00000000..0594c7b3 --- /dev/null +++ b/assets/less/classes/manage/user.less @@ -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%); + } + } +} diff --git a/assets/less/classes/manage/users.less b/assets/less/classes/manage/users.less new file mode 100644 index 00000000..c952b2a9 --- /dev/null +++ b/assets/less/classes/manage/users.less @@ -0,0 +1,7 @@ +.manage__users { + + &__collection, + &__pagination { + padding: 5px; + } +} diff --git a/assets/less/main.less b/assets/less/main.less index 2a4ab808..632bacc0 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -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"; diff --git a/public/manage/users.php b/public/manage/users.php index 6de1974b..eda2f528 100644 --- a/public/manage/users.php +++ b/public/manage/users.php @@ -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 diff --git a/templates/manage/users/users.twig b/templates/manage/users/users.twig index 9e72c8ec..81c510dd 100644 --- a/templates/manage/users/users.twig +++ b/templates/manage/users/users.twig @@ -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 %} -
- {% for user in manage_users %} -
- {{ 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', - } - ]) }} -
- {% endfor %} -
+
+ {{ container_title(' Users') }} - {{ pagination(manage_users_pagination, '/manage/users.php', null, {'v': 'listing'}) }} + {% if users_pagination|trim|length > 0 %} +
+ {{ users_pagination }} +
+ {% endif %} + +
+ {% for user in manage_users %} +
+ + +
+
+
+
+ {{ user.username }} +
+
+
+ + / + {{ user.register_ip }} +
+
+ + / + {{ user.last_ip }} +
+ {% if user.user_deleted is not null %} +
+ + +
+ {% endif %} +
+
+
+ + + +
+
+
+ {% endfor %} +
+ + {% if users_pagination|trim|length > 0 %} +
+ {{ users_pagination }} +
+ {% endif %} +
{% endblock %}