From 72c4ffc3eed6edea749b5f2ec33c42a989f17556 Mon Sep 17 00:00:00 2001 From: Adrien Schoffeniels Date: Thu, 14 Apr 2022 14:28:00 +0000 Subject: [PATCH] [IMP] survey: improve mobile UI PURPOSE This commit removes a few unessential content, fixes misalignments and removes the input autofocus on mobile devices SPECS Remove a few unessential content Some contents take a considerable space on mobile without adding essential information, requiring the user to scroll to see useful info. These contents are now removed on mobile devices. Fix misalignments Some parts were misaligned on small screens, taking unnecessary space or cutting parts of sentences. These parts have been adapted to handle small screens. Remove action buttons related to live sessions on small screens Since the presentation mode doesn't look good on mobile devices (questions have a lot of linebreaks, arrows do not always work), and since normally no one presents a live session using a mobile device, the action buttons "Create Live Session", "Open Session Manager" and "Close Live Session" are now hidden on small screens. Remove the autofocus on the first input in survey forms on mobile devices When a new page of a survey is loaded, the first input is autofocused so that the user can directly complete the survey without manually getting the focus. This causes inconsistencies and undesired behaviors on mobile devices. Especially, when the focus is set automatically on Android devices, the soft keyboard is opened, the viewport is reduced and the view is scrolled to the input, which involves that the user misses information about the survey (such as the beginning of the question for long questions), or section descriptions. The autofocus has therefore been removed for mobile devices. Task-2622693 Part-of: odoo/odoo#87990 --- addons/survey/models/survey_survey.py | 1 + addons/survey/static/src/js/survey_form.js | 21 ++++---- .../src/scss/survey_templates_form.scss | 8 ++-- .../src/scss/survey_templates_results.scss | 2 + addons/survey/views/survey_question_views.xml | 2 +- addons/survey/views/survey_survey_views.xml | 12 ++--- addons/survey/views/survey_templates.xml | 2 +- .../views/survey_templates_statistics.xml | 48 ++++++++++--------- .../survey_templates_user_input_session.xml | 4 +- addons/survey/wizard/survey_invite_views.xml | 2 +- 10 files changed, 54 insertions(+), 48 deletions(-) diff --git a/addons/survey/models/survey_survey.py b/addons/survey/models/survey_survey.py index d8a71cc95d5..8a1298c647d 100644 --- a/addons/survey/models/survey_survey.py +++ b/addons/survey/models/survey_survey.py @@ -908,6 +908,7 @@ class Survey(models.Model): ) return { 'type': 'ir.actions.act_window', + 'name': _("Share a Survey"), 'view_mode': 'form', 'res_model': 'survey.invite', 'target': 'new', diff --git a/addons/survey/static/src/js/survey_form.js b/addons/survey/static/src/js/survey_form.js index e891be48cd5..30474cceb23 100644 --- a/addons/survey/static/src/js/survey_form.js +++ b/addons/survey/static/src/js/survey_form.js @@ -4,6 +4,7 @@ odoo.define('survey.form', function (require) { var field_utils = require('web.field_utils'); var publicWidget = require('web.public.widget'); var time = require('web.time'); +var config = require('web.config'); var core = require('web.core'); var Dialog = require('web.Dialog'); var dom = require('web.dom'); @@ -322,7 +323,7 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend(SurveyPreloa */ _updateEnterButtonText: function (event) { const $target = event.target; - const isTextbox = event.type == "focusin" && $target.tagName.toLowerCase() === 'textarea'; + const isTextbox = event.type === "focusin" && $target.tagName.toLowerCase() === 'textarea'; const text = !isTextbox ? _t('or press Enter') : isMac ? _t("or press ⌘+Enter") : _t("or press CTRL+Enter"); $('#enter-tooltip').text(text); }, @@ -575,8 +576,7 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend(SurveyPreloa this.$('.o_survey_form_content').fadeIn(this.fadeInOutDelay); $("html, body").animate({ scrollTop: 0 }, this.fadeInOutDelay); self._focusOnFirstInput(); - } - else if (result && result.fields && result.error === 'validation') { + } else if (result && result.fields && result.error === 'validation') { this.$('.o_survey_form_content').fadeIn(0); this._showErrors(result.fields); } else { @@ -936,7 +936,7 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend(SurveyPreloa if (!this._checkIsMasterTab()) { this.shouldReloadMasterTab = true; - this.masterTabCheckInterval = setInterval(function() { + this.masterTabCheckInterval = setInterval(function () { if (self._checkIsMasterTab()) { clearInterval(self.masterTabCheckInterval); } @@ -1007,7 +1007,7 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend(SurveyPreloa } $dateGroup.datetimepicker({ - format : datetimepickerFormat, + format: datetimepickerFormat, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates, @@ -1022,7 +1022,7 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend(SurveyPreloa up: 'fa fa-chevron-up', down: 'fa fa-chevron-down', }, - locale : moment.locale(), + locale: moment.locale(), allowInputToggle: true, }); $dateGroup.on('error.datetimepicker', function (err) { @@ -1039,7 +1039,7 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend(SurveyPreloa }); }, - _formatDateTime: function (datetimeValue, format){ + _formatDateTime: function (datetimeValue, format) { return moment(field_utils.format.datetime(moment(datetimeValue), null, {timezone: true}), format); }, @@ -1057,14 +1057,15 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend(SurveyPreloa /** * Will automatically focus on the first input to allow the user to complete directly the survey, - * without having to manually get the focus (only if the input has the right type - can write something inside -) + * without having to manually get the focus (only if the input has the right type - can write something inside - + * and if the device is not a mobile device to avoid missing information when the soft keyboard is opened) */ _focusOnFirstInput: function () { var $firstTextInput = this.$('.js_question-wrapper').first() // Take first question .find("input[type='text'],input[type='number'],textarea") // get 'text' inputs .filter('.form-control') // needed for the auto-resize .not('.o_survey_comment'); // remove inputs for comments that does not count as answers - if ($firstTextInput.length > 0) { + if ($firstTextInput.length > 0 && !config.device.isMobile) { $firstTextInput.focus(); } }, @@ -1085,7 +1086,7 @@ publicWidget.registry.SurveyFormWidget = publicWidget.Widget.extend(SurveyPreloa window.location.reload(); } return true; - } else if (!$errorModal.modal._isShown){ + } else if (!$errorModal.modal._isShown) { $errorModal.find('.text-danger').text(window.location.hostname); $errorModal.modal('show'); } diff --git a/addons/survey/static/src/scss/survey_templates_form.scss b/addons/survey/static/src/scss/survey_templates_form.scss index b884538b200..8a4ad3153b0 100644 --- a/addons/survey/static/src/scss/survey_templates_form.scss +++ b/addons/survey/static/src/scss/survey_templates_form.scss @@ -41,8 +41,8 @@ _::-webkit-full-page-media, _:future, :root .o_survey_wrap { } .o_survey_progress_wrapper { - min-width: 11rem; - max-width: 15rem; + min-width: 7rem; + max-width: 11rem; .o_survey_progress { height:0.5em; @@ -294,11 +294,11 @@ _::-webkit-full-page-media, _:future, :root .o_survey_wrap { cursor: pointer; &.o_survey_session_navigation_next { - right: 2rem; + right: 1rem; } &.o_survey_session_navigation_previous { - left: 2rem; + left: 1rem; } } diff --git a/addons/survey/static/src/scss/survey_templates_results.scss b/addons/survey/static/src/scss/survey_templates_results.scss index 2a22efbf3ad..c984279580f 100644 --- a/addons/survey/static/src/scss/survey_templates_results.scss +++ b/addons/survey/static/src/scss/survey_templates_results.scss @@ -48,6 +48,8 @@ .btn.filter-remove-answer { border-color: #DEE2E6; background-color: transparent; + white-space: normal; + text-align: left; i.fa-times { cursor: pointer; } diff --git a/addons/survey/views/survey_question_views.xml b/addons/survey/views/survey_question_views.xml index af2be5e67fd..97b8cc1167a 100644 --- a/addons/survey/views/survey_question_views.xml +++ b/addons/survey/views/survey_question_views.xml @@ -31,7 +31,7 @@ -
+
diff --git a/addons/survey/views/survey_survey_views.xml b/addons/survey/views/survey_survey_views.xml index 4d3373d4a2c..d5eb11a6b94 100644 --- a/addons/survey/views/survey_survey_views.xml +++ b/addons/survey/views/survey_survey_views.xml @@ -13,11 +13,11 @@
-
+

Questions
@@ -249,7 +249,7 @@ Registered
-
+
@@ -271,7 +271,7 @@ Certified
-
+