Add text post previews. (#328)
* Add text post previews. * Add mask gradient over post preview text * Increase post title font weight for contrast Co-authored-by: spikecodes <19519553+spikecodes@users.noreply.github.com>
This commit is contained in:
parent
3a9e6b4ca0
commit
c2053524c7
11
src/utils.rs
11
src/utils.rs
@ -251,11 +251,20 @@ impl Post {
|
|||||||
// Determine the type of media along with the media URL
|
// Determine the type of media along with the media URL
|
||||||
let (post_type, media, gallery) = Media::parse(data).await;
|
let (post_type, media, gallery) = Media::parse(data).await;
|
||||||
|
|
||||||
|
// selftext is set for text posts when browsing a (sub)reddit.
|
||||||
|
// Do NOT use selftext_html, because we truncate this content
|
||||||
|
// in the template code, and using selftext_html might result
|
||||||
|
// in truncated html.
|
||||||
|
let mut body = rewrite_urls(&val(post, "selftext"));
|
||||||
|
if body == "" {
|
||||||
|
body = rewrite_urls(&val(post, "body_html"))
|
||||||
|
}
|
||||||
|
|
||||||
posts.push(Self {
|
posts.push(Self {
|
||||||
id: val(post, "id"),
|
id: val(post, "id"),
|
||||||
title: esc!(if title.is_empty() { fallback_title.clone() } else { title }),
|
title: esc!(if title.is_empty() { fallback_title.clone() } else { title }),
|
||||||
community: val(post, "subreddit"),
|
community: val(post, "subreddit"),
|
||||||
body: rewrite_urls(&val(post, "body_html")),
|
body,
|
||||||
author: Author {
|
author: Author {
|
||||||
name: val(post, "author"),
|
name: val(post, "author"),
|
||||||
flair: Flair {
|
flair: Flair {
|
||||||
|
@ -722,6 +722,7 @@ a.search_subreddit:hover {
|
|||||||
|
|
||||||
.post_title {
|
.post_title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 5px 15px;
|
margin: 5px 15px;
|
||||||
grid-area: post_title;
|
grid-area: post_title;
|
||||||
@ -837,11 +838,16 @@ a.search_subreddit:hover {
|
|||||||
.post_body {
|
.post_body {
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
margin: 5px 15px;
|
padding: 5px 15px;
|
||||||
grid-area: post_body;
|
grid-area: post_body;
|
||||||
width: calc(100% - 30px);
|
width: calc(100% - 30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post_preview {
|
||||||
|
mask-image: linear-gradient(180deg,#000 60%,transparent);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
.post_footer {
|
.post_footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -130,6 +130,10 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div class="post_score" title="{{ post.score.1 }}">{{ post.score.0 }}<span class="label"> Upvotes</span></div>
|
<div class="post_score" title="{{ post.score.1 }}">{{ post.score.0 }}<span class="label"> Upvotes</span></div>
|
||||||
|
<div class="post_body post_preview">
|
||||||
|
<!-- preview of selfposts when browsing subreddits -->
|
||||||
|
{{ post.body|truncate(1000) }}
|
||||||
|
</div>
|
||||||
<div class="post_footer">
|
<div class="post_footer">
|
||||||
<a href="{{ post.permalink }}" class="post_comments" title="{{ post.comments.1 }} comments">{{ post.comments.0 }} comments</a>
|
<a href="{{ post.permalink }}" class="post_comments" title="{{ post.comments.1 }} comments">{{ post.comments.0 }} comments</a>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user