Redesigned news post preview information section.
This commit is contained in:
parent
81f4dfce19
commit
f4f465d8d8
5 changed files with 73 additions and 122 deletions
|
|
@ -1,31 +1,6 @@
|
|||
.news__preview {
|
||||
display: flex;
|
||||
margin: 2px 0;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
--user-colour: var(--accent-colour);
|
||||
}
|
||||
.news__preview__info__content {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.news__preview__info__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--user-colour);
|
||||
background-blend-mode: multiply;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.news__preview__listing {
|
||||
|
|
@ -33,68 +8,63 @@
|
|||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.news__preview__container {
|
||||
.news__preview__header {
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
display: flex;
|
||||
margin: 1px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.news__preview__user {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.news__preview__user__details {
|
||||
|
||||
.news__preview__title {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.news__preview__title h1 {
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.news__preview__attrs {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.news__preview__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 10px;
|
||||
.news__preview__attr {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.news__preview__username {
|
||||
color: inherit;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.news__preview__username[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.news__preview__date {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.news__preview__category {
|
||||
.news__preview__author a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.news__preview__category:hover {
|
||||
.news__preview__author__name a {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding-top: 2px;
|
||||
border-bottom: 2px solid var(--user-colour, #fff);
|
||||
}
|
||||
|
||||
.news__preview__category a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.news__preview__category a:hover,
|
||||
.news__preview__category a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.news__preview__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.2em;
|
||||
flex: 1 1 auto;
|
||||
line-height: 1.4em;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
margin: 2px;
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
.news__preview__text {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.news__preview__links {
|
||||
|
|
@ -105,25 +75,3 @@
|
|||
.news__preview__link {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.news__preview { flex-direction: column-reverse; }
|
||||
.news__preview__info { display: none; }
|
||||
.news__preview__info__content {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
}
|
||||
.news__preview__info__background {
|
||||
mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
}
|
||||
.news__preview__user {
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.news__preview__avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
<p>{{ post.firstParagraph|parse_text(2)|raw }}</p>
|
||||
<div class="landingv2-news-post-options">
|
||||
<a href="{{ url('news-post', {'post': post.id}) }}" class="landingv2-news-post-option">Continue reading</a>
|
||||
| {{ post.createdTime|time_format }}
|
||||
| <time datetime="{{ post.createdTime|date('c') }}" title="{{ post.createdTime|date('r') }}">{{ post.createdTime|time_format }}</time>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
<div class="container search__container">
|
||||
{{ container_title('<i class="fas fa-newspaper fa-fw"></i> News (%s)'|format(news_posts|length|number_format)) }}
|
||||
{% for post in news_posts %}
|
||||
{{ news_preview(post) }}
|
||||
{{ news_preview(post, true) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
<div class="news__container">
|
||||
<div class="news__preview__listing">
|
||||
{% for post in news_posts %}
|
||||
{{ news_preview(post) }}
|
||||
{{ news_preview(post, true) }}
|
||||
{% endfor %}
|
||||
|
||||
<div class="container" style="padding: 4px; display: {{ news_pagination.pages > 1 ? 'block' : 'none' }}">
|
||||
|
|
|
|||
|
|
@ -1,37 +1,40 @@
|
|||
{% macro news_preview(post) %}
|
||||
{% macro news_preview(post, show_category) %}
|
||||
{% from 'macros.twig' import container_title, avatar %}
|
||||
|
||||
<div class="container news__preview" style="{% if post.user is not null %}--user-colour: {{ post.user.colour }}{% endif %}">
|
||||
<div class="news__preview__info">
|
||||
<div class="news__preview__info__background"></div>
|
||||
<div class="news__preview__info__content">
|
||||
{% if post.user.id is not null %}
|
||||
<div class="news__preview__user">
|
||||
<a class="news__preview__avatar" href="{{ url('user-profile', {'user': post.user.id}) }}">
|
||||
{{ avatar(post.user.id, 60, post.user.username) }}
|
||||
</a>
|
||||
|
||||
<div class="news__preview__user__details">
|
||||
<a class="news__preview__username" href="{{ url('user-profile', {'user': post.user.id}) }}">{{ post.user.username }}</a>
|
||||
<div class="container news__preview">
|
||||
<div class="news__preview__header">
|
||||
<div class="news__preview__title">
|
||||
<h1>{{ post.post.title }}</h1>
|
||||
</div>
|
||||
<div class="news__preview__attrs">
|
||||
<div class="news__preview__attr news__preview__created">
|
||||
<div class="news__preview__created__prefix">Posted</div>
|
||||
<div class="news__preview__created__time">
|
||||
<time datetime="{{ post.post.createdTime|date('c') }}" title="{{ post.post.createdTime|date('r') }}">{{ post.post.createdTime|time_format }}</time>
|
||||
</div>
|
||||
</div>
|
||||
{% if post.user is not null %}
|
||||
<div class="news__preview__attr news__preview__author" style="--user-colour: {{ post.user.colour }}">
|
||||
<div class="news__preview__author__prefix">by</div>
|
||||
<div class="news__preview__author__avatar">
|
||||
<a href="{{ url('user-profile', {'user': post.user.id}) }}">{{ avatar(post.user.id, 18, post.user.username) }}</a>
|
||||
</div>
|
||||
<div class="news__preview__author__name">
|
||||
<a href="{{ url('user-profile', {'user': post.user.id}) }}">{{ post.user.username }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if show_category %}
|
||||
<div class="news__preview__attr news__preview__category">
|
||||
<div class="news__preview__category__prefix">in</div>
|
||||
<div class="news__preview__category__name">
|
||||
<a href="{{ url('news-category', {'category': post.category.id}) }}">{{ post.category.name }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<a class="news__preview__category" href="{{ url('news-category', {'category': post.category.id}) }}">
|
||||
{{ post.category.name }}
|
||||
</a>
|
||||
|
||||
<div class="news__preview__date">
|
||||
Posted
|
||||
<time datetime="{{ post.post.createdTime|date('c') }}" title="{{ post.post.createdTime|date('r') }}">
|
||||
{{ post.post.createdTime|time_format }}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="news__preview__content markdown">
|
||||
<h1>{{ post.post.title }}</h1>
|
||||
<div class="news__preview__text">
|
||||
{{ post.post.firstParagraph|parse_text(2)|raw }}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue