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 {
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;
}

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 {
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;
}

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

@ -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;

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

@ -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;
&--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;
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);
}
}
}

1
assets/less/main.less
View file

@ -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";

4
templates/changelog/index.twig
View file

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

2
templates/forum/forum.twig
View file

@ -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 }}

3
templates/forum/topic.twig
View file

@ -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 %}

82
templates/macros.twig
View file

@ -11,14 +11,10 @@
</ul>
{% 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) %}
<ul class="{{ pagination_class('pagination', classPrefix) }}">
<div class="pagination">
<div class="pagination__section pagination__section--first">
{% if currentPage < 1 %}
<li class="{{ pagination_class('pagination__option', classPrefix) }} {{ pagination_class('pagination__option--first', classPrefix) }} {{ pagination_class('pagination__option--disabled', classPrefix) }}">
<span class="{{ pagination_class('pagination__link', classPrefix) }} {{ pagination_class('pagination__link--first', classPrefix) }}">
&laquo;
</span>
</li>
<li class="{{ pagination_class('pagination__option', classPrefix) }} {{ pagination_class('pagination__option--prev', classPrefix) }} {{ pagination_class('pagination__option--disabled', classPrefix) }}">
<span class="{{ pagination_class('pagination__link', classPrefix) }} {{ pagination_class('pagination__link--prev', classPrefix) }}">
&lsaquo;
</span>
</li>
<div class="pagination__link pagination__link--first pagination__link--disabled">
<i class="fas fa-angle-double-left"></i>
</div>
<div class="pagination__link pagination__link--prev pagination__link--disabled">
<i class="fas fa-angle-left"></i>
</div>
{% 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 href="{{ originalUrl }}" class="pagination__link pagination__link--first" rel="first">
<i class="fas fa-angle-double-left"></i>
</a>
</li>
<li class="{{ pagination_class('pagination__option', classPrefix) }} {{ pagination_class('pagination__option--prev', classPrefix) }}">
<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 href="{{ currentPage < 2 ? originalUrl : baseUrl ~ offsetParam ~ '=' ~ (useRanges ? ((currentPage - 1) * itemRange) : currentPage) }}" class="pagination__link pagination__link--prev" rel="prev">
<i class="fas fa-angle-left"></i>
</a>
</li>
{% 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 %}
{% 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) : '' }}">
<a href="{{ i == 0 ? originalUrl : baseUrl ~ offsetParam ~ '=' ~ (useRanges ? i * itemRange : i + 1) }}" class="pagination__link{{ currentPage == i ? ' pagination__link--current' : '' }}">
{{ i + 1 }}
</a>
</li>
{% endif %}
{% endfor %}
</div>
<li class="{{ pagination_class('pagination__separator', classPrefix) }}"></li>
<div class="pagination__section pagination__section--last">
{% 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>
<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 %}
<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 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>
</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 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>
</li>
{% endif %}
</ul>
</div>
</div>
{% endif %}
{% endmacro %}

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

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

2
templates/settings/logs.twig
View file

@ -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'
) %}

2
templates/settings/sessions.twig
View file

@ -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 %}
<div class="container">

4
templates/user/listing.twig
View file

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