flashii/misuzu
flashii/misuzu
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated pagination look.

Browse source
This commit is contained in:
flash 2018-10-25 00:48:07 +02:00
parent ae97ae5dbb
commit 1f3afe4c51
14 changed files with 95 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/less/classes/forum/category.less
View file

@ -1,14 +1,14 @@
.forum__category { .forum__category {
border-radius: 2px; border-radius: 2px;
background-color: #111; background-color: #1119;
transition: background-color .2s, box-shadow .2s; transition: background-color .2s, box-shadow .2s;
&:nth-child(even) { &:nth-child(even) {
background-color: #191919; background-color: #19191999;
} }
&:hover { &:hover {
background-color: #222; background-color: #2229;
box-shadow: 0 1px 4px #222; box-shadow: 0 1px 4px #222;
} }

5
assets/less/classes/forum/pagination.less
View file

@ -1,5 +0,0 @@
.forum__pagination {
margin: 2px 0;
box-shadow: 0 1px 2px var(--accent-colour);
background-color: var(--accent-colour);
}

6
assets/less/classes/forum/topic.less
View file

@ -1,14 +1,14 @@
.forum__topic { .forum__topic {
border-radius: 2px; border-radius: 2px;
background-color: #111; background-color: #1119;
transition: background-color .2s, box-shadow .2s; transition: background-color .2s, box-shadow .2s;
&:nth-child(even) { &:nth-child(even) {
background-color: #191919; background-color: #19191999;
} }
&:hover { &:hover {
background-color: #222; background-color: #2229;
box-shadow: 0 1px 4px #222; box-shadow: 0 1px 4px #222;
} }

2
assets/less/classes/input/button.less
View file

@ -1,5 +1,5 @@
.input__button { .input__button {
background-color: #111; background-color: var(--background-colour);
font-family: @mio-font-regular; font-family: @mio-font-regular;
font-size: 1.2em; font-size: 1.2em;
line-height: 1.4em; line-height: 1.4em;

72
assets/less/classes/pagination.less
View file

@ -1,57 +1,47 @@
.pagination { .pagination {
list-style: none;
display: flex; display: flex;
padding: 1px; justify-content: space-between;
border: 1px solid var(--accent-colour); align-items: center;
&__wrapper { &__section {
background-color: var(--accent-colour); display: flex;
margin: 2px 0; overflow: auto;
box-shadow: 0 1px 2px var(--accent-colour); flex: 0 0 auto;
}
&__separator { &--pages {
flex-grow: 1; flex-shrink: 1;
flex-shrink: 1;
}
&__option { @media (max-width: @site-mobile-width) {
background: var(--accent-colour); display: none;
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;
} }
} }
&__link { &__link {
display: block; display: block;
width: 100%; height: 30px;
height: 100%; font-size: 1.2em;
line-height: 1.5em;
margin: 1px;
padding: 3px 10px;
text-align: center; text-align: center;
text-decoration: none; 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, &--disabled {
&--next, --accent-colour: #555;
&--first, }
&--last,
&--active, &--current,
&:hover { &:not(&--disabled):hover,
font-weight: bold; &:not(&--disabled):active,
&:not(&--disabled):focus {
background-color: var(--accent-colour);
color: var(--background-colour);
} }
} }
} }

1
assets/less/main.less
View file

@ -129,7 +129,6 @@ body {
@import "classes/forum/actions"; @import "classes/forum/actions";
@import "classes/forum/categories"; @import "classes/forum/categories";
@import "classes/forum/category"; @import "classes/forum/category";
@import "classes/forum/pagination";
@import "classes/forum/post"; @import "classes/forum/post";
@import "classes/forum/posting"; @import "classes/forum/posting";
@import "classes/forum/topic"; @import "classes/forum/topic";

10
templates/changelog/index.twig
View file

@ -29,10 +29,12 @@
{{ changelog_listing(changes, is_date) }} {{ changelog_listing(changes, is_date) }}
{% if not is_date %} {% if not is_date %}
{{ pagination(changelog_count, changelog_take, changelog_offset, '/changelog.php'|url_construct({ <div class="changelog__pagination">
'd': changelog_date, {{ pagination(changelog_count, changelog_take, changelog_offset, '/changelog.php'|url_construct({
'u': changelog_user ? changelog_user : '' 'd': changelog_date,
}), 'changelog__') }} 'u': changelog_user ? changelog_user : ''
})) }}
</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>

2
templates/forum/forum.twig
View file

@ -21,7 +21,7 @@
forum_info.forum_topic_count, forum_info.forum_topic_count,
forum_range, forum_range,
forum_offset, forum_offset,
'/forum/forum.php'|url_construct({'f': forum_info.forum_id}), 'forum__' '/forum/forum.php'|url_construct({'f': forum_info.forum_id})
) %} ) %}
{{ fcbuttons }} {{ fcbuttons }}

3
templates/forum/topic.twig
View file

@ -22,8 +22,7 @@
topic_info.topic_post_count, topic_info.topic_post_count,
topic_range, topic_range,
topic_offset, topic_offset,
'/forum/topic.php'|url_construct({'t': topic_info.topic_id}), '/forum/topic.php'|url_construct({'t': topic_info.topic_id})
'forum__'
) %} ) %}
{% block content %} {% block content %}

110
templates/macros.twig
View file

@ -11,14 +11,10 @@
</ul> </ul>
{% endmacro %} {% endmacro %}
{% macro pagination_class(className, classPrefix) %}{{ className }}{% if classPrefix|length > 0 %} {{ classPrefix ~ className }}{% endif %}{% endmacro %} {% macro pagination(itemCount, itemRange, currentOffset, baseUrl, alwaysRender, offsetParam, useRanges, pageRange) %}
{% macro pagination(itemCount, itemRange, currentOffset, baseUrl, classPrefix, alwaysRender, offsetParam, useRanges, pageRange) %}
{% set alwaysRender = alwaysRender|default(false) %} {% set alwaysRender = alwaysRender|default(false) %}
{% if alwaysRender or itemCount > itemRange %} {% if alwaysRender or itemCount > itemRange %}
{% from _self import pagination_class %}
{% set classPrefix = classPrefix|default('') %}
{% set separator = '%3F' in baseUrl|default('')|url_encode ? '&' : '?' %} {% set separator = '%3F' in baseUrl|default('')|url_encode ? '&' : '?' %}
{% set originalUrl = baseUrl %} {% set originalUrl = baseUrl %}
{% set baseUrl = baseUrl ~ separator %} {% set baseUrl = baseUrl ~ separator %}
@ -26,74 +22,58 @@
{% set currentPage = currentOffset // itemRange %} {% set currentPage = currentOffset // itemRange %}
{% set useRanges = useRanges|default(true) %} {% set useRanges = useRanges|default(true) %}
{% set offsetParam = offsetParam|default(useRanges ? 'o' : 'p') %} {% set offsetParam = offsetParam|default(useRanges ? 'o' : 'p') %}
{% set pageRange = pageRange|default(3) %} {% set pageRange = pageRange|default(10) %}
<ul class="{{ pagination_class('pagination', classPrefix) }}"> <div class="pagination">
{% if currentPage < 1 %} <div class="pagination__section pagination__section--first">
<li class="{{ pagination_class('pagination__option', classPrefix) }} {{ pagination_class('pagination__option--first', classPrefix) }} {{ pagination_class('pagination__option--disabled', classPrefix) }}"> {% if currentPage < 1 %}
<span class="{{ pagination_class('pagination__link', classPrefix) }} {{ pagination_class('pagination__link--first', classPrefix) }}"> <div class="pagination__link pagination__link--first pagination__link--disabled">
&laquo; <i class="fas fa-angle-double-left"></i>
</span> </div>
</li> <div class="pagination__link pagination__link--prev pagination__link--disabled">
<li class="{{ pagination_class('pagination__option', classPrefix) }} {{ pagination_class('pagination__option--prev', classPrefix) }} {{ pagination_class('pagination__option--disabled', classPrefix) }}"> <i class="fas fa-angle-left"></i>
<span class="{{ pagination_class('pagination__link', classPrefix) }} {{ pagination_class('pagination__link--prev', classPrefix) }}"> </div>
&lsaquo; {% else %}
</span> <a href="{{ originalUrl }}" class="pagination__link pagination__link--first" rel="first">
</li> <i class="fas fa-angle-double-left"></i>
{% else %}
<li class="{{ pagination_class('pagination__option', classPrefix) }} {{ pagination_class('pagination__option--first', classPrefix) }}">
<a href="{{ originalUrl }}" class="{{ pagination_class('pagination__link', classPrefix) }} {{ pagination_class('pagination__link--first', classPrefix) }}" rel="first">
&laquo;
</a> </a>
</li> <a href="{{ currentPage < 2 ? originalUrl : baseUrl ~ offsetParam ~ '=' ~ (useRanges ? ((currentPage - 1) * itemRange) : currentPage) }}" class="pagination__link pagination__link--prev" rel="prev">
<li class="{{ pagination_class('pagination__option', classPrefix) }} {{ pagination_class('pagination__option--prev', classPrefix) }}"> <i class="fas fa-angle-left"></i>
<a href="{{ currentPage < 2 ? originalUrl : baseUrl ~ offsetParam ~ '=' ~ (useRanges ? ((currentPage - 1) * itemRange) : currentPage) }}" class="{{ pagination_class('pagination__link', classPrefix) }} {{ pagination_class('pagination__link--prev', classPrefix) }}" rel="prev">
&lsaquo;
</a> </a>
</li> {% endif %}
{% endif %} </div>
<li class="{{ pagination_class('pagination__separator', classPrefix) }}"></li> <div class="pagination__section pagination__section--pages">
{% set paginationStart = currentPage - pageRange %}
{% set paginationStop = currentPage + pageRange %}
{% set paginationStart = currentPage - pageRange %} {% for i in paginationStart..paginationStop %}
{% set paginationStop = currentPage + pageRange %} {% if i >= 0 and i < pageCount %}
<a href="{{ i == 0 ? originalUrl : baseUrl ~ offsetParam ~ '=' ~ (useRanges ? i * itemRange : i + 1) }}" class="pagination__link{{ currentPage == i ? ' pagination__link--current' : '' }}">
{% for i in paginationStart..paginationStop %}
{% if i >= 0 and i < pageCount %}
<li class="{{ pagination_class('pagination__option', classPrefix) }}{{ currentPage == i ? ' ' ~ pagination_class('pagination__option--active', classPrefix) : '' }}">
<a href="{{ i == 0 ? originalUrl : baseUrl ~ offsetParam ~ '=' ~ (useRanges ? i * itemRange : i + 1) }}" class="{{ pagination_class('pagination__link', classPrefix) }}{{ currentPage == i ? ' ' ~ pagination_class('pagination__link--active', classPrefix) : '' }}">
{{ i + 1 }} {{ i + 1 }}
</a> </a>
</li> {% endif %}
{% endfor %}
</div>
<div class="pagination__section pagination__section--last">
{% if currentPage >= pageCount - 1 %}
<div class="pagination__link pagination__link--next pagination__link--disabled">
<i class="fas fa-angle-right"></i>
</div>
<div class="pagination__link pagination__link--last pagination__link--disabled">
<i class="fas fa-angle-double-right"></i>
</div>
{% else %}
<a href="{{ baseUrl ~ offsetParam ~ '=' ~ (useRanges ? ((currentPage + 1) * itemRange) : currentPage + 2) }}" class="pagination__link pagination__link--next" rel="next">
<i class="fas fa-angle-right"></i>
</a>
<a href="{{ baseUrl ~ offsetParam ~ '=' ~ (useRanges ? ((pageCount - 1) * itemRange) : pageCount) }}" class="pagination__link pagination__link--last" rel="last">
<i class="fas fa-angle-double-right"></i>
</a>
{% endif %} {% endif %}
{% endfor %} </div>
</div>
<li class="{{ pagination_class('pagination__separator', classPrefix) }}"></li>
{% if currentPage >= pageCount - 1 %}
<li class="{{ pagination_class('pagination__option', classPrefix) }} {{ pagination_class('pagination__option--next', classPrefix) }} {{ pagination_class('pagination__option--disabled', classPrefix) }}">
<span class="{{ pagination_class('pagination__link', classPrefix) }} {{ pagination_class('pagination__link--next', classPrefix) }}">
&rsaquo;
</span>
</li>
<li class="{{ pagination_class('pagination__option', classPrefix) }} {{ pagination_class('pagination__option--last', classPrefix) }} {{ pagination_class('pagination__option--disabled', classPrefix) }}">
<span class="{{ pagination_class('pagination__link', classPrefix) }} {{ pagination_class('pagination__link--last', classPrefix) }}">
&raquo;
</span>
</li>
{% else %}
<li class="{{ pagination_class('pagination__option', classPrefix) }} {{ pagination_class('pagination__option--next', classPrefix) }}">
<a href="{{ baseUrl ~ offsetParam ~ '=' ~ (useRanges ? ((currentPage + 1) * itemRange) : currentPage + 2) }}" class="{{ pagination_class('pagination__link', classPrefix) }} {{ pagination_class('pagination__link--next', classPrefix) }}" rel="next">
&rsaquo;
</a>
</li>
<li class="{{ pagination_class('pagination__option', classPrefix) }} {{ pagination_class('pagination__option--last', classPrefix) }}">
<a href="{{ baseUrl ~ offsetParam ~ '=' ~ (useRanges ? ((pageCount - 1) * itemRange) : pageCount) }}" class="{{ pagination_class('pagination__link', classPrefix) }} {{ pagination_class('pagination__link--last', classPrefix) }}" rel="last">
&raquo;
</a>
</li>
{% endif %}
</ul>
{% endif %} {% endif %}
{% endmacro %} {% endmacro %}

4
templates/manage/users/roles.twig
View file

@ -49,7 +49,5 @@
{% endfor %} {% endfor %}
</div> </div>
<div class="pagination__wrapper"> {{ pagination(manage_roles_count, manage_roles_range, manage_roles_offset, '?v=roles') }}
{{ pagination(manage_roles_count, manage_roles_range, manage_roles_offset, '?v=roles') }}
</div>
{% endblock %} {% endblock %}

2
templates/settings/logs.twig
View file

@ -6,7 +6,6 @@
audit_log_take, audit_log_take,
audit_log_offset, audit_log_offset,
'?m=logs'|url_construct({'lo': login_attempts_offset}), '?m=logs'|url_construct({'lo': login_attempts_offset}),
'settings__',
false, false,
'ao' 'ao'
) %} ) %}
@ -15,7 +14,6 @@
login_attempts_take, login_attempts_take,
login_attempts_offset, login_attempts_offset,
'?m=logs'|url_construct({'ao': audit_log_offset}), '?m=logs'|url_construct({'ao': audit_log_offset}),
'settings__',
false, false,
'lo' 'lo'
) %} ) %}

2
templates/settings/sessions.twig
View file

@ -1,7 +1,7 @@
{% extends 'settings/master.twig' %} {% extends 'settings/master.twig' %}
{% from 'macros.twig' import pagination, container_title %} {% 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 %} {% block settings_content %}
<div class="container"> <div class="container">

8
templates/user/listing.twig
View file

@ -61,9 +61,7 @@
{% set mpagination = pagination(role.role_user_count, users_take, users_offset, full_url) %} {% set mpagination = pagination(role.role_user_count, users_take, users_offset, full_url) %}
<div class="pagination__wrapper"> {{ mpagination }}
{{ mpagination }}
</div>
<div class="userlist"> <div class="userlist">
{% for user in users %} {% for user in users %}
@ -73,7 +71,5 @@
{% endfor %} {% endfor %}
</div> </div>
<div class="pagination__wrapper"> {{ mpagination }}
{{ mpagination }}
</div>
{% endblock %} {% endblock %}