mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2024-11-14 04:17: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, [
|
||||
+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({
|
||||
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("save_history", "Watched videos history", false, [
|
||||
+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"}
|
||||
])
|
||||
|
||||
+select("local", "Fetch videos", false, [
|
||||
{value: "0", text: "Remote instance"},
|
||||
{value: "1", text: "Locally"}
|
||||
])
|
||||
]
|
||||
})
|
||||
|
||||
.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