Redesign User/Subreddit About Boxes

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<User, &'static str> {
 	// 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,
 	})

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,
 }

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 {
+.user, .subreddit {
-	max-width: 750px;
+	max-width: 350px;
 	margin: 0 auto;
 	display: flex;
-	padding-bottom: 25px;
+	flex-direction: column;
+	align-items: center;
 }
 
-.subreddit_name {
+.user_icon, .subreddit_icon {
-	margin-bottom: 10px;
-}
-
-.subreddit_right {
-	display: flex;
-	flex-flow: column;
-	justify-content: center;
-}
-
-.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_description, .subreddit_description {
-
+	margin: 10px 20px;
-.user {
+	text-align: center;
-	max-width: 750px;
+	font-size: 15px;
-	margin: 0 auto;
-	display: flex;
 }
 
-.user_right {
+.user_details, .subreddit_details {
-	display: flex;
+	display: grid;
-	flex-flow: column;
+	grid-template-columns: repeat(2, 1fr);
-	justify-content: center;
+	margin-top: 15px;
+	grid-column-gap: 20px;
 }
 
-.user_icon {
+.user_details > label, .subreddit_details > label {
-	width: 100px;
+	color: var(--accent);
-	height: 100px;
+	font-size: 15px;
-	border-radius: 100%;
-	padding: 20px;
 }
 
 /* Sorting */
@@ -178,6 +179,10 @@ a:not(.post_right):hover {
 	display: flex;
 }
 
+.post.highlighted {
+	margin-top: 20px;
+}
+
 .post:hover {
 	background: var(--foreground);
 }
@@ -472,3 +477,13 @@ td, th {
 		width: 100%;
 	}
 }
+
+@media screen and (max-width: 800px) {
+	main {
+		flex-direction: column-reverse;
+	}
+
+	aside {
+		margin: 20px 0px 0px 0px;
+	}
+}

templates/popular.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% block content %}
+	<div id="column_one">
 		<form>
 			<select id="sort" name="sort"> 
 				<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option> 
@@ -43,4 +44,5 @@
 			<a href="?after={{ ends.1 }}">NEXT</a>
 			{% endif %}
 		</footer>
+	</div>
 {% endblock %}

templates/post.html

@@ -24,6 +24,7 @@
 {%- endmacro %}
 
 {% block content %}
+	<div id="column_one">
 		<div class="post highlighted">
 			<div class="post_left">
 				<h3 class="post_score">{{ post.score }}</h3>
@@ -89,5 +90,5 @@
 				</div></details></div>
 			</div>
 		{%- endfor %}
-
+	</div>
 {% endblock %}

templates/subreddit.html

@@ -5,21 +5,8 @@
 {% endif %}
 
 {% block body %}
-	{% if sub.name != "" %}
+	<main style="max-width: 1000px;">
-	<div id="about">
+		<div id="column_one">
-		<div class="subreddit">
-			<div class="subreddit_left">
-				{{ sub.icon }}
-			</div>
-			<div class="subreddit_right">
-				<h2 class="subreddit_name">r/{{ sub.name }}</h2>
-				<p class="subreddit_description">{{ sub.description }}</p>
-				<div id="stats">👤 {{ sub.members }} 🟢 {{ sub.active }}</div>
-			</div>
-		</div>
-	</div>
-	{% endif %}
-	<main>
 			<form>
 				<select id="sort" name="sort"> 
 					<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
@@ -62,5 +49,21 @@
 				<a href="?after={{ ends.1 }}">NEXT</a>
 				{% endif %}
 			</footer>
+		</div>
+		{% if sub.name != "" %}
+		<aside>
+			<div class="subreddit">
+				<img class="subreddit_icon" src="{{ sub.icon }}">
+				<h2 class="subreddit_name">r/{{ sub.name }}</h2>
+				<p class="subreddit_description">{{ sub.description }}</p>
+				<div class="subreddit_details">
+					<label>Members</label>
+					<label>Active</label>
+					<div>{{ sub.members }}</div>
+					<div>{{ sub.active }}</div>
+				</div>
+			</div>
+		</aside>
+		{% endif %}
 	</main>
 {% endblock %}

templates/user.html

@@ -1,18 +1,8 @@
 {% extends "base.html" %}
 {% block title %}Libreddit: u/{{ user.name }}{% endblock %}
 {% block body %}
-	<div id="about">
+	<main style="max-width: 1000px;">
-		<div class="user">
+		<div id="column_one">
-			<div class="user_left">
-				<img class="user_icon" src="{{ user.icon }}">
-			</div>
-			<div class="user_right">
-				<h2 class="user_name">u/{{ user.name }}</h2>
-				<p class="user_description"><span>Karma:</span> {{ user.karma }} | <span>Description:</span> "{{ user.description }}"</p>
-			</div>
-		</div>
-	</div>
-	<main>
 			<form>
 				<select id="sort" name="sort"> 
 					<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
@@ -62,5 +52,19 @@
 			</div><br>
 			{% endif %}
 			{% endfor %}
+		</div>
+		<aside>
+			<div class="user">
+				<img class="user_icon" src="{{ user.icon }}">
+				<h2 class="user_name">u/{{ user.name }}</h2>
+				<div class="user_description">{{ user.description }}</div>
+				<div class="user_details">
+					<label>Karma</label>
+					<label>Created</label>
+					<div>{{ user.karma }}</div>
+					<div>{{ user.created }}</div>
+				</div>
+			</div>
+		</aside>
 	</main>
 {% endblock %}