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 %} - Create new Role - {% endif %} +
+ {{ container_title(' Roles') }} -
- {% for role in manage_roles %} -
+ {% if roles_pagination|trim|length > 0 %} +
+ {{ roles_pagination }} +
+ {% endif %} -
- - -
-
-
-
- -
-
- {{ role.role_name }} -
- -
- - {{ role.role_title }} - - - - {{ role.users|number_format }} users - -
+
+ {% if can_manage_roles %} +
+ +
+
+
+
+
+
+
+ Create a new role +
+
+
+
+ {% endif %} -
- - Members + {% for role in manage_roles %} +
+ + +
+
+
+
+ +
+
+
+
+ {{ role.role_name }} +
+
+ {% if role.users > 0 %} +
+ {{ role.users|number_format }} +
+ {% endif %} + {% if role.role_title|default('')|length > 0 %} +
+ {{ role.role_title }} +
+ {% endif %} +
+
+
+ +
+ {% endfor %} +
+ {% if roles_pagination|trim|length > 0 %} +
+ {{ roles_pagination }}
- {% endfor %} + {% endif %}
- - {{ pagination(manage_roles_pagination, '/manage/users.php', null, {'v': 'roles'}) }} {% endblock %}