From 0ecc280e7e4d7a6b6e3dbff5e21e7ca6f29c46bd Mon Sep 17 00:00:00 2001
From: "Mahdi Cheikh Rouhou (macr)" <macr@odoo.com>
Date: Tue, 30 May 2023 09:42:02 +0000
Subject: [PATCH] [FIX] website_slides : Adjust container to contain the full
 course name

When we have a long course name or we update the font size to something
big (24 px) for example the course name and the progress bar will overflow
outside its container.

Steps to reproduce the error :
1- go to one of the courses and update it's name to make it a bit long
2- click on one of it's content and got website preview
3- you can see that the progress bar is outside the container
4- if not : click edit -> theme -> change font size to 24 px
5- You can see now clearly that there is overflow from the container

The origin of the problem was because the container has fixed height
equals 80px

opw-3191888

closes odoo/odoo#126460

X-original-commit: 8184374450f8e2b775a29ff05b3128c24579bbba
Signed-off-by: Mahdi Cheikh Rouhou (macr) <macr@odoo.com>
---
 .../static/src/js/slides_course_page.js       | 24 +++++++++++++++----
 .../static/src/scss/website_slides.scss       |  9 +++----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/addons/website_slides/static/src/js/slides_course_page.js b/addons/website_slides/static/src/js/slides_course_page.js
index 17ac63f7ac5..f6cfa7f173b 100644
--- a/addons/website_slides/static/src/js/slides_course_page.js
+++ b/addons/website_slides/static/src/js/slides_course_page.js
@@ -32,6 +32,22 @@ export const SlideCoursePage = publicWidget.Widget.extend({
         }
     },
 
+    /**
+     * @override
+     */
+    start: function () {
+        // TODO: we need to clean this code and make the changes in the view in master
+        const $completed = $('.o_wslides_channel_completion_completed');
+        const $progressbar = $('.o_wslides_channel_completion_progressbar');
+        if($progressbar.hasClass('d-none')){
+            $progressbar.removeClass('d-none').addClass('d-flex').addClass('hidden-progressbar-completed-tag');
+        }
+        if($completed.hasClass('d-none')){
+            $completed.removeClass('d-none').addClass('hidden-progressbar-completed-tag');
+        }
+        return this._super.apply(this, arguments)
+    },
+
     /**
      * Greens up the bullet when the slide is completed
      *
@@ -71,12 +87,12 @@ export const SlideCoursePage = publicWidget.Widget.extend({
 
         if (completion < 100) {
             // Hide the "Completed" text and show the progress bar
-            $completed.addClass('d-none');
-            $progressbar.removeClass('d-none').addClass('d-flex');
+            $completed.addClass('hidden-progressbar-completed-tag');
+            $progressbar.removeClass('hidden-progressbar-completed-tag');
         } else {
             // Hide the progress bar and show the "Completed" text
-            $completed.removeClass('d-none');
-            $progressbar.addClass('d-none').removeClass('d-flex');
+            $completed.removeClass('hidden-progressbar-completed-tag');
+            $progressbar.addClass('hidden-progressbar-completed-tag');
         }
 
         $progressbar.find('.progress-bar').css('width', `${completion}%`);
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 9e8c21e0258..32ddf20dfcb 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -619,10 +619,11 @@ $line-height-truncate: 1.25em;
     }
 }
 
-// Enforce the height of the lesson header, so the DOM element size do not change
-// when the completion progressbar become visible / hidden
-.o_wslides_lesson_header_container {
-    height: 80px;
+.hidden-progressbar-completed-tag {
+    visibility: hidden;
+    @include media-breakpoint-down(sm) {
+        display: none !important;
+    }
 }
 
 .o_wslides_fs_sidebar_section {