beenull/libreddit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Redesign User/Subreddit About Boxes

Browse source
This commit is contained in:
spikecodes 2020-12-23 22:16:04 -08:00
parent 280e16bd7f
commit ace21b21d5
7 changed files with 282 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/user.rs
View file

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

1
src/utils.rs
View file

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

83
static/style.css
View file

@ -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;
}
}

84
templates/popular.html
View file

@ -1,46 +1,48 @@
{% extends "base.html" %}
{% block content %}
<form>
<select id="sort" name="sort">
<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option>
<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
</select><input id="sort_submit" type="submit" value="&rarr;">
</form>
{% for post in posts %}
<div class="post">
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div>
<div class="post_right">
<h4>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %}
<span class="datetime" style="float: right;">{{ post.time }}</span>
</h4>
<h3 class="post_title">
{% if post.flair.0 != "" %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %}
<a href="{{ post.url }}">{{ post.title }}</a>
</h3>
</div>
<img class="post_thumbnail" src="{{ post.media }}">
</div><br>
{% endfor %}
<div id="column_one">
<form>
<select id="sort" name="sort">
<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option>
<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
</select><input id="sort_submit" type="submit" value="&rarr;">
</form>
{% for post in posts %}
<div class="post">
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div>
<div class="post_right">
<h4>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %}
<span class="datetime" style="float: right;">{{ post.time }}</span>
</h4>
<h3 class="post_title">
{% if post.flair.0 != "" %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %}
<a href="{{ post.url }}">{{ post.title }}</a>
</h3>
</div>
<img class="post_thumbnail" src="{{ post.media }}">
</div><br>
{% endfor %}
<footer>
{% if ends.0 != "" %}
<a href="?before={{ ends.0 }}">PREV</a>
{% endif %}
<footer>
{% if ends.0 != "" %}
<a href="?before={{ ends.0 }}">PREV</a>
{% endif %}
{% if ends.1 != "" %}
<a href="?after={{ ends.1 }}">NEXT</a>
{% endif %}
</footer>
{% if ends.1 != "" %}
<a href="?after={{ ends.1 }}">NEXT</a>
{% endif %}
</footer>
</div>
{% endblock %}

127
templates/post.html
View file

@ -24,70 +24,71 @@
{%- endmacro %}
{% block content %}
<div class="post highlighted">
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div>
<div class="post_right">
<h4>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull;
<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small>
<div id="column_one">
<div class="post highlighted">
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div>
<div class="post_right">
<h4>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull;
<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %}
<span class="datetime">{{ post.time }}</span>
</h4>
<a href="{{ post.url }}" class="post_title">
{{ post.title }}
{% if post.flair.0 != "" %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %}
</a>
{% if post.post_type == "image" %}
<img class="post_media" src="{{ post.media }}"/>
{% else if post.post_type == "video" %}
<video class="post_media" src="{{ post.media }}" controls autoplay loop>
{% else if post.post_type == "link" %}
<a id="post_url" href="{{ post.media }}">{{ post.media }}</a>
{% endif %}
<span class="datetime">{{ post.time }}</span>
</h4>
<a href="{{ post.url }}" class="post_title">
{{ post.title }}
{% if post.flair.0 != "" %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %}
</a>
{% if post.post_type == "image" %}
<img class="post_media" src="{{ post.media }}"/>
{% else if post.post_type == "video" %}
<video class="post_media" src="{{ post.media }}" controls autoplay loop>
{% else if post.post_type == "link" %}
<a id="post_url" href="{{ post.media }}">{{ post.media }}</a>
{% endif %}
<h4 class="post_body">{{ post.body }}</h4>
<h4 class="post_body">{{ post.body }}</h4>
</div>
</div>
<form>
<select id="sort" name="sort">
<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="controversial" {% if sort == "controversial" %}selected{% endif %}>Controversial</option>
<option value="old" {% if sort == "old" %}selected{% endif %}>Old</option>
</select><input id="sort_submit" type="submit" value="&rarr;">
</form>
{% for c in comments -%}
<div class="thread">
{% call comment(c) %}
<div class="replies">
{% for reply1 in c.replies %}
{% call comment(reply1) %}
<div class="replies">
{% for reply2 in reply1.replies %}
{% call comment(reply2) %}
<div class="replies">
{% for reply3 in reply2.replies %}
{% call comment(reply3) %}
{% if reply3.replies.len() > 0 %}
<a class="deeper_replies" href="{{ post.url }}{{ reply3.id }}">&rarr; More replies</a>
{% endif %}
</details></div>
{% endfor %}
</div></details></div>
{% endfor %}
</div></details></div>
{% endfor %}
</div></details></div>
</div>
{%- endfor %}
</div>
<form>
<select id="sort" name="sort">
<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="controversial" {% if sort == "controversial" %}selected{% endif %}>Controversial</option>
<option value="old" {% if sort == "old" %}selected{% endif %}>Old</option>
</select><input id="sort_submit" type="submit" value="&rarr;">
</form>
{% for c in comments -%}
<div class="thread">
{% call comment(c) %}
<div class="replies">
{% for reply1 in c.replies %}
{% call comment(reply1) %}
<div class="replies">
{% for reply2 in reply1.replies %}
{% call comment(reply2) %}
<div class="replies">
{% for reply3 in reply2.replies %}
{% call comment(reply3) %}
{% if reply3.replies.len() > 0 %}
<a class="deeper_replies" href="{{ post.url }}{{ reply3.id }}">&rarr; More replies</a>
{% endif %}
</details></div>
{% endfor %}
</div></details></div>
{% endfor %}
</div></details></div>
{% endfor %}
</div></details></div>
</div>
{%- endfor %}
{% endblock %}

111
templates/subreddit.html
View file

@ -5,62 +5,65 @@
{% endif %}
{% block body %}
{% if sub.name != "" %}
<div id="about">
<div class="subreddit">
<div class="subreddit_left">
{{ sub.icon }}
</div>
<div class="subreddit_right">
<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>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
</select><input id="sort_submit" type="submit" value="&rarr;">
</form>
{% for post in posts %}
<div class="post">
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div>
<div class="post_right">
<h4>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %}
<span class="datetime">{{ post.time }}</span>
</h4>
<h3 class="post_title">
{% if post.flair.0 != "" %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %}
<a href="{{ post.url }}">{{ post.title }}</a>
</h3>
</div>
<img class="post_thumbnail" src="{{ post.media }}">
</div><br>
{% endfor %}
<footer>
{% if ends.0 != "" %}
<a href="?before={{ ends.0 }}">PREV</a>
{% endif %}
{% if ends.1 != "" %}
<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 id="stats">👤 {{ sub.members }} 🟢 {{ sub.active }}</div>
<div class="subreddit_details">
<label>Members</label>
<label>Active</label>
<div>{{ sub.members }}</div>
<div>{{ sub.active }}</div>
</div>
</div>
</div>
</div>
{% endif %}
<main>
<form>
<select id="sort" name="sort">
<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
</select><input id="sort_submit" type="submit" value="&rarr;">
</form>
{% for post in posts %}
<div class="post">
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div>
<div class="post_right">
<h4>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %}
<span class="datetime">{{ post.time }}</span>
</h4>
<h3 class="post_title">
{% if post.flair.0 != "" %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %}
<a href="{{ post.url }}">{{ post.title }}</a>
</h3>
</div>
<img class="post_thumbnail" src="{{ post.media }}">
</div><br>
{% endfor %}
<footer>
{% if ends.0 != "" %}
<a href="?before={{ ends.0 }}">PREV</a>
{% endif %}
{% if ends.1 != "" %}
<a href="?after={{ ends.1 }}">NEXT</a>
{% endif %}
</footer>
</aside>
{% endif %}
</main>
{% endblock %}

122
templates/user.html
View file

@ -1,66 +1,70 @@
{% 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>
<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>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
</select><input id="sort_submit" type="submit" value="&rarr;">
</form>
{% for post in posts %}
{% if post.title != "Comment" %}
<div class='post'>
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div>
<div class="post_right">
<h4>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %}
<span class="datetime" style="float: right;">{{ post.time }}</span>
</h4>
<h3 class="post_title">
{% if post.flair.0 == "Comment" %}
{% else if post.flair.0 == "" %}
{% else %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %}
<a href="{{ post.url }}">{{ post.title }}</a>
</h3>
</div>
<img class="post_thumbnail" src="{{ post.media }}">
</div><br>
{% else %}
<div class="comment">
<div class="comment_left">
<h3 class="comment_score">{{ post.score }}</h3>
</div>
<div class="comment_right">
<h4>
COMMENT
<span class="datetime">{{ post.time }}</span>
</h4>
<h4 class="comment_body">{{ post.body }}</h4>
</div>
</div><br>
{% endif %}
{% endfor %}
</div>
</div>
<main>
<form>
<select id="sort" name="sort">
<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
</select><input id="sort_submit" type="submit" value="&rarr;">
</form>
{% for post in posts %}
{% if post.title != "Comment" %}
<div class='post'>
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
<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>
<div class="post_right">
<h4>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %}
<span class="datetime" style="float: right;">{{ post.time }}</span>
</h4>
<h3 class="post_title">
{% if post.flair.0 == "Comment" %}
{% else if post.flair.0 == "" %}
{% else %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %}
<a href="{{ post.url }}">{{ post.title }}</a>
</h3>
</div>
<img class="post_thumbnail" src="{{ post.media }}">
</div><br>
{% else %}
<div class="comment">
<div class="comment_left">
<h3 class="comment_score">{{ post.score }}</h3>
</div>
<div class="comment_right">
<h4>
COMMENT
<span class="datetime">{{ post.time }}</span>
</h4>
<h4 class="comment_body">{{ post.body }}</h4>
</div>
</div><br>
{% endif %}
{% endfor %}
</aside>
</main>
{% endblock %}