[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

7 files changed, 35 insertions, 83 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>
diff --git a/addons/website_slides/views/website_slides_templates_lesson_embed.xml b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
index 286fd52fd5f..e6fe7a1ae81 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_embed.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
@@ -74,7 +74,7 @@
                                 </div>
                             </div>
                             <t t-if="slide.slide_type in ('presentation', 'document')">
-                                <div id="PDFViewerLoader" class="oe_slides_loader d-flex justify-content-center align-items-center position-absolute h-100 w-100">
+                                <div id="PDFViewerLoader" class="oe_slides_loader position-absolute mt-3 mr-3" style="right:0">
                                     <div class="toast show">
                                         <div class="toast-header">
                                             <i class="fa fa-circle-o-notch fa-spin mr-2"/><b>Loading...</b>
diff --git a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
index f317515d402..dc5e07c1d15 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
@@ -8,20 +8,14 @@
 
             <div class="o_wslides_slide_fs_header d-flex flex-shrink-0 text-white">
                 <div class="d-flex">
-                    <a class="o_wslides_fs_toggle_sidebar d-flex align-items-center px-3" href="#" title="Lessons">
+                    <a class="o_wslides_fs_toggle_sidebar d-flex align-items-center px-3 active" href="#" title="Lessons">
                         <i class="fa fa-bars"/><span class="d-none d-md-inline-block ml-1">Lessons</span>
                     </a>
                     <a class="o_wslides_fs_review d-flex align-items-center px-3" t-att-href="slide.channel_id.website_url" title="Reviews" t-if="slide.channel_id.allow_comment">
                         <i class="fa fa-pencil"/><span class="d-none d-md-inline-block ml-1">Write a review</span>
                     </a>
                 </div>
-                <div class="o_wslides_fs_slide_title flex-grow-1 d-flex align-items-center px-2 px-md-3">
-                    <t t-call="website_slides.slide_icon">
-                        <t t-set="icon_class" t-value="'mr-2 text'"/>
-                    </t>
-                    <span class="o_wslides_fs_slide_title_span" t-esc="slide.name"/>
-                </div>
-                <div class="d-flex">
+                <div class="d-flex ml-auto">
                     <a class="d-flex align-items-center px-3" t-attf-href="/slides/#{slug(slide.channel_id)}">
                         <i class="fa fa-sign-out d-md-none"/><span class="d-none d-md-inline-block ml-1">Back to course</span>
                     </a>
@@ -70,19 +64,14 @@
 
 
 <template id="slide_fullscreen_sidebar_category" name="Slides category template for fullscreen view side bar">
-    <li class="o_wslides_fs_sidebar_section py-2 px-3 mb-2">
-        <a class="text-uppercase text-500 py-1 small d-block" t-attf-id="category-collapse-#{category.id if category else 0}" data-toggle="collapse" role="button" aria-expanded="true" t-att-href="('#collapse-%s') % (category.id if category else 0)" t-attf-aria-controls="collapse-#{category.id if category else 0}">
-            <t t-if="category">
-                <b t-field="category.name"/>
-            </t>
-            <t t-else="">
-                <b >Uncategorized</b>
-            </t>
+    <li class="o_wslides_fs_sidebar_section py-2 px-3">
+        <a t-if="category" class="text-uppercase text-500 py-1 small d-block" t-attf-id="category-collapse-#{category.id if category else 0}" data-toggle="collapse" role="button" aria-expanded="true" t-att-href="('#collapse-%s') % (category.id if category else 0)" t-attf-aria-controls="collapse-#{category.id if category else 0}">
+            <b t-field="category.name"/>
         </a>
         <ul class="o_wslides_fs_sidebar_section_slides collapse show position-relative px-0 pb-1 my-0 mx-n3" t-att-id="('collapse-%s') % (category.id if category else 0)">
             <t t-foreach="slides" t-as="slide">
                 <t t-set="slide_completed" t-value="channel_progress[slide.id].get('completed')"/>
-                <li t-att-class="'o_wslides_fs_sidebar_list_item d-flex align-items-top py-2 %s text-truncate' % ('active' if slide.id == current_slide.id else '')"
+                <li t-att-class="'o_wslides_fs_sidebar_list_item d-flex align-items-top py-1 %s' % ('active' if slide.id == current_slide.id else '')"
                     t-att-data-id="slide.id"
                     t-att-data-name="slide.name"
                     t-att-data-type="slide.slide_type"
@@ -93,17 +82,13 @@
                     t-att-data-embed-code="slide.embed_code if slide.slide_type in ['video', 'document', 'presentation', 'infographic'] else False"
                     t-att-data-readonly="not channel_progress[slide.id]"
                     >
-                    <span class="ml-3 pt-1">
-                        <i t-if="not slide_completed" class="fa fa-circle-thin overflow-hidden d-flex align-items-center justify-content-center" t-att-data-slide-id="slide.id"/>
-                        <i t-if="slide_completed" class="o_wslides_slide_completed fa fa-check-circle rounded-circle text-success bg-white border border-success overflow-hidden d-flex align-items-center justify-content-center" t-att-data-slide-id="slide.id"/>
+                    <span class="ml-3">
+                        <i t-if="slide_completed" class="o_wslides_slide_completed fa fa-check fa-fw text-success" t-att-data-slide-id="slide.id"/>
+                        <i t-else="" class="fa fa-circle-thin fa-fw" t-att-data-slide-id="slide.id"/>
                     </span>
                     <div class="ml-2">
                         <a class="d-block pt-1" href="#">
                             <div class="d-flex ">
-                                <t t-call="website_slides.slide_icon">
-                                    <t t-set="icon_class" t-value="'mr-1 fw-fw'"/>
-                                    <t t-set="slide" t-value="slide"/>
-                                </t>
                                 <div class="o_wslides_fs_slide_name" t-esc="slide.name"/>
                             </div>
                         </a>