From 1f3afe4c511ffe95ec91f8e77b02636c5803876f Mon Sep 17 00:00:00 2001 From: flashwave Date: Thu, 25 Oct 2018 00:48:07 +0200 Subject: [PATCH] Updated pagination look. --- assets/less/classes/forum/category.less | 6 +- assets/less/classes/forum/pagination.less | 5 - assets/less/classes/forum/topic.less | 6 +- assets/less/classes/input/button.less | 2 +- assets/less/classes/pagination.less | 72 ++++++-------- assets/less/main.less | 1 - templates/changelog/index.twig | 10 +- templates/forum/forum.twig | 2 +- templates/forum/topic.twig | 3 +- templates/macros.twig | 110 +++++++++------------- templates/manage/users/roles.twig | 4 +- templates/settings/logs.twig | 2 - templates/settings/sessions.twig | 2 +- templates/user/listing.twig | 8 +- 14 files changed, 95 insertions(+), 138 deletions(-) delete mode 100644 assets/less/classes/forum/pagination.less diff --git a/assets/less/classes/forum/category.less b/assets/less/classes/forum/category.less index 52c5df52..f71dcdbf 100644 --- a/assets/less/classes/forum/category.less +++ b/assets/less/classes/forum/category.less @@ -1,14 +1,14 @@ .forum__category { border-radius: 2px; - background-color: #111; + background-color: #1119; transition: background-color .2s, box-shadow .2s; &:nth-child(even) { - background-color: #191919; + background-color: #19191999; } &:hover { - background-color: #222; + background-color: #2229; box-shadow: 0 1px 4px #222; } diff --git a/assets/less/classes/forum/pagination.less b/assets/less/classes/forum/pagination.less deleted file mode 100644 index 1b77e8f5..00000000 --- a/assets/less/classes/forum/pagination.less +++ /dev/null @@ -1,5 +0,0 @@ -.forum__pagination { - margin: 2px 0; - box-shadow: 0 1px 2px var(--accent-colour); - background-color: var(--accent-colour); -} diff --git a/assets/less/classes/forum/topic.less b/assets/less/classes/forum/topic.less index e5d3516d..17ea0d05 100644 --- a/assets/less/classes/forum/topic.less +++ b/assets/less/classes/forum/topic.less @@ -1,14 +1,14 @@ .forum__topic { border-radius: 2px; - background-color: #111; + background-color: #1119; transition: background-color .2s, box-shadow .2s; &:nth-child(even) { - background-color: #191919; + background-color: #19191999; } &:hover { - background-color: #222; + background-color: #2229; box-shadow: 0 1px 4px #222; } diff --git a/assets/less/classes/input/button.less b/assets/less/classes/input/button.less index 28842022..74d87902 100644 --- a/assets/less/classes/input/button.less +++ b/assets/less/classes/input/button.less @@ -1,5 +1,5 @@ .input__button { - background-color: #111; + background-color: var(--background-colour); font-family: @mio-font-regular; font-size: 1.2em; line-height: 1.4em; diff --git a/assets/less/classes/pagination.less b/assets/less/classes/pagination.less index 553803d7..0957b58e 100644 --- a/assets/less/classes/pagination.less +++ b/assets/less/classes/pagination.less @@ -1,57 +1,47 @@ .pagination { - list-style: none; display: flex; - padding: 1px; - border: 1px solid var(--accent-colour); + justify-content: space-between; + align-items: center; - &__wrapper { - background-color: var(--accent-colour); - margin: 2px 0; - box-shadow: 0 1px 2px var(--accent-colour); - } + &__section { + display: flex; + overflow: auto; + flex: 0 0 auto; - &__separator { - flex-grow: 1; - flex-shrink: 1; - } + &--pages { + flex-shrink: 1; - &__option { - background: var(--accent-colour); - height: 20px; - min-width: 20px; - - &:not(:last-child) { - margin-right: 1px; - } - - &--disabled { - color: #383838; - background: #777; - } - - @media (max-width: @site-mobile-width) { - height: 30px; - min-width: 30px; - font-size: 1.5em; - line-height: 1.5em; + @media (max-width: @site-mobile-width) { + display: none; + } } } &__link { display: block; - width: 100%; - height: 100%; + height: 30px; + font-size: 1.2em; + line-height: 1.5em; + margin: 1px; + padding: 3px 10px; text-align: center; text-decoration: none; - color: inherit; + background-color: var(--background-colour); + color: var(--accent-colour); + border: 1px solid var(--accent-colour); + border-radius: 2px; + transition: background-color .2s, color .2s; - &--prev, - &--next, - &--first, - &--last, - &--active, - &:hover { - font-weight: bold; + &--disabled { + --accent-colour: #555; + } + + &--current, + &:not(&--disabled):hover, + &:not(&--disabled):active, + &:not(&--disabled):focus { + background-color: var(--accent-colour); + color: var(--background-colour); } } } diff --git a/assets/less/main.less b/assets/less/main.less index d3524b43..174b86eb 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -129,7 +129,6 @@ body { @import "classes/forum/actions"; @import "classes/forum/categories"; @import "classes/forum/category"; -@import "classes/forum/pagination"; @import "classes/forum/post"; @import "classes/forum/posting"; @import "classes/forum/topic"; diff --git a/templates/changelog/index.twig b/templates/changelog/index.twig index 065a664a..cfb5a39c 100644 --- a/templates/changelog/index.twig +++ b/templates/changelog/index.twig @@ -29,10 +29,12 @@ {{ changelog_listing(changes, is_date) }} {% if not is_date %} - {{ pagination(changelog_count, changelog_take, changelog_offset, '/changelog.php'|url_construct({ - 'd': changelog_date, - 'u': changelog_user ? changelog_user : '' - }), 'changelog__') }} +
+ {{ pagination(changelog_count, changelog_take, changelog_offset, '/changelog.php'|url_construct({ + 'd': changelog_date, + 'u': changelog_user ? changelog_user : '' + })) }} +
{% endif %} diff --git a/templates/forum/forum.twig b/templates/forum/forum.twig index 38efaa57..45944db7 100644 --- a/templates/forum/forum.twig +++ b/templates/forum/forum.twig @@ -21,7 +21,7 @@ forum_info.forum_topic_count, forum_range, forum_offset, - '/forum/forum.php'|url_construct({'f': forum_info.forum_id}), 'forum__' + '/forum/forum.php'|url_construct({'f': forum_info.forum_id}) ) %} {{ fcbuttons }} diff --git a/templates/forum/topic.twig b/templates/forum/topic.twig index f89b2116..0ad4921a 100644 --- a/templates/forum/topic.twig +++ b/templates/forum/topic.twig @@ -22,8 +22,7 @@ topic_info.topic_post_count, topic_range, topic_offset, - '/forum/topic.php'|url_construct({'t': topic_info.topic_id}), - 'forum__' + '/forum/topic.php'|url_construct({'t': topic_info.topic_id}) ) %} {% block content %} diff --git a/templates/macros.twig b/templates/macros.twig index f5ddf649..37fc420a 100644 --- a/templates/macros.twig +++ b/templates/macros.twig @@ -11,14 +11,10 @@ {% endmacro %} -{% macro pagination_class(className, classPrefix) %}{{ className }}{% if classPrefix|length > 0 %} {{ classPrefix ~ className }}{% endif %}{% endmacro %} - -{% macro pagination(itemCount, itemRange, currentOffset, baseUrl, classPrefix, alwaysRender, offsetParam, useRanges, pageRange) %} +{% macro pagination(itemCount, itemRange, currentOffset, baseUrl, alwaysRender, offsetParam, useRanges, pageRange) %} {% set alwaysRender = alwaysRender|default(false) %} {% if alwaysRender or itemCount > itemRange %} - {% from _self import pagination_class %} - {% set classPrefix = classPrefix|default('') %} {% set separator = '%3F' in baseUrl|default('')|url_encode ? '&' : '?' %} {% set originalUrl = baseUrl %} {% set baseUrl = baseUrl ~ separator %} @@ -26,74 +22,58 @@ {% set currentPage = currentOffset // itemRange %} {% set useRanges = useRanges|default(true) %} {% set offsetParam = offsetParam|default(useRanges ? 'o' : 'p') %} - {% set pageRange = pageRange|default(3) %} + {% set pageRange = pageRange|default(10) %} - + + {% endif %} {% endmacro %} diff --git a/templates/manage/users/roles.twig b/templates/manage/users/roles.twig index dadd70e2..cde79e16 100644 --- a/templates/manage/users/roles.twig +++ b/templates/manage/users/roles.twig @@ -49,7 +49,5 @@ {% endfor %} -
- {{ pagination(manage_roles_count, manage_roles_range, manage_roles_offset, '?v=roles') }} -
+ {{ pagination(manage_roles_count, manage_roles_range, manage_roles_offset, '?v=roles') }} {% endblock %} diff --git a/templates/settings/logs.twig b/templates/settings/logs.twig index 9ecf715e..432e8b40 100644 --- a/templates/settings/logs.twig +++ b/templates/settings/logs.twig @@ -6,7 +6,6 @@ audit_log_take, audit_log_offset, '?m=logs'|url_construct({'lo': login_attempts_offset}), - 'settings__', false, 'ao' ) %} @@ -15,7 +14,6 @@ login_attempts_take, login_attempts_offset, '?m=logs'|url_construct({'ao': audit_log_offset}), - 'settings__', false, 'lo' ) %} diff --git a/templates/settings/sessions.twig b/templates/settings/sessions.twig index dab25f28..14959d16 100644 --- a/templates/settings/sessions.twig +++ b/templates/settings/sessions.twig @@ -1,7 +1,7 @@ {% extends 'settings/master.twig' %} {% from 'macros.twig' import pagination, container_title %} -{% set spagination = pagination(sessions_count, sessions_take, sessions_offset, '?m=sessions', 'settings__') %} +{% set spagination = pagination(sessions_count, sessions_take, sessions_offset, '?m=sessions') %} {% block settings_content %}
diff --git a/templates/user/listing.twig b/templates/user/listing.twig index 3daa69fa..a83b6488 100644 --- a/templates/user/listing.twig +++ b/templates/user/listing.twig @@ -61,9 +61,7 @@ {% set mpagination = pagination(role.role_user_count, users_take, users_offset, full_url) %} -
- {{ mpagination }} -
+ {{ mpagination }}
{% for user in users %} @@ -73,7 +71,5 @@ {% endfor %}
-
- {{ mpagination }} -
+ {{ mpagination }} {% endblock %}