From 548ff54714b12be028665117bbf81561a47bd056 Mon Sep 17 00:00:00 2001 From: Yuki Nakagawa Date: Mon, 17 Apr 2017 17:37:00 +0900 Subject: 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 ++++++++++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) (limited to 'app/assets') 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 { -- cgit