From 04310c58e07ffd2e2d4c9e85553844b262e6d00f Mon Sep 17 00:00:00 2001 From: spikecodes <19519553+spikecodes@users.noreply.github.com> Date: Sat, 5 Dec 2020 20:54:43 -0800 Subject: [PATCH] Mobile Responsive --- Cargo.lock | 38 +++++++++++----------------- Cargo.toml | 2 +- src/post.rs | 16 ++++++------ src/utils.rs | 2 -- static/style.css | 54 +++++++++++++++++++++++++++++----------- templates/base.html | 1 + templates/popular.html | 6 ++--- templates/post.html | 12 ++++----- templates/subreddit.html | 6 ++--- templates/user.html | 12 ++++----- 10 files changed, 82 insertions(+), 67 deletions(-) diff --git a/Cargo.lock b/Cargo.lock index 4db12ce..e5cc7b4 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -88,9 +88,9 @@ dependencies = [ [[package]] name = "actix-macros" -version = "0.1.2" +version = "0.1.3" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "a60f9ba7c4e6df97f3aacb14bb5c0cd7d98a49dcbaed0d7f292912ad9a6a3ed2" +checksum = "b4ca8ce00b267af8ccebbd647de0d61e0674b6e61185cc7a592ff88772bed655" dependencies = [ "quote 1.0.7", "syn 1.0.53", @@ -476,9 +476,9 @@ dependencies = [ [[package]] name = "cc" -version = "1.0.65" +version = "1.0.66" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "95752358c8f7552394baf48cd82695b345628ad3f170d607de3ca03b8dacca15" +checksum = "4c0496836a84f8d0495758516b8621a622beb77c0fed418570e50764093ced48" [[package]] name = "cfg-if" @@ -505,15 +505,6 @@ dependencies = [ "winapi 0.3.9", ] -[[package]] -name = "cloudabi" -version = "0.1.0" -source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "4344512281c643ae7638bbabc3af17a11307803ec8f0fcad9fae512a8bf36467" -dependencies = [ - "bitflags", -] - [[package]] name = "console_error_panic_hook" version = "0.1.6" @@ -1023,7 +1014,7 @@ checksum = "4d58d1b70b004888f764dfbf6a26a3b0342a1632d33968e4a179d8011c760614" [[package]] name = "libreddit" -version = "0.1.9" +version = "0.1.10" dependencies = [ "actix-web", "askama", @@ -1235,12 +1226,11 @@ dependencies = [ [[package]] name = "parking_lot_core" -version = "0.8.0" +version = "0.8.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "c361aa727dd08437f2f1447be8b59a33b0edd15e0fcee698f935613d9efbca9b" +checksum = "d7c6d9b8427445284a09c55be860a15855ab580a417ccad9da88f5a06787ced0" dependencies = [ - "cfg-if 0.1.10", - "cloudabi", + "cfg-if 1.0.0", "instant", "libc", "redox_syscall", @@ -1584,18 +1574,18 @@ checksum = "388a1df253eca08550bef6c72392cfe7c30914bf41df5269b68cbd6ff8f570a3" [[package]] name = "serde" -version = "1.0.117" +version = "1.0.118" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "b88fa983de7720629c9387e9f517353ed404164b1e482c970a90c1a4aaf7dc1a" +checksum = "06c64263859d87aa2eb554587e2d23183398d617427327cf2b3d0ed8c69e4800" dependencies = [ "serde_derive", ] [[package]] name = "serde_derive" -version = "1.0.117" +version = "1.0.118" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "cbd1ae72adb44aab48f325a02444a5fc079349a8d804c1fc922aed3f7454c74e" +checksum = "c84d3526699cd55261af4b941e4e725444df67aa4f9e6a3564f18030d12672df" dependencies = [ "proc-macro2 1.0.24", "quote 1.0.7", @@ -1661,9 +1651,9 @@ checksum = "c111b5bd5695e56cffe5129854aa230b39c93a305372fdbb2668ca2394eea9f8" [[package]] name = "smallvec" -version = "1.5.0" +version = "1.5.1" source = "registry+https://github.com/rust-lang/crates.io-index" -checksum = "7acad6f34eb9e8a259d3283d1e8c1d34d7415943d4895f65cc73813c7396fc85" +checksum = "ae524f056d7d770e174287294f562e95044c68e88dec909a00d2094805db9d75" [[package]] name = "socket2" diff --git a/Cargo.toml b/Cargo.toml index 3b28464..76798fc 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -3,7 +3,7 @@ name = "libreddit" description = " Alternative private front-end to Reddit" license = "AGPL-3.0" repository = "https://github.com/spikecodes/libreddit" -version = "0.1.9" +version = "0.1.10" authors = ["spikecodes <19519553+spikecodes@users.noreply.github.com>"] edition = "2018" diff --git a/src/post.rs b/src/post.rs index 8af93cb..879a400 100644 --- a/src/post.rs +++ b/src/post.rs @@ -16,7 +16,7 @@ struct PostTemplate { async fn render(id: String, sort: String) -> Result { // Log the post ID being fetched - println!("id: {}", id); + dbg!(&id); // Build the Reddit JSON API url let url: String = format!("https://reddit.com/{}.json?sort={}", id, sort); @@ -38,8 +38,8 @@ async fn render(id: String, sort: String) -> Result { let res = req.unwrap(); // Parse the JSON into Post and Comment structs - let post = parse_post(res.clone()).await; - let comments = parse_comments(res).await; + let post = parse_post(res[0].clone()).await; + let comments = parse_comments(res[1].clone()).await; // Use the Post and Comment structs to generate a website to show users let s = PostTemplate { @@ -83,8 +83,6 @@ async fn media(data: &serde_json::Value) -> (String, String) { data["url"].as_str().unwrap().to_string() }; - dbg!(post_type, url.to_string()); - (post_type.to_string(), url) } @@ -104,7 +102,7 @@ async fn markdown_to_html(md: &str) -> String { // POSTS async fn parse_post(json: serde_json::Value) -> Result { - let post_data: &serde_json::Value = &json[0]["data"]["children"][0]; + let post_data: &serde_json::Value = &json["data"]["children"][0]; let unix_time: i64 = post_data["data"]["created_utc"].as_f64().unwrap().round() as i64; let score = post_data["data"]["score"].as_i64().unwrap(); @@ -137,7 +135,7 @@ async fn parse_post(json: serde_json::Value) -> Result { // COMMENTS async fn parse_comments(json: serde_json::Value) -> Result, &'static str> { - let comment_data = json[1]["data"]["children"].as_array().unwrap(); + let comment_data = json["data"]["children"].as_array().unwrap(); let mut comments: Vec = Vec::new(); @@ -146,7 +144,9 @@ async fn parse_comments(json: serde_json::Value) -> Result, &'stati let score = comment["data"]["score"].as_i64().unwrap_or(0); let body = markdown_to_html(comment["data"]["body"].as_str().unwrap_or("")).await; - // println!("{}", body); + // if comment["data"]["replies"].is_object() { + // let replies = parse_comments(comment["data"]["replies"].clone()).await.unwrap(); + // } comments.push(Comment { body: body, diff --git a/src/utils.rs b/src/utils.rs index 066d02c..eafae7f 100644 --- a/src/utils.rs +++ b/src/utils.rs @@ -189,8 +189,6 @@ pub async fn request(url: String) -> Result { // Read the body of the response let body = res.text().await.unwrap(); - dbg!(url.clone()); - // Parse the response from Reddit as JSON let json: Value = from_str(body.as_str()).unwrap_or(Value::Null); diff --git a/static/style.css b/static/style.css index ad367b4..4357fe6 100644 --- a/static/style.css +++ b/static/style.css @@ -180,14 +180,10 @@ span { padding: 5px; } -.post_right > p > span, .comment_right > p > span { +.datetime { float: right; } -.post_title { - font-size: 20px; -} - .post_subreddit { font-weight: bold; } @@ -211,13 +207,13 @@ span { color: aqua; } - .post_right > p { opacity: 0.75; + font-size: 16px; } .post_media { - max-width: 500px; + max-width: 90%; align-self: center; } @@ -246,19 +242,21 @@ span { flex-shrink: 0; padding: 10px; border-radius: 15px; + max-width: 20%; } .post_thumbnail[src=""] { - border: none; + display: none; } small { - background: aqua; - color: black; - padding: 5px; - border-radius: 5px; - font-size: 12px; - font-weight: bold; + background: aqua; + color: black; + padding: 5px; + margin-right: 5px; + border-radius: 5px; + font-size: 12px; + font-weight: bold; } /* Comment */ @@ -367,4 +365,32 @@ table { td, th { border: 1px #333 solid; padding: 0.5em; +} + +/* Mobile */ + +@media screen and (max-width: 480px) { + .post { + flex-direction: column-reverse; + } + + .post_left { + border-radius: 0px 0px 5px 5px; + } + + .post_right { + padding: 20px; + } + + .post_score { + margin-top: 0; + } + + .post_thumbnail { + max-width: initial; + } + + .datetime { + width: 100%; + } } \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index 7e44e79..c882d93 100644 --- a/templates/base.html +++ b/templates/base.html @@ -4,6 +4,7 @@ {% block head %} {% block title %}{% endblock %} + {% block sortstyle %} diff --git a/templates/popular.html b/templates/popular.html index ce809b9..7c8cb77 100644 --- a/templates/popular.html +++ b/templates/popular.html @@ -13,13 +13,13 @@

{{ post.score }}

-

+

r/{{ post.community }} • Posted by u/{{ post.author }} - {{ post.time }} -

+ {{ post.time }} +

{% if post.flair.0 != "" %} {{ post.flair.0 }} diff --git a/templates/post.html b/templates/post.html index 73fe256..5c6874e 100644 --- a/templates/post.html +++ b/templates/post.html @@ -10,13 +10,13 @@

{{ post.score }}

-

+

r/{{ post.community }} • Posted by u/{{ post.author }} - {{ post.time }} -

+ {{ post.time }} +

{{ post.title }} {% if post.flair.0 != "" %} @@ -47,10 +47,10 @@

{{ comment.score }}

-

+

Posted by u/{{ comment.author }} - {{ comment.time }} -

+ {{ comment.time }} +

{{ comment.body }}


diff --git a/templates/subreddit.html b/templates/subreddit.html index a96ad5d..2f93ba3 100644 --- a/templates/subreddit.html +++ b/templates/subreddit.html @@ -31,13 +31,13 @@

{{ post.score }}

-

+

r/{{ sub.name }} • Posted by u/{{ post.author }} - {{ post.time }} -

+ {{ post.time }} +

{% if post.flair.0 != "" %} {{ post.flair.0 }} diff --git a/templates/user.html b/templates/user.html index d303009..afa534e 100644 --- a/templates/user.html +++ b/templates/user.html @@ -31,13 +31,13 @@

{{ post.score }}

-

+

r/{{ post.community }} • Posted by u/{{ post.author }} - {{ post.time }} -

+ {{ post.time }} +

{% if post.flair.0 == "Comment" %} {% else if post.flair.0 == "" %} @@ -56,10 +56,10 @@

{{ post.score }}

-

+

COMMENT - {{ post.time }} -

+ {{ post.time }} +

{{ post.body }}