From 548ff54714b12be028665117bbf81561a47bd056 Mon Sep 17 00:00:00 2001 From: Yuki Nakagawa Date: Mon, 17 Apr 2017 17:37:00 +0900 Subject: [PATCH] Optimize user setting page for mobile browser (#1924) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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. --- app/assets/stylesheets/admin.scss | 2 ++ app/assets/stylesheets/forms.scss | 18 ++++++++++++++++-- app/views/settings/imports/show.html.haml | 2 +- app/views/settings/preferences/show.html.haml | 2 +- 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index e27b88e5..2916b915 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 e5e8697a..c6a8b5b0 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 8502913d..991dd4e9 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 e819429b..4f432676 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|