mirror of
https://git.sr.ht/~cadence/bibliogram
synced 2024-11-22 08:07:30 +00:00
Add nonfunctional settings page
This commit is contained in:
Cadence Ember
parent
12c02fd8af
commit
120faae576
1
src/site/html/static/img/tick.svg
Normal file
1
src/site/html/static/img/tick.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.467 8.467"><path d="M1.66 5.462l1.685 1.482L6.763 1.78" fill="none" stroke="#151515" stroke-width="1.455" stroke-linecap="round" stroke-linejoin="round" paint-order="fill markers stroke"/></svg>
|
||||
|
After Width: | Height: | Size: 272 B |
101
src/site/pug/settings.pug
Normal file
101
src/site/pug/settings.pug
Normal file
@ -0,0 +1,101 @@
|
||||
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
|
||||
152
src/site/sass/_forms.sass
Normal file
152
src/site/sass/_forms.sass
Normal file
@ -0,0 +1,152 @@
|
||||
@mixin medium-border
|
||||
border-color: #aaa
|
||||
|
||||
@mixin full-border
|
||||
border-color: #888
|
||||
|
||||
@mixin outside-shadow
|
||||
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.2)
|
||||
|
||||
@mixin inside-shadow
|
||||
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2) inset
|
||||
|
||||
@mixin curve-in
|
||||
background: linear-gradient(to bottom, #efebe9, #faf8f7)
|
||||
|
||||
@mixin curve-out
|
||||
background: linear-gradient(to bottom, #fff 20%, #efeceb)
|
||||
|
||||
@mixin curve-out-major
|
||||
background: linear-gradient(to bottom, #fff 10%, #e4e2e0)
|
||||
|
||||
@mixin disabled
|
||||
background-color: #dfd6cb
|
||||
color: #606060
|
||||
|
||||
@mixin acts-like-button
|
||||
&:not(:disabled)
|
||||
cursor: pointer
|
||||
@include curve-out
|
||||
|
||||
&:hover, &:focus
|
||||
@include medium-border
|
||||
@include outside-shadow
|
||||
|
||||
&:active
|
||||
@include full-border
|
||||
@include inside-shadow
|
||||
@include curve-in
|
||||
|
||||
fieldset
|
||||
border: none
|
||||
padding: 55px 0px 0px 0px
|
||||
position: relative
|
||||
|
||||
@media screen and (max-width: 400px)
|
||||
padding-top: 70px
|
||||
|
||||
legend
|
||||
position: absolute
|
||||
top: 5px
|
||||
left: 0px
|
||||
width: 100%
|
||||
font-size: 28px
|
||||
font-weight: bold
|
||||
padding: 0
|
||||
border-bottom: 1px solid #333
|
||||
line-height: 1.56
|
||||
|
||||
@media screen and (max-width: 400px)
|
||||
margin-top: 15px
|
||||
|
||||
|
||||
.field-row
|
||||
line-height: 1
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
position: relative
|
||||
padding-bottom: 5px
|
||||
margin-bottom: 5px
|
||||
border-bottom: 1px solid #bbb
|
||||
|
||||
@media screen and (max-width: 400px)
|
||||
flex-direction: column
|
||||
align-items: start
|
||||
padding-bottom: 15px
|
||||
|
||||
.description
|
||||
padding: 8px 8px 8px 0px
|
||||
|
||||
button, select, input, .checkbox-row .pill
|
||||
font-family: inherit
|
||||
font-size: inherit
|
||||
color: #222
|
||||
border: 1px solid #ccc
|
||||
border-radius: 4px
|
||||
background-color: #fff
|
||||
padding: 8px
|
||||
line-height: 1
|
||||
|
||||
&::placeholder
|
||||
font-style: italic
|
||||
|
||||
&:disabled
|
||||
@include disabled
|
||||
|
||||
input[type="text"]
|
||||
width: 200px
|
||||
|
||||
select
|
||||
padding: 4px 6px 4px 4px
|
||||
|
||||
input:not(:disabled)
|
||||
&:hover
|
||||
@include medium-border
|
||||
|
||||
&:focus
|
||||
@include full-border
|
||||
@include outside-shadow
|
||||
|
||||
select:not(:disabled)
|
||||
&:hover, &:focus
|
||||
@include medium-border
|
||||
@include outside-shadow
|
||||
@include curve-out
|
||||
|
||||
button
|
||||
@include acts-like-button
|
||||
|
||||
.checkbox-row
|
||||
.pill
|
||||
display: flex
|
||||
align-items: center
|
||||
user-select: none
|
||||
|
||||
.fake-checkbox
|
||||
-webkit-appearance: none
|
||||
background-color: white
|
||||
width: 16px
|
||||
height: 16px
|
||||
padding: 0px
|
||||
border: 1px solid #666
|
||||
border-radius: 3px
|
||||
margin-left: 8px
|
||||
position: relative
|
||||
outline: none
|
||||
|
||||
.checkbox
|
||||
display: none
|
||||
|
||||
&:checked + .pill .fake-checkbox
|
||||
background: center center / contain url(/static/img/tick.svg)
|
||||
|
||||
&:disabled + .pill
|
||||
@include disabled
|
||||
|
||||
.fake-checkbox
|
||||
@include disabled
|
||||
|
||||
&.checkbox:not(:disabled) + .pill
|
||||
@include acts-like-button
|
||||
cursor: pointer
|
||||
@ -1,3 +1,5 @@
|
||||
@use "forms"
|
||||
|
||||
$layout-a-max: 820px
|
||||
$layout-b-min: 821px
|
||||
$layout-c-max: 680px
|
||||
@ -5,6 +7,7 @@ $layout-home-a-max: 520px
|
||||
$layout-home-b-min: 521px
|
||||
$main-theme-link-color: #085cae
|
||||
$medium-red-bg: #6a2222
|
||||
$solar-background: #fff4e8
|
||||
|
||||
@font-face
|
||||
font-family: "Bariol"
|
||||
@ -124,7 +127,7 @@ body
|
||||
.timeline
|
||||
--image-size: 260px
|
||||
$image-size: var(--image-size)
|
||||
$background: #fff4e8
|
||||
$background: $solar-background
|
||||
|
||||
@media screen and (max-width: $layout-a-max)
|
||||
--image-size: 150px
|
||||
@ -159,9 +162,6 @@ body
|
||||
top: 50%
|
||||
border-top: 1px solid
|
||||
|
||||
|
||||
&:no-posts
|
||||
|
||||
.number
|
||||
position: relative
|
||||
z-index: 1
|
||||
@ -633,3 +633,27 @@ body
|
||||
|
||||
a, a:visited
|
||||
color: $main-theme-link-color
|
||||
|
||||
.settings-page
|
||||
background-color: #fff4e8
|
||||
padding: 0px 10px 50px
|
||||
|
||||
a, a:visited
|
||||
color: $main-theme-link-color
|
||||
|
||||
.settings
|
||||
max-width: 600px
|
||||
margin: 0 auto
|
||||
|
||||
.action-container
|
||||
margin-top: 20px
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
align-items: center
|
||||
|
||||
.save-button
|
||||
@include forms.curve-out-major
|
||||
width: 180px
|
||||
|
||||
.home-link
|
||||
font-size: 21px
|
||||
|
||||
@ -22,6 +22,7 @@ subdirs("pug", async (err, dirs) => {
|
||||
|
||||
pinski.setNotFoundTarget("/404")
|
||||
pinski.addRoute("/static/css/main.css", "sass/main.sass", "sass")
|
||||
pinski.addRoute("/settings", "pug/settings.pug", "pug")
|
||||
pinski.addPugDir("pug", dirs)
|
||||
pinski.addSassDir("sass")
|
||||
pinski.addStaticHashTableDir("html/static/js")
|
||||
|
||||
Loading…
Reference in New Issue
Block a user