iridium/redsunlib
iridium/redsunlib
2
2
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases 4 Wiki Activity

Tweak settings page design

Browse Source
This commit is contained in:
spikecodes 2021-12-27 13:43:44 -08:00
parent 90fa0b5496
commit 3188f9d8e7
No known key found for this signature in database
GPG Key ID: 004CECFF9B463BCB
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
static/style.css
View File

@ -488,7 +488,7 @@ aside {
/* Sorting and Search */ /* Sorting and Search */
select, #search, #sort_options, #inside, #searchbox > *, #sort_submit { select, #search, #sort_options, #inside, #searchbox > *, #sort_submit {
height: 40px; height: 38px;
} }
.search_label { .search_label {
@ -505,7 +505,7 @@ select {
select, #search { select, #search {
border: none; border: none;
padding: 0 15px; padding: 0 10px;
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
@ -593,6 +593,7 @@ button.submit:hover > svg { stroke: var(--accent); }
#sort_options, footer > a { #sort_options, footer > a {
border-radius: 5px; border-radius: 5px;
align-items: center;
box-shadow: var(--shadow); box-shadow: var(--shadow);
background: var(--outside); background: var(--outside);
display: flex; display: flex;
@ -719,7 +720,7 @@ a.search_subreddit:hover {
} }
.post_score { .post_score {
padding-top: 16px; padding-top: 19px;
padding-left: 12px; padding-left: 12px;
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
@ -1180,12 +1181,10 @@ summary.comment_data {
color: var(--accent); color: var(--accent);
} }
.prefs { .prefs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center;
padding: 20px; padding: 20px;
background: var(--post); background: var(--post);
border-radius: 5px; border-radius: 5px;
@ -1198,11 +1197,19 @@ summary.comment_data {
width: 100%; width: 100%;
height: 35px; height: 35px;
align-items: center; align-items: center;
margin-top: 10px; margin-top: 7px;
} }
.prefs > p { .prefs legend {
font-weight: 500; font-weight: 500;
border-bottom: 1px solid var(--highlighted);
font-size: 18px;
padding-bottom: 10px;
}
.prefs legend:not(:first-child) {
padding-top: 10px;
margin-top: 15px;
} }
.prefs select { .prefs select {

10
templates/settings.html
View File

@ -11,14 +11,14 @@
<div id="settings"> <div id="settings">
<form action="/settings" method="POST"> <form action="/settings" method="POST">
<div class="prefs"> <div class="prefs">
<p>Appearance</p> <legend>Appearance</legend>
<div id="theme"> <div id="theme">
<label for="theme">Theme:</label> <label for="theme">Theme:</label>
<select name="theme"> <select name="theme">
{% call utils::options(prefs.theme, ["system", "light", "dark", "black", "dracula", "nord", "laserwave", "violet", "gold", "rosebox"], "system") %} {% call utils::options(prefs.theme, ["system", "light", "dark", "black", "dracula", "nord", "laserwave", "violet", "gold", "rosebox"], "system") %}
</select> </select>
</div> </div>
<p>Interface</p> <legend>Interface</legend>
<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">
@ -36,7 +36,7 @@
<input type="hidden" value="off" name="wide"> <input type="hidden" value="off" name="wide">
<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>Content</p> <legend>Content</legend>
<div id="post_sort"> <div id="post_sort">
<label for="post_sort" title="Applies only to subreddit feeds">Default subreddit post sort:</label> <label for="post_sort" title="Applies only to subreddit feeds">Default subreddit post sort:</label>
<select name="post_sort"> <select name="post_sort">
@ -79,7 +79,7 @@
</form> </form>
{% if prefs.subscriptions.len() > 0 %} {% if prefs.subscriptions.len() > 0 %}
<div class="prefs" id="settings_subs"> <div class="prefs" id="settings_subs">
<p>Subscribed Feeds</p> <legend>Subscribed Feeds</legend>
{% for sub in prefs.subscriptions %} {% for sub in prefs.subscriptions %}
<div> <div>
{% let feed -%} {% let feed -%}
@ -94,7 +94,7 @@
{% endif %} {% endif %}
{% if !prefs.filters.is_empty() %} {% if !prefs.filters.is_empty() %}
<div class="prefs" id="settings_filters"> <div class="prefs" id="settings_filters">
<p>Filtered Feeds</p> <legend>Filtered Feeds</legend>
{% for sub in prefs.filters %} {% for sub in prefs.filters %}
<div> <div>
{% let feed -%} {% let feed -%}