1
0
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:
Cadence Ember 2021-04-26 00:02:23 +12:00
parent 49d32cfee2
commit e4f6ffe122
No known key found for this signature in database
GPG Key ID: BC1C2C61CF521B17
2 changed files with 67 additions and 25 deletions

View File

@ -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

View File

@ -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