mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2024-11-22 07:37:29 +00:00
Add descriptions to settings
This commit is contained in:
parent
49d32cfee2
commit
e4f6ffe122
@ -6,21 +6,27 @@ mixin fieldset(name)
|
||||
.fieldset-contents
|
||||
block
|
||||
|
||||
mixin input(id, description, type, placeholder, disabled, list)
|
||||
mixin input({id, label, description, type, placeholder, disabled, list})
|
||||
- disabled = disabled || false
|
||||
.field-row
|
||||
label.description(for=id)= description
|
||||
input(type=type id=id name=id value=settings[id] placeholder=placeholder disabled=disabled list=`${id}-list`).border-look
|
||||
label.field-row__label(for=id)= label
|
||||
input(type=type id=id name=id value=settings[id] placeholder=placeholder disabled=disabled list=`${id}-list`).border-look.field-row__input
|
||||
if list
|
||||
datalist(id=`${id}-list`)
|
||||
each item in list
|
||||
option(value=item)
|
||||
if description
|
||||
.field-row__description= description
|
||||
|
||||
mixin select(id, description, disabled, options)
|
||||
mixin select({id, label, description, disabled, options})
|
||||
- disabled = disabled || false
|
||||
.field-row
|
||||
label.description(for=id)= description
|
||||
select(id=id name=id disabled=disabled).border-look
|
||||
label.field-row__label(for=id)= label
|
||||
select(id=id name=id disabled=disabled).border-look.field-row__input
|
||||
each option in options
|
||||
option(value=option.value selected=(option.value == settings[id]))= option.text
|
||||
if description
|
||||
.field-row__description!= description
|
||||
|
||||
block head
|
||||
title Settings - CloudTube
|
||||
@ -30,25 +36,47 @@ block content
|
||||
form(method="post" action="/settings")
|
||||
+fieldset("Settings")
|
||||
|
||||
+input("instance", "Instance", "url", constants.user_settings.instance.default, false, instances)
|
||||
+input({
|
||||
id: "instance",
|
||||
label: "Instance",
|
||||
description: 'CloudTube will fetch information from this <a href="https://invidious.io/">Invidious</a> or <a href="https://git.sr.ht/~cadence/NewLeaf">NewLeaf</a> instance.',
|
||||
type: "url",
|
||||
placeholder: constants.user_settings.instance.default,
|
||||
list: instances
|
||||
})
|
||||
|
||||
+select("quality", "Preferred qualities", false, [
|
||||
{value: "0", text: "720p"},
|
||||
{value: "4", text: "360p"},
|
||||
{value: "1", text: "Best possible"},
|
||||
{value: "2", text: "Best <=1080p"},
|
||||
{value: "3", text: "Best <=30fps"}
|
||||
])
|
||||
+select({
|
||||
id: "local",
|
||||
label: "Fetch videos",
|
||||
description: "If remote, the instance above will be used.\nIf local, CloudTube will try to connect to an instance running on your own computer. This can bypass blocks, but requires you to run the instance software.",
|
||||
options: [
|
||||
{value: "0", text: "Remote instance"},
|
||||
{value: "1", text: "Locally"}
|
||||
]
|
||||
})
|
||||
|
||||
+select("save_history", "Watched videos history", false, [
|
||||
{value: "0", text: "Don't store"},
|
||||
{value: "1", text: "Store on server"}
|
||||
])
|
||||
+select({
|
||||
id: "quality",
|
||||
label: "Preferred qualities",
|
||||
description: "All qualities are available on the watch page. This defines their sort order.",
|
||||
options: [
|
||||
{value: "0", text: "720p"},
|
||||
{value: "4", text: "360p"},
|
||||
{value: "1", text: "Best possible"},
|
||||
{value: "2", text: "Best <=1080p"},
|
||||
{value: "3", text: "Best <=30fps"}
|
||||
]
|
||||
})
|
||||
|
||||
+select("local", "Fetch videos", false, [
|
||||
{value: "0", text: "Remote instance"},
|
||||
{value: "1", text: "Locally"}
|
||||
])
|
||||
+select({
|
||||
id: "save_history",
|
||||
label: "Watched videos history",
|
||||
description: "Watched videos will appear in a dimmer colour.\nTurning this off will delete your existing watch history.",
|
||||
options: [
|
||||
{value: "0", text: "Don't store"},
|
||||
{value: "1", text: "Store on server"}
|
||||
]
|
||||
})
|
||||
|
||||
.save-settings
|
||||
button.border-look Save
|
||||
|
@ -29,21 +29,35 @@ fieldset
|
||||
|
||||
.field-row
|
||||
line-height: 1
|
||||
display: flex
|
||||
display: grid
|
||||
grid-template-areas: "label input" "description description"
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
position: relative
|
||||
padding-bottom: 5px
|
||||
margin-bottom: 5px
|
||||
border-bottom: 1px solid #bbb
|
||||
border-bottom: 1px solid #999
|
||||
|
||||
@media screen and (max-width: 400px)
|
||||
flex-direction: column
|
||||
align-items: start
|
||||
padding-bottom: 15px
|
||||
|
||||
.description
|
||||
&__label
|
||||
grid-area: label
|
||||
padding: 8px 8px 8px 0px
|
||||
color: #fff
|
||||
|
||||
&__input
|
||||
grid-area: input
|
||||
justify-self: end
|
||||
|
||||
&__description
|
||||
grid-area: description
|
||||
white-space: pre-line
|
||||
margin: 12px 0px 18px
|
||||
font-size: 16px
|
||||
color: #ccc
|
||||
|
||||
//
|
||||
.checkbox-row
|
||||
|
Loading…
Reference in New Issue
Block a user