[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#58288

X-original-commit: 018a07dc7bba85f5afdd41f8610098a3c493c82a
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

3 files changed, 37 insertions, 26 deletions

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;