[IMP] website_slides,portal_rating: update UX

Minor updates to improve user useability of website_slides primarily with
clearer wording and more intuitive displays/display interactions. Primary
purpose is for onboarding wow.

Related to:

closes odoo/odoo#42030

Task: 2070662
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

2 files changed, 17 insertions, 11 deletions

diff --git a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
index ef317465bbc..152916ce436 100644
--- a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
+++ b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
@@ -441,9 +441,7 @@ odoo.define('website_slides.fullscreen', function (require) {
         start: function (){
             var self = this;
             this.on('change:slide', this, this._onChangeSlide);
-            if  (config.device.size_class > config.device.SIZES.MD) {
-                this._toggleSidebar();
-            }
+            this._toggleSidebar();
             return this._super.apply(this, arguments).then(function () {
                 return self._onChangeSlide(); // trigger manually once DOM ready, since slide content is not rendered server side
             });
@@ -605,10 +603,12 @@ odoo.define('website_slides.fullscreen', function (require) {
         // Handlers
         //--------------------------------------------------------------------------
         /**
-         * Method called whenever the user changes slides.
-         * When the current slide is changed, it will autoimatically update the widget
-         * and allow it to fetch the content if needs be, render it, update the url and set the
-         * slide as "completed" if its type makes it necessary
+         * Triggered whenever the user changes slides.
+         * When the current slide is changed, widget will be automatically updated
+         * and allowed to: fetch the content if needed, render it, update the url,
+         * and set slide as "completed" according to its type requirements. In
+         * mobile case (i.e. limited screensize), sidebar will be toggled since 
+         * sidebar will block most or all of new slide visibility.
          *
          * @private
          */
@@ -619,6 +619,9 @@ odoo.define('website_slides.fullscreen', function (require) {
             return this._fetchSlideContent().then(function() { // render content
                 var websiteName = document.title.split(" | ")[1]; // get the website name from title
                 document.title =  (websiteName) ? slide.name + ' | ' + websiteName : slide.name;
+                if  (config.device.size_class < config.device.SIZES.MD) {
+                    self._toggleSidebar(); // hide sidebar when small device screen
+                }
                 return self._renderSlide();
             }).then(function() {
                 if (slide._autoSetDone && !session.is_website_user) {  // no useless RPC call
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 9f393d85124..b6a87ef61ca 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -210,7 +210,7 @@ $o-wslides-fs-side-width: 300px;
 }
 
 @mixin o-wslides-tabs($tab-active-color: $o-wslides-color-bg) {
-    margin-top: ($o-wslides-tabs-height * -1) + 0.05rem;
+    margin-top: ($o-wslides-tabs-height * -1);
     border-bottom: 0;
 
     .nav-link {
@@ -219,9 +219,12 @@ $o-wslides-fs-side-width: 300px;
         line-height: $line-height-base;
         @include o-hover-text-color(rgba(white, 0.8), white);
 
-        &, &:hover {
-            border-color: #875A7B;
-            background: transparent;
+        & {
+            border-color: transparent;
+        }
+
+        &:hover {
+            background: #3d2938;
         }
 
         &.active {