2020-05-04 15:06:07 +00:00
|
|
|
//- Needs saved
|
|
|
|
|
|
2020-05-04 14:02:35 +00:00
|
|
|
mixin form-component(id, description)
|
|
|
|
|
.field-row
|
|
|
|
|
label.description(for=id)= description
|
|
|
|
|
block(id="ten")
|
|
|
|
|
|
|
|
|
|
mixin fieldset(name)
|
|
|
|
|
fieldset
|
|
|
|
|
legend= name
|
|
|
|
|
.fieldset-contents
|
|
|
|
|
block
|
|
|
|
|
|
|
|
|
|
mixin input(id, description, value, disabled)
|
|
|
|
|
.field-row
|
|
|
|
|
label.description(for=id)= description
|
|
|
|
|
input(type="text" id=id name=id value=value disabled=disabled)
|
|
|
|
|
|
|
|
|
|
mixin checkbox(id, description, label, checked, disabled)
|
|
|
|
|
.field-row.checkbox-row
|
|
|
|
|
label.description(for=id)= description
|
|
|
|
|
input.checkbox(type="checkbox" id=id name=id checked=checked 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)
|
|
|
|
|
block
|
|
|
|
|
|
|
|
|
|
doctype html
|
|
|
|
|
html
|
|
|
|
|
head
|
|
|
|
|
title Settings | Bibliogram
|
|
|
|
|
include includes/head
|
|
|
|
|
body.settings-page
|
2020-05-04 15:06:07 +00:00
|
|
|
if saved
|
|
|
|
|
.status-notice Saved.
|
|
|
|
|
script.
|
|
|
|
|
history.replaceState(null, "", "/settings")
|
2020-05-04 14:02:35 +00:00
|
|
|
main.settings
|
2020-05-04 15:06:07 +00:00
|
|
|
form(action="/settings" method="post" enctype="application/x-www-form-urlencoded")
|
2020-05-04 14:02:35 +00:00
|
|
|
h1 Settings
|
|
|
|
|
|
|
|
|
|
+fieldset("Features")
|
|
|
|
|
+select("language", "Language", true)
|
|
|
|
|
option English (International)
|
|
|
|
|
|
|
|
|
|
+checkbox("show_comments", "Display comments", "Display", false, true)
|
|
|
|
|
|
|
|
|
|
+checkbox("link_hashtags", "Clickable hashtags", "Clickable", false, true)
|
|
|
|
|
|
|
|
|
|
+checkbox("spa", "Fast navigation", "Enabled", true, true)
|
|
|
|
|
|
|
|
|
|
+fieldset("Appearance")
|
|
|
|
|
+select("theme", "Theme", true)
|
|
|
|
|
option Classic
|
|
|
|
|
|
|
|
|
|
+select("caption_side", "Caption side", true)
|
|
|
|
|
option Left (Bibliogram)
|
|
|
|
|
option Right (Instagram)
|
|
|
|
|
|
|
|
|
|
+checkbox("display_alt", "Display alt text inline", "Display", false, 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
|
