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.gh/stable
parent
a67909ec1e
commit
548ff54714
|
@ -120,10 +120,12 @@
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
display: block;
|
display: block;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
|
||||||
.sidebar-wrapper, .content-wrapper {
|
.sidebar-wrapper, .content-wrapper {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
overflow: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
|
|
|
@ -42,7 +42,7 @@ code {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.input.file, .input.select {
|
.input.file, .input.select, .input.radio_buttons {
|
||||||
padding: 15px 0;
|
padding: 15px 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
|
@ -59,6 +59,15 @@ code {
|
||||||
margin-bottom: 25px;
|
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 {
|
.input.boolean {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
||||||
|
@ -72,7 +81,8 @@ code {
|
||||||
|
|
||||||
label.checkbox {
|
label.checkbox {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 25px;
|
padding-left: 25px;
|
||||||
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type=checkbox] {
|
input[type=checkbox] {
|
||||||
|
@ -182,6 +192,10 @@ code {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.flash-message {
|
.flash-message {
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
%p.hint= t('imports.preface')
|
%p.hint= t('imports.preface')
|
||||||
|
|
||||||
= simple_form_for @import, url: settings_import_path do |f|
|
= 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')
|
= f.input :data, wrapper: :with_label, hint: t('simple_form.hints.imports.data')
|
||||||
|
|
||||||
.actions
|
.actions
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
.fields-group
|
.fields-group
|
||||||
= f.input :locale, collection: I18n.available_locales, wrapper: :with_label, include_blank: false, label_method: lambda { |locale| human_locale(locale) }
|
= 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
|
.fields-group
|
||||||
= f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff|
|
= f.simple_fields_for :notification_emails, hash_to_object(current_user.settings.notification_emails) do |ff|
|
||||||
|
|
Reference in New Issue