[FIX] website_slides: add various design and UX fixes

- slidesChannelDropdownSort : dropdown items back to visible (was white on white)
- Featured lesson : change icon to bullhorn instead of + icon
- Pass certification fullscreen button : btn primary
- set max height to fullscreen content to 100% minus header
- Fix 'infographic' slide type image view
- change image for 'Furniture Technical Specifications' course
- fix fullscreen presentation mode: The condition to add the iframe that
  contains the presentation of the document was wrong and, so, never met.
  Those conditions are evaluated in javascript and not in python as it's part
  of t-name template linked to a javascript widget.

Commit linked to task ID 1941250 and PR #31279.

8 files changed, 14 insertions, 13 deletions

diff --git a/addons/website_slides/data/slide_channel_demo.xml b/addons/website_slides/data/slide_channel_demo.xml
index b44cf47dd79..3e77e537155 100644
--- a/addons/website_slides/data/slide_channel_demo.xml
+++ b/addons/website_slides/data/slide_channel_demo.xml
@@ -102,7 +102,7 @@ will learn the basics of wood characteristics.</field>
         <field name="promote_strategy">most_voted</field>
         <field name="website_published" eval="True"/>
         <field name="enroll">invite</field>
-        <field name="image" type="base64" file="website_slides/static/src/img/channel_demo_furniture.jpg"/>
+        <field name="image" type="base64" file="website_slides/static/src/img/channel_demo_furniture_2.jpg"/>
         <field name="description">We're also Santa Claus! Belligerent and numerous. I am the man with no name, Zapp Brannigan!</field>
     </record>
     <record id="slide_category_demo_4_0" model="slide.category">
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 de5493d2f7e..d7368160733 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
@@ -66,7 +66,7 @@
     .o_wslides_fullscreen_container {
         display: flex;
         align-items: stretch;
-        height: 100%;
+        height: calc(100% - 50px);
         position: relative;
         background-color: #313A44;
     }
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 526dc59a40a..a456bb99c61 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -166,6 +166,10 @@ div .o_wslides_home_main {
         color: #FFFFFF;
     }
 
+    small a {
+        color: #000000;
+    }
+
     nav {
         .breadcrumb-item::before {
             font-weight: bold;
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 a9aff0d2ec7..c1161a02488 100644
--- a/addons/website_slides/static/src/xml/website_slides_fullscreen.xml
+++ b/addons/website_slides/static/src/xml/website_slides_fullscreen.xml
@@ -3,11 +3,11 @@
             <div t-if="slide.slide_type == 'video' &amp;&amp; !showMiniQuiz" class="player embed-responsive embed-responsive-16by9 embed-responsive-item">
                 <iframe id="youtube-player" t-att-src="embed_url" allowFullScreen="true" frameborder="0" enablejsapi="1" autoplay="1" allow="autoplay"></iframe>
             </div>
-            <div t-if="slide.slide_type in ['presentation', 'document'] &amp;&amp; !showMiniQuiz" class="embed-responsive embed-responsive-4by3 embed-responsive-item ">
+            <div t-if="['presentation', 'document'].indexOf(slide.slide_type) !== -1 &amp;&amp; !showMiniQuiz" class="embed-responsive embed-responsive-4by3 embed-responsive-item ">
                 <iframe t-att-src="embed_url" class="o_wslides_iframe_viewer" allowFullScreen="true" height="315" width="420" frameborder="0"></iframe>
             </div>
-            <div style="width:100%;height:100%;" t-if="slide.slide_type == 'infographic' &amp;&amp; !showMiniQuiz">
-                <img t-attf-src="/web/image/slide.slide/#{slide.id}/datas" class="img-fluid" style="width: 100%" alt="Slide image"/>
+            <div style="width:100%;height:100%;text-align:center;" t-if="slide.slide_type == 'infographic' &amp;&amp; !showMiniQuiz">
+                <img t-attf-src="/web/image/slide.slide/#{slide.id}/image" class="img-fluid" style="height: 100%" alt="Slide image"/>
             </div>
             <div t-if="(slide.slide_type == 'quiz' || showMiniQuiz) &amp;&amp; questions " class="o_wslides_fullscreen_quiz">
                 <div>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index 3b3600b6e47..6c3c9c9f54b 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -95,8 +95,8 @@
             <div class="row">
                 <div style="width:100%;">
                     <div class="o_w_slides_slide_detail_container" style="width: 100%;">
-                            <t t-if="slide.datas and slide.slide_type == 'infographic'">
-                                <img t-attf-src="/web/image/slide.slide/#{slide.id}/datas" class="img-fluid" style="width:100%" alt="Slide image"/>
+                            <t t-if="slide.slide_type == 'infographic'">
+                                <img t-attf-src="/web/image/slide.slide/#{slide.id}/image" class="img-fluid" style="width:100%" alt="Slide image"/>
                             </t>
                         <div style="height: 600px;" t-if="slide.slide_type in ('presentation', 'document')" class="embed-responsive embed-responsive-4by3 embed-responsive-item mb8">
                             <t t-raw="slide.embed_code"/>
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 059d2898a7e..ac8ecbde8ec 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_embed.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
@@ -80,8 +80,8 @@
                                 </div>
                                 <canvas id="PDFViewerCanvas" class="img-fluid" style="margin: auto; height: 100%; display: none;"></canvas>
                             </t>
-                            <t t-if="slide.slide_type in ('infographic')">
-                                <img t-attf-src="/web/image/slide.slide/#{slide.id}/datas" class="img-fluid" style="width: 100%" alt="Slide image"/>
+                            <t t-if="slide.slide_type == 'infographic'">
+                                <img t-attf-src="/web/image/slide.slide/#{slide.id}/image" class="img-fluid" style="width: 100%" alt="Slide image"/>
                             </t>
                         </div>
                         <!-- Fixed bottom navbar -->
diff --git a/addons/website_slides_survey/static/src/scss/website_slides.scss b/addons/website_slides_survey/static/src/scss/website_slides.scss
index fd1506e345b..3cef87764d8 100644
--- a/addons/website_slides_survey/static/src/scss/website_slides.scss
+++ b/addons/website_slides_survey/static/src/scss/website_slides.scss
@@ -1,10 +1,7 @@
 .o_wslides_fullscreen_certification {
-    background-color: #f6f6f6;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 400px;
-    height: 300px;
     position: absolute;
     top: 50%;
     left: 50%;
diff --git a/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml b/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
index f6171db9a13..c56cf727dfc 100644
--- a/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
+++ b/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
@@ -3,7 +3,7 @@
     <t t-extend="website.slides.fullscreen">
         <t t-jquery=".o_wslides_fullscreen_content" t-operation="append">
             <div class="o_wslides_fullscreen_certification" t-if="slide.slide_type == 'certification'">
-                <a t-att-href="'/slides/slide/' + slide.slug" target="new">Pass Certification</a>
+                <a class="btn btn-primary" t-att-href="'/slides/slide/' + slide.slug" target="new"><i class="fa fa-trophy"/> Pass Certification</a>
             </div>
         </t>
     </t>