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

fix a11y and HTML issues on settings page (#662)

Browse Source 
- connect labels with corresponding form controls
- use fieldsets to group form sections
- don't nest details/summary element into label
This commit is contained in:
Rupert Angermeier 2023-01-01 09:56:09 +01:00 committed by GitHub
parent b5d04f1a50
commit 9178b50b73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 93 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
static/style.css
View File

@ -1118,22 +1118,16 @@ summary.comment_data {
} }
.prefs { .prefs {
display: flex; padding: 10px 20px 20px;
flex-direction: column;
justify-content: space-between;
padding: 20px;
background: var(--post); background: var(--post);
border-radius: 5px; border-radius: 5px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.prefs > div { .prefs fieldset {
display: flex; border: 0;
justify-content: space-between; padding: 10px 0;
width: 100%; margin: 0 0 5px;
height: 35px;
align-items: center;
margin-top: 7px;
} }
.prefs legend { .prefs legend {
@ -1141,11 +1135,25 @@ summary.comment_data {
border-bottom: 1px solid var(--highlighted); border-bottom: 1px solid var(--highlighted);
font-size: 18px; font-size: 18px;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 7px;
width: 100%;
float: left; /* places the legend inside the (invisible) border, instead of vertically centered on top border*/
} }
.prefs legend:not(:first-child) { .prefs-group {
padding-top: 10px; display: flex;
margin-top: 15px; width: 100%;
height: 35px;
align-items: center;
margin-top: 7px;
}
.prefs-group > *:not(:last-child) {
margin-right: 1ch;
}
.prefs-group > *:last-child {
margin-left: auto;
} }
.prefs select { .prefs select {
@ -1163,7 +1171,8 @@ aside.prefs {
background: var(--highlighted); background: var(--highlighted);
padding: 10px 15px; padding: 10px 15px;
border-radius: 5px; border-radius: 5px;
margin-top: 20px; margin-top: 5px;
width: 100%
} }
input[type="submit"] { input[type="submit"] {

133
templates/settings.html
View File

@ -11,74 +11,79 @@
<div id="settings"> <div id="settings">
<form action="/settings" method="POST"> <form action="/settings" method="POST">
<div class="prefs"> <div class="prefs">
<legend>Appearance</legend> <fieldset>
<div id="theme"> <legend>Appearance</legend>
<label for="theme">Theme:</label> <div class="prefs-group">
<select name="theme"> <label for="theme">Theme:</label>
{% call utils::options(prefs.theme, prefs.available_themes, "system") %} <select name="theme" id="theme">
</select> {% call utils::options(prefs.theme, prefs.available_themes, "system") %}
</div> </select>
<legend>Interface</legend> </div>
<div id="front_page"> </fieldset>
<label for="front_page">Front page:</label> <fieldset>
<select name="front_page"> <legend>Interface</legend>
{% call utils::options(prefs.front_page, ["default", "popular", "all"], "default") %} <div class="prefs-group">
</select> <label for="front_page">Front page:</label>
</div> <select name="front_page" id="front_page">
<div id="layout"> {% call utils::options(prefs.front_page, ["default", "popular", "all"], "default") %}
<label for="layout">Layout:</label> </select>
<select name="layout"> </div>
{% call utils::options(prefs.layout, ["card", "clean", "compact"], "card") %} <div class="prefs-group">
</select> <label for="layout">Layout:</label>
</div> <select name="layout" id="layout">
<div id="wide"> {% call utils::options(prefs.layout, ["card", "clean", "compact"], "card") %}
<label for="wide">Wide UI:</label> </select>
<input type="hidden" value="off" name="wide"> </div>
<input type="checkbox" name="wide" {% if prefs.wide == "on" %}checked{% endif %}> <div class="prefs-group">
</div> <label for="wide">Wide UI:</label>
<legend>Content</legend> <input type="hidden" value="off" name="wide">
<div id="post_sort"> <input type="checkbox" name="wide" id="wide" {% if prefs.wide == "on" %}checked{% endif %}>
<label for="post_sort" title="Applies only to subreddit feeds">Default subreddit post sort:</label> </div>
<select name="post_sort"> </fieldset>
{% call utils::options(prefs.post_sort, ["hot", "new", "top", "rising", "controversial"], "hot") %} <fieldset>
</select> <legend>Content</legend>
</div> <div class="prefs-group">
<div id="comment_sort"> <label for="post_sort" title="Applies only to subreddit feeds">Default subreddit post sort:</label>
<label for="comment_sort">Default comment sort:</label> <select name="post_sort">
<select name="comment_sort"> {% call utils::options(prefs.post_sort, ["hot", "new", "top", "rising", "controversial"], "hot") %}
{% call utils::options(prefs.comment_sort, ["confidence", "top", "new", "controversial", "old"], "confidence") %} </select>
</select> </div>
</div> <div class="prefs-group">
<div id="show_nsfw"> <label for="comment_sort">Default comment sort:</label>
<label for="show_nsfw">Show NSFW posts:</label> <select name="comment_sort" id="comment_sort">
<input type="hidden" value="off" name="show_nsfw"> {% call utils::options(prefs.comment_sort, ["confidence", "top", "new", "controversial", "old"], "confidence") %}
<input type="checkbox" name="show_nsfw" {% if prefs.show_nsfw == "on" %}checked{% endif %}> </select>
</div> </div>
<div id="blur_nsfw"> <div class="prefs-group">
<label for="blur_nsfw">Blur NSFW previews:</label> <label for="show_nsfw">Show NSFW posts:</label>
<input type="hidden" value="off" name="blur_nsfw"> <input type="hidden" value="off" name="show_nsfw">
<input type="checkbox" name="blur_nsfw" {% if prefs.blur_nsfw == "on" %}checked{% endif %}> <input type="checkbox" name="show_nsfw" id="show_nsfw" {% if prefs.show_nsfw == "on" %}checked{% endif %}>
</div> </div>
<div id="autoplay_videos"> <div class="prefs-group">
<label for="autoplay_videos">Autoplay videos</label> <label for="blur_nsfw">Blur NSFW previews:</label>
<input type="hidden" value="off" name="autoplay_videos"> <input type="hidden" value="off" name="blur_nsfw">
<input type="checkbox" name="autoplay_videos" {% if prefs.autoplay_videos == "on" %}checked{% endif %}> <input type="checkbox" name="blur_nsfw" id="blur_nsfw" {% if prefs.blur_nsfw == "on" %}checked{% endif %}>
</div> </div>
<div id="use_hls"> <div class="prefs-group">
<label for="use_hls">Use HLS for videos <label for="autoplay_videos">Autoplay videos</label>
<input type="hidden" value="off" name="autoplay_videos">
<input type="checkbox" name="autoplay_videos" id="autoplay_videos" {% if prefs.autoplay_videos == "on" %}checked{% endif %}>
</div>
<div class="prefs-group">
<label for="use_hls">Use HLS for videos</label>
<details id="feeds"> <details id="feeds">
<summary>Why?</summary> <summary>Why?</summary>
<div id="feed_list" class="helper">Reddit videos require JavaScript (via HLS.js) to be enabled to be played with audio. Therefore, this toggle lets you either use Libreddit JS-free or utilize this feature.</div> <div id="feed_list" class="helper">Reddit videos require JavaScript (via HLS.js) to be enabled to be played with audio. Therefore, this toggle lets you either use Libreddit JS-free or utilize this feature.</div>
</details> </details>
</label> <input type="hidden" value="off" name="use_hls">
<input type="hidden" value="off" name="use_hls"> <input type="checkbox" name="use_hls" id="use_hls" {% if prefs.use_hls == "on" %}checked{% endif %}>
<input type="checkbox" name="use_hls" {% if prefs.use_hls == "on" %}checked{% endif %}> </div>
</div> <div class="prefs-group">
<div id="hide_hls_notification"> <label for="hide_hls_notification">Hide notification about possible HLS usage</label>
<label for="hide_hls_notification">Hide notification about possible HLS usage</label> <input type="hidden" value="off" name="hide_hls_notification">
<input type="hidden" value="off" name="hide_hls_notification"> <input type="checkbox" name="hide_hls_notification" id="hide_hls_notification" {% if prefs.hide_hls_notification == "on" %}checked{% endif %}>
<input type="checkbox" name="hide_hls_notification" {% if prefs.hide_hls_notification == "on" %}checked{% endif %}> </div>
</div> </fieldset>
<input id="save" type="submit" value="Save"> <input id="save" type="submit" value="Save">
</div> </div>
</form> </form>