Add descriptions to settings

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
+    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
+    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
+    label.field-row__label(for=id)= label
-    select(id=id name=id disabled=disabled).border-look
+    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({
-          {value: "0", text: "720p"},
+          id: "local",
-          {value: "4", text: "360p"},
+          label: "Fetch videos",
-          {value: "1", text: "Best possible"},
+          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.",
-          {value: "2", text: "Best <=1080p"},
+          options: [
-          {value: "3", text: "Best <=30fps"}
+            {value: "0", text: "Remote instance"},
-        ])
+            {value: "1", text: "Locally"}
+          ]
+        })
 
-        +select("save_history", "Watched videos history", false, [
+        +select({
-          {value: "0", text: "Don't store"},
+          id: "quality",
-          {value: "1", text: "Store on server"}
+          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, [
+        +select({
-          {value: "0", text: "Remote instance"},
+          id: "save_history",
-          {value: "1", text: "Locally"}
+          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

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