diff --git a/pug/settings.pug b/pug/settings.pug
index 1130063..e873031 100644
--- a/pug/settings.pug
+++ b/pug/settings.pug
@@ -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 Invidious or NewLeaf 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
diff --git a/sass/includes/forms.sass b/sass/includes/forms.sass
index 5f48a5f..69246b3 100644
--- a/sass/includes/forms.sass
+++ b/sass/includes/forms.sass
@@ -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