From c2053524c70690ca9e7fafd30c0c20c28d19989c Mon Sep 17 00:00:00 2001
From: mikupls <93015331+mikupls@users.noreply.github.com>
Date: Sat, 20 Nov 2021 22:13:50 +0100
Subject: [PATCH] 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>
---
 src/utils.rs         | 11 ++++++++++-
 static/style.css     |  8 +++++++-
 templates/utils.html |  4 ++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/utils.rs b/src/utils.rs
index 1e0125a..fdb1e1c 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -251,11 +251,20 @@ impl Post {
 			// Determine the type of media along with the media URL
 			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 {
 				id: val(post, "id"),
 				title: esc!(if title.is_empty() { fallback_title.clone() } else { title }),
 				community: val(post, "subreddit"),
-				body: rewrite_urls(&val(post, "body_html")),
+				body,
 				author: Author {
 					name: val(post, "author"),
 					flair: Flair {
diff --git a/static/style.css b/static/style.css
index 569816e..8d63ec5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -722,6 +722,7 @@ a.search_subreddit:hover {
 
 .post_title {
 	font-size: 16px;
+	font-weight: 500;
 	line-height: 1.5;
 	margin: 5px 15px;
 	grid-area: post_title;
@@ -837,11 +838,16 @@ a.search_subreddit:hover {
 .post_body {
 	opacity: 0.9;
 	font-weight: normal;
-	margin: 5px 15px;
+	padding: 5px 15px;
 	grid-area: post_body;
 	width: calc(100% - 30px);
 }
 
+.post_preview {
+	mask-image: linear-gradient(180deg,#000 60%,transparent);
+	opacity: 0.8;
+}
+
 .post_footer {
 	display: flex;
 	justify-content: space-between;
diff --git a/templates/utils.html b/templates/utils.html
index 4a5b165..e5ba8f8 100644
--- a/templates/utils.html
+++ b/templates/utils.html
@@ -130,6 +130,10 @@
 	{% endif %}
 
 	<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">
 		<a href="{{ post.permalink }}" class="post_comments" title="{{ post.comments.1 }} comments">{{ post.comments.0 }} comments</a>
 	</div>