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