mirror of
https://git.sr.ht/~cadence/bibliogram
synced 2024-11-16 21:27:30 +00:00
102 lines
2.9 KiB
Plaintext
102 lines
2.9 KiB
Plaintext
|
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
|
||
|
|
main.settings
|
||
|
|
form(action="/settings" method="post")
|
||
|
|
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
|