New topic listing styling.
This commit is contained in:
parent
2d2b2c62a0
commit
9c5e5192fa
5 changed files with 245 additions and 183 deletions
|
|
@ -40,6 +40,7 @@
|
|||
}
|
||||
|
||||
&__icon {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 2px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.forum__pagination {
|
||||
margin: 2px 0;
|
||||
box-shadow: 0 1px 2px var(--accent-colour);
|
||||
background-color: var(--background-colour);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,187 @@
|
|||
.forum__topic {
|
||||
border-radius: 2px;
|
||||
background-color: #111;
|
||||
transition: background-color .2s, box-shadow .2s;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: #191919;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #222;
|
||||
box-shadow: 0 1px 4px #222;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
pointer-events: none;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 2px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 4px;
|
||||
background-color: #333;
|
||||
background-size: 60px 60px;
|
||||
background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 1px; // fixes centering
|
||||
|
||||
&--unread {
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
}
|
||||
|
||||
&__details {
|
||||
margin: 0 4px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
line-height: 1.5em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
&__info {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
&__stats,
|
||||
&__activity {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__stats {
|
||||
text-align: center;
|
||||
min-width: 80px;
|
||||
flex-direction: column;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
min-width: initial;
|
||||
border-left-width: 0;
|
||||
align-self: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&__stat {
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
opacity: .7;
|
||||
|
||||
&:first-child {
|
||||
font-size: 1.4em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
font-size: 1em;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__activity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
min-width: 120px;
|
||||
line-height: 1.5em;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin: 0 8px;
|
||||
flex: 1 1 auto;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
margin: 1px 4px 0;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&__post {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 120px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex: 1 1 auto;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__username {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
pointer-events: initial;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,142 +1,19 @@
|
|||
.forum__topics {
|
||||
&__listing {
|
||||
margin: 1px;
|
||||
margin-bottom: 2px;
|
||||
box-sizing: content-box;
|
||||
overflow: auto;
|
||||
|
||||
&__empty {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&__none {
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
&__entry {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-height: 40px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 1px;
|
||||
padding-top: 1px;
|
||||
border-top: 1px solid var(--accent-colour);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&__info {
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
padding: 0 2px;
|
||||
word-wrap: break-word;
|
||||
margin: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__stats,
|
||||
&__activity {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
border-left: 1px solid var(--accent-colour);
|
||||
}
|
||||
|
||||
&__info,
|
||||
&__activity {
|
||||
&__datetime,
|
||||
&__title {
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&__link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&--unread {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__author {
|
||||
font-size: .9em;
|
||||
line-height: 1.2em;
|
||||
|
||||
&__name {
|
||||
color: var(--user-colour);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__stat {
|
||||
line-height: 1.2em;
|
||||
|
||||
&--posts {
|
||||
font-size: 1.3em;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
&--views {
|
||||
font-size: 0.8em;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
font-size: 1em;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats {
|
||||
text-align: center;
|
||||
padding-left: 1px;
|
||||
min-width: 70px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
min-width: initial;
|
||||
border-left-width: 0;
|
||||
align-self: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&__activity {
|
||||
min-width: 200px;
|
||||
padding-left: 3px;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
min-width: initial;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -156,15 +156,15 @@
|
|||
{% macro forum_topic_listing(topics) %}
|
||||
{% from _self import forum_topic_entry %}
|
||||
|
||||
<div class="container forum__topics">
|
||||
<div class="container container--new forum__topics">
|
||||
<div class="container__title">Topics</div>
|
||||
<div class="forum__topics__listing">
|
||||
<div class="forum__topics__list">
|
||||
{% if topics|length > 0 %}
|
||||
{% for topic in topics %}
|
||||
{{ forum_topic_entry(topic) }}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="forum__topics__none">
|
||||
<div class="forum__topics__empty">
|
||||
There are no topics in this forum.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -192,20 +192,26 @@
|
|||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="forum__topics__entry">
|
||||
<div class="forum__topics__entry__icon forum__topics__entry__icon--{{ topic_unread }}">
|
||||
<div class="forum__topic">
|
||||
<a href="/forum/topic.php?t={{ topic.topic_id }}" class="forum__topic__link"></a>
|
||||
|
||||
<div class="forum__topic__container">
|
||||
<div class="forum__topic__icon forum__topic__icon--{{ topic_unread }}">
|
||||
<i class="{{ topic_type }}"></i>
|
||||
</div>
|
||||
|
||||
<div class="forum__topics__entry__info">
|
||||
<div class="forum__topics__entry__info__title forum__topics__entry__info__title--{{ topic_unread }}">
|
||||
<a href="/forum/topic.php?t={{ topic.topic_id }}" class="forum__topics__entry__info__title__link">{{ topic.topic_title }}</a>
|
||||
<div class="forum__topic__details">
|
||||
<div class="forum__topic__title">
|
||||
<span class="forum__topic__title__inner">
|
||||
{{ topic.topic_title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="forum__topics__entry__info__author">
|
||||
|
||||
<div class="forum__topic__info">
|
||||
{% if topic.author_id is not null %}
|
||||
by <a
|
||||
href="/profile.php?u={{ topic.author_id }}"
|
||||
class="forum__topics__entry__info__author__name"
|
||||
class="forum__topic__username"
|
||||
style="{{ topic.author_colour|html_colour }}">{{ topic.author_name }}</a>,
|
||||
|
||||
{% endif %}
|
||||
|
|
@ -213,42 +219,34 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="forum__topics__entry__stats">
|
||||
<div class="forum__topics__entry__stat forum__topics__entry__stat--posts" title="Posts">
|
||||
{{ topic.topic_post_count|number_format }}
|
||||
</div>
|
||||
<div class="forum__topics__entry__stat forum__topics__entry__stat--views" title="Views">
|
||||
{{ topic.topic_view_count|number_format }}
|
||||
</div>
|
||||
<div class="forum__topic__stats">
|
||||
<div class="forum__topic__stat" title="Posts">{{ topic.topic_post_count|number_format }}</div>
|
||||
<div class="forum__topic__stat" title="Views">{{ topic.topic_view_count|number_format }}</div>
|
||||
</div>
|
||||
|
||||
<div class="forum__topics__entry__activity">
|
||||
<div class="forum__topics__entry__activity__info">
|
||||
<div class="forum__topics__entry__activity__datetime">
|
||||
<a href="/forum/topic.php?p={{ topic.response_id }}#p{{ topic.response_id }}" class="forum__topics__entry__activity__datetime__link">
|
||||
<time
|
||||
datetime="{{ topic.response_created|date('c') }}"
|
||||
<div class="forum__topic__activity">
|
||||
<div class="forum__topic__activity__details">
|
||||
{% if topic.respondent_id is not null %}
|
||||
<a href="/profile.php?u={{ topic.respondent_id }}" class="forum__topic__username"
|
||||
style="{{ topic.respondent_colour|html_colour }}">{{ topic.respondent_name }}</a>
|
||||
{% endif %}
|
||||
|
||||
<a class="forum__topic__activity__post"
|
||||
href="/forum/topic.php?p={{ topic.response_id }}#p{{ topic.response_id }}">
|
||||
<time datetime="{{ topic.response_created|date('c') }}"
|
||||
title="{{ topic.response_created|date('r') }}">{{ topic.response_created|time_diff }}</time>
|
||||
</a>
|
||||
</div>
|
||||
{% if topic.respondent_id is not null %}
|
||||
<div class="forum__topics__entry__activity__author">
|
||||
by <a href="/profile.php?u={{ topic.respondent_id }}" class="forum__topics__entry__activity__author__name" style="{{ topic.respondent_colour|html_colour }}">
|
||||
{{ topic.respondent_name }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if topic.respondent_id is not null %}
|
||||
<a
|
||||
href="/profile.php?u={{ topic.respondent_id }}"
|
||||
class="avatar forum__topics__entry__activity__avatar"
|
||||
<a href="/profile.php?u={{ topic.respondent_id }}"
|
||||
class="avatar avatar--new forum__topic__avatar"
|
||||
style="background-image:url('/profile.php?u={{ topic.respondent_id }}&m=avatar')">
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro forum_post_listing(posts, opening_post_id) %}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue