From f4f465d8d8a9e4176aad38ea39663605de17e88c Mon Sep 17 00:00:00 2001 From: flashwave Date: Tue, 25 Jul 2023 19:02:00 +0000 Subject: [PATCH] Redesigned news post preview information section. --- assets/misuzu.css/news/preview.css | 134 +++++++++-------------------- templates/home/landing.twig | 2 +- templates/home/search.twig | 2 +- templates/news/index.twig | 2 +- templates/news/macros.twig | 55 ++++++------ 5 files changed, 73 insertions(+), 122 deletions(-) diff --git a/assets/misuzu.css/news/preview.css b/assets/misuzu.css/news/preview.css index 41c2a68..d4ce99b 100644 --- a/assets/misuzu.css/news/preview.css +++ b/assets/misuzu.css/news/preview.css @@ -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; - } -} \ No newline at end of file diff --git a/templates/home/landing.twig b/templates/home/landing.twig index 1130239..da64ffb 100644 --- a/templates/home/landing.twig +++ b/templates/home/landing.twig @@ -175,7 +175,7 @@

{{ post.firstParagraph|parse_text(2)|raw }}

Continue reading - | {{ post.createdTime|time_format }} + |
{% endfor %} diff --git a/templates/home/search.twig b/templates/home/search.twig index bacd609..60ec6c6 100644 --- a/templates/home/search.twig +++ b/templates/home/search.twig @@ -111,7 +111,7 @@
{{ container_title(' News (%s)'|format(news_posts|length|number_format)) }} {% for post in news_posts %} - {{ news_preview(post) }} + {{ news_preview(post, true) }} {% endfor %}
{% endif %} diff --git a/templates/news/index.twig b/templates/news/index.twig index 9158018..dcf4840 100644 --- a/templates/news/index.twig +++ b/templates/news/index.twig @@ -25,7 +25,7 @@
{% for post in news_posts %} - {{ news_preview(post) }} + {{ news_preview(post, true) }} {% endfor %}
diff --git a/templates/news/macros.twig b/templates/news/macros.twig index 6f08412..b8f8f93 100644 --- a/templates/news/macros.twig +++ b/templates/news/macros.twig @@ -1,37 +1,40 @@ -{% macro news_preview(post) %} +{% macro news_preview(post, show_category) %} {% from 'macros.twig' import container_title, avatar %} -
-
-
-
- {% if post.user.id is not null %} -
- - {{ avatar(post.user.id, 60, post.user.username) }} - - -
- {{ post.user.username }} +
+
+
+

{{ post.post.title }}

+
+
+
+
Posted
+
+ +
+
+ {% if post.user is not null %} +
+
by
+
+ {{ avatar(post.user.id, 18, post.user.username) }} +
+
+ {{ post.user.username }} +
+
+ {% endif %} + {% if show_category %} +
+
in
+
+ {{ post.category.name }}
{% endif %} - - - {{ post.category.name }} - - -
- Posted - -
-
-

{{ post.post.title }}

{{ post.post.firstParagraph|parse_text(2)|raw }}