Changes the news post previews up a little

This commit is contained in:
flash 2018-08-15 15:08:20 +02:00
parent 1bf81d7a7d
commit 8ea1506a1c
8 changed files with 106 additions and 113 deletions

View file

@ -1,12 +1,9 @@
@mio-news-mobile: 700px; @mio-news-mobile: 700px;
.news__container { .news__container {
&__content { display: flex;
margin: 2px;
display: flex;
@media (max-width: @mio-news-mobile) { @media (max-width: @mio-news-mobile) {
flex-direction: column; flex-direction: column;
}
} }
} }

View file

@ -1,7 +1,6 @@
.news__list { .news__list {
margin: 0; margin: 0;
margin-bottom: 2px; margin-bottom: 2px;
box-shadow: initial;
&__item { &__item {
text-decoration: none; text-decoration: none;

View file

@ -1,6 +1,5 @@
.news__preview { .news__preview {
margin: 0; margin: 0;
box-shadow: initial;
&:not(:last-child) { &:not(:last-child) {
margin-bottom: 2px; margin-bottom: 2px;
@ -11,39 +10,51 @@
flex-shrink: 1; flex-shrink: 1;
} }
&__content { &__container {
display: flex;
margin: 1px;
flex-direction: column;
}
&__content {
flex-grow: 1;
flex-shrink: 1;
display: flex; display: flex;
margin: 2px;
} }
&__text { &__text {
flex-grow: 1; flex: 1 1 auto;
flex-shrink: 1;
margin-left: 2px;
} }
&__info { &__info {
text-align: right; display: flex;
flex-grow: 0; justify-content: space-between;
flex-shrink: 0; border-top: 1px solid #9475b2;
font-size: .9em;
padding: 0 2px;
margin-top: 1px;
} }
&__date { &__link {
display: block; color: inherit;
text-decoration: underline dotted;
&:hover {
text-decoration: underline;
}
} }
&__user { &__user {
text-align: center;
flex: 0 0 auto;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
display: inline-flex; display: flex;
flex-direction: column;
&__name {
font-weight: 700;
}
&__avatar { &__avatar {
height: 20px; height: 50px;
width: 20px; width: 50px;
margin-left: 4px; margin-left: 4px;
} }
} }

View file

@ -34,7 +34,7 @@ $news = Database::query('
ON u.`display_role` = r.`role_id` ON u.`display_role` = r.`role_id`
WHERE p.`is_featured` = true WHERE p.`is_featured` = true
ORDER BY p.`created_at` DESC ORDER BY p.`created_at` DESC
LIMIT 3 LIMIT 5
')->fetchAll(PDO::FETCH_ASSOC); ')->fetchAll(PDO::FETCH_ASSOC);
$statistics = Cache::instance()->get('index:stats:v1', function () { $statistics = Cache::instance()->get('index:stats:v1', function () {

View file

@ -34,16 +34,9 @@
</div> </div>
{% endif %} {% endif %}
<div class="container news__container"> {% for post in featured_news %}
<a class="container__title container__title--link" href="/news.php">Featured News</a> {{ news_preview(post) }}
<div class="news__container__content"> {% endfor %}
<div class="news__preview__listing">
{% for post in featured_news %}
{{ news_preview(post) }}
{% endfor %}
</div>
</div>
</div>
</div> </div>
</div> </div>

View file

@ -9,42 +9,37 @@
}) %} }) %}
{% block content %} {% block content %}
<div class="container news__container"> <div class="news__container">
<div class="container__title news__container__title">News » {{ category.category_name }}</div> <div class="news__preview__listing">
<div class="news__container__content"> {% for post in posts %}
<div class="news__preview__listing"> {{ news_preview(post) }}
{% for post in posts %} {% endfor %}
{{ news_preview(post) }} </div>
{% endfor %}
<div class="news__sidebar">
<div class="container news__list">
<div class="container__title news__container__title">
News » {{ category.category_name }}
</div>
<div class="container__content">
{{ category.category_description|length > 0 ? category.category_description : '' }}
</div>
</div> </div>
<div class="news__sidebar"> {% if featured|length > 0 %}
{% if category.category_description|length > 0 %} <div class="container news__list">
<div class="container news__container"> <div class="container__title">
<div class="container__title"> Featured Posts
Description
</div>
<div class="container__content">
{{ category.category_description }}
</div>
</div> </div>
{% endif %} <div class="container__content">
{% for featured_post in featured %}
{% if featured|length > 0 %} <a class="news__list__item" href="/news.php?p={{ featured_post.post_id }}">{{ featured_post.post_title }}</a>
<div class="container news__list"> {% endfor %}
<div class="container__title">
Featured Posts
</div>
<div class="container__content">
{% for featured_post in featured %}
<a class="news__list__item" href="/news.php?p={{ featured_post.post_id }}">{{ featured_post.post_title }}</a>
{% endfor %}
</div>
</div> </div>
{% endif %} </div>
{% endif %}
{{ pagination(category.posts_count, posts_take, posts_offset, '/news.php?c=' ~ category.category_id) }} {{ pagination(category.posts_count, posts_take, posts_offset, '/news.php?c=' ~ category.category_id) }}
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

View file

@ -6,36 +6,33 @@
{% set canonical_url = '/news.php'|url_construct({'o':posts_offset}) %} {% set canonical_url = '/news.php'|url_construct({'o':posts_offset}) %}
{% block content %} {% block content %}
<div class="container news__container"> <div class="news__container">
<div class="container__title news__container__title">News</div> <div class="news__preview__listing">
<div class="news__container__content"> {% for post in posts %}
<div class="news__preview__listing"> {{ news_preview(post) }}
{% for post in posts %} {% endfor %}
{{ news_preview(post) }} </div>
{% endfor %}
</div>
<div class="news__sidebar"> <div class="news__sidebar">
<div class="container news__list"> <div class="container news__list">
<div class="container__title"> <div class="container__title">
Categories Categories
</div> </div>
<div class="container__content"> <div class="container__content">
{% for category in categories %} {% for category in categories %}
<a class="news__list__item news__list__item--kvp" href="/news.php?c={{ category.category_id }}"> <a class="news__list__item news__list__item--kvp" href="/news.php?c={{ category.category_id }}">
<div class="news__list__name"> <div class="news__list__name">
{{ category.category_name }} {{ category.category_name }}
</div> </div>
<div class="news__list__value"> <div class="news__list__value">
{{ category.count }} post{{ category.count == 1 ? '' : 's' }} {{ category.count }} post{{ category.count == 1 ? '' : 's' }}
</div> </div>
</a> </a>
{% endfor %} {% endfor %}
</div>
</div> </div>
{{ pagination(posts_count, posts_take, posts_offset, '/news.php') }}
</div> </div>
{{ pagination(posts_count, posts_take, posts_offset, '/news.php') }}
</div> </div>
</div> </div>
{% endblock %} {% endblock %}

View file

@ -4,33 +4,34 @@
{{ post.post_title }} {{ post.post_title }}
</a> </a>
<div class="news__preview__content"> <div class="news__preview__container">
<div class="news__preview__text"> <div class="news__preview__content">
{{ post.post_text|first_paragraph|parse_text('md')|raw }} <div class="news__preview__text">
</div> {{ post.post_text|first_paragraph|parse_text('md')|raw }}
</div>
<div class="news__preview__info">
<time class="news__preview__date" datetime="{{ post.created_at|date('c') }}" title="{{ post.created_at|date('r') }}">
{{ post.created_at|time_diff }}
</time>
{% if post.user_id is not null %} {% if post.user_id is not null %}
<a class="news__preview__user" href="/profile.php?u={{ post.user_id }}"> <a class="news__preview__user" href="/profile.php?u={{ post.user_id }}">
<div class="news__preview__user__name" style="{{ post.user_colour|html_colour }}"> <div class="avatar news__preview__user__avatar" style="background-image:url('/profile.php?u={{ post.user_id }}&amp;m=avatar')"></div>
<div class="news__preview__user__name" style="{{ post.user_colour|html_colour({
'color': '%s',
'text-shadow': '0 0 5px %s',
}) }}">
{{ post.username }} {{ post.username }}
</div> </div>
<div class="avatar news__preview__user__avatar" style="background-image:url('/profile.php?u={{ post.user_id }}&amp;m=avatar')"></div>
</a> </a>
{% endif %} {% endif %}
</div>
<a href="/news.php?p={{ post.post_id }}#comments" style="color: inherit; text-decoration: none; display: block"> <div class="news__preview__info">
{% if post.post_comments < 1 %} <a href="/news.php?p={{ post.post_id }}" class="news__preview__link">
No comments <time class="news__preview__date" datetime="{{ post.created_at|date('c') }}" title="{{ post.created_at|date('r') }}">
{% elseif post.post_comments == 1 %} {{ post.created_at|time_diff }}
1 comment </time>
{% else %} </a>
{{ post.post_comments }} comments
{% endif %} <a href="/news.php?p={{ post.post_id }}#comments" class="news__preview__link">
{{ post.post_comments < 1 ? 'No' : post.post_comments|number_format }} comment{{ post.post_comments != 1 ? 's' : '' }}
</a> </a>
</div> </div>
</div> </div>