[FIX] website_slides: fix various fullscreen layout issues

Improve overall widget layout, perform some small tweaks. Also remove
top title as it is not wanted.

Commit linked to task ID 1941250 and PR #31977

5 files changed, 25 insertions, 58 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 30d23f20f2f..71e8041daee 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
@@ -181,7 +181,7 @@ odoo.define('website_slides.fullscreen', function (require) {
          */
         setSlideCompleted: function (slideId) {
             var $elem = this.$('.fa-circle-thin[data-slide-id="'+slideId+'"]');
-            $elem.removeClass('fa-circle-thin').addClass('fa-check-circle text-success bg-white o_wslides_slide_completed rounded-circle');
+            $elem.removeClass('fa-circle-thin').addClass('fa-check text-success o_wslides_slide_completed');
         },
         /**
          * Updates the progressbar whenever a lesson is completed
@@ -484,8 +484,7 @@ odoo.define('website_slides.fullscreen', function (require) {
         _onChangeSlide: function () {
             var self = this;
             var slide = this.get('slide');
-            return this._fetchSlideContent().then(function() { // update title and render content
-                self.$('.o_wslides_fs_slide_title').html(QWeb.render('website.slides.fullscreen.title', {widget: self}));
+            return this._fetchSlideContent().then(function() { // render content
                 return self._renderSlide();
             }).then(function() {
                 if (slide._autoSetDone && !session.is_website_user) {  // no useless RPC call
diff --git a/addons/website_slides/static/src/js/slides_embed.js b/addons/website_slides/static/src/js/slides_embed.js
index b5ea4325375..5d86a257c7d 100644
--- a/addons/website_slides/static/src/js/slides_embed.js
+++ b/addons/website_slides/static/src/js/slides_embed.js
@@ -32,7 +32,6 @@ $(document).ready(function () {
                 this.$('canvas').show();
                 this.$('#page_count').text(this.pdf_viewer.pdf_page_total);
                 this.$('#PDFViewerLoader').hide();
-                this.$('#PDFViewerLoader').toggleClass('d-flex');
                 if (this.pdf_viewer.pdf_page_total > 1) {
                     this.$('.o_slide_navigation_buttons').removeClass('hide');
                 }
@@ -44,16 +43,19 @@ $(document).ready(function () {
             on_rendered_page: function (pageNumber) {
                 if (pageNumber) {
                     this.$('#page_number').val(pageNumber);
+                    this.navUpdate(pageNumber);
                 }
             },
             // page switching
             render_page: function (pageNumber) {
                 this.pdf_viewer.renderPage(pageNumber).then(this.on_rendered_page.bind(this));
+                this.navUpdate(pageNumber);
             },
             change_page: function () {
                 var pageAsked = parseInt(this.$('#page_number').val(), 10);
                 if (1 <= pageAsked && pageAsked <= this.pdf_viewer.pdf_page_total) {
                     this.pdf_viewer.changePage(pageAsked).then(this.on_rendered_page.bind(this));
+                    this.navUpdate(pageAsked);
                 } else {
                     // if page number out of range, reset the page_counter to the actual page
                     this.$('#page_number').val(this.pdf_viewer.pdf_page_current);
@@ -77,23 +79,28 @@ $(document).ready(function () {
                     if (pageNum) {
                         self.on_rendered_page(pageNum);
                     }
-                    self.$("#slide_suggest").hide();
+                    self.$("#slide_suggest").addClass('d-none');
                 });
             },
             first: function () {
                 var self = this;
                 this.pdf_viewer.firstPage().then(function (pageNum) {
                     self.on_rendered_page(pageNum);
-                    self.$("#slide_suggest").hide();
+                    self.$("#slide_suggest").addClass('d-none');
                 });
             },
             last: function () {
                 var self = this;
                 this.pdf_viewer.lastPage().then(function (pageNum) {
                     self.on_rendered_page(pageNum);
-                    self.$("#slide_suggest").hide();
+                    self.$("#slide_suggest").addClass('d-none');
                 });
             },
+            navUpdate: function (pageNum) {
+                this.$('#first').toggleClass('disabled', pageNum < 3 );
+                this.$('#previous').toggleClass('disabled', pageNum < 2 );
+                this.$('#next, #last').removeClass('disabled');
+            },
             // full screen mode
             fullscreen: function () {
                 this.pdf_viewer.toggleFullScreen();
@@ -105,7 +112,8 @@ $(document).ready(function () {
             },
             // display suggestion displayed after last slide
             display_suggested_slides: function () {
-                this.$("#slide_suggest").show();
+                this.$("#slide_suggest").removeClass('d-none');
+                this.$('#next, #last').addClass('disabled');
             },
         };
 
diff --git a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
index d4a5cbd7105..a4ce29f60d3 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
@@ -4,10 +4,10 @@ $o-wslides-tabs-height: 36px;
 .o_wslides_fs_main {
     @include o-position-absolute(0,0,0,0);
     z-index: 2000;
+    background-image: linear-gradient(120deg, $o-wslides-color-dark2, $o-wslides-color-dark3);
 
     .o_wslides_slide_fs_header {
-        background-image: linear-gradient(120deg, $o-wslides-color-dark1, $o-wslides-color-dark2);
-        padding-bottom: 3px;
+        background-image: linear-gradient(-6deg, $o-wslides-color-dark1, $o-wslides-color-dark2);
         height: 50px;
 
         > div > a {
@@ -24,29 +24,22 @@ $o-wslides-tabs-height: 36px;
             }
 
             &.active{
-                background-color: transparent;
+                background-color: $o-wslides-color-dark1;
                 color: #fff;
             }
         }
     }
 
-    .o_wslides_fs_container {
-        background-color: $o-wslides-color-dark2;
-    }
-
-    .o_wslides_fs_content {
+    .o_wslides_fs_player, .o_wslides_fs_sidebar, .o_wslides_fs_sidebar_content {
         transition: all .2s ease-in;
     }
 
     .o_wslides_fs_sidebar {
-        transition: all .2s ease-in;
         background-image: linear-gradient(160deg, $o-wslides-color-dark1, $o-wslides-color-dark2);
-        box-shadow: 5px 0 15px rgba(black, 0.2);
         position: relative;
 
         .o_wslides_fs_sidebar_content {
             min-width: $o-wslides-fs-side-width;
-            transition: all .2s ease-in;
         }
 
         .o_wslides_fs_toggle_sidebar {
@@ -57,6 +50,7 @@ $o-wslides-tabs-height: 36px;
 
         @include media-breakpoint-down (md) {
             @include o-position-absolute(0, auto, 0, 0);
+            box-shadow: 5px 0 15px rgba(black, 0.2);
 
             &.o_wslides_fs_sidebar_hidden {
                 display: none;
@@ -82,6 +76,7 @@ $o-wslides-tabs-height: 36px;
 
         .o_wslides_fs_sidebar_section {
             background-color: rgba($o-wslides-color-dark3, 0.3);
+            margin-bottom: 1px;
         }
 
         .o_wslides_fs_sidebar_section_slides li {
@@ -97,11 +92,6 @@ $o-wslides-tabs-height: 36px;
                 }
             }
 
-            i.o_wslides_slide_completed{
-                @include size(13px);
-                box-shadow: inset 0 0 0 1px theme-color('success');
-            }
-
             .o_wslides_fs_slide_name {
                 line-height: 1;
             }
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 9cbdef9fc87..c6bbc1998fa 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -130,10 +130,6 @@ $o-wslides-fs-side-width: 300px;
 // **************************************************
 
 .o_wslides_home_main {
-    .o_wprofile_next_rank_card {
-        background-color: transparent !important;
-    }
-
     .o_wslides_home_aside_loggedin {
         @include media-breakpoint-up(lg) {
             background: none;
@@ -361,22 +357,10 @@ $o-wslides-fs-side-width: 300px;
     }
 }
 
-// Slide display
-div.embed-responsive {
-    iframe.o_wslides_iframe_viewer {
-        position: relative;
-    }
-}
-
-// PDF Viewer Share bar
 .oe_slides_share_bar{
     padding: 10px 0;
 }
 
-.oe_slides_panel_footer #page_number {
-    width: 45px;
-}
-
 .oe_show_footer {
     z-index: $MAX-Z-INDEX; // Looks terrible but seems necessary due to fullscreen & canvas in PDFSlidesViewer
 }
diff --git a/addons/website_slides/static/src/xml/website_slides_fullscreen.xml b/addons/website_slides/static/src/xml/website_slides_fullscreen.xml
index 683dc45752d..6793dd5c736 100644
--- a/addons/website_slides/static/src/xml/website_slides_fullscreen.xml
+++ b/addons/website_slides/static/src/xml/website_slides_fullscreen.xml
@@ -1,28 +1,14 @@
 <templates id="template" xml:space="preserve">
 
-    <t t-name="website.slides.fullscreen.title">
-        <t t-if="!widget.get('slide').isQuiz">
-            <i t-if="widget.get('slide').type == 'document'" class="fa fa-file-pdf-o mr-2"></i>
-            <i t-if="widget.get('slide').type == 'infographic'" class="fa fa-file-picture-o mr-2"></i>
-            <i t-if="widget.get('slide').type == 'video'" class="fa fa-play-circle mr-2"></i>
-            <i t-if="widget.get('slide').type == 'webpage'" class="fa fa-file-text mr-2"></i>
-            <i t-if="widget.get('slide').type == 'quiz'" class="fa fa-question-circle mr-2 text"></i>
-            <span class="o_wslides_fs_slide_title_span" t-esc="widget.get('slide').name"/>
-        </t>
-        <t t-else="">
-            <span><i class="fa fa-flag-checkered"></i>Quiz: <span t-esc="widget.get('slide').name"/></span>
-        </t>
-    </t>
-
     <t t-name="website.slides.fullscreen.content">
         <t t-if="_.contains(['document', 'presentation'], widget.get('slide').type)">
-            <div class="embed-responsive embed-responsive-4by3 embed-responsive-item h-100">
-                <iframe t-att-src="widget.get('slide').embedUrl" class="o_wslides_iframe_viewer h-100 w-100" allowFullScreen="true" frameborder="0"></iframe>
+            <div class="embed-responsive h-100">
+                <iframe t-att-src="widget.get('slide').embedUrl" class="o_wslides_iframe_viewer" allowFullScreen="true" frameborder="0"/>
             </div>
         </t>
         <t t-if="widget.get('slide').type === 'infographic'">
-            <div class="w-100 h-100 text-center">
-                <img t-att-src="'/web/image/slide.slide/'+ widget.get('slide').id +'/image'" class="img-fluid" style="height: 100%" alt="Slide image"/>
+            <div class="o_wslides_fs_player w-100 h-100 overflow-auto d-flex align-items-start justify-content-center">
+                <img t-att-src="'/web/image/slide.slide/'+ widget.get('slide').id +'/image'" class="img-fluid position-relative m-auto" alt="Slide image"/>
             </div>
         </t>
     </t>