Updated forum/topic tools styling.
This commit is contained in:
parent
1f3afe4c51
commit
71b65b93d6
7 changed files with 107 additions and 47 deletions
|
|
@ -1,8 +1,27 @@
|
|||
.forum__actions {
|
||||
padding: 2px;
|
||||
margin: 2px 0;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
|
||||
&__button:not(:first-child) {
|
||||
margin-left: 2px;
|
||||
&__pagination {
|
||||
max-width: 500px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
max-width: 100%;
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@
|
|||
color: var(--accent-colour);
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
|
||||
&__section {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
overflow: auto;
|
||||
flex: 0 0 auto;
|
||||
|
||||
|
|
@ -15,15 +17,18 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
min-width: 40px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
margin: 1px;
|
||||
padding: 3px 10px;
|
||||
padding: 3px 10px 4px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: var(--background-colour);
|
||||
|
|
@ -31,11 +36,26 @@
|
|||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s, color .2s;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1 0 auto;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
--accent-colour: #555;
|
||||
}
|
||||
|
||||
&--first,
|
||||
&--last,
|
||||
&--next,
|
||||
&--prev {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
&--current,
|
||||
&:not(&--disabled):hover,
|
||||
&:not(&--disabled):active,
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ if (!perms_check($perms, MSZ_FORUM_PERM_VIEW_FORUM)) {
|
|||
return;
|
||||
}
|
||||
|
||||
tpl_var('topic_perms', $perms);
|
||||
|
||||
$posts = forum_post_listing($topic['topic_id'], $postsOffset, $postsRange);
|
||||
|
||||
if (!$posts) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{% extends 'forum/master.twig' %}
|
||||
{% from 'macros.twig' import pagination %}
|
||||
{% from 'forum/macros.twig' import forum_category_listing, forum_topic_listing, forum_category_buttons, forum_header %}
|
||||
{% from 'forum/macros.twig' import forum_category_listing, forum_topic_listing, forum_category_buttons, forum_header, forum_category_tools %}
|
||||
|
||||
{% set title = forum_info.forum_name %}
|
||||
{% set canonical_url = '/forum/forum.php'|url_construct({
|
||||
|
|
@ -16,18 +15,9 @@
|
|||
{% endif %}
|
||||
|
||||
{% if forum_may_have_topics %}
|
||||
{% set fcbuttons = current_user is defined ? forum_category_buttons(forum_info, forum_perms) : '' %}
|
||||
{% set fcpagination = pagination(
|
||||
forum_info.forum_topic_count,
|
||||
forum_range,
|
||||
forum_offset,
|
||||
'/forum/forum.php'|url_construct({'f': forum_info.forum_id})
|
||||
) %}
|
||||
|
||||
{{ fcbuttons }}
|
||||
{{ fcpagination }}
|
||||
{% set category_tools = forum_category_tools(forum_info, forum_perms, forum_range, forum_offset) %}
|
||||
{{ category_tools }}
|
||||
{{ forum_topic_listing(forum_topics) }}
|
||||
{{ fcpagination }}
|
||||
{{ fcbuttons }}
|
||||
{{ category_tools }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -45,12 +45,52 @@
|
|||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro forum_category_buttons(forum, perms) %}
|
||||
<div class="forum__actions forum__actions__content">
|
||||
{% macro forum_category_tools(info, perms, take, offset) %}
|
||||
{% from 'macros.twig' import pagination %}
|
||||
|
||||
<div class="container forum__actions">
|
||||
<div class="forum__actions__buttons">
|
||||
{% if perms|perms_check(constant('MSZ_FORUM_PERM_CREATE_TOPIC')) %}
|
||||
<a href="/forum/posting.php?f={{ forum.forum_id }}" class="input__button forum__actions__button">New Topic</a>
|
||||
<a href="{{ '/forum/posting.php'|url_construct({'f':info.forum_id}) }}" class="input__button">New Topic</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="forum__actions__pagination">
|
||||
{{ pagination(
|
||||
info.forum_topic_count,
|
||||
take,
|
||||
offset,
|
||||
'/forum/forum.php'|url_construct({'f':info.forum_id}),
|
||||
false,
|
||||
null,
|
||||
5
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro forum_topic_tools(info, take, offset, can_reply) %}
|
||||
{% from 'macros.twig' import pagination %}
|
||||
|
||||
<div class="container forum__actions">
|
||||
<div class="forum__actions__buttons">
|
||||
{% if can_reply %}
|
||||
<a href="#reply" class="input__button" onclick="openContainer('reply')">Reply</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="forum__actions__pagination">
|
||||
{{ pagination(
|
||||
info.topic_post_count,
|
||||
take,
|
||||
offset,
|
||||
'/forum/topic.php'|url_construct({'t':info.topic_id}),
|
||||
false,
|
||||
null,
|
||||
5
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro forum_category_entry(forum, forum_unread, forum_type) %}
|
||||
|
|
@ -154,14 +194,6 @@
|
|||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro forum_topic_buttons(topic) %}
|
||||
<div class="forum__actions forum__actions__content">
|
||||
<a href="#reply"
|
||||
class="input__button forum__actions__button"
|
||||
onclick="openContainer('reply')">Reply</a>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro forum_topic_locked(locked, archived) %}
|
||||
{% if locked is not null or archived %}
|
||||
<div class="container forum__status">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
forum_topic_buttons,
|
||||
forum_topic_locked,
|
||||
forum_posting_form,
|
||||
forum_header
|
||||
forum_header,
|
||||
forum_topic_tools
|
||||
%}
|
||||
|
||||
{% set title = topic_info.topic_title %}
|
||||
|
|
@ -17,23 +18,15 @@
|
|||
}) %}
|
||||
|
||||
{% set can_reply = current_user is defined and topic_info.topic_locked is null and not topic_info.topic_archived %}
|
||||
{% set ftbuttons = can_reply ? forum_topic_buttons(topic_info) : '' %}
|
||||
{% set ftpagination = pagination(
|
||||
topic_info.topic_post_count,
|
||||
topic_range,
|
||||
topic_offset,
|
||||
'/forum/topic.php'|url_construct({'t': topic_info.topic_id})
|
||||
) %}
|
||||
{% set topic_tools = forum_topic_tools(topic_info, topic_range, topic_offset, can_reply) %}
|
||||
|
||||
{% block content %}
|
||||
{{ forum_header(topic_info.topic_title, topic_breadcrumbs) }}
|
||||
|
||||
{{ forum_topic_locked(topic_info.topic_locked, topic_info.topic_archived) }}
|
||||
|
||||
{{ ftbuttons }}
|
||||
{{ ftpagination }}
|
||||
{{ topic_tools }}
|
||||
{{ forum_post_listing(topic_posts, topic_info.topic_first_post_id) }}
|
||||
{{ ftpagination }}
|
||||
|
||||
{% if can_reply %}
|
||||
{{ forum_posting_form('Reply', topic_info.topic_id, true, 'reply', true) }}
|
||||
|
|
@ -45,4 +38,6 @@
|
|||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{{ topic_tools }}
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue