[IMP] website_slides_survey: add a specific background for certification channels

This commit introduces a specific icon/design for certifications. It is applied
to channels having at least one slide of certification type.

Linked to task 1958372
Related to PR #32648

addons/website_slides_survey/static/src/img/certification.svg

+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M7.158 11.549a2.005 2.005 0 0 1-3.105-1.286 2.005 2.005 0 0 1-1.286-3.105 2.005 2.005 0 0 1 1.286-3.105 2.005 2.005 0 0 1 3.105-1.286 2.005 2.005 0 0 1 3.105 1.286 2.005 2.005 0 0 1 1.286 3.105 2.005 2.005 0 0 1-1.286 3.105 2.005 2.005 0 0 1-3.105 1.286z" id="a"/><filter filterUnits="objectBoundingBox" id="b"><feMorphology radius=".5" in="SourceAlpha" result="shadowSpreadInner1"/><feOffset in="shadowSpreadInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.0749562937 0" in="shadowInnerInner1"/></filter><path id="d" d="M6.04788912 6.85018391L7.55257375 8.20939291 9.91700506 6 11 6.947144 7.55257375 10 5 7.75171917z"/><filter x="-2.5%" y="-3.8%" width="105%" height="115%" filterUnits="objectBoundingBox" id="c"><feOffset dy=".3" in="SourceAlpha" result="shadowOffsetOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.233200393 0" in="shadowOffsetOuter1"/></filter></defs><g transform="translate(-2 -2)" fill="none" fill-rule="evenodd"><g transform="rotate(22 5.57 9.903)"><use fill="#00C9FF" xlink:href="#a"/><use fill="#000" filter="url(#b)" xlink:href="#a"/><path stroke="#FFF" stroke-width=".7" d="M7.158 11.96a2.355 2.355 0 0 1-3.395-1.407 2.355 2.355 0 0 1-1.406-3.395 2.355 2.355 0 0 1 1.406-3.395 2.355 2.355 0 0 1 3.395-1.406 2.355 2.355 0 0 1 3.395 1.406 2.355 2.355 0 0 1 1.406 3.395 2.355 2.355 0 0 1-1.406 3.395 2.355 2.355 0 0 1-3.395 1.406z"/></g><use fill="#000" filter="url(#c)" xlink:href="#d"/><use fill="#FFF" xlink:href="#d"/></g></svg>
\ No newline at end of file

addons/website_slides_survey/static/src/scss/website_profile.scss

-// Certification Card
-.o_wprofile_slides_certif_card_body {
-    height: 66px;
-    > div > div:first-child {
-        position: absolute;
-        padding: 0px;
-        top: 8px;
-        left: 8px;
-        width: 66px;
-        height: 66px;
-    }
-    > div > div:nth-child(3) > span {
-        position: absolute;
-        right: 32px;
-        top: 13px;
-    }
-    > div > div > div:nth-child(2) {
-        position: absolute;
-        bottom: 0px;
-        right: 32px;
-        a {
-            margin-left: 8px;
-            color: grey;
-        }
-    }
-}

addons/website_slides_survey/static/src/scss/website_slides_survey.scss

+$o_wss_color_1 : #5B7687;
+$o_wss_color_2 : #485761;
+
+// General
+// **************************************************
+.o_wss_certification_icon {
+    @include size(1.4em, auto);
+}
+
+// Course page
+// **************************************************
+#wrap.o_wss_certification_channel {
+    .o_wslides_course_header {
+        background-image: linear-gradient(120deg, $o_wss_color_1, $o_wss_color_2);
+    }
+
+    .o_wslides_course_pict {
+        @include media-breakpoint-up(md)  {
+            border-color: $o_wss_color_2;
+        }
+    }
+
+    .o_wslides_nav_tabs .nav-link {
+        @include media-breakpoint-up(md) {
+            &, &:hover{
+                border-color: $o_wss_color_1;
+            }
+
+            &.active {
+                border-color: $gray-100;
+            }
+        }
+    }
+}

addons/website_slides_survey/views/assets.xml

@@ -2,9 +2,11 @@
 <odoo>
     <data>
         <template id="assets_frontend" inherit_id="website.assets_frontend" name="Slides Certification">
+            <xpath expr="//link[last()]" position="after">
+                <link rel="stylesheet" type="text/scss" href="/website_slides_survey/static/src/scss/website_slides_survey.scss"/>
+            </xpath>
             <xpath expr="//script[last()]" position="after">
                 <script type="text/javascript" src="/website_slides_survey/static/src/js/slides_upload.js"/>
-                <link rel="stylesheet" type="text/scss" href="/website_slides_survey/static/src/scss/website_profile.scss"/>
                 <script type="text/javascript" src="/website_slides_survey/static/src/js/slides_course_fullscreen_player.js"/>
             </xpath>
         </template>

addons/website_slides_survey/views/survey_templates.xml

@@ -12,5 +12,11 @@
                 </div>
             </xpath>
         </template>
+
+        <template id="o_wss_certification_icon">
+            <t t-set="icon_url" t-value="icon_url if icon_url else '/website_slides_survey/static/src/img/certification.svg'"/>
+            <t t-set="icon_classes" t-value="icon_classes if icon_classes else 'o_wss_certification_icon'"/>
+            <img t-att-class="icon_classes" t-att-src="icon_url" alt="Certification icon"/>
+        </template>
     </data>
 </odoo>

addons/website_slides_survey/views/website_slides_templates_course.xml

 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
     <data>
+        <template id="course_main" inherit_id="website_slides.course_main" name="Certification Course Main">
+            <xpath expr="//div[@id='wrap']" position="attributes">
+                <attribute name="t-attf-class" separator=" " add="#{'o_wss_certification_channel' if channel.nbr_certification > 0 else ''}"/>
+            </xpath>
+
+            <xpath expr="//div[@id='courseMainTabContent']//div[@id='home']/t" position="before">
+                <div t-if="channel.nbr_certification > 0 and channel.is_member" class="alert alert-success d-flex align-items-center justify-content-between flex-wrap">
+                    <div>Begin your <b>certification</b> today!</div>
+
+                    <t t-set="first_slide" t-value="category_data[0]['slides'][0]"/>
+                    <a t-attf-href="/slides/slide/#{slug(first_slide)}?fullscreen=1" class="btn btn-success mt-2 mt-sm-0">
+                        <span>Start Now</span><i class="fa fa-chevron-right ml-2 align-middle"/>
+                    </a>
+                </div>
+            </xpath>
+        </template>
+
         <template id="slide_icon_inherit_survey" inherit_id="website_slides.slide_icon">
             <xpath expr="//i[last()]" position="after">
                 <i t-if="slide.slide_type == 'certification'" t-att-class="'fa fa-trophy %s' % icon_class"></i>

addons/website_slides_survey/views/website_slides_templates_homepage.xml

@@ -3,7 +3,18 @@
     <data>
         <template id="courses_home_inherit_survey" inherit_id="website_slides.courses_home">
             <xpath expr="//a[hasclass('o_wslides_home_all_slides')]" position="after">
-                <a class="nav-link nav-link" href="/slides/all?slide_type=certification"><i class="fa fa-trophy mr-1"/>Certifications</a>
+                <a class="nav-link nav-link d-flex" href="/slides/all?slide_type=certification">
+                    <t t-call="website_slides_survey.o_wss_certification_icon"/>
+                    <span class="ml-1">Certifications</span>
+                </a>
+            </xpath>
+        </template>
+
+        <template id="course_card_inherit_survey" inherit_id="website_slides.course_card">
+            <xpath expr="//div/div" position="after">
+                <div t-if="channel.nbr_certification > 0" class="position-absolute py-1 px-2 h5" style="right:0; top:0">
+                    <t t-call="website_slides_survey.o_wss_certification_icon"/>
+                </div>
             </xpath>
         </template>
     </data>