Add comment counter and other post improvements
This commit is contained in:
parent
6127f2a90c
commit
090ca1a140
@ -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;
|
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
|
// 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
|
// Build a post using data parsed from Reddit post API
|
||||||
Post {
|
Post {
|
||||||
@ -119,6 +119,11 @@ async fn parse_post(json: &serde_json::Value) -> Post {
|
|||||||
domain: val(post, "domain"),
|
domain: val(post, "domain"),
|
||||||
rel_time,
|
rel_time,
|
||||||
created,
|
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 domain: String,
|
||||||
pub rel_time: String,
|
pub rel_time: String,
|
||||||
pub created: 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
|
// 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;
|
let post_type: &str;
|
||||||
// If post is a video, return the video
|
// If post is a video, return the video
|
||||||
let url = if data["preview"]["reddit_video_preview"]["fallback_url"].is_string() {
|
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()
|
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> {
|
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");
|
let title = val(post, "title");
|
||||||
|
|
||||||
// Determine the type of media along with the media URL
|
// 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 {
|
posts.push(Post {
|
||||||
id: val(post, "id"),
|
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"),
|
permalink: val(post, "permalink"),
|
||||||
rel_time,
|
rel_time,
|
||||||
created,
|
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(),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
299
static/style.css
299
static/style.css
@ -106,7 +106,7 @@ a {
|
|||||||
transition: 0.2s all;
|
transition: 0.2s all;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:not(.post_right):hover {
|
a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -401,8 +401,14 @@ a.search_subreddit:hover {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background: var(--post);
|
background: var(--post);
|
||||||
box-shadow: var(--shadow);
|
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; }
|
.post:not(:last-child) { margin-bottom: 10px; }
|
||||||
@ -411,53 +417,32 @@ a.search_subreddit:hover {
|
|||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post.highlighted > .post_right {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post:hover {
|
.post:hover {
|
||||||
background: var(--foreground);
|
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;
|
text-align: center;
|
||||||
background: var(--foreground);
|
background: var(--foreground);
|
||||||
border-radius: 5px 0 0 5px;
|
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 {
|
.post_subreddit {
|
||||||
@ -467,82 +452,8 @@ a.search_subreddit:hover {
|
|||||||
.post_title {
|
.post_title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
line-height: 1.5;
|
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 {
|
.post_flair {
|
||||||
@ -567,14 +478,104 @@ a.search_subreddit:hover {
|
|||||||
|
|
||||||
.nsfw {
|
.nsfw {
|
||||||
color: var(--nsfw);
|
color: var(--nsfw);
|
||||||
margin-top: 20px;
|
margin-left: 5px;
|
||||||
border: 1px solid var(--nsfw);
|
border: 1px solid var(--nsfw);
|
||||||
padding: 5px;
|
padding: 3px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-weight: bold;
|
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 {
|
.stickied {
|
||||||
--accent: var(--green);
|
--accent: var(--green);
|
||||||
border: 1px solid var(--green);
|
border: 1px solid var(--green);
|
||||||
@ -715,20 +716,27 @@ a.search_subreddit:hover {
|
|||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.compact .post_left {
|
.compact .post_score {
|
||||||
|
padding-top: 15px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.compact .post_header {
|
.compact .post_header {
|
||||||
|
margin: 15px 15px 2.5px 15px;
|
||||||
font-size: 14px;
|
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 {
|
.compact .post_thumbnail {
|
||||||
@ -740,15 +748,6 @@ a.search_subreddit:hover {
|
|||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card_post .post_right {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card_post:not(.highlighted) .post_media {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Settings */
|
/* Settings */
|
||||||
|
|
||||||
#settings {
|
#settings {
|
||||||
@ -877,26 +876,42 @@ td, th {
|
|||||||
|
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (max-width: 480px) {
|
||||||
.post {
|
.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 {
|
.post_header {
|
||||||
font-size: 14px;
|
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 {
|
.replies > .comment {
|
||||||
|
@ -41,50 +41,46 @@
|
|||||||
|
|
||||||
<!-- POST CONTENT -->
|
<!-- POST CONTENT -->
|
||||||
<div class="post highlighted">
|
<div class="post highlighted">
|
||||||
<div class="post_left">
|
|
||||||
<p class="post_score">{{ post.score }}</p>
|
<p class="post_header">
|
||||||
{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
|
<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>
|
||||||
<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>
|
</div>
|
||||||
|
|
||||||
<!-- SORT FORM -->
|
<!-- SORT FORM -->
|
||||||
|
@ -38,46 +38,39 @@
|
|||||||
|
|
||||||
{% if post.flags.nsfw && prefs.hide_nsfw == "on" %}
|
{% if post.flags.nsfw && prefs.hide_nsfw == "on" %}
|
||||||
{% else if post.title != "Comment" %}
|
{% 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_header">
|
||||||
<p class="post_score">{{ post.score }}</p>
|
<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
|
||||||
{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
|
<span class="dot">•</span>
|
||||||
</div>
|
<a class="post_author" href="/u/{{ post.author.name }}">u/{{ post.author.name }}</a>
|
||||||
<div class="post_right">
|
<span class="dot">•</span>
|
||||||
<div class="post_text">
|
<span class="created" title="{{ post.created }}">{{ post.rel_time }}</span>
|
||||||
<p class="post_header">
|
</p>
|
||||||
<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
|
<p class="post_title">
|
||||||
<span class="dot">•</span>
|
{% if post.flair.flair_parts.len() > 0 %}
|
||||||
<a class="post_author" href="/u/{{ post.author.name }}">u/{{ post.author.name }}</a>
|
<small class="post_flair" style="color:{{ post.flair.foreground_color }}; background:{{ post.flair.background_color }};">{% call utils::render_flair(post.flair.flair_parts) %}</small>
|
||||||
{% 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>
|
|
||||||
{% endif %}
|
{% 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>
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
<div id="layout">
|
<div id="layout">
|
||||||
<label for="layout">Layout:</label>
|
<label for="layout">Layout:</label>
|
||||||
<select name="layout">
|
<select name="layout">
|
||||||
{% call utils::options(prefs.layout, ["card", "clean", "compact"], "clean") %}
|
{% call utils::options(prefs.layout, ["card", "clean", "compact"], "card") %}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div id="wide">
|
<div id="wide">
|
||||||
|
@ -32,43 +32,39 @@
|
|||||||
{% for post in posts %}
|
{% for post in posts %}
|
||||||
{% if !(post.flags.nsfw && prefs.hide_nsfw == "on") %}
|
{% if !(post.flags.nsfw && prefs.hide_nsfw == "on") %}
|
||||||
<hr class="sep" />
|
<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_header">
|
||||||
<p class="post_score">{{ post.score }}</p>
|
<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
|
||||||
{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
|
<span class="dot">•</span>
|
||||||
</div>
|
<a class="post_author" href="/u/{{ post.author.name }}">u/{{ post.author.name }}</a>
|
||||||
<div class="post_right">
|
<span class="dot">•</span>
|
||||||
<div class="post_text">
|
<span class="created" title="{{ post.created }}">{{ post.rel_time }}</span>
|
||||||
<p class="post_header">
|
</p>
|
||||||
<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
|
<p class="post_title">
|
||||||
<span class="dot">•</span>
|
{% if post.flair.flair_parts.len() > 0 %}
|
||||||
<a class="post_author" href="/u/{{ post.author.name }}">u/{{ post.author.name }}</a>
|
<small class="post_flair" style="color:{{ post.flair.foreground_color }}; background:{{ post.flair.background_color }};">{% call utils::render_flair(post.flair.flair_parts) %}</small>
|
||||||
<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>
|
|
||||||
{% endif %}
|
{% 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>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -23,46 +23,39 @@
|
|||||||
|
|
||||||
{% if post.flags.nsfw && prefs.hide_nsfw == "on" %}
|
{% if post.flags.nsfw && prefs.hide_nsfw == "on" %}
|
||||||
{% else if post.title != "Comment" %}
|
{% 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_header">
|
||||||
<p class="post_score">{{ post.score }}</p>
|
<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
|
||||||
{% if post.flags.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
|
<span class="dot">•</span>
|
||||||
</div>
|
<a class="post_author" href="/u/{{ post.author.name }}">u/{{ post.author.name }}</a>
|
||||||
<div class="post_right">
|
<span class="dot">•</span>
|
||||||
<div class="post_text">
|
<span class="created" title="{{ post.created }}">{{ post.rel_time }}</span>
|
||||||
<p class="post_header">
|
</p>
|
||||||
<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
|
<p class="post_title">
|
||||||
{% if post.author.flair.flair_parts.len() > 0 %}
|
{% if post.flair.flair_parts.len() > 0 %}
|
||||||
<small class="author_flair">{% call utils::render_flair(post.author.flair.flair_parts) %}</small>
|
<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 %}
|
|
||||||
<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>
|
|
||||||
{% endif %}
|
{% 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>
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
Loading…
Reference in New Issue
Block a user