Mobile Responsive
This commit is contained in:
spikecodes
parent
6def67ddfe
commit
04310c58e0
10 changed files with 82 additions and 67 deletions
38
Cargo.lock
generated
38
Cargo.lock
generated
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
||||
|
|
|
|||
16
src/post.rs
16
src/post.rs
|
|
@ -16,7 +16,7 @@ struct PostTemplate {
|
|||
|
||||
async fn render(id: String, sort: String) -> Result<HttpResponse> {
|
||||
// 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<HttpResponse> {
|
|||
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<Post, &'static str> {
|
||||
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<Post, &'static str> {
|
|||
|
||||
// COMMENTS
|
||||
async fn parse_comments(json: serde_json::Value) -> Result<Vec<Comment>, &'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<Comment> = Vec::new();
|
||||
|
||||
|
|
@ -146,7 +144,9 @@ async fn parse_comments(json: serde_json::Value) -> Result<Vec<Comment>, &'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,
|
||||
|
|
|
|||
|
|
@ -189,8 +189,6 @@ pub async fn request(url: String) -> Result<serde_json::Value, &'static str> {
|
|||
// 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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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,16 +242,18 @@ 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;
|
||||
margin-right: 5px;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
|
@ -368,3 +366,31 @@ 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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
{% block head %}
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
<meta name="description" content="View on Libreddit, an alternative private front-end to Reddit.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
{% block sortstyle %}
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
<h3 class="post_score">{{ post.score }}</h3>
|
||||
</div>
|
||||
<div class="post_right">
|
||||
<p>
|
||||
<h4>
|
||||
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
|
||||
•
|
||||
Posted by
|
||||
<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
|
||||
<span style="float: right;">{{ post.time }}</span>
|
||||
</p>
|
||||
<span class="datetime" style="float: right;">{{ post.time }}</span>
|
||||
</h4>
|
||||
<h3 class="post_title">
|
||||
{% if post.flair.0 != "" %}
|
||||
<small style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
<h3 class="post_score">{{ post.score }}</h3>
|
||||
</div>
|
||||
<div class="post_right">
|
||||
<p>
|
||||
<h4>
|
||||
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
|
||||
•
|
||||
Posted by
|
||||
<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
|
||||
<span>{{ post.time }}</span>
|
||||
</p>
|
||||
<span class="datetime">{{ post.time }}</span>
|
||||
</h4>
|
||||
<h3 class="post_title">
|
||||
{{ post.title }}
|
||||
{% if post.flair.0 != "" %}
|
||||
|
|
@ -47,10 +47,10 @@
|
|||
<h3 class="comment_score">{{ comment.score }}</h3>
|
||||
</div>
|
||||
<div class="comment_right">
|
||||
<p>
|
||||
<h4>
|
||||
Posted by <a class="comment_author" href="/u/{{ comment.author }}">u/{{ comment.author }}</a>
|
||||
<span>{{ comment.time }}</span>
|
||||
</p>
|
||||
<span class="datetime">{{ comment.time }}</span>
|
||||
</h4>
|
||||
<h4 class="comment_body">{{ comment.body }}</h4>
|
||||
</div>
|
||||
</div><br>
|
||||
|
|
|
|||
|
|
@ -31,13 +31,13 @@
|
|||
<h3 class="post_score">{{ post.score }}</h3>
|
||||
</div>
|
||||
<div class="post_right">
|
||||
<p>
|
||||
<h4>
|
||||
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ sub.name }}</a></b>
|
||||
•
|
||||
Posted by
|
||||
<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
|
||||
<span>{{ post.time }}</span>
|
||||
</p>
|
||||
<span class="datetime">{{ post.time }}</span>
|
||||
</h4>
|
||||
<h3 class="post_title">
|
||||
{% if post.flair.0 != "" %}
|
||||
<small style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
|
||||
|
|
|
|||
|
|
@ -31,13 +31,13 @@
|
|||
<h3 class="post_score">{{ post.score }}</h3>
|
||||
</div>
|
||||
<div class="post_right">
|
||||
<p>
|
||||
<h4>
|
||||
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
|
||||
•
|
||||
Posted by
|
||||
<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
|
||||
<span style="float: right;">{{ post.time }}</span>
|
||||
</p>
|
||||
<span class="datetime" style="float: right;">{{ post.time }}</span>
|
||||
</h4>
|
||||
<h3 class="post_title">
|
||||
{% if post.flair.0 == "Comment" %}
|
||||
{% else if post.flair.0 == "" %}
|
||||
|
|
@ -56,10 +56,10 @@
|
|||
<h3 class="comment_score">{{ post.score }}</h3>
|
||||
</div>
|
||||
<div class="comment_right">
|
||||
<p>
|
||||
<h4>
|
||||
COMMENT
|
||||
<span>{{ post.time }}</span>
|
||||
</p>
|
||||
<span class="datetime">{{ post.time }}</span>
|
||||
</h4>
|
||||
<h4 class="comment_body">{{ post.body }}</h4>
|
||||
</div>
|
||||
</div><br>
|
||||
|
|
|
|||
Loading…
Reference in a new issue