Optimize user setting page for mobile browser (#1924)

* Remove overflow because it blocks scrolling on mobile safari.

* Add “-webkit-overflow-scrolling: touch;” to enable smooth scroll on mobile safari and other webkit browsers.

* Use radio buttons in user setting page.

Because select tags with long text are not fit in the width of mobile devices.

* Add flex property to fit labels to devise width.

* Change font size of select.

It causes auto zooming on mobile safari.

4 files changed, 20 insertions, 4 deletions

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index e27b88e5f..2916b915b 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -120,10 +120,12 @@
   @media screen and (max-width: 600px) {
     display: block;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     .sidebar-wrapper, .content-wrapper {
       flex: 0 0 auto;
       height: auto;
+      overflow: initial;
     }
 
     .sidebar {
diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index e5e8697a0..c6a8b5b02 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -42,7 +42,7 @@ code {
     }
   }
 
-  .input.file, .input.select {
+  .input.file, .input.select, .input.radio_buttons {
     padding: 15px 0;
     margin-bottom: 0;
 
@@ -59,6 +59,15 @@ code {
     margin-bottom: 25px;
   }
 
+  .input.radio_buttons .radio label {
+    margin-bottom: 5px;
+    font-family: inherit;
+    font-size: 14px;
+    color: white;
+    display: block;
+    width: auto;
+  }
+
   .input.boolean {
     margin-bottom: 5px;
 
@@ -72,7 +81,8 @@ code {
 
     label.checkbox {
       position: relative;
-	    padding-left: 25px;
+      padding-left: 25px;
+      flex: 1 1 auto;
     }
 
     input[type=checkbox] {
@@ -182,6 +192,10 @@ code {
       }
     }
   }
+
+  select {
+    font-size: 16px;
+  }
 }
 
 .flash-message {
diff --git a/app/views/settings/imports/show.html.haml b/app/views/settings/imports/show.html.haml
index 8502913dc..991dd4e94 100644
--- a/app/views/settings/imports/show.html.haml
+++ b/app/views/settings/imports/show.html.haml
@@ -4,7 +4,7 @@
 %p.hint= t('imports.preface')
 
 = simple_form_for @import, url: settings_import_path do |f|
-  = f.input :type, collection: Import.types.keys, wrapper: :with_label, include_blank: false, label_method: lambda { |type| I18n.t("imports.types.#{type}") }
+  = f.input :type, collection: Import.types.keys, wrapper: :with_label, include_blank: false, label_method: lambda { |type| I18n.t("imports.types.#{type}") }, as: :radio_buttons, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
   = f.input :data, wrapper: :with_label, hint: t('simple_form.hints.imports.data')
 
   .actions
diff --git a/app/views/settings/preferences/show.html.haml b/app/views/settings/preferences/show.html.haml
index e819429b6..4f4326763 100644
--- a/app/views/settings/preferences/show.html.haml
+++ b/app/views/settings/preferences/show.html.haml
@@ -7,7 +7,7 @@
   .fields-group
     = f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }
 
-    = f.input :setting_default_privacy, collection: Status.visibilities.keys - ['direct'], wrapper: :with_label, include_blank: false, label_method: lambda { |visibility| I18n.t("statuses.visibilities.#{visibility}") }, required: false
+    = f.input :setting_default_privacy, collection: Status.visibilities.keys - ['direct'], wrapper: :with_label, include_blank: false, label_method: lambda { |visibility| I18n.t("statuses.visibilities.#{visibility}") }, required: false, as: :radio_buttons, collection_wrapper_tag: 'ul', item_wrapper_tag: 'li'
 
   .fields-group
     = f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff|