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

Make the fixed navbar optional

Browse Source 
Adds another on/off preference (default: on, keeps same
behaviour) for the fixed navbar.
When off the navbar will not remain at the top of the
page when scrolling.
This is useful for small displays such as phones where
otherwise the navbar takes up a sizeable portion of
the viewport.
This commit is contained in:
Connor Holloway 2022-06-18 22:53:30 +01:00
parent f5cd48b07f
commit 6c202a59b0
6 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -272,6 +272,7 @@ Assign a default value for each setting by passing environment variables to Libr
| `USE_HLS` | `["on", "off"]` | `off` | | `USE_HLS` | `["on", "off"]` | `off` |
| `HIDE_HLS_NOTIFICATION` | `["on", "off"]` | `off` | | `HIDE_HLS_NOTIFICATION` | `["on", "off"]` | `off` |
| `AUTOPLAY_VIDEOS` | `["on", "off"]` | `off` | | `AUTOPLAY_VIDEOS` | `["on", "off"]` | `off` |
| `FIXED_NAVBAR` | `["on", "off"]` | `on` |
### Examples ### Examples

3
src/settings.rs
View File

@ -19,7 +19,7 @@ struct SettingsTemplate {
// CONSTANTS // CONSTANTS
const PREFS: [&str; 10] = [ const PREFS: [&str; 11] = [
"theme", "theme",
"front_page", "front_page",
"layout", "layout",
@ -30,6 +30,7 @@ const PREFS: [&str; 10] = [
"use_hls", "use_hls",
"hide_hls_notification", "hide_hls_notification",
"autoplay_videos", "autoplay_videos",
"fixed_navbar",
]; ];
// FUNCTIONS // FUNCTIONS

12
src/utils.rs
View File

@ -450,6 +450,7 @@ pub struct Preferences {
pub hide_hls_notification: String, pub hide_hls_notification: String,
pub use_hls: String, pub use_hls: String,
pub autoplay_videos: String, pub autoplay_videos: String,
pub fixed_navbar: String,
pub comment_sort: String, pub comment_sort: String,
pub post_sort: String, pub post_sort: String,
pub subscriptions: Vec<String>, pub subscriptions: Vec<String>,
@ -481,6 +482,7 @@ impl Preferences {
use_hls: setting(&req, "use_hls"), use_hls: setting(&req, "use_hls"),
hide_hls_notification: setting(&req, "hide_hls_notification"), hide_hls_notification: setting(&req, "hide_hls_notification"),
autoplay_videos: setting(&req, "autoplay_videos"), autoplay_videos: setting(&req, "autoplay_videos"),
fixed_navbar: setting_or_default(&req, "fixed_navbar", "on".to_string()),
comment_sort: setting(&req, "comment_sort"), comment_sort: setting(&req, "comment_sort"),
post_sort: setting(&req, "post_sort"), post_sort: setting(&req, "post_sort"),
subscriptions: setting(&req, "subscriptions").split('+').map(String::from).filter(|s| !s.is_empty()).collect(), subscriptions: setting(&req, "subscriptions").split('+').map(String::from).filter(|s| !s.is_empty()).collect(),
@ -540,6 +542,16 @@ pub fn setting(req: &Request<Body>, name: &str) -> String {
.to_string() .to_string()
} }
// Retrieve the value of a setting by name or the default value
pub fn setting_or_default(req: &Request<Body>, name: &str, default: String) -> String {
let value = setting(req, name);
if !value.is_empty() {
value
} else {
default
}
}
// Detect and redirect in the event of a random subreddit // Detect and redirect in the event of a random subreddit
pub async fn catch_random(sub: &str, additional: &str) -> Result<Response<Body>, String> { pub async fn catch_random(sub: &str, additional: &str) -> Result<Response<Body>, String> {
if sub == "random" || sub == "randnsfw" { if sub == "random" || sub == "randnsfw" {

11
static/style.css
View File

@ -69,6 +69,9 @@ pre, form, fieldset, table, th, td, select, input {
body { body {
background: var(--background); background: var(--background);
font-size: 15px; font-size: 15px;
}
body.fixed_navbar {
padding-top: 60px; padding-top: 60px;
} }
@ -88,8 +91,12 @@ nav {
z-index: 2; z-index: 2;
top: 0; top: 0;
padding: 5px 15px; padding: 5px 15px;
margin-bottom: 10px;
min-height: 40px; min-height: 40px;
width: calc(100% - 30px); width: calc(100% - 30px);
}
nav.fixed_navbar {
position: fixed; position: fixed;
} }
@ -1237,7 +1244,7 @@ td, th {
/* Mobile */ /* Mobile */
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
body { padding-top: 120px } body.fixed_navbar { padding-top: 120px }
main { main {
flex-direction: column-reverse; flex-direction: column-reverse;
@ -1279,7 +1286,7 @@ td, th {
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
body { padding-top: 100px; } body.fixed_navbar { padding-top: 100px; }
#version { display: none; } #version { display: none; }
.post { .post {

6
templates/base.html
View File

@ -25,9 +25,11 @@
<body class=" <body class="
{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %} {% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}
{% if prefs.wide == "on" %} wide{% endif %} {% if prefs.wide == "on" %} wide{% endif %}
{% if prefs.theme != "system" %} {{ prefs.theme }}{% endif %}"> {% if prefs.theme != "system" %} {{ prefs.theme }}{% endif %}
{% if prefs.fixed_navbar == "on" %} fixed_navbar{% endif %}">
<!-- NAVIGATION BAR --> <!-- NAVIGATION BAR -->
<nav> <nav class="
{% if prefs.fixed_navbar == "on" %} fixed_navbar{% endif %}">
<div id="logo"> <div id="logo">
<a id="libreddit" href="/"><span id="lib">lib</span><span id="reddit">reddit.</span></a> <a id="libreddit" href="/"><span id="lib">lib</span><span id="reddit">reddit.</span></a>
<span id="version">v{{ env!("CARGO_PKG_VERSION") }}</span> <span id="version">v{{ env!("CARGO_PKG_VERSION") }}</span>

5
templates/settings.html
View File

@ -59,6 +59,11 @@
<input type="hidden" value="off" name="autoplay_videos"> <input type="hidden" value="off" name="autoplay_videos">
<input type="checkbox" name="autoplay_videos" {% if prefs.autoplay_videos == "on" %}checked{% endif %}> <input type="checkbox" name="autoplay_videos" {% if prefs.autoplay_videos == "on" %}checked{% endif %}>
</div> </div>
<div id="fixed_navbar">
<label for="fixed_navbar">Keep navbar fixed</label>
<input type="hidden" value="off" name="fixed_navbar">
<input type="checkbox" name="fixed_navbar" {% if prefs.fixed_navbar == "on" %}checked{% endif %}>
</div>
<div id="use_hls"> <div id="use_hls">
<label for="use_hls">Use HLS for videos <label for="use_hls">Use HLS for videos
<details id="feeds"> <details id="feeds">