Improve UI of admin site settings

app/controllers/admin/settings_controller.rb

@@ -22,7 +22,7 @@ class SettingsController < BaseController
     ).freeze
 
     def edit
-      @settings = Setting.all_as_records
+      @admin_settings = Form::AdminSettings.new
     end
 
     def update
@@ -38,12 +38,12 @@ def update
     private
 
     def settings_params
-      params.permit(ADMIN_SETTINGS)
+      params.require(:form_admin_settings).permit(ADMIN_SETTINGS)
     end
 
     def value_for_update(key, value)
       if BOOLEAN_SETTINGS.include?(key)
-        value == 'true'
+        value == '1'
       else
         value
       end

app/javascript/styles/forms.scss

@@ -57,10 +57,7 @@ code {
     }
   }
 
-  .input.file,
-  .input.select,
-  .input.radio_buttons,
-  .input.check_boxes {
+  .input.with_label {
     padding: 15px 0;
     margin-bottom: 0;
 
@@ -71,6 +68,44 @@ code {
       display: block;
       padding-top: 5px;
     }
+
+    &.boolean {
+      padding: initial;
+      margin-bottom: initial;
+
+      .label_input > label {
+        font-family: inherit;
+        font-size: 14px;
+        color: $primary-text-color;
+        display: block;
+        width: auto;
+      }
+
+      label.checkbox {
+        position: relative;
+        padding-left: 25px;
+        flex: 1 1 auto;
+      }
+    }
+  }
+
+  .input.with_block_label {
+    & > label {
+      font-family: inherit;
+      font-size: 16px;
+      color: $primary-text-color;
+      display: block;
+      padding-top: 5px;
+    }
+
+    .hint {
+      margin-bottom: 15px;
+    }
+
+    li {
+      float: left;
+      width: 50%;
+    }
   }
 
   .fields-group {
@@ -106,7 +141,7 @@ code {
     input[type=checkbox] {
       position: absolute;
       left: 0;
-      top: 1px;
+      top: 5px;
       margin: 0;
     }
 
@@ -116,6 +151,29 @@ code {
     }
   }
 
+  .check_boxes {
+    .checkbox {
+      label {
+        font-family: inherit;
+        font-size: 14px;
+        color: $primary-text-color;
+        display: block;
+        width: auto;
+        position: relative;
+        padding-top: 5px;
+        padding-left: 25px;
+        flex: 1 1 auto;
+      }
+
+      input[type=checkbox] {
+        position: absolute;
+        left: 0;
+        top: 5px;
+        margin: 0;
+      }
+    }
+  }
+
   input[type=text],
   input[type=number],
   input[type=email],
@@ -390,25 +448,6 @@ code {
   }
 }
 
-.user_filtered_languages {
-  & > label {
-    font-family: inherit;
-    font-size: 16px;
-    color: $primary-text-color;
-    display: block;
-    padding-top: 5px;
-  }
-
-  .hint {
-    margin-bottom: 15px;
-  }
-
-  li {
-    float: left;
-    width: 50%;
-  }
-}
-
 .post-follow-actions {
   text-align: center;
   color: $ui-primary-color;

app/models/form/admin_settings.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Form::AdminSettings
+  include ActiveModel::Model
+
+  delegate(
+    :site_contact_username,
+    :site_contact_username=,
+    :site_contact_email,
+    :site_contact_email=,
+    :site_title,
+    :site_title=,
+    :site_description,
+    :site_description=,
+    :site_extended_description,
+    :site_extended_description=,
+    :site_terms,
+    :site_terms=,
+    :open_registrations,
+    :open_registrations=,
+    :closed_registrations_message,
+    :closed_registrations_message=,
+    :open_deletion,
+    :open_deletion=,
+    :timeline_preview,
+    :timeline_preview=,
+    to: Setting
+  )
+end

app/views/admin/settings/edit.html.haml

@@ -1,64 +1,32 @@
 - content_for :page_title do
   = t('admin.settings.title')
 
-= form_tag(admin_settings_path, method: :put, class: 'simple_form', style: 'max-width: 100%') do
-  %table.table
-    %thead
-      %tr
-        %th{ width: '40%' }
-          = t('admin.settings.setting')
-        %th
-    %tbody
-      %tr
-        %td
-          %strong= t('admin.settings.contact_information.label')
-        %td= text_field_tag :site_contact_username, @settings['site_contact_username'].value, place_holder: t('admin.settings.contact_information.username')
-      %tr
-        %td
-          %strong= t('admin.accounts.email')
-        %td= text_field_tag :site_contact_email, @settings['site_contact_email'].value, place_holder: t('admin.settings.contact_information.email')
-      %tr
-        %td
-          %strong= t('admin.settings.site_title')
-        %td= text_field_tag :site_title, @settings['site_title'].value
-      %tr
-        %td
-          %strong= t('admin.settings.site_description.title')
-          %p= t('admin.settings.site_description.desc_html')
-        %td= text_area_tag :site_description, @settings['site_description'].value, rows: 8
-      %tr
-        %td
-          %strong= t('admin.settings.site_description_extended.title')
-          %p= t('admin.settings.site_description_extended.desc_html')
-        %td= text_area_tag :site_extended_description, @settings['site_extended_description'].value, rows: 8
-      %tr
-        %td
-          %strong= t('admin.settings.site_terms.title')
-          %p= t('admin.settings.site_terms.desc_html')
-        %td= text_area_tag :site_terms, @settings['site_terms'].value, rows: 8
-      %tr
-        %td
-          %strong= t('admin.settings.registrations.open.title')
-          %p= t('admin.settings.registrations.open.desc_html')
-        %td
-          = select_tag :open_registrations, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['open_registrations'].value)
-      %tr
-        %td
-          %strong= t('admin.settings.registrations.closed_message.title')
-          %p= t('admin.settings.registrations.closed_message.desc_html')
-        %td= text_area_tag :closed_registrations_message, @settings['closed_registrations_message'].value, rows: 8
-      %tr
-        %td
-          %strong= t('admin.settings.registrations.deletion.title')
-          %p= t('admin.settings.registrations.deletion.desc_html')
-        %td
-          = select_tag :open_deletion, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['open_deletion'].value)
-      %tr
-        %td
-          %strong= t('admin.settings.timeline_preview.title')
-          %p= t('admin.settings.timeline_preview.desc_html')
-        %td
-          = select_tag :timeline_preview, options_for_select({ t('simple_form.no') => false, t('simple_form.yes') => true }, @settings['timeline_preview'].value)
+= simple_form_for @admin_settings, url: admin_settings_path, html: { method: :patch } do |f|
+  .fields-group
+    = f.input :site_title, placeholder: t('admin.settings.site_title')
+    = f.input :site_description, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_description.title'), hint: t('admin.settings.site_description.desc_html'), input_html: { rows: 8 }
+    = f.input :site_contact_username, placeholder: t('admin.settings.contact_information.username')
+    = f.input :site_contact_email, placeholder: t('admin.settings.contact_information.email')
 
-  .simple_form.actions
-    = button_tag t('generic.save_changes'), type: :submit, class: :btn
+  %hr/
+
+  .fields-group
+    = f.input :timeline_preview, as: :boolean, wrapper: :with_label, label: t('admin.settings.timeline_preview.title'), hint: t('admin.settings.timeline_preview.desc_html')
+
+  .fields-group
+    = f.input :open_registrations, as: :boolean, wrapper: :with_label, label: t('admin.settings.registrations.open.title'), hint: t('admin.settings.registrations.open.desc_html')
+
+  .fields-group
+    = f.input :open_deletion, as: :boolean, wrapper: :with_label, label: t('admin.settings.registrations.deletion.title'), hint: t('admin.settings.registrations.deletion.desc_html')
+
+  .fields-group
+    = f.input :closed_registrations_message, as: :text, wrapper: :with_block_label, label: t('admin.settings.registrations.closed_message.title'), hint: t('admin.settings.registrations.closed_message.desc_html'), input_html: { rows: 8 }
+
+  %hr/
+
+  .fields-group
+    = f.input :site_extended_description, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_description_extended.title'), hint: t('admin.settings.site_description_extended.desc_html'), input_html: { rows: 8 }
+    = f.input :site_terms, wrapper: :with_block_label, as: :text, label: t('admin.settings.site_terms.title'), hint: t('admin.settings.site_terms.desc_html'), input_html: { rows: 8 }
+
+  .actions
+    = f.button :button, t('generic.save_changes'), type: :submit

config/initializers/simple_form.rb

@@ -50,14 +50,14 @@
     # b.use :full_error, wrap_with: { tag: :span, class: :error }
   end
 
-  config.wrappers :with_label, class: :input, hint_class: :field_with_hint, error_class: :field_with_errors do |b|
+  config.wrappers :with_label, class: [:input, :with_label], hint_class: :field_with_hint, error_class: :field_with_errors do |b|
     b.use :html5
     b.use :label_input, wrap_with: { tag: :div, class: :label_input }
     b.use :hint,  wrap_with: { tag: :span, class: :hint }
     b.use :error, wrap_with: { tag: :span, class: :error }
   end
 
-  config.wrappers :with_block_label, class: :input, hint_class: :field_with_hint, error_class: :field_with_errors do |b|
+  config.wrappers :with_block_label, class: [:input, :with_block_label], hint_class: :field_with_hint, error_class: :field_with_errors do |b|
     b.use :html5
     b.use :label
     b.use :hint, wrap_with: { tag: :span, class: :hint }

config/locales/ca.yml

@@ -155,15 +155,13 @@ ca:
     settings:
       contact_information:
         email: Introduir una adreça de correu electrònic pùblica
-        label: Informació de contacte
         username: Introduir un nom d'usuari
       registrations:
         closed_message:
           desc_html: Apareix en la primera pàgina quan es tanquen els registres<br>Pot utilitzar etiquetes HTML
           title: Missatge de registre tancat
         open:
           title: Registre obert
-      setting: Ajust
       site_description:
         desc_html: Es mostra com un paràgraf a la pàgina principal i s'utilitza com una etiqueta meta.<br>Pots utilitzar etiquetes HTML, en particular <code>&lt;a&gt;</code> i <code>&lt;em&gt;</code>.
         title: Descripció del lloc

config/locales/de.yml

@@ -129,15 +129,13 @@ de:
     settings:
       contact_information:
         email: Eine öffentliche E-Mail-Adresse angeben
-        label: Kontaktinformationen
         username: Einen Benutzernamen angeben
       registrations:
         closed_message:
           desc_html: Wird auf der Frontseite angezeigt, wenn die Registrierung geschlossen ist<br>Du kannst HTML-Tags benutzen
           title: Nachricht über geschlossene Registrierung
         open:
           title: Offene Registrierung
-      setting: Einstellung
       site_description:
         desc_html: Wird als Absatz auf der Frontseite angezeigt und als Meta-Tag benutzt.<br>Du kannst HTML-Tags benutzen, insbesondere <code>&lt;a&gt;</code> und <code>&lt;em&gt;</code>.
         title: Seitenbeschreibung

config/locales/en.yml

@@ -168,33 +168,31 @@ en:
       view: View
     settings:
       contact_information:
-        email: Enter a public e-mail address
-        label: Contact information
-        username: Enter a username
+        email: Business e-mail
+        username: Contact username
       registrations:
         closed_message:
-          desc_html: Displayed on frontpage when registrations are closed<br>You can use HTML tags
+          desc_html: Displayed on frontpage when registrations are closed. You can use HTML tags
           title: Closed registration message
+        deletion:
+          desc_html: Allow anyone to delete their account
+          title: Open account deletion
         open:
           desc_html: Allow anyone to create an account
           title: Open registration
-        deletion:
-          desc_html: Allow anyone to delete their account
-          title: Open deletion
-      timeline_preview:
-        desc_html: Display public timeline on landing page
-        title: Timeline preview
-      setting: Setting
       site_description:
-        desc_html: Displayed as a paragraph on the frontpage and used as a meta tag.<br>You can use HTML tags, in particular <code>&lt;a&gt;</code> and <code>&lt;em&gt;</code>.
-        title: Site description
+        desc_html: Introductory paragraph on the frontpage and in meta tags. You can use HTML tags, in particular <code>&lt;a&gt;</code> and <code>&lt;em&gt;</code>.
+        title: Instance description
       site_description_extended:
-        desc_html: Displayed on extended information page<br>You can use HTML tags
-        title: Extended site description
+        desc_html: A good place for your code of conduct, rules, guidelines and other things that set your instance apart. You can use HTML tags
+        title: Custom extended information
       site_terms:
-        desc_html: Displayed on terms page<br>You can use HTML tags
-        title: Privacy policy
-      site_title: Site title
+        desc_html: You can write your own privacy policy, terms of service or other legalese. You can use HTML tags
+        title: Custom terms of service
+      site_title: Instance name
+      timeline_preview:
+        desc_html: Display public timeline on landing page
+        title: Timeline preview
       title: Site Settings
     subscriptions:
       callback_url: Callback URL
@@ -230,12 +228,12 @@ en:
   authorize_follow:
     error: Unfortunately, there was an error looking up the remote account
     follow: Follow
-    following: 'Success! You are now following:'
     follow_request: 'You have sent a follow request to:'
+    following: 'Success! You are now following:'
     post_follow:
-      web: Go to web
-      return: Return to the user's profile
       close: Or, you can just close this window.
+      return: Return to the user's profile
+      web: Go to web
     prompt_html: 'You (<strong>%{self}</strong>) have requested to follow:'
     title: Follow %{acct}
   datetime:

config/locales/fa.yml

@@ -141,15 +141,13 @@ fa:
     settings:
       contact_information:
         email: یک نشانی ایمیل عمومی وارد کنید
-        label: اطلاعات تماس
         username: یک نام کاربری وارد کنید
       registrations:
         closed_message:
           desc_html: وقتی امکان ثبت نام روی سرور فعال نباشد در صفحهٔ اصلی نمایش می‌یابد<br>می‌توانید HTML بنویسید
           title: پیغام برای فعال‌نبودن ثبت نام
         open:
           title: امکان ثبت نام
-      setting: تنظیمات
       site_description:
         desc_html: روی صفحهٔ اصلی نمایش می‌یابد و همچنین به عنوان تگ‌های HTML.<br>می‌توانید HTML بنویسید, به‌ویژه <code>&lt;a&gt;</code> و <code>&lt;em&gt;</code>.
         title: دربارهٔ سایت