diff --git a/assets/less/classes/settings/wrapper.less b/assets/less/classes/settings/wrapper.less new file mode 100644 index 00000000..2bac9be0 --- /dev/null +++ b/assets/less/classes/settings/wrapper.less @@ -0,0 +1,42 @@ +.settings__wrapper { + display: flex; + + @media (max-width: @site-mobile-width) { + flex-direction: column; + } + + &__sidebar { + flex: 0 0 auto; + + @media (max-width: @site-mobile-width) { + width: 100%; + } + } + + &__menu { + width: 280px; + position: sticky; + top: 2px; + margin: 0 2px 2px; + + @media (max-width: @site-mobile-width) { + width: 100%; + } + } + + &__link { + color: inherit; + text-decoration: none; + display: block; + padding: 4px; + margin: 2px; + font-size: 1.5em; + line-height: 1.5em; + border-radius: 2px; + transition: background-color .2s; + + &:hover { + background-color: var(--background-colour-translucent); + } + } +} diff --git a/assets/less/main.less b/assets/less/main.less index d671d66b..98b99a21 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -124,6 +124,7 @@ body { @import "classes/changelog-actions-tags"; // Settings +@import "classes/settings/wrapper"; @import "classes/settings/container"; @import "classes/settings/description"; @import "classes/settings/disabled"; diff --git a/templates/user/settings.twig b/templates/user/settings.twig index d009a32b..c7219081 100644 --- a/templates/user/settings.twig +++ b/templates/user/settings.twig @@ -4,6 +4,13 @@ {% from '_layout/input.twig' import input_hidden, input_csrf, input_text %} {% set title = 'Settings' %} +{% set menu = { + 'account': ' Account', + 'roles': ' Roles', + 'sessions': ' Sessions', + 'login-attempts': ' Login Attempts', + 'account-log': ' Account Log', +} %} {% block content %} {% if errors|length > 0 %} @@ -16,235 +23,252 @@ {% endif %} -
- {{ container_title(' Account', '', true) }} - {{ input_csrf('settings') }} +
+
+
+ {{ container_title('Settings') }} -
-

Here you can change your e-mail address and/or your password, please make sure your e-mail is accurate and your password is strong in order to protect your account. For convenience your current e-mail address is displayed. You are required to verify yourself by entering your current password to change either value.

-
- - {% if disable_account_options %} -
-
- E-mail and password changing is only available on the main site for stability reasons. -
-
- -  Change E-mail or Password on Flashii + {% for id, text in menu %} + + {{ text|raw }} -
+ {% endfor %} +
- {% else %} - - {% endif %} - - -
- {{ container_title(' Roles', '', true) }} - -
-

This is a listing of the user roles you're a part of, you can select which you want to leave or which one you want to boast as your main role which will change your username colour accordingly.

-
- {% for role in user_roles %} - {% set is_display_role = user_display_role == role.role_id %} - -
-
-
- {{ role.role_name }} -
- -
- {{ role.role_description }} -
- -
- {{ input_csrf('settings') }} - {{ input_hidden('role[id]', role.role_id) }} - - - - -
-
-
- {% endfor %} -
-
- -
- {{ container_title(' Sessions', '', true) }} - {% set spagination = pagination( - sessions.amount, - sessions.take, - sessions.offset, - ''|url_construct({ - 'logins[offset]': logins.offset, - 'logins[take]': logins.take == 15 ? 0 : logins.take, - 'logs[offset]': logs.offset, - 'logs[take]': logs.take == 15 ? 0 : logs.take, - 'sessions[take]': sessions.take == 15 ? 0 : sessions.take, - }), - false, - 'sessions[offset]' - ) %} - -
-

These are the active logins to your account, clicking the Kill button will force a logout on that session. Your current login is highlighted with a different colour so you don't accidentally force yourself to logout.

-
- -
-
+
+ + {{ container_title(' Account', '', true) }} {{ input_csrf('settings') }} - {{ input_hidden('session', 'all') }} - +
+

Here you can change your e-mail address and/or your password, please make sure your e-mail is accurate and your password is strong in order to protect your account. For convenience your current e-mail address is displayed. You are required to verify yourself by entering your current password to change either value.

+
+ + {% if disable_account_options %} +
+
+ E-mail and password changing is only available on the main site for stability reasons. +
+
+ +  Change E-mail or Password on Flashii + +
+
+ {% else %} + + {% endif %} -
- {{ spagination }} +
+ {{ container_title(' Roles', '', true) }} + +
+

This is a listing of the user roles you're a part of, you can select which you want to leave or which one you want to boast as your main role which will change your username colour accordingly.

+
+ +
+ {% for role in user_roles %} + {% set is_display_role = user_display_role == role.role_id %} + +
+
+
+ {{ role.role_name }} +
+ +
+ {{ role.role_description }} +
+ +
+ {{ input_csrf('settings') }} + {{ input_hidden('role[id]', role.role_id) }} + + + + +
+
+
+ {% endfor %} +
-
- {% for session in sessions.list %} - {{ user_session(session, session.session_id == sessions.active) }} - {% endfor %} +
+ {{ container_title(' Sessions', '', true) }} + {% set spagination = pagination( + sessions.amount, + sessions.take, + sessions.offset, + ''|url_construct({ + 'logins[offset]': logins.offset, + 'logins[take]': logins.take == 15 ? 0 : logins.take, + 'logs[offset]': logs.offset, + 'logs[take]': logs.take == 15 ? 0 : logs.take, + 'sessions[take]': sessions.take == 15 ? 0 : sessions.take, + }), + false, + 'sessions[offset]' + ) %} + +
+

These are the active logins to your account, clicking the Kill button will force a logout on that session. Your current login is highlighted with a different colour so you don't accidentally force yourself to logout.

+
+ +
+
+ {{ input_csrf('settings') }} + {{ input_hidden('session', 'all') }} + + +
+ +
+ {{ spagination }} +
+ +
+ {% for session in sessions.list %} + {{ user_session(session, session.session_id == sessions.active) }} + {% endfor %} +
+ +
+ {{ spagination }} +
+
-
- {{ spagination }} -
-
-
+
+ {{ container_title(' Login Attempts', '', true) }} + {% set lhpagination = pagination( + logins.amount, + logins.take, + logins.offset, + ''|url_construct({ + 'logins[take]': logins.take == 15 ? 0 : logins.take, + 'logs[offset]': logs.offset, + 'logs[take]': logs.take == 15 ? 0 : logs.take, + 'sessions[offset]': sessions.offset, + 'sessions[take]': sessions.take == 15 ? 0 : sessions.take, + }), + false, + 'logins[offset]' + ) %} -
- {{ container_title(' Login History', '', true) }} - {% set lhpagination = pagination( - logins.amount, - logins.take, - logins.offset, - ''|url_construct({ - 'logins[take]': logins.take == 15 ? 0 : logins.take, - 'logs[offset]': logs.offset, - 'logs[take]': logs.take == 15 ? 0 : logs.take, - 'sessions[offset]': sessions.offset, - 'sessions[take]': sessions.take == 15 ? 0 : sessions.take, - }), - false, - 'logins[offset]' - ) %} +
+

These are all the login attempts to your account. If any attempt that you don't recognise is marked as successful your account may be compromised, ask a staff member for advice in this case.

+
-
-

These are all the login attempts to your account. If any attempt that you don't recognise is marked as successful your account may be compromised, ask a staff member for advice in this case.

-
+ +
+

This is a log of all "important" actions that have been done using your account for your review. If you notice anything strange, please alert the staff.

+
-
- {{ container_title(' Account Log', '', true) }} - {% set alpagination = pagination( - logs.amount, - logs.take, - logs.offset, - ''|url_construct({ - 'logins[offset]': logins.offset, - 'logins[take]': logins.take == 15 ? 0 : logins.take, - 'logs[take]': logs.take == 15 ? 0 : logs.take, - 'sessions[offset]': sessions.offset, - 'sessions[take]': sessions.take == 15 ? 0 : sessions.take, - }), - false, - 'logs[offset]' - ) %} +