From eccf8b9f5cf8e67ea4b02ebfece534489cc5ae33 Mon Sep 17 00:00:00 2001 From: David Beguin Date: Mon, 21 Sep 2020 11:27:25 +0000 Subject: [PATCH] [FIX] survey: fix session manager style issues This commit fixes a bunch of small issues on the session manager. - Put the progress bar below survey link to optimise available room for title. - Ensure attendees count is also updated when refreshing the results and progress bar. - Ensure the graph is correctly setup when there is no attendee yet. - Update y axis in chart when new attendee join the survey in the middle of a session. - Set padding top to chart to avoid top bar label to disapear from chart if bar is near 100%. Task ID: 2343508 closes odoo/odoo#58291 X-original-commit: 018a07dc7bba85f5afdd41f8610098a3c493c82a Signed-off-by: Thibault Delavallee (tde) --- .../controllers/survey_session_manage.py | 3 +- .../static/src/js/survey_session_chart.js | 15 ++++++- .../static/src/js/survey_session_manage.js | 7 ++-- .../survey/static/src/scss/survey_form.scss | 41 +++++++++---------- .../survey_templates_user_input_session.xml | 34 +++++++-------- 5 files changed, 57 insertions(+), 43 deletions(-) diff --git a/addons/survey/controllers/survey_session_manage.py b/addons/survey/controllers/survey_session_manage.py index dc1b501b7d6..04923c99aca 100644 --- a/addons/survey/controllers/survey_session_manage.py +++ b/addons/survey/controllers/survey_session_manage.py @@ -236,5 +236,6 @@ class UserInputSession(http.Controller): 'question_statistics_graph': full_statistics.get('graph_data'), 'input_line_values': input_line_values, 'answers_validity': json.dumps(answers_validity), - 'answer_count': survey.session_question_answer_count + 'answer_count': survey.session_question_answer_count, + 'attendees_count': survey.session_answer_count, } diff --git a/addons/survey/static/src/js/survey_session_chart.js b/addons/survey/static/src/js/survey_session_chart.js index b748d39f9af..2247b569ab9 100644 --- a/addons/survey/static/src/js/survey_session_chart.js +++ b/addons/survey/static/src/js/survey_session_chart.js @@ -36,7 +36,7 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({ * * @param {Object} questionStatistics object containing chart data (counts / labels / ...) */ - updateChart: function (questionStatistics) { + updateChart: function (questionStatistics, newAttendeesCount) { if (questionStatistics) { this.questionStatistics = this._processQuestionStatistics(questionStatistics); } @@ -51,6 +51,11 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({ } this.chart.data.datasets[0].data[i] = value; } + + if (newAttendeesCount) { + this.chart.config.options.scales.yAxes[0].ticks.max = newAttendeesCount + 1; + } + this.chart.update(); } }, @@ -157,6 +162,14 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({ }, tooltips: { enabled: false, + }, + layout: { + padding: { + left: 0, + right: 0, + top: 50, + bottom: 0 + } } }, }; diff --git a/addons/survey/static/src/js/survey_session_manage.js b/addons/survey/static/src/js/survey_session_manage.js index ce02b595340..44a90c195fa 100644 --- a/addons/survey/static/src/js/survey_session_manage.js +++ b/addons/survey/static/src/js/survey_session_manage.js @@ -38,7 +38,6 @@ publicWidget.registry.SurveySessionManage = publicWidget.Widget.extend({ self.sessionShowLeaderboard = self.$el.data('sessionShowLeaderboard'); self.hasCorrectAnswers = self.$el.data('hasCorrectAnswers'); // display props - self.attendeesCount = self.$el.data('attendeesCount'); self.showBarChart = self.$el.data('showBarChart'); self.showTextAnswers = self.$el.data('showTextAnswers'); @@ -383,8 +382,10 @@ publicWidget.registry.SurveySessionManage = publicWidget.Widget.extend({ route: _.str.sprintf('/survey/session/results/%s', self.surveyAccessToken) }).then(function (questionResults) { if (questionResults) { + self.attendeesCount = questionResults.attendees_count; + if (self.resultsChart && questionResults.question_statistics_graph) { - self.resultsChart.updateChart(JSON.parse(questionResults.question_statistics_graph)); + self.resultsChart.updateChart(JSON.parse(questionResults.question_statistics_graph), self.attendeesCount); } else if (self.textAnswers) { self.textAnswers.updateTextAnswers(questionResults.input_line_values); } @@ -518,7 +519,7 @@ publicWidget.registry.SurveySessionManage = publicWidget.Widget.extend({ * - The refresh of results (used for chart/text answers/progress bar) */ _setupIntervals: function () { - this.attendeesCount = this.$el.data('attendeesCount'); + this.attendeesCount = this.$el.data('attendeesCount') ? this.$el.data('attendeesCount') : 0; if (this.isStartScreen) { this.attendeesRefreshInterval = setInterval(this._refreshAttendeesCount.bind(this), 2000); diff --git a/addons/survey/static/src/scss/survey_form.scss b/addons/survey/static/src/scss/survey_form.scss index 54529c90ca2..270b0e613de 100644 --- a/addons/survey/static/src/scss/survey_form.scss +++ b/addons/survey/static/src/scss/survey_form.scss @@ -241,11 +241,11 @@ nav#oe_main_menu_navbar { .o_survey_session_manage { h1 { - font-size: 4rem; + font-size: 3rem; } h2 { - font-size: 3.2rem; + font-size: 2.5rem; } .o_survey_session_navigation { @@ -263,20 +263,28 @@ nav#oe_main_menu_navbar { } } - .o_survey_session_link_reminder { - position: absolute; - right: 2rem; - top: 2rem; - } - .o_survey_manage_fontsize_14 { font-size: 1.4rem; } - .o_survey_session_manage_container { - height: 100vh; - width: 85vw; + .o_survey_question_header { + top: 1em; + > div { + width: 400px; + } + .progress { + height: 2rem; + border-radius: 0.6rem; + font-size: 1.2rem; + background-color: #cfcfcf; + .progress-bar { + width: 0%; + transition: width 1s ease; + } + } + } + .o_survey_session_manage_container { .o_survey_choice_key { display: none; } @@ -292,17 +300,6 @@ nav#oe_main_menu_navbar { margin-bottom: 6rem; } - .progress { - height: 2rem; - border-radius: 0.6rem; - font-size: 1.2rem; - background-color: #cfcfcf; - .progress-bar { - width: 0%; - transition: width 1s ease; - } - } - .o_survey_session_text_answer { .o_survey_session_text_answer_container { border: solid 1.6px; diff --git a/addons/survey/views/survey_templates_user_input_session.xml b/addons/survey/views/survey_templates_user_input_session.xml index 57c78c18745..68156c0c68e 100644 --- a/addons/survey/views/survey_templates_user_input_session.xml +++ b/addons/survey/views/survey_templates_user_input_session.xml @@ -76,32 +76,34 @@ t-att-data-current-screen="'question' if is_scored_question else 'userInputs'" t-att-data-show-bar-chart="show_bar_chart" t-att-data-show-text-answers="show_text_answers"> -
-

+
+

Go to

+

+ +

+
+
+
+
+ 0 / +
+
+
+
+
+
-

-
-

- -

-
-
-
- 0 / -
-
-
-
+