Redesign User/Subreddit About Boxes
This commit is contained in:
spikecodes
parent
280e16bd7f
commit
ace21b21d5
7 changed files with 282 additions and 251 deletions
|
|
@ -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,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
@ -5,21 +5,8 @@
|
|||
{% endif %}
|
||||
|
||||
{% block body %}
|
||||
{% if sub.name != "" %}
|
||||
<div id="about">
|
||||
<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>
|
||||
<main style="max-width: 1000px;">
|
||||
<div id="column_one">
|
||||
<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 %}
|
||||
|
|
@ -1,18 +1,8 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}Libreddit: u/{{ user.name }}{% endblock %}
|
||||
{% block body %}
|
||||
<div id="about">
|
||||
<div class="user">
|
||||
<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>
|
||||
<main style="max-width: 1000px;">
|
||||
<div id="column_one">
|
||||
<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 %}
|
||||
Loading…
Reference in a new issue