Merge pull request #60 from robrobinbin/master

Add comment counter and other post improvements

src/post.rs

@@ -72,7 +72,7 @@ async fn parse_post(json: &serde_json::Value) -> Post {
 	let ratio: f64 = post["data"]["upvote_ratio"].as_f64().unwrap_or(1.0) * 100.0;
 
 	// Determine the type of media along with the media URL
-	let (post_type, media) = media(&post["data"]).await;
+	let (post_type, media, width, height) = media(&post["data"]).await;
 
 	// Build a post using data parsed from Reddit post API
 	Post {
@@ -119,6 +119,11 @@ async fn parse_post(json: &serde_json::Value) -> Post {
 		domain: val(post, "domain"),
 		rel_time,
 		created,
+		comments: format_num(post["data"]["num_comments"].as_i64().unwrap_or_default()),
+		media_width: width,
+		media_height: height,
+		thumbnail_width: post["data"]["thumbnail_width"].as_i64().unwrap_or_default(),
+		thumbnail_height: post["data"]["thumbnail_height"].as_i64().unwrap_or_default(),
 	}
 }
 

src/utils.rs

@@ -57,6 +57,11 @@ pub struct Post {
 	pub domain: String,
 	pub rel_time: String,
 	pub created: String,
+	pub comments: String,
+	pub media_width: i64,
+	pub media_height: i64,
+	pub thumbnail_width: i64,
+	pub thumbnail_height: i64,
 }
 
 // Comment with content, post, score and data/time that it was posted
@@ -178,7 +183,7 @@ pub fn format_num(num: i64) -> String {
 	}
 }
 
-pub async fn media(data: &Value) -> (String, String) {
+pub async fn media(data: &Value) -> (String, String, i64, i64) {
 	let post_type: &str;
 	// If post is a video, return the video
 	let url = if data["preview"]["reddit_video_preview"]["fallback_url"].is_string() {
@@ -210,7 +215,13 @@ pub async fn media(data: &Value) -> (String, String) {
 		data["url"].as_str().unwrap_or_default().to_string()
 	};
 	
-	(post_type.to_string(), url)
+	let (width, height) = if post_type == "image" {
+		(data["preview"]["images"][0]["source"]["width"].as_i64().unwrap_or_default(), data["preview"]["images"][0]["source"]["height"].as_i64().unwrap_or_default())
+	} else {
+		(0, 0)
+	};
+
+	(post_type.to_string(), url, width, height)
 }
 
 pub fn parse_rich_flair(flair_type: String, rich_flair: Option<&Vec<Value>>, text_flair: Option<&str>) -> Vec<FlairPart> {
@@ -306,7 +317,7 @@ pub async fn fetch_posts(path: &str, fallback_title: String) -> Result<(Vec<Post
 		let title = val(post, "title");
 
 		// Determine the type of media along with the media URL
-		let (post_type, media) = media(&post["data"]).await;
+		let (post_type, media, width, height) = media(&post["data"]).await;
 
 		posts.push(Post {
 			id: val(post, "id"),
@@ -352,6 +363,11 @@ pub async fn fetch_posts(path: &str, fallback_title: String) -> Result<(Vec<Post
 			permalink: val(post, "permalink"),
 			rel_time,
 			created,
+			comments: format_num(post["data"]["num_comments"].as_i64().unwrap_or_default()),
+			media_width: width,
+			media_height: height,
+			thumbnail_width: post["data"]["thumbnail_width"].as_i64().unwrap_or_default(),
+			thumbnail_height: post["data"]["thumbnail_height"].as_i64().unwrap_or_default(),
 		});
 	}
 

static/style.css

@@ -106,7 +106,7 @@ a {
 	transition: 0.2s all;
 }
 
-a:not(.post_right):hover {
+a:hover {
 	text-decoration: underline;
 }
 
@@ -401,8 +401,14 @@ a.search_subreddit:hover {
 	border-radius: 5px;
 	background: var(--post);
 	box-shadow: var(--shadow);
-	display: flex;
+	display: grid;
-	transition: 0.2s all;
+	transition: 0.2s background-color;
+	grid-template: 	"post_score post_header post_thumbnail" auto
+			"post_score post_title  post_thumbnail" 1fr
+			"post_score post_media  post_thumbnail" auto
+			"post_score post_body   post_thumbnail" auto
+			"post_score post_footer post_thumbnail" auto
+			/ minmax(50px, auto) 1fr fit-content(min(20%, 152px));
 }
 
 .post:not(:last-child) { margin-bottom: 10px; }
@@ -411,53 +417,32 @@ a.search_subreddit:hover {
 	margin: 20px 0;
 }
 
-.post.highlighted > .post_right {
-	flex-direction: column;
-}
-
 .post:hover {
 	background: var(--foreground);
 }
 
-.post:hover > .post_left {
-	background: var(--highlighted);
-}
 
-.post_left, .post_right {
+.post_score {
-	display: flex;
+	padding-top: 20px;
-	overflow-wrap: break-word;
+	color: var(--accent);
-}
+	grid-area: post_score;
-
-.post_left {
 	text-align: center;
 	background: var(--foreground);
 	border-radius: 5px 0 0 5px;
-	flex-direction: column;
+	transition: 0.2s background-color;
-	min-width: 50px;
-	transition: 0.2s all;
 }
 
-.post_score {
+.post:hover > .post_score {
-	margin-top: 20px;
+	background: var(--highlighted);
-	color: var(--accent);
 }
 
-#post_footer {
+.post_score .label {
-	display: flex;
+	display: none;
-	justify-content: space-between;
-	opacity: 0.5;
-	font-size: 14px;
 } 
 
-#post_links {
+.post_header {
-	display: flex;
+	margin: 20px 20px 5px 20px;
-	list-style: none;
+	grid-area: post_header;
-	padding: 0;
-	font-weight: bold;
-}
-
-#post_links > li {
-	margin-right: 15px;
 }
 
 .post_subreddit {
@@ -467,82 +452,8 @@ a.search_subreddit:hover {
 .post_title {
 	font-size: 16px;
 	line-height: 1.5;
-	margin-top: 10px;
+	margin: 5px 20px;
-}
+	grid-area: post_title;
-
-.post_text {
-	padding: 15px;
-	display: flex;
-	flex-direction: column;
-}
-
-.post_right {
-	flex-grow: 1;
-	flex-shrink: 1;
-	justify-content: space-between;
-}
-
-.post_right > * {
-	margin: 5px;
-}
-
-.post_media {
-	max-width: 90%;
-	align-self: center;
-	margin-top: 15px;
-}
-
-.post_body {
-	opacity: 0.9;
-	font-weight: normal;
-	margin: 10px 5px;
-}
-
-#post_url {
-	color: var(--accent);
-	margin-top: 10px;
-}
-
-.post_thumbnail {
-	border-radius: 5px;
-	border: 1px solid var(--foreground);
-	width: 20%;
-	max-width: 140px;
-	display: grid;
-	overflow: hidden;
-	flex-shrink: 0;
-	background-color: black;
-}
-
-.post_thumbnail img {
-	grid-area: 1 / 1 / 2 / 2;
-	width: 100%;
-	object-fit: cover;
-	align-self: center;
-	justify-self: center;
-}
-
-.post_thumbnail.no_thumbnail {
-	background-color: var(--highlighted)
-}
-
-.post_thumbnail svg {
-	grid-area: 1 / 1 / 2 / 2;
-	align-self: center;
-	justify-self: center;
-	stroke: var(--text);
-}
-
-.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 {
@@ -567,14 +478,104 @@ a.search_subreddit:hover {
 
 .nsfw {
 	color: var(--nsfw);
-	margin-top: 20px;
+	margin-left: 5px;
 	border: 1px solid var(--nsfw);
-	padding: 5px;
+	padding: 3px;
 	font-size: 12px;
 	border-radius: 5px;
 	font-weight: bold;
 }
 
+.post_media {
+	max-width: calc(100% - 40px);
+	align-self: center;
+	margin-top: 15px;
+	margin: 5px auto;
+	height: auto;
+	grid-area: post_media;
+	background-color: var(--highlighted);
+}
+
+#post_url {
+	color: var(--accent);
+	margin: 5px 20px;
+	grid-area: post_media;
+}
+
+.post_body {
+	opacity: 0.9;
+	font-weight: normal;
+	margin: 5px 20px;
+	grid-area: post_body;
+}
+
+.post_footer {
+	display: flex;
+	justify-content: space-between;
+	opacity: 0.5;
+	font-size: 14px;
+	grid-area: post_footer;
+	margin: 5px 20px 20px 20px;
+}
+
+.post_comments {
+	font-weight: bold;
+}
+
+#post_links {
+	display: flex;
+	list-style: none;
+	padding: 0;
+	font-weight: bold;
+}
+
+#post_links > li {
+	margin-right: 15px;
+}
+
+.post_thumbnail {
+	border-radius: 5px;
+	border: 1px solid var(--foreground);
+	display: grid;
+	overflow: hidden;
+	background-color: black;
+	grid-area: post_thumbnail;
+	margin: 5px;
+}
+
+.post_thumbnail img {
+	grid-area: 1 / 1 / 2 / 2;
+	width: 100%;
+	height: auto;
+	object-fit: cover;
+	align-self: center;
+	justify-self: center;
+}
+
+.post_thumbnail.no_thumbnail {
+	background-color: var(--highlighted);
+}
+
+.post_thumbnail svg {
+	grid-area: 1 / 1 / 2 / 2;
+	align-self: center;
+	justify-self: center;
+	stroke: var(--text);
+	max-width: 100%;
+}
+
+.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;
+}
+
 .stickied {
 	--accent: var(--green);
 	border: 1px solid var(--green);
@@ -715,20 +716,27 @@ a.search_subreddit:hover {
 	border-bottom: 0;
 }
 
-.compact .post_left {
+.compact .post_score {
+	padding-top: 15px;
 	border-radius: 0;
 }
 
 .compact .post_header {
+	margin: 15px 15px 2.5px 15px;
 	font-size: 14px;
 }
 
-.compact .post_title {
+.compact .post_title, .compact #post_url, .compact .post_body {
-	margin-top: 5px;
+	margin: 2.5px 15px;
 }
 
-.compact .post_text {
+.compact .post_media {
-	padding: 10px;
+	max-width: calc(100% - 30px);
+	margin: 2.5px auto;
+}
+
+.compact .post_footer {
+	margin: 5px 15px 15px 15px;
 }
 
 .compact .post_thumbnail {
@@ -740,15 +748,6 @@ a.search_subreddit:hover {
 	margin-top: 20px;
 }
 
-.card_post .post_right {
-	flex-direction: column;
-}
-
-.card_post:not(.highlighted) .post_media {
-	margin-top: 0;
-	margin-bottom: 15px;
-}
-
 /* Settings */
 
 #settings {
@@ -877,26 +876,42 @@ td, th {
 
 @media screen and (max-width: 480px) {
 	.post {
-		flex-direction: column-reverse;
+		grid-template: 	"post_header post_header post_thumbnail" auto
+				"post_title  post_title  post_thumbnail" 1fr
+				"post_media  post_media  post_thumbnail" auto
+				"post_body   post_body   post_thumbnail" auto
+				"post_score  post_footer post_thumbnail" auto
+				/ auto 1fr fit-content(min(20%, 152px));
+	}
+	
+	.post_score {
+		background-color: unset;
+		margin: 5px 0px 20px 20px;
+		padding: 0;
+		font-size: 14px;
+	}
+	
+	.compact .post_score {
+		background-color: unset;
+		margin: 2.5px 0px 15px 15px;
+		padding: 0;
+		font-size: 14px;
+	}
+	
+	.post_score::before {
+		content: "↑"
+	}
+	
+	.post:hover > .post_score {
+		background: unset;
 	}
 
 	.post_header {
 		font-size: 14px;
 	}
 	
-	.post_left {
+	.post_footer {
-		border-radius: 0 0 5px 5px;
+		margin-left: 15px;
-		flex-direction: row;
-    justify-content: center;
-    align-items: center;
-	}
-
-	.nsfw {
-		margin: 5px 0px 5px 10px;
-	}
-
-	.post_score {
-		margin: 5px 0;
 	}
 
 	.replies > .comment {

templates/post.html

@@ -41,12 +41,7 @@
 
 		<!-- POST CONTENT -->
 		<div class="post highlighted">
-			<div class="post_left">
+			
-				<p class="post_score">{{ post.score }}</p>
-				{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
-			</div>
-			<div class="post_right">
-				<div class="post_text">
 			<p class="post_header">
 				<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
 				<span class="dot">&bull;</span>
@@ -57,16 +52,17 @@
 				<span class="dot">&bull;</span>
 				<span class="created" title="{{ post.created }}">{{ post.rel_time }}</span>
 			</p>
-					<a href="{{ post.permalink }}" class="post_title">
+			<p class="post_title">
-						{{ post.title }}
+				<a href="{{ post.permalink }}">{{ post.title }}</a>
 				{% if post.flair.flair_parts.len() > 0 %}
 					<small class="post_flair" style="color:{{ post.flair.foreground_color }}; background:{{ post.flair.background_color }};">{% call utils::render_flair(post.flair.flair_parts) %}</small>
 				{% endif %}
-					</a>
+				{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
+			</p>
 
 			<!-- POST MEDIA -->
 			{% if post.post_type == "image" %}
-					<img class="post_media" src="{{ post.media }}"/>
+			<img class="post_media" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
 			{% else if post.post_type == "video" || post.post_type == "gif" %}
 			<video class="post_media" src="{{ post.media }}" controls autoplay loop></video>
 			{% else if post.post_type == "link" %}
@@ -75,7 +71,9 @@
 
 			<!-- POST BODY -->
 			<div class="post_body">{{ post.body }}</div>
-					<div id="post_footer">
+			<div class="post_score">{{ post.score }}<span class="label"> Upvotes</span></div>
+			<div class="post_footer">
+				
 				<ul id="post_links">
 					<li><a href="/{{ post.id }}">permalink</a></li>
 					<li><a href="https://reddit.com/{{ post.id }}">reddit</a></li>
@@ -84,8 +82,6 @@
 			</div>
 
 		</div>
-			</div>
-		</div>
 
 		<!-- SORT FORM -->
 		<form id="sort">

templates/search.html

@@ -38,20 +38,11 @@
 
 		{% if post.flags.nsfw && prefs.hide_nsfw == "on" %}
 		{% else if post.title != "Comment" %}
-		<div class="post {% if prefs.layout == "card" && post.post_type == "image" %}card_post{% endif %}">
+		<div class="post {% if post.flags.stickied %}stickied{% endif %}">	
-			<div class="post_left">
-				<p class="post_score">{{ post.score }}</p>
-				{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
-			</div>
-			<div class="post_right">
-				<div class="post_text">
 			<p class="post_header">
 				<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
 				<span class="dot">&bull;</span>
 				<a class="post_author" href="/u/{{ post.author.name }}">u/{{ post.author.name }}</a>
-						{% if post.author.flair.flair_parts.len() > 0 %}
-							<small class="author_flair">{% call utils::render_flair(post.author.flair.flair_parts) %}</small>
-						{% endif %}
 				<span class="dot">&bull;</span>
 				<span class="created" title="{{ post.created }}">{{ post.rel_time }}</span>
 			</p>
@@ -59,25 +50,27 @@
 				{% if post.flair.flair_parts.len() > 0 %}
 				<small class="post_flair" style="color:{{ post.flair.foreground_color }}; background:{{ post.flair.background_color }};">{% call utils::render_flair(post.flair.flair_parts) %}</small>
 				{% endif %}
-						<a href="{{ post.permalink }}">{{ post.title }}</a>
+				<a href="{{ post.permalink }}">{{ post.title }}</a>{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
 			</p>
-				</div>
-				
 			<!-- POST MEDIA/THUMBNAIL -->
-				{% if prefs.layout == "card" && post.post_type == "image" %}
+			{% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %}
-					<img class="post_media" src="{{ post.media }}"/>
+			<img class="post_media" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
 			{% else if post.post_type != "self" %}
 			<a class="post_thumbnail {% if post.thumbnail == "" %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media }}{% else %}{{ post.permalink }}{% endif %}">
 				{% if post.thumbnail == "" %}
-							<svg viewBox="0 0 100 106" width="50" height="53" xmlns="http://www.w3.org/2000/svg">
+					<svg viewBox="0 0 100 106" width="140" height="53" xmlns="http://www.w3.org/2000/svg">
 						<path d="M35,15h-15a10,10 0,0,0 0,20h25a10,10 0,0,0 10,-10m-12.5,0a10, 10 0,0,1 10, -10h25a10,10 0,0,1 0,20h-15" fill="none" stroke-width="5" stroke-linecap="round"/>
 					</svg>
 				{% else %}
-							<img src="{{ post.thumbnail }}">
+					<img src="{{ post.thumbnail }}" width="{{ post.thumbnail_width }}px" height="{{ post.thumbnail_height }}px">
 				{% endif %}
 				<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
 			</a>
 			{% endif %}
+
+			<div class="post_score">{{ post.score }}<span class="label"> Upvotes</span></div>
+			<div class="post_footer">
+				<a href="{{ post.permalink }}" class="post_comments">{{ post.comments }} Comments</a>
 			</div>
 		</div>
 		{% else %}

templates/settings.html

@@ -27,7 +27,7 @@
 		<div id="layout">
 			<label for="layout">Layout:</label>
 			<select name="layout"> 
-				{% call utils::options(prefs.layout, ["card", "clean", "compact"], "clean") %}
+				{% call utils::options(prefs.layout, ["card", "clean", "compact"], "card") %}
 			</select>
 		</div>
 		<div id="wide">

templates/subreddit.html

@@ -32,13 +32,7 @@
 			{% for post in posts %}
 			{% if !(post.flags.nsfw && prefs.hide_nsfw == "on") %}
 			<hr class="sep" />
-			<div class="post {% if post.flags.stickied %}stickied{% endif %} {% if prefs.layout == "card" && post.post_type == "image" %}card_post{% endif %}">
+			<div class="post {% if post.flags.stickied %}stickied{% endif %}">	
-				<div class="post_left">
-					<p class="post_score">{{ post.score }}</p>
-					{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
-				</div>
-				<div class="post_right">
-					<div class="post_text">
 				<p class="post_header">
 					<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
 					<span class="dot">&bull;</span>
@@ -50,25 +44,27 @@
 					{% if post.flair.flair_parts.len() > 0 %}
 					<small class="post_flair" style="color:{{ post.flair.foreground_color }}; background:{{ post.flair.background_color }};">{% call utils::render_flair(post.flair.flair_parts) %}</small>
 					{% endif %}
-							<a href="{{ post.permalink }}">{{ post.title }}</a>
+					<a href="{{ post.permalink }}">{{ post.title }}</a>{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
 				</p>
-					</div>
-
 				<!-- POST MEDIA/THUMBNAIL -->
-					{% if prefs.layout == "card" && post.post_type == "image" %}
+				{% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %}
-						<img class="post_media" src="{{ post.media }}"/>
+				<img class="post_media" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
 				{% else if post.post_type != "self" %}
 				<a class="post_thumbnail {% if post.thumbnail == "" %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media }}{% else %}{{ post.permalink }}{% endif %}">
 					{% if post.thumbnail == "" %}
-								<svg viewBox="0 0 100 106" width="50" height="53" xmlns="http://www.w3.org/2000/svg">
+						<svg viewBox="0 0 100 106" width="140" height="53" xmlns="http://www.w3.org/2000/svg">
 							<path d="M35,15h-15a10,10 0,0,0 0,20h25a10,10 0,0,0 10,-10m-12.5,0a10, 10 0,0,1 10, -10h25a10,10 0,0,1 0,20h-15" fill="none" stroke-width="5" stroke-linecap="round"/>
 						</svg>
 					{% else %}
-								<img src="{{ post.thumbnail }}">
+						<img src="{{ post.thumbnail }}" width="{{ post.thumbnail_width }}px" height="{{ post.thumbnail_height }}px">
 					{% endif %}
 					<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
 				</a>
 				{% endif %}
+
+				<div class="post_score">{{ post.score }}<span class="label"> Upvotes</span></div>
+				<div class="post_footer">
+					<a href="{{ post.permalink }}" class="post_comments">{{ post.comments }} Comments</a>
 				</div>
 			</div>
 			{% endif %}

templates/user.html

@@ -23,46 +23,39 @@
 
 			{% if post.flags.nsfw && prefs.hide_nsfw == "on" %}
 			{% else if post.title != "Comment" %}
-			<div class="post {% if post.flags.stickied %}stickied{% endif %} {% if prefs.layout == "card" && post.post_type == "image" %}card_post{% endif %}">
+			<div class="post {% if post.flags.stickied %}stickied{% endif %}">	
-				<div class="post_left">
-					<p class="post_score">{{ post.score }}</p>
-					{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
-				</div>
-				<div class="post_right">
-					<div class="post_text">
 				<p class="post_header">
 					<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
-							{% if post.author.flair.flair_parts.len() > 0 %}
+					<span class="dot">&bull;</span>
-							<small class="author_flair">{% call utils::render_flair(post.author.flair.flair_parts) %}</small>
+					<a class="post_author" href="/u/{{ post.author.name }}">u/{{ post.author.name }}</a>
-							{% endif %}
 					<span class="dot">&bull;</span>
 					<span class="created" title="{{ post.created }}">{{ post.rel_time }}</span>
 				</p>
 				<p class="post_title">
-							{% if post.flair.background_color == "Comment" %}
+					{% if post.flair.flair_parts.len() > 0 %}
-							{% else if post.flair.background_color == "" %}
-							{% else %}
 					<small class="post_flair" style="color:{{ post.flair.foreground_color }}; background:{{ post.flair.background_color }};">{% call utils::render_flair(post.flair.flair_parts) %}</small>
 					{% endif %}
-							<a href="{{ post.permalink }}">{{ post.title }}</a>
+					<a href="{{ post.permalink }}">{{ post.title }}</a>{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
 				</p>
-					</div>
-					
 				<!-- POST MEDIA/THUMBNAIL -->
-					{% if prefs.layout == "card" && post.post_type == "image" %}
+				{% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %}
-						<img class="post_media" src="{{ post.media }}"/>
+				<img class="post_media" width="{{ post.media_width }}px" height="{{ post.media_height}}px" src="{{ post.media }}"/>
 				{% else if post.post_type != "self" %}
 				<a class="post_thumbnail {% if post.thumbnail == "" %}no_thumbnail{% endif %}" href="{% if post.post_type == "link" %}{{ post.media }}{% else %}{{ post.permalink }}{% endif %}">
 					{% if post.thumbnail == "" %}
-								<svg viewBox="0 0 100 106" width="50" height="53" xmlns="http://www.w3.org/2000/svg">
+						<svg viewBox="0 0 100 106" width="140" height="53" xmlns="http://www.w3.org/2000/svg">
 							<path d="M35,15h-15a10,10 0,0,0 0,20h25a10,10 0,0,0 10,-10m-12.5,0a10, 10 0,0,1 10, -10h25a10,10 0,0,1 0,20h-15" fill="none" stroke-width="5" stroke-linecap="round"/>
 						</svg>
 					{% else %}
-								<img src="{{ post.thumbnail }}">
+						<img src="{{ post.thumbnail }}" width="{{ post.thumbnail_width }}px" height="{{ post.thumbnail_height }}px">
 					{% endif %}
 					<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
 				</a>
 				{% endif %}
+
+				<div class="post_score">{{ post.score }}<span class="label"> Upvotes</span></div>
+				<div class="post_footer">
+					<a href="{{ post.permalink }}" class="post_comments">{{ post.comments }} Comments</a>
 				</div>
 			</div>
 			{% else %}