Merge pull request #44 from robrobinbin/master

Make thumbnail clickable and bring behavior closer to reddit.

src/post.rs

@@ -106,6 +106,7 @@ async fn parse_post(json: &serde_json::Value) -> Post {
 			stickied: post["data"]["stickied"].as_bool().unwrap_or(false),
 		},
 		media,
+		domain: val(post, "domain"),
 		time: OffsetDateTime::from_unix_timestamp(unix_time).format("%b %d %Y %H:%M UTC"),
 	}
 }

src/utils.rs

@@ -37,6 +37,7 @@ pub struct Post {
 	pub flags: Flags,
 	pub thumbnail: String,
 	pub media: String,
+	pub domain: String,
 	pub time: String,
 }
 
@@ -169,6 +170,9 @@ pub async fn media(data: &serde_json::Value) -> (String, String) {
 	} else if data["post_hint"].as_str().unwrap_or("") == "image" {
 		post_type = "image";
 		format_url(data["preview"]["images"][0]["source"]["url"].as_str().unwrap_or_default().to_string())
+	} else if data["is_self"].as_bool().unwrap_or_default()  {
+		post_type = "self";
+		data["permalink"].as_str().unwrap_or_default().to_string()
 	} else {
 		post_type = "link";
 		data["url"].as_str().unwrap_or_default().to_string()
@@ -240,6 +244,7 @@ pub async fn fetch_posts(path: &str, fallback_title: String) -> Result<(Vec<Post
 			post_type,
 			thumbnail: format_url(val(post, "thumbnail")),
 			media,
+			domain: val(post, "domain"),
 			flair: Flair(
 				val(post, "link_flair_text"),
 				val(post, "link_flair_background_color"),

static/style.css

@@ -453,11 +453,35 @@ input[type="submit"]:hover { color: var(--accent); }
 }
 
 .post_thumbnail {
-	object-fit: cover;
-	width: auto;
 	border-radius: 5px;
 	border: 1px solid var(--foreground);
-	max-width: 20%;
+	width: 20%;
+	max-width: 140px;
+	display: grid;
+	overflow: hidden;
+	flex-shrink: 0;
+	background-color: var(--highlighted);
+}
+
+.post_thumbnail img {
+	grid-area: 1 / 1 / 2 / 2;
+	height: 100%;
+	width: 100%;
+	object-fit: cover;
+	align-self: center;
+	justify-self: center;
+}
+
+.post_thumbnail span {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	text-align: center;
+	background-color: rgba(0,0,0,0.8);
+	color: white;
+	grid-area: 1 / 1 / 2 / 2;
+	padding: 5px;
+	align-self: end;
 }
 
 .post_flair {
@@ -634,19 +658,19 @@ input[type="submit"]:hover { color: var(--accent); }
 }
 
 .compact .post_thumbnail {
-	max-width: 75px;
-	max-height: 75px;
+	width: 75px;
+	height: 75px;
 }
 
 .compact footer {
 	margin-top: 20px;
 }
 
-.card .post_right {
+.card_post .post_right {
 	flex-direction: column;
 }
 
-.card .post:not(.highlighted) .post_media {
+.card_post:not(.highlighted) .post_media {
 	margin-top: 0;
 	margin-bottom: 15px;
 }

templates/subreddit.html

@@ -31,7 +31,7 @@
 			<div id="posts">
 			{% for post in posts %}
 			{% if !(post.flags.nsfw && prefs.hide_nsfw == "on") %}
-			<div class="post {% if post.flags.stickied %}stickied{% endif %}">
+			<div class="post {% if post.flags.stickied %}stickied{% endif %} {% if prefs.layout == "card" && post.post_type == "image" %} card_post {% endif %}">
 				<div class="post_left">
 					<p class="post_score">{{ post.score }}</p>
 					{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
@@ -56,8 +56,10 @@
 					<!-- POST MEDIA/THUMBNAIL -->
 					{% if prefs.layout == "card" && post.post_type == "image" %}
 						<img class="post_media" src="{{ post.media }}"/>
-					{% else if prefs.layout != "card" %}
-						<img class="post_thumbnail" src="{{ post.thumbnail }}">
+					{% else if post.post_type == "link" %}
+						<a class="post_thumbnail" href="{{ post.media }}"><img src="{{ post.thumbnail }}"><span>{{ post.domain }}</span></a>
+					{% else if post.post_type != "self" %}
+						<a class="post_thumbnail" href="{{ post.permalink }}"><img src="{{ post.thumbnail }}"><span>{{ post.post_type }}</span></a>
 					{% endif %}
 				</div>
 			</div>
@@ -104,4 +106,4 @@
 		</aside>
 		{% endif %}
 	</main>
-{% endblock %}
+{% endblock %}