From 090ca1a140ff1d213d9d34eb3c53ff70722617c5 Mon Sep 17 00:00:00 2001 From: Robin <8597693+robrobinbin@users.noreply.github.com> Date: Sun, 17 Jan 2021 20:39:57 +0100 Subject: [PATCH] Add comment counter and other post improvements --- src/post.rs | 7 +- src/utils.rs | 22 ++- static/style.css | 303 ++++++++++++++++++++------------------- templates/post.html | 80 +++++------ templates/search.html | 71 +++++---- templates/settings.html | 4 +- templates/subreddit.html | 68 +++++---- templates/user.html | 71 +++++---- 8 files changed, 320 insertions(+), 306 deletions(-) diff --git a/src/post.rs b/src/post.rs index ef71d00..b61490b 100644 --- a/src/post.rs +++ b/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(), } } diff --git a/src/utils.rs b/src/utils.rs index 586d581..5d44ac9 100644 --- a/src/utils.rs +++ b/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>, text_flair: Option<&str>) -> Vec { @@ -306,7 +317,7 @@ pub async fn fetch_posts(path: &str, fallback_title: String) -> Result<(Vec Result<(Vec .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 { diff --git a/templates/post.html b/templates/post.html index 26188d5..65dfb5b 100644 --- a/templates/post.html +++ b/templates/post.html @@ -41,50 +41,46 @@
-
-

{{ post.score }}

- {% if post.flags.nsfw %}
NSFW
{% endif %} + +

+ r/{{ post.community }} + • + u/{{ post.author.name }} + {% if post.author.flair.flair_parts.len() > 0 %} + {% call utils::render_flair(post.author.flair.flair_parts) %} + {% endif %} + • + {{ post.rel_time }} +

+

+ {{ post.title }} + {% if post.flair.flair_parts.len() > 0 %} + {% call utils::render_flair(post.flair.flair_parts) %} + {% endif %} + {% if post.flags.nsfw %} NSFW{% endif %} +

+ + + {% if post.post_type == "image" %} + + {% else if post.post_type == "video" || post.post_type == "gif" %} + + {% else if post.post_type == "link" %} + {{ post.media }} + {% endif %} + + +
{{ post.body }}
+
{{ post.score }} Upvotes
+
+ + +

{{ post.upvote_ratio }}% Upvoted

-
-
-

- r/{{ post.community }} - • - u/{{ post.author.name }} - {% if post.author.flair.flair_parts.len() > 0 %} - {% call utils::render_flair(post.author.flair.flair_parts) %} - {% endif %} - • - {{ post.rel_time }} -

- - {{ post.title }} - {% if post.flair.flair_parts.len() > 0 %} - {% call utils::render_flair(post.flair.flair_parts) %} - {% endif %} - - - {% if post.post_type == "image" %} - - {% else if post.post_type == "video" || post.post_type == "gif" %} - - {% else if post.post_type == "link" %} - {{ post.media }} - {% endif %} - - -
{{ post.body }}
-
- -

{{ post.upvote_ratio }}% Upvoted

-
- -
-
diff --git a/templates/search.html b/templates/search.html index 058761c..69edf23 100644 --- a/templates/search.html +++ b/templates/search.html @@ -38,46 +38,39 @@ {% if post.flags.nsfw && prefs.hide_nsfw == "on" %} {% else if post.title != "Comment" %} -
-
-

{{ post.score }}

- {% if post.flags.nsfw %}
NSFW
{% endif %} -
-
-
-

- r/{{ post.community }} - • - u/{{ post.author.name }} - {% if post.author.flair.flair_parts.len() > 0 %} - {% call utils::render_flair(post.author.flair.flair_parts) %} - {% endif %} - • - {{ post.rel_time }} -

-

- {% if post.flair.flair_parts.len() > 0 %} - {% call utils::render_flair(post.flair.flair_parts) %} - {% endif %} - {{ post.title }} -

-
- - - {% if prefs.layout == "card" && post.post_type == "image" %} - - {% else if post.post_type != "self" %} - - {% if post.thumbnail == "" %} - - - - {% else %} - - {% endif %} - {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} - +
+

+ r/{{ post.community }} + • + u/{{ post.author.name }} + • + {{ post.rel_time }} +

+

+ {% if post.flair.flair_parts.len() > 0 %} + {% call utils::render_flair(post.flair.flair_parts) %} {% endif %} + {{ post.title }}{% if post.flags.nsfw %} NSFW{% endif %} +

+ + {% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %} + + {% else if post.post_type != "self" %} + + {% if post.thumbnail == "" %} + + + + {% else %} + + {% endif %} + {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} + + {% endif %} + +
{{ post.score }} Upvotes
+
+ {{ post.comments }} Comments
{% else %} diff --git a/templates/settings.html b/templates/settings.html index 2eeb953..fcc6da9 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -27,7 +27,7 @@
@@ -49,4 +49,4 @@

Note: settings are saved in browser cookies. Clearing your cookie data will reset them.

-{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/templates/subreddit.html b/templates/subreddit.html index 3f0c904..3f1adb2 100644 --- a/templates/subreddit.html +++ b/templates/subreddit.html @@ -32,43 +32,39 @@ {% for post in posts %} {% if !(post.flags.nsfw && prefs.hide_nsfw == "on") %}
-
-
-

{{ post.score }}

- {% if post.flags.nsfw %}
NSFW
{% endif %} -
-
-
-

- r/{{ post.community }} - • - u/{{ post.author.name }} - • - {{ post.rel_time }} -

-

- {% if post.flair.flair_parts.len() > 0 %} - {% call utils::render_flair(post.flair.flair_parts) %} - {% endif %} - {{ post.title }} -

-
- - - {% if prefs.layout == "card" && post.post_type == "image" %} - - {% else if post.post_type != "self" %} - - {% if post.thumbnail == "" %} - - - - {% else %} - - {% endif %} - {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} - +
+

+ r/{{ post.community }} + • + u/{{ post.author.name }} + • + {{ post.rel_time }} +

+

+ {% if post.flair.flair_parts.len() > 0 %} + {% call utils::render_flair(post.flair.flair_parts) %} {% endif %} + {{ post.title }}{% if post.flags.nsfw %} NSFW{% endif %} +

+ + {% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %} + + {% else if post.post_type != "self" %} + + {% if post.thumbnail == "" %} + + + + {% else %} + + {% endif %} + {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} + + {% endif %} + +
{{ post.score }} Upvotes
+
+ {{ post.comments }} Comments
{% endif %} diff --git a/templates/user.html b/templates/user.html index 38981b8..4d8561e 100644 --- a/templates/user.html +++ b/templates/user.html @@ -23,46 +23,39 @@ {% if post.flags.nsfw && prefs.hide_nsfw == "on" %} {% else if post.title != "Comment" %} -
-
-

{{ post.score }}

- {% if post.flags.nsfw %}
NSFW
{% endif %} -
-
-
-

- r/{{ post.community }} - {% if post.author.flair.flair_parts.len() > 0 %} - {% call utils::render_flair(post.author.flair.flair_parts) %} - {% endif %} - • - {{ post.rel_time }} -

-

- {% if post.flair.background_color == "Comment" %} - {% else if post.flair.background_color == "" %} - {% else %} - {% call utils::render_flair(post.flair.flair_parts) %} - {% endif %} - {{ post.title }} -

-
- - - {% if prefs.layout == "card" && post.post_type == "image" %} - - {% else if post.post_type != "self" %} - - {% if post.thumbnail == "" %} - - - - {% else %} - - {% endif %} - {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} - +
+

+ r/{{ post.community }} + • + u/{{ post.author.name }} + • + {{ post.rel_time }} +

+

+ {% if post.flair.flair_parts.len() > 0 %} + {% call utils::render_flair(post.flair.flair_parts) %} {% endif %} + {{ post.title }}{% if post.flags.nsfw %} NSFW{% endif %} +

+ + {% if (prefs.layout == "" || prefs.layout == "card") && post.post_type == "image" %} + + {% else if post.post_type != "self" %} + + {% if post.thumbnail == "" %} + + + + {% else %} + + {% endif %} + {% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %} + + {% endif %} + +
{{ post.score }} Upvotes
+
+ {{ post.comments }} Comments
{% else %}