Make the fixed navbar optional

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

View File

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

View File

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

View File

@ -450,6 +450,7 @@ pub struct Preferences {
pub hide_hls_notification: String,
pub use_hls: String,
pub autoplay_videos: String,
pub fixed_navbar: String,
pub comment_sort: String,
pub post_sort: String,
pub subscriptions: Vec<String>,
@ -481,6 +482,7 @@ impl Preferences {
use_hls: setting(&req, "use_hls"),
hide_hls_notification: setting(&req, "hide_hls_notification"),
autoplay_videos: setting(&req, "autoplay_videos"),
fixed_navbar: setting_or_default(&req, "fixed_navbar", "on".to_string()),
comment_sort: setting(&req, "comment_sort"),
post_sort: setting(&req, "post_sort"),
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()
}
// 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
pub async fn catch_random(sub: &str, additional: &str) -> Result<Response<Body>, String> {
if sub == "random" || sub == "randnsfw" {

View File

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

View File

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

View File

@ -59,6 +59,11 @@
<input type="hidden" value="off" name="autoplay_videos">
<input type="checkbox" name="autoplay_videos" {% if prefs.autoplay_videos == "on" %}checked{% endif %}>
</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">
<label for="use_hls">Use HLS for videos
<details id="feeds">