Light theme

This commit is contained in:
spikecodes 2021-01-10 18:15:34 -08:00
parent c58b077330
commit 08683fa5a6
10 changed files with 48 additions and 21 deletions

View File

@ -13,6 +13,7 @@ struct SettingsTemplate {
#[derive(serde::Deserialize)] #[derive(serde::Deserialize)]
pub struct SettingsForm { pub struct SettingsForm {
theme: Option<String>,
front_page: Option<String>, front_page: Option<String>,
layout: Option<String>, layout: Option<String>,
wide: Option<String>, wide: Option<String>,
@ -32,8 +33,8 @@ pub async fn get(req: HttpRequest) -> HttpResponse {
pub async fn set(req: HttpRequest, form: Form<SettingsForm>) -> HttpResponse { pub async fn set(req: HttpRequest, form: Form<SettingsForm>) -> HttpResponse {
let mut res = HttpResponse::Found(); let mut res = HttpResponse::Found();
let names = vec!["front_page", "layout", "wide", "comment_sort", "hide_nsfw"]; let names = vec!["theme", "front_page", "layout", "wide", "comment_sort", "hide_nsfw"];
let values = vec![&form.front_page, &form.layout, &form.wide, &form.comment_sort, &form.hide_nsfw]; let values = vec![&form.theme, &form.front_page, &form.layout, &form.wide, &form.comment_sort, &form.hide_nsfw];
for (i, name) in names.iter().enumerate() { for (i, name) in names.iter().enumerate() {
match values[i] { match values[i] {

View File

@ -91,9 +91,12 @@ pub struct Params {
#[template(path = "error.html", escape = "none")] #[template(path = "error.html", escape = "none")]
pub struct ErrorTemplate { pub struct ErrorTemplate {
pub message: String, pub message: String,
pub prefs: Preferences,
} }
#[derive(Default)]
pub struct Preferences { pub struct Preferences {
pub theme: String,
pub front_page: String, pub front_page: String,
pub layout: String, pub layout: String,
pub wide: String, pub wide: String,
@ -108,6 +111,7 @@ pub struct Preferences {
// Build preferences from cookies // Build preferences from cookies
pub fn prefs(req: HttpRequest) -> Preferences { pub fn prefs(req: HttpRequest) -> Preferences {
Preferences { Preferences {
theme: cookie(&req, "theme"),
front_page: cookie(&req, "front_page"), front_page: cookie(&req, "front_page"),
layout: cookie(&req, "layout"), layout: cookie(&req, "layout"),
wide: cookie(&req, "wide"), wide: cookie(&req, "wide"),
@ -262,7 +266,12 @@ pub async fn fetch_posts(path: &str, fallback_title: String) -> Result<(Vec<Post
// //
pub async fn error(msg: String) -> HttpResponse { pub async fn error(msg: String) -> HttpResponse {
let body = ErrorTemplate { message: msg }.render().unwrap_or_default(); let body = ErrorTemplate {
message: msg,
prefs: Preferences::default(),
}
.render()
.unwrap_or_default();
HttpResponse::NotFound().content_type("text/html").body(body) HttpResponse::NotFound().content_type("text/html").body(body)
} }

View File

@ -3,6 +3,7 @@
:root { :root {
--accent: aqua; --accent: aqua;
--green: #5cff85; --green: #5cff85;
--nsfw: #FF5C5D;
--text: white; --text: white;
--foreground: #222; --foreground: #222;
--background: #0F0F0F; --background: #0F0F0F;
@ -13,7 +14,7 @@
} }
::selection { ::selection {
color: var(--background); color: var(--foreground);
background: var(--accent); background: var(--accent);
} }
@ -127,6 +128,20 @@ aside {
opacity: 0.5; opacity: 0.5;
} }
/* Light Theme */
.light {
--accent: #009a9a;
--green: #00a229;
--text: black;
--foreground: #f5f5f5;
--background: #DDD;
--outside: #ECECEC;
--post: #eee;
--highlighted: white;
--shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* User & Subreddit */ /* User & Subreddit */
#user, #subreddit, #sidebar { #user, #subreddit, #sidebar {
@ -225,6 +240,7 @@ select, #search {
#searchbox { #searchbox {
display: flex; display: flex;
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-radius: 5px;
} }
#searchbox > *, #sort_submit { #searchbox > *, #sort_submit {
@ -308,7 +324,7 @@ input[type="submit"]:hover { color: var(--accent); }
} }
#sort_options > a, footer > a { #sort_options > a, footer > a {
color: lightgrey; color: var(--text);
padding: 10px 20px; padding: 10px 20px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -317,7 +333,7 @@ input[type="submit"]:hover { color: var(--accent); }
#sort_options > a.selected { #sort_options > a.selected {
background: var(--accent); background: var(--accent);
color: var(--background); color: var(--foreground);
} }
#sort_options > a:not(.selected):hover { #sort_options > a:not(.selected):hover {
@ -454,9 +470,9 @@ input[type="submit"]:hover { color: var(--accent); }
} }
.nsfw { .nsfw {
color: #FF5C5D; color: var(--nsfw);
margin-top: 20px; margin-top: 20px;
border: 1px solid #FF5C5D; border: 1px solid var(--nsfw);
padding: 5px; padding: 5px;
font-size: 12px; font-size: 12px;
border-radius: 5px; border-radius: 5px;
@ -676,6 +692,7 @@ input[type="submit"]:hover { color: var(--accent); }
border-radius: 5px; border-radius: 5px;
box-shadow: var(--shadow); box-shadow: var(--shadow);
margin-left: 20px; margin-left: 20px;
background: var(--foreground);
} }
#save { #save {

View File

@ -11,7 +11,10 @@
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
{% endblock %} {% endblock %}
</head> </head>
<body class="{% block ui %}{% endblock %}"> <body class="
{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}
{% if prefs.wide == "on" %} wide{% endif %}
{% if prefs.theme == "light" %} light{% endif %}">
<!-- NAVIGATION BAR --> <!-- NAVIGATION BAR -->
<nav> <nav>
<p id="logo"> <p id="logo">

View File

@ -7,8 +7,6 @@
{% call utils::search(["/r/", post.community.as_str()].concat(), "") %} {% call utils::search(["/r/", post.community.as_str()].concat(), "") %}
{% endblock %} {% endblock %}
{% block ui %}{% if prefs.wide == "on" %} wide{% endif %}{% endblock %}
{% block root %}/r/{{ post.community }}{% endblock %}{% block location %}r/{{ post.community }}{% endblock %} {% block root %}/r/{{ post.community }}{% endblock %}{% block location %}r/{{ post.community }}{% endblock %}
{% block head %} {% block head %}
{% call super() %} {% call super() %}

View File

@ -3,8 +3,6 @@
{% block title %}Libreddit: search results - {{ params.q }}{% endblock %} {% block title %}Libreddit: search results - {{ params.q }}{% endblock %}
{% block ui %}{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}{% if prefs.wide == "on" %} wide{% endif %}{% endblock %}
{% block content %} {% block content %}
<div id="column_one"> <div id="column_one">
<form id="search_sort"> <form id="search_sort">

View File

@ -10,13 +10,20 @@
{% block content %} {% block content %}
<form id="settings" action="/settings" method="POST"> <form id="settings" action="/settings" method="POST">
<div id="prefs"> <div id="prefs">
<p>Appearance</p>
<div id="theme">
<label for="theme">Theme:</label>
<select name="theme">
{% call utils::options(prefs.theme, ["dark", "light"], "dark") %}
</select>
</div>
<p>Interface</p> <p>Interface</p>
<div id="front_page"> <div id="front_page">
<label for="front_page">Front page:</label> <label for="front_page">Front page:</label>
<select name="front_page"> <select name="front_page">
{% call utils::options(prefs.front_page, ["popular", "all"], "popular") %} {% call utils::options(prefs.front_page, ["popular", "all"], "popular") %}
</select> </select>
</div> </div>
<div id="layout"> <div id="layout">
<label for="layout">Layout:</label> <label for="layout">Layout:</label>
<select name="layout"> <select name="layout">
@ -27,7 +34,7 @@
<label for="wide">Wide UI:</label> <label for="wide">Wide UI:</label>
<input type="checkbox" name="wide" {% if prefs.wide == "on" %}checked{% endif %}> <input type="checkbox" name="wide" {% if prefs.wide == "on" %}checked{% endif %}>
</div> </div>
<p>Sorting / Filtering</p> <p>Content</p>
<div id="comment_sort"> <div id="comment_sort">
<label for="comment_sort">Default comment sort:</label> <label for="comment_sort">Default comment sort:</label>
<select name="comment_sort"> <select name="comment_sort">

View File

@ -11,8 +11,6 @@
{% call utils::search(["/r/", sub.name.as_str()].concat(), "") %} {% call utils::search(["/r/", sub.name.as_str()].concat(), "") %}
{% endblock %} {% endblock %}
{% block ui %}{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}{% if prefs.wide == "on" %} wide{% endif %}{% endblock %}
{% block body %} {% block body %}
<main> <main>
<div id="column_one"> <div id="column_one">

View File

@ -7,8 +7,6 @@
{% block title %}{{ user.name.replace("u/", "") }} (u/{{ user.name }}) - Libreddit{% endblock %} {% block title %}{{ user.name.replace("u/", "") }} (u/{{ user.name }}) - Libreddit{% endblock %}
{% block ui %}{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}{% if prefs.wide == "on" %} wide{% endif %}{% endblock %}
{% block body %} {% block body %}
<main> <main>
<div id="column_one"> <div id="column_one">

View File

@ -6,8 +6,6 @@
{% else %}Libreddit{% endif %} {% else %}Libreddit{% endif %}
{% endblock %} {% endblock %}
{% block ui %}{% if prefs.wide == "on" %} wide{% endif %}{% endblock %}
{% block search %} {% block search %}
{% call utils::search(["/r/", sub.as_str()].concat(), "") %} {% call utils::search(["/r/", sub.as_str()].concat(), "") %}
{% endblock %} {% endblock %}