commit: 548ff54714b12be028665117bbf81561a47bd056
parent: a67909ec1e2c620e7bbc4452b6457438b24741b1
Author: Yuki Nakagawa <yukinari3po@gmail.com>
Date: Mon, 17 Apr 2017 17:37:00 +0900
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.
Diffstat:
4 files changed, 20 insertions(+), 4 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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|