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:
parent
f5cd48b07f
commit
6c202a59b0
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
12
src/utils.rs
12
src/utils.rs
@ -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" {
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user