[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.

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">

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;
     }

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;

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>

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"/>

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 -->

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%;

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>