Merge pull request #60 from robrobinbin/master
Add comment counter and other post improvements
This commit is contained in:
Spike
GitHub
commit
571ba3392c
@ -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(),
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
22
src/utils.rs
22
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() {
|
||||
@ -209,8 +214,14 @@ pub async fn media(data: &Value) -> (String, String) {
|
||||
post_type = "link";
|
||||
data["url"].as_str().unwrap_or_default().to_string()
|
||||
};
|
||||
|
||||
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)
|
||||
(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(),
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
303
static/style.css
303
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;
|
||||
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 {
|
||||
|
||||
@ -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">•</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">•</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">•</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">•</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 -->
|
||||
|
||||
@ -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">•</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">•</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">•</span>
|
||||
<a class="post_author" href="/u/{{ post.author.name }}">u/{{ post.author.name }}</a>
|
||||
<span class="dot">•</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 %}
|
||||
|
||||
@ -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">
|
||||
@ -49,4 +49,4 @@
|
||||
<p id="settings_note"><b>Note:</b> settings are saved in browser cookies. Clearing your cookie data will reset them.</p>
|
||||
<input id="save" type="submit" value="Save">
|
||||
</form>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
@ -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">•</span>
|
||||
<a class="post_author" href="/u/{{ post.author.name }}">u/{{ post.author.name }}</a>
|
||||
<span class="dot">•</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">•</span>
|
||||
<a class="post_author" href="/u/{{ post.author.name }}">u/{{ post.author.name }}</a>
|
||||
<span class="dot">•</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 %}
|
||||
|
||||
@ -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">•</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">•</span>
|
||||
<a class="post_author" href="/u/{{ post.author.name }}">u/{{ post.author.name }}</a>
|
||||
<span class="dot">•</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 %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user