From ace21b21d5166cd7ddca6c0f9e146eb56e59f33f Mon Sep 17 00:00:00 2001 From: spikecodes <19519553+spikecodes@users.noreply.github.com> Date: Wed, 23 Dec 2020 22:16:04 -0800 Subject: [PATCH] Redesign User/Subreddit About Boxes --- src/user.rs | 5 ++ src/utils.rs | 1 + static/style.css | 83 ++++++++++++++----------- templates/popular.html | 84 +++++++++++++------------- templates/post.html | 127 ++++++++++++++++++++------------------- templates/subreddit.html | 111 +++++++++++++++++----------------- templates/user.html | 122 +++++++++++++++++++------------------ 7 files changed, 282 insertions(+), 251 deletions(-) diff --git a/src/user.rs b/src/user.rs index db13b68..c7c15d6 100644 --- a/src/user.rs +++ b/src/user.rs @@ -2,6 +2,7 @@ use crate::utils::{fetch_posts, format_url, nested_val, request, ErrorTemplate, Params, Post, User}; use actix_web::{http::StatusCode, web, HttpResponse, Result}; use askama::Template; +use chrono::{TimeZone, Utc}; // STRUCTS #[derive(Template)] @@ -62,11 +63,15 @@ async fn user(name: &String) -> Result { // Otherwise, grab the JSON output from the request let res = req.unwrap(); + // Grab creation date as unix timestamp + let created: i64 = res["data"]["created"].as_f64().unwrap().round() as i64; + // Parse the JSON output into a User struct Ok(User { name: name.to_string(), icon: format_url(nested_val(&res, "subreddit", "icon_img").await).await, karma: res["data"]["total_karma"].as_i64().unwrap(), + created: Utc.timestamp(created, 0).format("%b %e, %Y").to_string(), banner: nested_val(&res, "subreddit", "banner_img").await, description: nested_val(&res, "subreddit", "public_description").await, }) diff --git a/src/utils.rs b/src/utils.rs index d731e7f..d3bc102 100644 --- a/src/utils.rs +++ b/src/utils.rs @@ -46,6 +46,7 @@ pub struct User { pub name: String, pub icon: String, pub karma: i64, + pub created: String, pub banner: String, pub description: String, } diff --git a/static/style.css b/static/style.css index 68467d2..a68b5db 100644 --- a/static/style.css +++ b/static/style.css @@ -39,10 +39,11 @@ nav { } main { + display: flex; + justify-content: center; max-width: 750px; + padding: 10px 20px; margin: 0 auto; - margin-top: 25px; - padding: 0px 10px; } footer { @@ -71,60 +72,60 @@ a:not(.post_right):hover { background: #151515; } +aside { + /* background: #151515; */ + padding: 20px; + height: max-content; + border-radius: 5px; + flex-grow: 1; + margin: 80px 20px 0px 20px; + background: var(--outside); +} + #version { color: white; opacity: 25%; } -/* Subreddit */ +/* User & Subreddit */ -.subreddit { - max-width: 750px; +.user, .subreddit { + max-width: 350px; margin: 0 auto; display: flex; - padding-bottom: 25px; + flex-direction: column; + align-items: center; } -.subreddit_name { - margin-bottom: 10px; -} - -.subreddit_right { - display: flex; - flex-flow: column; - justify-content: center; -} - -.subreddit_icon { +.user_icon, .subreddit_icon { width: 100px; height: 100px; + border: 2px solid var(--accent); border-radius: 100%; - padding: 20px; + padding: 10px; + margin: 10px; } -#stats { +.user_name, .subreddit_name { margin-top: 10px; } -/* User */ - -.user { - max-width: 750px; - margin: 0 auto; - display: flex; +.user_description, .subreddit_description { + margin: 10px 20px; + text-align: center; + font-size: 15px; } -.user_right { - display: flex; - flex-flow: column; - justify-content: center; +.user_details, .subreddit_details { + display: grid; + grid-template-columns: repeat(2, 1fr); + margin-top: 15px; + grid-column-gap: 20px; } -.user_icon { - width: 100px; - height: 100px; - border-radius: 100%; - padding: 20px; +.user_details > label, .subreddit_details > label { + color: var(--accent); + font-size: 15px; } /* Sorting */ @@ -178,6 +179,10 @@ a:not(.post_right):hover { display: flex; } +.post.highlighted { + margin-top: 20px; +} + .post:hover { background: var(--foreground); } @@ -471,4 +476,14 @@ td, th { .datetime { width: 100%; } +} + +@media screen and (max-width: 800px) { + main { + flex-direction: column-reverse; + } + + aside { + margin: 20px 0px 0px 0px; + } } \ No newline at end of file diff --git a/templates/popular.html b/templates/popular.html index 6776c0f..1708b9d 100644 --- a/templates/popular.html +++ b/templates/popular.html @@ -1,46 +1,48 @@ {% extends "base.html" %} {% block content %} -
- -
- {% for post in posts %} -
-
-

{{ post.score }}

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

- r/{{ post.community }} - • u/{{ post.author }} - {% if post.author_flair.0 != "" %} - {{ post.author_flair.0 }} - {% endif %} - {{ post.time }} -

-

- {% if post.flair.0 != "" %} - {{ post.flair.0 }} - {% endif %} - {{ post.title }} -

-
- -

- {% endfor %} +
+
+ +
+ {% for post in posts %} +
+
+

{{ post.score }}

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

+ r/{{ post.community }} + • u/{{ post.author }} + {% if post.author_flair.0 != "" %} + {{ post.author_flair.0 }} + {% endif %} + {{ post.time }} +

+

+ {% if post.flair.0 != "" %} + {{ post.flair.0 }} + {% endif %} + {{ post.title }} +

+
+ +

+ {% endfor %} -
- {% if ends.0 != "" %} - PREV - {% endif %} +
+ {% if ends.0 != "" %} + PREV + {% endif %} - {% if ends.1 != "" %} - NEXT - {% endif %} -
+ {% if ends.1 != "" %} + NEXT + {% endif %} +
+
{% endblock %} diff --git a/templates/post.html b/templates/post.html index b9b1663..2fe6d21 100644 --- a/templates/post.html +++ b/templates/post.html @@ -24,70 +24,71 @@ {%- endmacro %} {% block content %} -
-
-

{{ post.score }}

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

- r/{{ post.community }} - • - u/{{ post.author }} - {% if post.author_flair.0 != "" %} - {{ post.author_flair.0 }} +
+
+
+

{{ post.score }}

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

+ r/{{ post.community }} + • + u/{{ post.author }} + {% if post.author_flair.0 != "" %} + {{ post.author_flair.0 }} + {% endif %} + {{ post.time }} +

+ + {{ post.title }} + {% if post.flair.0 != "" %} + {{ post.flair.0 }} + {% endif %} + + {% if post.post_type == "image" %} + + {% else if post.post_type == "video" %} +

- - {{ post.title }} - {% if post.flair.0 != "" %} - {{ post.flair.0 }} - {% endif %} - - {% if post.post_type == "image" %} - - {% else if post.post_type == "video" %} -
+
+ +
+ + {% for c in comments -%} +
+ {% call comment(c) %} +
+ {% for reply1 in c.replies %} + {% call comment(reply1) %} +
+ {% for reply2 in reply1.replies %} + {% call comment(reply2) %} +
+ {% for reply3 in reply2.replies %} + {% call comment(reply3) %} + {% if reply3.replies.len() > 0 %} + → More replies + {% endif %} +
+ {% endfor %} +
+ {% endfor %} +
+ {% endfor %} + + + {%- endfor %} -
- -
- - {% for c in comments -%} -
- {% call comment(c) %} -
- {% for reply1 in c.replies %} - {% call comment(reply1) %} -
- {% for reply2 in reply1.replies %} - {% call comment(reply2) %} -
- {% for reply3 in reply2.replies %} - {% call comment(reply3) %} - {% if reply3.replies.len() > 0 %} - → More replies - {% endif %} -
- {% endfor %} -
- {% endfor %} -
- {% endfor %} - - - {%- endfor %} - {% endblock %} \ No newline at end of file diff --git a/templates/subreddit.html b/templates/subreddit.html index 233c2ca..9774f2f 100644 --- a/templates/subreddit.html +++ b/templates/subreddit.html @@ -5,62 +5,65 @@ {% endif %} {% block body %} - {% if sub.name != "" %} -
-
-
- {{ sub.icon }} -
-
+
+
+
+ +
+ {% for post in posts %} +
+
+

{{ post.score }}

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

+ r/{{ post.community }} + • u/{{ post.author }} + {% if post.author_flair.0 != "" %} + {{ post.author_flair.0 }} + {% endif %} + {{ post.time }} +

+

+ {% if post.flair.0 != "" %} + {{ post.flair.0 }} + {% endif %} + {{ post.title }} +

+
+ +

+ {% endfor %} + +
+ {% if ends.0 != "" %} + PREV + {% endif %} + + {% if ends.1 != "" %} + NEXT + {% endif %} +
+
+ {% if sub.name != "" %} +
-
- {% endif %} -
-
- -
- {% for post in posts %} -
-
-

{{ post.score }}

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

- r/{{ post.community }} - • u/{{ post.author }} - {% if post.author_flair.0 != "" %} - {{ post.author_flair.0 }} - {% endif %} - {{ post.time }} -

-

- {% if post.flair.0 != "" %} - {{ post.flair.0 }} - {% endif %} - {{ post.title }} -

-
- -

- {% endfor %} - -
- {% if ends.0 != "" %} - PREV - {% endif %} - - {% if ends.1 != "" %} - NEXT - {% endif %} -
+ + {% endif %}
{% endblock %} \ No newline at end of file diff --git a/templates/user.html b/templates/user.html index 949cf64..b5b455b 100644 --- a/templates/user.html +++ b/templates/user.html @@ -1,66 +1,70 @@ {% extends "base.html" %} {% block title %}Libreddit: u/{{ user.name }}{% endblock %} {% block body %} -
-
-
- -
-
-

u/{{ user.name }}

-

Karma: {{ user.karma }} | Description: "{{ user.description }}"

-
+
+
+
+ +
+ {% for post in posts %} + {% if post.title != "Comment" %} +
+
+

{{ post.score }}

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

+ r/{{ post.community }} + • u/{{ post.author }} + {% if post.author_flair.0 != "" %} + {{ post.author_flair.0 }} + {% endif %} + {{ post.time }} +

+

+ {% if post.flair.0 == "Comment" %} + {% else if post.flair.0 == "" %} + {% else %} + {{ post.flair.0 }} + {% endif %} + {{ post.title }} +

+
+ +

+ {% else %} +
+
+

{{ post.score }}

+
+
+

+ COMMENT + {{ post.time }} +

+

{{ post.body }}

+
+

+ {% endif %} + {% endfor %}
-
-
-
- -
- {% for post in posts %} - {% if post.title != "Comment" %} -
-
-

{{ post.score }}

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

- {% else %} -
-
-

{{ post.score }}

-
-
-

- COMMENT - {{ post.time }} -

-

{{ post.body }}

-
-

- {% endif %} - {% endfor %} +
{% endblock %} \ No newline at end of file