From 69fb136a4840fdfc21a74a285a9548cbbe22b240 Mon Sep 17 00:00:00 2001
From: sri-odoo <sri@odoo.com>
Date: Wed, 13 Mar 2019 11:07:20 +0000
Subject: [PATCH] [FIX] website_slides: styling fullscreen mode

Since the fullscreen widget has been revamped, it needed
to be pixel perfect. This commit cleans the CSS and DOM
structure in order to optimize and sublime it.

Task-1941250
---
 .../src/js/slides_course_fullscreen_player.js |  26 +--
 .../src/scss/slides_slide_fullscreen.scss     | 152 ++++++++-----
 .../static/src/scss/website_slides.scss       |   6 +-
 .../static/src/xml/slide_quiz.xml             |   2 +-
 .../website_slides_templates_homepage.xml     |   4 +-
 ...ite_slides_templates_lesson_fullscreen.xml | 209 +++++++++---------
 .../views/website_slides_templates.xml        |   7 +-
 7 files changed, 227 insertions(+), 179 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 3a8d0165a52..a83df8a01cd 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
@@ -177,11 +177,11 @@ odoo.define('website_slides.fullscreen', function (require) {
          * Greens up the bullet when the slide is completed
          *
          * @public
-         * @param {*} slide_id
+         * @param {Integer} slideId
          */
         setSlideCompleted: function (slideId) {
             var $elem = this.$('.fa-circle-thin[data-slide-id="'+slideId+'"]');
-            $elem.removeClass('fa-circle-thin').addClass('fa-check-circle text-success');
+            $elem.removeClass('fa-circle-thin').addClass('fa-check-circle text-success bg-white o_wslides_slide_completed rounded-circle');
         },
         /**
          * Updates the progressbar whenever a lesson is completed
@@ -235,6 +235,8 @@ odoo.define('website_slides.fullscreen', function (require) {
          * @param {*} ev
          */
         _onClickTab: function (ev) {
+            ev.stopPropagation();
+            ev.preventDefault();
             var $elem = $(ev.currentTarget);
             var isQuiz = $elem.data('isQuiz');
             var slideID = parseInt($elem.data('id'));
@@ -250,12 +252,8 @@ odoo.define('website_slides.fullscreen', function (require) {
         _onChangeCurrentSlide: function () {
             var slide = this.get('slideEntry');
             this.$('.o_wslides_fs_sidebar_list_item.active').removeClass('active');
-            var selector = '.o_wslides_fs_sidebar_list_item[data-id='+slide.id+']';
-            if (slide.isQuiz) {
-                selector += '[data-is-quiz="1"]';
-            } else {
-                selector += '[data-is-quiz!="1"]';
-            }
+            var selector = '.o_wslides_fs_sidebar_list_item[data-id='+slide.id+'][data-is-quiz!="1"]';
+
             this.$(selector).addClass('active');
             this.trigger_up('change_slide', this.get('slideEntry'));
         },
@@ -291,7 +289,6 @@ odoo.define('website_slides.fullscreen', function (require) {
         },
         custom_events: {
             'change_slide': '_onChangeSlideRequest',
-            'toggle_sidebar': '_onToggleSidebar',
             'slide_completed': '_onSlideCompleted',
             'quiz_completed': '_onSlideCompleted',
             'slide_go_next': '_onSlideGoToNext',
@@ -425,7 +422,6 @@ odoo.define('website_slides.fullscreen', function (require) {
             var slide = this.get('slide');
             var $content = this.$('.o_wslides_fs_content');
             $content.empty();
-            $content.removeClass('bg-white'); // webpage case
 
             // display quiz slide, or quiz attached to a slide
             if (slide.type === 'quiz' || slide.isQuiz) {
@@ -440,8 +436,9 @@ odoo.define('website_slides.fullscreen', function (require) {
                 this.videoPlayer = new VideoPlayer(this, slide);
                 return this.videoPlayer.appendTo($content);
             } else if (slide.type === 'webpage'){
-                $(slide.htmlContent).appendTo($content);
-                $content.addClass('bg-white');
+                var $wpContainer = $('<div>').addClass('o_wslide_fs_webpage_content bg-white block w-100 overflow-auto');
+                $(slide.htmlContent).appendTo($wpContainer);
+                $content.append($wpContainer);
             }
             return $.when();
         },
@@ -480,7 +477,7 @@ odoo.define('website_slides.fullscreen', function (require) {
          *
          * @private
          */
-        _onChangeSlide: function (){
+        _onChangeSlide: function () {
             var self = this;
             var slide = this.get('slide');
             return this._fetchSlideContent().then(function() { // update title and render content
@@ -534,8 +531,7 @@ odoo.define('website_slides.fullscreen', function (require) {
          */
         _onClickToggleSidebar: function (ev){
             ev.preventDefault();
-            this.$('.o_wslides_fs_sidebar').toggleClass('d-none');
-            this.$('.o_wslides_fs_content').toggleClass('col-10').toggleClass('col-12');
+            this.$('.o_wslides_fs_sidebar').toggleClass('o_wslides_fs_sidebar_hidden');
             this.$('.o_wslides_fs_toggle_sidebar').toggleClass('active');
         },
     });
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 3868ad873cb..b377c7c3ca2 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
@@ -1,79 +1,126 @@
-$slides-bg-fullscreen: #313A44;
-$slides-bg-fullscreen-dark: darken($slides-bg-fullscreen,5%);
-$slides-bg-fullscreen-darker: darken($slides-bg-fullscreen,10%);
+$o-wslides-color-bg: desaturate(map-get($grays, "200"), 80%);
+$o-wslides-color-dark1: #47525f;
+$o-wslides-color-dark2: #1f262d;
+$o-wslides-color-dark3: #101216;
+$o-wslides-fs-side-width: 300px;
+
+$o-wslides-tabs-height: 36px;
 
-$slides-text: #8A8F93;
 
 .o_wslides_fs_main {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    @include o-position-absolute(0,0,0,0);
     z-index: 2000;
-    color: $slides-text;
 
     .o_wslides_slide_fs_header {
-        background-color: $slides-bg-fullscreen;
+        background-image: linear-gradient(120deg, $o-wslides-color-dark1, $o-wslides-color-dark2);
+        padding-bottom: 3px;
         height: 50px;
-    }
 
-    .o_wslides_fs_container {
-        height: calc(100% - 50px);
-        background-color: $slides-bg-fullscreen;
-    }
+        > div > a {
+            background-color: rgba($o-wslides-color-dark3, 0.5);
+            @include o-hover-text-color(rgba(white, 0.8), white);
+            text-decoration: none!important;
 
-    .o_wslides_fs_sidebar {
-        transition: all .2s ease-in;
-        overflow: auto;
-
-        .o_wslides_fs_sidebar_header {
-            color: $slides-text;
-            .progress {
-                height: 5px;
+            + a {
+                margin-left: 1px;
             }
-        }
 
-        .o_wslides_fs_sidebar_section {
-            background-color: $slides-bg-fullscreen-dark;
-            border: none;
-            border-radius: 0;
+            &:hover {
+                background-color: rgba($o-wslides-color-dark3, 0.2);
+            }
 
-            .card-body {
-                color: $slides-text;
-            }
-        }
-
-        .o_wslides_fs_sidebar_list{
-            li:hover,
-            li.active {
-                cursor: pointer;
-                background-color: $slides-bg-fullscreen-darker;
-            }
-            li {
-                color: $slides-text;
-            }
-            li.active{
-                border-left: 2px solid $primary;
+            &.active{
+                background-color: transparent;
                 color: #fff;
             }
         }
     }
 
-    .o_wslides_fs_content {
-        background-color: $slides-bg-fullscreen-dark;
+    .o_wslides_fs_container {
+        background-color: $o-wslides-color-dark2;
     }
 
-    .o_wslides_fs_content_no_sidebar {
-        max-width: 100%;
-        width: 100%;
+    .o_wslides_fs_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 {
+            @include o-position-absolute(0, auto, 0, 100%);
+            width: 700px;
+            background: rgba(black, 0.2);
+        }
+
+        @include media-breakpoint-down (md) {
+            @include o-position-absolute(0, auto, 0, 0);
+
+            &.o_wslides_fs_sidebar_hidden {
+                display: none;
+            }
+        }
+
+        @include media-breakpoint-up (md) {
+            width: $o-wslides-fs-side-width;
+
+            &.o_wslides_fs_sidebar_hidden {
+                width: 0;
+
+                .o_wslides_fs_sidebar_content {
+                    transform: translateX(-100%);
+                }
+            }
+        }
+
+        a {
+            text-decoration: none !important;
+            @include o-hover-text-color(rgba(white, 0.8), white);
+        }
+
+        .o_wslides_fs_sidebar_section {
+            background-color: rgba($o-wslides-color-dark3, 0.3);
+        }
+
+        .o_wslides_fs_sidebar_section_slides li {
+            color: rgba(white, 0.8);
+            line-height: 1.3;
+
+            &.active {
+                box-shadow: inset 2px 0 0 theme-color('primary');
+                background-color: rgba($o-wslides-color-dark3, 0.5);
+
+                &, a {
+                    color: white;
+                }
+            }
+
+            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;
+            }
+        }
     }
 
     // quizz
     .o_wslides_fs_quiz_container {
         background-color: $gray-200;
+        height: 100%;
         overflow: scroll;
         overflow-x: hidden;
+        width: 100%;
 
         .o_wslides_js_lesson_quiz_question {
             li {
@@ -100,9 +147,4 @@ $slides-text: #8A8F93;
             }
         }
     }
-
-    // Tools
-    .bg-brand {
-        background-color: $o-enterprise-color;
-    }
 }
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index bbe635a89fa..1a4814fd4ac 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -5,6 +5,10 @@ $MAX-Z-INDEX : 2147483647 !default;
 $gray-50: #f4f4f4 !default;
 $o-enterprise-radient-color: #62495B !default;
 
+.o_wslides_gradient {
+    background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%));
+}
+
 // Common to new slides pages
 // **************************************************
 
@@ -442,4 +446,4 @@ div.embed-responsive {
 // Upload Modal
 .o_wslides_select_type {
     cursor: pointer;
-}
\ No newline at end of file
+}
diff --git a/addons/website_slides/static/src/xml/slide_quiz.xml b/addons/website_slides/static/src/xml/slide_quiz.xml
index 0af500914c5..c8b4bc66186 100644
--- a/addons/website_slides/static/src/xml/slide_quiz.xml
+++ b/addons/website_slides/static/src/xml/slide_quiz.xml
@@ -64,7 +64,7 @@
             <div class="modal-dialog" role="document">
                 <div class="modal-content">
                     <div class="modal-body d-flex p-0">
-                        <div class="w-50 bg-brand"></div>
+                        <div class="w-50 o_wslides_gradient"/>
                         <div class="w-50 d-flex flex-column p-3">
                             <h1>Amazing!</h1>
                             <div class="pb-3">
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index 118a42aa4ac..59668760e8a 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -275,8 +275,8 @@
                     <t t-if="channel.is_member and channel.completed">
                         <span class="badge badge-pill badge-success pull-right py-1 px-2"><i class="fa fa-check"/> Completed</span>
                     </t>
-                    <div t-elif="channel.is_member" class="progress w-50" style="height: 4px;">
-                        <div class="progress-bar rounded" role="progressbar" t-att-aria-valuenow="channel.completion" aria-valuemin="0" aria-valuemax="100" t-attf-style="width:#{channel.completion}%;"/>
+                    <div t-elif="channel.is_member" class="progress w-50" style="height: 6px">
+                        <div class="progress-bar" role="progressbar" t-att-aria-valuenow="channel.completion" aria-valuemin="0" aria-valuemax="100" t-attf-style="width:#{channel.completion}%;"/>
                     </div>
                     <small t-else=""><b t-esc="channel.total_slides"/> steps</small>
                 </div>
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 43874d74224..97a4ae158e4 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
@@ -4,126 +4,133 @@
 <!-- Slide template for the fullscreen mode -->
 <template id="slide_fullscreen" name="Fullscreen">
     <t t-call="website.layout">
-        <div class="o_wslides_fs_main d-flex flex-column"
-            t-att-data-user-id="user.id"
-            t-att-data-course-name="slide.channel_id.name"
-            t-att-data-course-id="slide.channel_id.id"
-            t-att-data-course-slug="slug(slide.channel_id)"
-            t-att-data-slide-id="slide.id">
-            <div class="o_wslides_slide_fs_header d-flex w-100">
-                <a class="p-3 h-100 d-inline-block o_wslides_fs_toggle_sidebar active text-uppercase" href="#">
-                    <i class="fa fa-bars"/> Lessons
-                </a>
-                <a class="p-3 h-100 d-inline-block text-uppercase" t-attf-href="/slides/slide/#{slug(slide)}" target="new">
-                    <i class="fa fa-pencil"/> Write a review
-                </a>
-                <div class="p-3 h-100 d-inline-block o_wslides_fs_slide_title font-weight-bold">
-                    <t>
-                        <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"/>
-                    </t>
+        <div class="o_wslides_fs_main d-flex flex-column font-weight-light">
+
+            <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">
+                        <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-attf-href="/slides/slide/#{slug(slide)}" target="new" title="Reviews">
+                        <i class="fa fa-pencil"/><span class="d-none d-md-inline-block ml-1">Write a review</span>
+                    </a>
                 </div>
-                <div class="ml-auto p-3 text-uppercase">
-                    <a href="/slides/">Back to courses</a>
+                <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">
+                    <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>
                 </div>
             </div>
-            <div class="o_wslides_fs_container d-flex flex-wrap">
-                <div class="col-2 o_wslides_fs_sidebar p-0">
-                    <div class="o_wslides_fs_sidebar_header mt-2 p-2">
-                        <a t-attf-href="/slides/#{slug(slide.channel_id)}">
-                            <span class="h3" t-field="slide.channel_id.name"/>
-                        </a>
-                        <div t-if="not is_public_user" class="mt-2">
-                            <div class="progress">
-                                <div class="progress-bar" role="progressbar" t-attf-style="width: #{slide.channel_id.completion}%" t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"></div>
+
+            <div class="o_wslides_fs_container d-flex position-relative overflow-hidden flex-grow-1">
+                <div class="o_wslides_fs_content align-items-stretch justify-content-center d-flex h-100 flex-grow-1 order-2"></div>
+
+                <div class="o_wslides_fs_sidebar text-white flex-shrink-0 order-1">
+                    <div class="o_wslides_fs_sidebar_content d-flex flex-column px-3 pt-3 h-100">
+                        <div class="o_wslides_fs_sidebar_header mb-3">
+                            <a class="h5 d-block mb-1" t-attf-href="/slides/#{slug(slide.channel_id)}">
+                                <span t-field="slide.channel_id.name"/>
+                            </a>
+                            <div t-if="not is_public_user" class="d-flex align-items-center">
+                                <div class="progress flex-grow-1 bg-black-50" style="height: 6px;">
+                                    <div class="progress-bar" role="progressbar" t-attf-style="width: #{slide.channel_id.completion}%" t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"></div>
+                                </div>
+                                <div class="ml-3 small">
+                                    <span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/> %
+                                </div>
                             </div>
-                            <span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/> %
                         </div>
-                    </div>
-                    <div class="o_wslides_fs_category mt-4">
-                        <t t-if="uncategorized_slides" t-call="website_slides.slide_fullscreen_sidebar_category">
-                            <t t-set="slides" t-value="uncategorized_slides"/>
-                            <t t-set="current_slide" t-value="slide"/>
-                        </t>
-                        <t t-foreach="slide.channel_id.category_ids" t-as="category">
-                            <t t-if="category.slide_ids">
-                                <t t-call="website_slides.slide_fullscreen_sidebar_category">
-                                    <t t-set="slides" t-value="category.slide_ids"/>
-                                    <t t-set="current_slide" t-value="slide"/>
+                        <ul class="mx-n3 list-unstyled my-0 pb-2 overflow-auto">
+                            <t t-if="uncategorized_slides" t-call="website_slides.slide_fullscreen_sidebar_category">
+                                <t t-set="slides" t-value="uncategorized_slides"/>
+                                <t t-set="current_slide" t-value="slide"/>
+                            </t>
+                            <t t-foreach="slide.channel_id.category_ids" t-as="category">
+                                <t t-if="category.slide_ids">
+                                    <t t-call="website_slides.slide_fullscreen_sidebar_category">
+                                        <t t-set="slides" t-value="category.slide_ids"/>
+                                        <t t-set="current_slide" t-value="slide"/>
+                                    </t>
                                 </t>
                             </t>
-                        </t>
+                        </ul>
                     </div>
+                    <a href="#" class="o_wslides_fs_toggle_sidebar d-lg-none bg-black-50"/>
                 </div>
-                <div class="col-10 o_wslides_fs_content p-0"></div>
             </div>
         </div>
     </t>
 </template>
 
+
 <template id="slide_fullscreen_sidebar_category" name="Slides category template for fullscreen view side bar">
-    <div class="card o_wslides_fs_sidebar_section mb-3" t-attf-id="category-collapse-#{category.id if category else 0}">
-        <div class="card-header" t-attf-id="#category-title-#{category.id if category else 0}" data-toggle="collapse" t-attf-data-target="#category-#{category.id if category else 0}" aria-expanded="true" t-attf-aria-controls="category-#{category.id if category else 0}">
+    <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">
-                <span class="h6 text-uppercase" t-field="category.name"/>
+                <b t-field="category.name"/>
             </t>
             <t t-else="">
-                <span class="h6 text-uppercase">Uncategorized</span>
+                <b >Uncategorized</b>
             </t>
-        </div>
-        <div t-attf-id="category-#{category.id if category else 0}" class="collapse show" t-attf-aria-labelledby="#category-title-#{category.id if category else 0}" t-attf-data-parent="#category-collapse-#{category.id if category else 0}">
-          <div class="card-body p-0" style="background-color: transparent !important;"><!-- inline style as boostrap used !important property to force color on .card-body -->
-            <ul class="o_wslides_fs_sidebar_list list-group list-unstyled collapse show p-0 m-0" 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 p-1 font-weight-bold %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"
-                        t-att-data-slug="slug(slide)"
-                        t-att-data-has-question="1 if slide.question_ids else 0"
-                        t-att-data-is-quiz="0"
-                        t-att-data-completed="1 if slide_completed else 0"
-                        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]"
-                        >
-                        <div class="mr-2 ml-2 flex-grow">
-                            <i t-if="not slide_completed" class="fa fa-circle-thin" t-att-data-slide-id="slide.id"/>
-                            <i t-if="slide_completed" class="fa fa-check-circle text-success" t-att-data-slide-id="slide.id"/>
-                        </div>
-                        <div class="">
-                            <t t-call="website_slides.slide_icon">
-                                <t t-set="icon_class" t-value="'mr-2'"/>
-                                <t t-set="slide" t-value="slide"/>
-                            </t>
-                            <span t-field="slide.name"/>
-
-                            <ul t-if="slide.link_ids" class="list-group list-unstyled">
-                                <li t-foreach="slide.link_ids" t-as="link">
-                                    <a class="btn btn-link" t-att-href="link.link" target="new"><i class="fa fa-link"/> <span t-esc="link.name"/></a>
-                                </li>
-                            </ul>
-                        </div>
-                    </li>
-                    <li t-if="slide.question_ids and slide.slide_type != 'quiz'" class="o_wslides_fs_sidebar_list_item"
-                        t-att-data-id="slide.id"
-                        t-att-data-name="slide.name"
-                        t-att-data-type="slide.slide_type"
-                        t-att-data-slug="slug(slide)"
-                        t-att-data-has-question="1 if slide.question_ids else 0"
-                        t-att-data-is-quiz="1">
-                        <span class="ml-4">
-                            <i class="fa fa-flag-checkered"/> Quiz: <span t-field="slide.name"/>
-                        </span>
-                    </li>
-                </t>
-            </ul>
-
-          </div>
-        </div>
-    </div>
+        </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 '')"
+                    t-att-data-id="slide.id"
+                    t-att-data-name="slide.name"
+                    t-att-data-type="slide.slide_type"
+                    t-att-data-slug="slug(slide)"
+                    t-att-data-has-question="1 if slide.question_ids else 0"
+                    t-att-data-is-quiz="0"
+                    t-att-data-completed="1 if slide_completed else 0"
+                    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>
+                    <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>
+                        <ul class="list-unstyled w-100 pt-2 small" t-if="slide.link_ids or (slide.question_ids and not slide.slide_type =='quiz')" >
+                            <li t-if="slide.link_ids" t-foreach="slide.link_ids" t-as="link" class="pl-0 mb-1">
+                                <a class="o_wslides_fs_slide_link" t-att-href="link.link" target="new">
+                                    <i class="fa fa-link mr-2"/><span t-esc="link.name"/>
+                                </a>
+                            </li>
+                            <li class="o_wslides_fs_sidebar_list_item pl-0 mb-1" t-if="slide.question_ids and not slide.slide_type == 'quiz'"
+                                t-att-data-id="slide.id"
+                                t-att-data-name="slide.name"
+                                t-att-data-type="slide.slide_type"
+                                t-att-data-slug="slug(slide)"
+                                t-att-data-has-question="1 if slide.question_ids else 0"
+                                t-att-data-is-quiz="1">
+                                <a class="o_wslides_fs_slide_quiz" href="#" t-att-index="i">
+                                    <i class="fa fa-flag-checkered text-warning mr-2"/>Quiz
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+            </t>
+        </ul>
+    </li>
 </template>
 
+
 </data></odoo>
diff --git a/addons/website_slides_forum/views/website_slides_templates.xml b/addons/website_slides_forum/views/website_slides_templates.xml
index dd9717a8bd7..534c9a50ef8 100644
--- a/addons/website_slides_forum/views/website_slides_templates.xml
+++ b/addons/website_slides_forum/views/website_slides_templates.xml
@@ -11,10 +11,9 @@
     </template>
 
     <template id="slide_fullscreen" inherit_id="website_slides.slide_fullscreen">
-        <!-- Fullscreen template: add link to forum -->
-        <xpath expr="//div[hasclass('o_wslides_fs_slide_title')]" position="before">
-            <a t-if="slide.channel_id.forum_id" class="p-3 h-100 d-inline-block text-uppercase" t-att-href="'/forum/%s' % (slug(slide.channel_id.forum_id))" target="new">
-                <i class="fa fa-comments"></i>Ask a question
+        <xpath expr="//a[hasclass('o_wslides_fs_review')]" position="after">
+            <a t-if="slide.channel_id.forum_id" id="fullscreen_forum_button" class="d-flex align-items-center px-3" t-attf-href="/forum/#{slug(slide.channel_id.forum_id)}" target="new">
+                <i class="fa fa-comments"/><span class="ml-1 d-none d-md-inline-block">Ask a question</span>
             </a>
         </xpath>
     </template>