Merge pull request #60 from robrobinbin/master

Add comment counter and other post improvements
This commit is contained in:
Spike 2021-01-17 20:05:01 +00:00 committed by GitHub
commit 571ba3392c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 320 additions and 306 deletions

View File

@ -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(),
}
}

View File

@ -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(),
});
}

View File

@ -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;
transition: 0.2s all;
display: grid;
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 {
display: flex;
overflow-wrap: break-word;
}
.post_left {
.post_score {
padding-top: 20px;
color: var(--accent);
grid-area: post_score;
text-align: center;
background: var(--foreground);
border-radius: 5px 0 0 5px;
flex-direction: column;
min-width: 50px;
transition: 0.2s all;
transition: 0.2s background-color;
}
.post_score {
margin-top: 20px;
color: var(--accent);
.post:hover > .post_score {
background: var(--highlighted);
}
#post_footer {
display: flex;
justify-content: space-between;
opacity: 0.5;
font-size: 14px;
.post_score .label {
display: none;
}
#post_links {
display: flex;
list-style: none;
padding: 0;
font-weight: bold;
}
#post_links > li {
margin-right: 15px;
.post_header {
margin: 20px 20px 5px 20px;
grid-area: post_header;
}
.post_subreddit {
@ -467,82 +452,8 @@ a.search_subreddit:hover {
.post_title {
font-size: 16px;
line-height: 1.5;
margin-top: 10px;
}
.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;
margin: 5px 20px;
grid-area: post_title;
}
.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 {
margin-top: 5px;
.compact .post_title, .compact #post_url, .compact .post_body {
margin: 2.5px 15px;
}
.compact .post_text {
padding: 10px;
.compact .post_media {
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 {
border-radius: 0 0 5px 5px;
flex-direction: row;
justify-content: center;
align-items: center;
}
.nsfw {
margin: 5px 0px 5px 10px;
}
.post_score {
margin: 5px 0;
.post_footer {
margin-left: 15px;
}
.replies > .comment {

View File

@ -41,50 +41,46 @@
<!-- 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 %}
<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>
<p class="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 %}
{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
</p>
<!-- POST MEDIA -->
{% if post.post_type == "image" %}
<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" %}
<a id="post_url" href="{{ post.media }}">{{ post.media }}</a>
{% endif %}
<!-- POST BODY -->
<div class="post_body">{{ post.body }}</div>
<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>
</ul>
<p>{{ post.upvote_ratio }}% Upvoted</p>
</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>
<a href="{{ post.permalink }}" class="post_title">
{{ post.title }}
{% 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>
<!-- POST MEDIA -->
{% if post.post_type == "image" %}
<img class="post_media" 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" %}
<a id="post_url" href="{{ post.media }}">{{ post.media }}</a>
{% endif %}
<!-- POST BODY -->
<div class="post_body">{{ post.body }}</div>
<div id="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>
</ul>
<p>{{ post.upvote_ratio }}% Upvoted</p>
</div>
</div>
</div>
</div>
<!-- SORT FORM -->

View File

@ -38,46 +38,39 @@
{% 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_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>
<p class="post_title">
{% 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>
</p>
</div>
<!-- POST MEDIA/THUMBNAIL -->
{% if prefs.layout == "card" && post.post_type == "image" %}
<img class="post_media" 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">
<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 }}">
{% endif %}
<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
</a>
<div class="post {% if post.flags.stickied %}stickied{% endif %}">
<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>
<span class="dot">&bull;</span>
<span class="created" title="{{ post.created }}">{{ post.rel_time }}</span>
</p>
<p class="post_title">
{% 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>{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
</p>
<!-- POST MEDIA/THUMBNAIL -->
{% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %}
<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="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 }}" 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 %}

View File

@ -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">

View File

@ -32,43 +32,39 @@
{% 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_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>
<span class="dot">&bull;</span>
<span class="created" title="{{ post.created }}">{{ post.rel_time }}</span>
</p>
<p class="post_title">
{% 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>
</p>
</div>
<!-- POST MEDIA/THUMBNAIL -->
{% if prefs.layout == "card" && post.post_type == "image" %}
<img class="post_media" 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">
<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 }}">
{% endif %}
<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
</a>
<div class="post {% if post.flags.stickied %}stickied{% endif %}">
<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>
<span class="dot">&bull;</span>
<span class="created" title="{{ post.created }}">{{ post.rel_time }}</span>
</p>
<p class="post_title">
{% 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>{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
</p>
<!-- POST MEDIA/THUMBNAIL -->
{% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %}
<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="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 }}" 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 %}

View File

@ -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_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 %}
<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>
<p class="post_title">
{% if post.flair.background_color == "Comment" %}
{% 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>
</p>
</div>
<!-- POST MEDIA/THUMBNAIL -->
{% if prefs.layout == "card" && post.post_type == "image" %}
<img class="post_media" 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">
<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 }}">
{% endif %}
<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
</a>
<div class="post {% if post.flags.stickied %}stickied{% endif %}">
<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>
<span class="dot">&bull;</span>
<span class="created" title="{{ post.created }}">{{ post.rel_time }}</span>
</p>
<p class="post_title">
{% 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>{% if post.flags.nsfw %} <small class="nsfw">NSFW</small>{% endif %}
</p>
<!-- POST MEDIA/THUMBNAIL -->
{% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %}
<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="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 }}" 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 %}