iridium/redsunlib
iridium/redsunlib
2
2
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 4 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 crate::utils::{fetch_posts, format_url, nested_val, request, ErrorTemplate, Params, Post, User};
use actix_web::{http::StatusCode, web, HttpResponse, Result}; use actix_web::{http::StatusCode, web, HttpResponse, Result};
use askama::Template; use askama::Template;
use chrono::{TimeZone, Utc};
// STRUCTS // STRUCTS
#[derive(Template)] #[derive(Template)]
@ -62,11 +63,15 @@ async fn user(name: &String) -> Result<User, &'static str> {
// Otherwise, grab the JSON output from the request // Otherwise, grab the JSON output from the request
let res = req.unwrap(); 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 // Parse the JSON output into a User struct
Ok(User { Ok(User {
name: name.to_string(), name: name.to_string(),
icon: format_url(nested_val(&res, "subreddit", "icon_img").await).await, icon: format_url(nested_val(&res, "subreddit", "icon_img").await).await,
karma: res["data"]["total_karma"].as_i64().unwrap(), 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, banner: nested_val(&res, "subreddit", "banner_img").await,
description: nested_val(&res, "subreddit", "public_description").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 name: String,
pub icon: String, pub icon: String,
pub karma: i64, pub karma: i64,
pub created: String,
pub banner: String, pub banner: String,
pub description: String, pub description: String,
} }

83
static/style.css
View File

@ -39,10 +39,11 @@ nav {
} }
main { main {
display: flex;
justify-content: center;
max-width: 750px; max-width: 750px;
padding: 10px 20px;
margin: 0 auto; margin: 0 auto;
margin-top: 25px;
padding: 0px 10px;
} }
footer { footer {
@ -71,60 +72,60 @@ a:not(.post_right):hover {
background: #151515; 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 { #version {
color: white; color: white;
opacity: 25%; opacity: 25%;
} }
/* Subreddit */ /* User & Subreddit */
.subreddit { .user, .subreddit {
max-width: 750px; max-width: 350px;
margin: 0 auto; margin: 0 auto;
display: flex; 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; width: 100px;
height: 100px; height: 100px;
border: 2px solid var(--accent);
border-radius: 100%; border-radius: 100%;
padding: 20px; padding: 10px;
margin: 10px;
} }
#stats { .user_name, .subreddit_name {
margin-top: 10px; 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 */ /* Sorting */
@ -178,6 +179,10 @@ a:not(.post_right):hover {
display: flex; display: flex;
} }
.post.highlighted {
margin-top: 20px;
}
.post:hover { .post:hover {
background: var(--foreground); background: var(--foreground);
} }
@ -471,4 +476,14 @@ td, th {
.datetime { .datetime {
width: 100%; 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" %} {% extends "base.html" %}
{% block content %} {% block content %}
<form> <div id="column_one">
<select id="sort" name="sort"> <form>
<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option> <select id="sort" name="sort">
<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option> <option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> <option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> <option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
</select><input id="sort_submit" type="submit" value="&rarr;"> <option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
</form> </select><input id="sort_submit" type="submit" value="&rarr;">
{% for post in posts %} </form>
<div class="post"> {% for post in posts %}
<div class="post_left"> <div class="post">
<h3 class="post_score">{{ post.score }}</h3> <div class="post_left">
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %} <h3 class="post_score">{{ post.score }}</h3>
</div> {% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
<div class="post_right"> </div>
<h4> <div class="post_right">
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b> <h4>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a> <b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
{% if post.author_flair.0 != "" %} &bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
<small class="author_flair">{{ post.author_flair.0 }}</small> {% if post.author_flair.0 != "" %}
{% endif %} <small class="author_flair">{{ post.author_flair.0 }}</small>
<span class="datetime" style="float: right;">{{ post.time }}</span> {% endif %}
</h4> <span class="datetime" style="float: right;">{{ post.time }}</span>
<h3 class="post_title"> </h4>
{% if post.flair.0 != "" %} <h3 class="post_title">
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small> {% if post.flair.0 != "" %}
{% endif %} <small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
<a href="{{ post.url }}">{{ post.title }}</a> {% endif %}
</h3> <a href="{{ post.url }}">{{ post.title }}</a>
</div> </h3>
<img class="post_thumbnail" src="{{ post.media }}"> </div>
</div><br> <img class="post_thumbnail" src="{{ post.media }}">
{% endfor %} </div><br>
{% endfor %}
<footer> <footer>
{% if ends.0 != "" %} {% if ends.0 != "" %}
<a href="?before={{ ends.0 }}">PREV</a> <a href="?before={{ ends.0 }}">PREV</a>
{% endif %} {% endif %}
{% if ends.1 != "" %} {% if ends.1 != "" %}
<a href="?after={{ ends.1 }}">NEXT</a> <a href="?after={{ ends.1 }}">NEXT</a>
{% endif %} {% endif %}
</footer> </footer>
</div>
{% endblock %} {% endblock %}

127
templates/post.html
View File

@ -24,70 +24,71 @@
{%- endmacro %} {%- endmacro %}
{% block content %} {% block content %}
<div class="post highlighted"> <div id="column_one">
<div class="post_left"> <div class="post highlighted">
<h3 class="post_score">{{ post.score }}</h3> <div class="post_left">
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %} <h3 class="post_score">{{ post.score }}</h3>
</div> {% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
<div class="post_right"> </div>
<h4> <div class="post_right">
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b> <h4>
&bull; <b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a> &bull;
{% if post.author_flair.0 != "" %} <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
<small class="author_flair">{{ post.author_flair.0 }}</small> {% 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 %} {% endif %}
<span class="datetime">{{ post.time }}</span> <h4 class="post_body">{{ post.body }}</h4>
</h4> </div>
<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>
</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> </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 %} {% endblock %}

111
templates/subreddit.html
View File

@ -5,62 +5,65 @@
{% endif %} {% endif %}
{% block body %} {% block body %}
{% if sub.name != "" %} <main style="max-width: 1000px;">
<div id="about"> <div id="column_one">
<div class="subreddit"> <form>
<div class="subreddit_left"> <select id="sort" name="sort">
{{ sub.icon }} <option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
</div> <option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<div class="subreddit_right"> <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> <h2 class="subreddit_name">r/{{ sub.name }}</h2>
<p class="subreddit_description">{{ sub.description }}</p> <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> </aside>
</div> {% endif %}
{% 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>
</main> </main>
{% endblock %} {% endblock %}

122
templates/user.html
View File

@ -1,66 +1,70 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Libreddit: u/{{ user.name }}{% endblock %} {% block title %}Libreddit: u/{{ user.name }}{% endblock %}
{% block body %} {% block body %}
<div id="about"> <main style="max-width: 1000px;">
<div class="user"> <div id="column_one">
<div class="user_left"> <form>
<img class="user_icon" src="{{ user.icon }}"> <select id="sort" name="sort">
</div> <option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
<div class="user_right"> <option value="new" {% if sort == "new" %}selected{% endif %}>New</option>
<h2 class="user_name">u/{{ user.name }}</h2> <option value="top" {% if sort == "top" %}selected{% endif %}>Top</option>
<p class="user_description"><span>Karma:</span> {{ user.karma }} | <span>Description:</span> "{{ user.description }}"</p> </select><input id="sort_submit" type="submit" value="&rarr;">
</div> </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>
</div> <aside>
<main> <div class="user">
<form> <img class="user_icon" src="{{ user.icon }}">
<select id="sort" name="sort"> <h2 class="user_name">u/{{ user.name }}</h2>
<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option> <div class="user_description">{{ user.description }}</div>
<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> <div class="user_details">
<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> <label>Karma</label>
</select><input id="sort_submit" type="submit" value="&rarr;"> <label>Created</label>
</form> <div>{{ user.karma }}</div>
{% for post in posts %} <div>{{ user.created }}</div>
{% if post.title != "Comment" %} </div>
<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>
<div class="post_right"> </aside>
<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 %}
</main> </main>
{% endblock %} {% endblock %}