mirror of https://git.sr.ht/~cadence/bibliogram
126 lines
3.9 KiB
Plaintext
126 lines
3.9 KiB
Plaintext
//- Needs saved, settings
|
|
|
|
mixin fieldset(name)
|
|
fieldset
|
|
legend= name
|
|
.fieldset-contents
|
|
block
|
|
|
|
mixin input(id, description, placeholder, disabled)
|
|
.field-row
|
|
label.description(for=id)= description
|
|
input(type="text" id=id name=id value=settings[id] placeholder=placeholder disabled=disabled)
|
|
|
|
mixin checkbox(id, description, label, disabled)
|
|
.field-row.checkbox-row
|
|
label.description(for=id)= description
|
|
input.checkbox(type="checkbox" id=id name=id checked=(settings[id] !== 0) disabled=disabled autocomplete="off")
|
|
label.pill(for=id tabindex=(disabled ? null : 0) onkeypress=`[" ", "Enter"].includes(event.key) && this.click()`)= label
|
|
span.fake-checkbox
|
|
|
|
mixin select(id, description, disabled, options)
|
|
.field-row
|
|
label.description(for=id)= description
|
|
select(id=id name=id disabled=disabled)
|
|
each option in options
|
|
option(value=option.value selected=(option.value === settings[id]))= option.text
|
|
|
|
doctype html
|
|
html
|
|
head
|
|
title Settings | Bibliogram
|
|
include includes/head
|
|
body.settings-page
|
|
if saved
|
|
.status-notice Saved.
|
|
script.
|
|
history.replaceState(null, "", "/settings")
|
|
main.settings
|
|
form(action="/settings" method="post" enctype="application/x-www-form-urlencoded")
|
|
h1 Settings
|
|
|
|
+fieldset("Features")
|
|
+select("language", "Language", true, [
|
|
{value: "en", text: "English (International)"},
|
|
{value: "en-us", text: "English (US)"}
|
|
])
|
|
|
|
+select("save_data", "Save data", true, [
|
|
{value: "automatic", text: "Automatic"},
|
|
{value: "off", text: "Off"},
|
|
{value: "lazy_load", text: "Lazy load"},
|
|
{value: "full", text: "Full"}
|
|
])
|
|
|
|
+input("rewrite_youtube", "Rewrite YouTube domain", "youtube.com", true)
|
|
|
|
+input("rewrite_twitter", "Rewrite Twitter domain", "twitter.com", true)
|
|
|
|
+checkbox("show_comments", "Display comments", "Display", true)
|
|
|
|
+checkbox("link_hashtags", "Clickable hashtags", "Clickable", true)
|
|
|
|
+checkbox("spa", "Fast navigation", "Enabled", false)
|
|
|
|
+fieldset("Appearance")
|
|
+select("theme", "Theme", false, constants.themes.map(entry => ({value: entry.file, text: entry.name})))
|
|
|
|
+checkbox("display_top_nav", "Display top bar", "Always", false)
|
|
|
|
+select("timeline_columns", "Timeline columns", true, [
|
|
{value: "dynamic", text: "Dynamic"},
|
|
{value: "3", text: "3 columns"},
|
|
{value: "4", text: "4 columns"},
|
|
{value: "6", text: "6 columns"}
|
|
])
|
|
|
|
+select("caption_side", "Caption side", true, [
|
|
{value: "left", text: "Left (Bibliogram)"},
|
|
{value: "right", text: "Right (Instagram)"}
|
|
])
|
|
|
|
+checkbox("display_alt", "Display alt text inline", "Display", true)
|
|
|
|
//- div
|
|
//- Here are all the possible input styles. Uncomment to test styling.
|
|
- let i = 2
|
|
- let id = 0
|
|
- let thisID
|
|
while --i >= 0
|
|
fieldset
|
|
legend Style demo
|
|
.field-row
|
|
- thisID = "in"+(id++)
|
|
label.description(for=thisID) Placeholder
|
|
input(type="text" placeholder="Placeholder" id=thisID)
|
|
|
|
.field-row
|
|
- thisID = "in"+(id++)
|
|
label.description(for=thisID) Disabled
|
|
input(type="text" disabled placeholder="Disabled" value="Value" id=thisID)
|
|
|
|
.field-row
|
|
label.description Button
|
|
button(type="button") Button
|
|
|
|
.field-row
|
|
- thisID = "in"+(id++)
|
|
label.description(for=thisID) Select
|
|
select(id=thisID)
|
|
option Select
|
|
option Yes
|
|
option No
|
|
option Always
|
|
option Never
|
|
|
|
.field-row.checkbox-row
|
|
- thisID = "in"+(id++)
|
|
label.description(for=thisID) Checkbox
|
|
input.checkbox(type="checkbox" id=thisID)
|
|
label.pill(for=thisID tabindex=0 onkeypress=`[" ", "Enter"].includes(event.key) && this.click()`) Label
|
|
span.fake-checkbox
|
|
|
|
.action-container
|
|
a(href="/").home-link ← Home
|
|
button(type="submit").save-button Save settings
|