[MERGE][FIX] website_(sale)_slides(_survey): apply various UI fixes and improvements

Purpose of this merge is to provide some fixes and tweaks related to design
of eLearning application. Notably this merge provides fixes for mobile
display, forum integration, certification-specific design and some cleaning
in SCSS and bootstrap customizations. See sub commits for more details about
them.

Linked to task 1958372
Related to PR #32648

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

addons/website/views/website_navbar_templates.xml

@@ -3,7 +3,7 @@
     <!-- Front-end/Back-end integration -->
     <template id="user_navbar" inherit_id="website.layout">
         <xpath expr="//t[@t-set='html_data']" position="after">
-            <t t-set="body_classname" t-value="'o_connected_user' if env['ir.ui.view'].user_has_groups('base.group_user') else None"/>
+            <t t-set="body_classname" t-value="(body_classname if body_classname else '') + (' o_connected_user' if env['ir.ui.view'].user_has_groups('base.group_user') else '')"/>
         </xpath>
         <xpath expr="//div[@id='wrapwrap']" position="before">
             <nav groups="base.group_user" t-if="website and menu_data" id="oe_main_menu_navbar" class="o_main_navbar">

addons/website_forum/static/src/scss/website_forum.scss

@@ -220,8 +220,9 @@ img.o_forum_avatar_big {
 }
 
 .o_wforum_elearning_navtabs_container {
-    height: $owprofile-tabs-height;
-    background-color: #66445e;
+    @include media-breakpoint-up(md) {
+        background-color: theme-color('secondary');
+    }
 }
 
 .website_forum {

addons/website_forum/views/website_forum.xml

@@ -52,7 +52,7 @@
 
         <div id="wrap" t-attf-class="container #{website_forum_action}">
             <div class="row">
-                <div class="o_wprofile_email_validation_container mb16 mt16">
+                <div class="o_wprofile_email_validation_container flex-grow-1 mb16 mt16">
                     <t t-call="website_profile.email_validation_banner">
                         <t t-set="redirect_url" t-value="'/forum/%s' % forum.id"/>
                         <t t-set="send_validation_email_message" t-value="'Click here to send a verification email allowing you to participate to the forum.'"/>

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

@@ -1,7 +1,11 @@
-$owprofile-color-bg: desaturate(map-get($grays, "200"), 80%);
-$owprofile-tabs-height: 36px;
+// Retrive the tab's height by summ its properties
+$owprofile-tabs-height: ($nav-link-padding-y*2) + ($font-size-base * $line-height-base);
 
-.o_wprofile_wrap {
+// Overal page bg-color: Blend it 'over' the color choosen by the user
+// ($body-bg), rather than force it replacing the variable's value.
+$owprofile-color-bg: mix($body-bg, #efeff4);
+
+.o_wprofile_body {
     background-color: $owprofile-color-bg;
 }
 
@@ -10,16 +14,15 @@ $owprofile-tabs-height: 36px;
 }
 
 .o_wprofile_pict {
-    @include size(30%);
-    border-radius: 100%;
+    @include size(100%);
     padding-top: 30%;
     background-size: cover;
     background-position: center;
 
     @include media-breakpoint-up(md)  {
-        @include size(100%);
-        border-radius: 0;
-        padding-top: 100%;
+        padding-top: 70%;
+        border: 1px solid darken(#875A7B, 10%);
+        border-bottom-width: 0;
     }
 }
 
@@ -34,6 +37,14 @@ $owprofile-tabs-height: 36px;
     }
 }
 
+.o_wprofile_sidebar {
+    border: 1px solid $border-color;
+
+    @include media-breakpoint-up(md) {
+        border-top-width: 0;
+    }
+}
+
 .o_wprofile_nav_tabs {
     @include media-breakpoint-up(md)  {
         margin-top: $owprofile-tabs-height * -1;
@@ -42,6 +53,7 @@ $owprofile-tabs-height: 36px;
         .nav-link {
             border-radius: 0;
             border-width: 0 1px;
+            line-height: $line-height-base;
             @include o-hover-text-color(rgba(white, 0.8), white);
 
             &, &:hover {

addons/website_profile/views/website_profile.xml

@@ -84,6 +84,7 @@
 
     <!-- Edit Profile Page -->
     <template id="user_profile_edit_main" name="Edit Profile">
+        <t t-set="body_classname" t-value="'o_wprofile_body'"/>
         <t t-call="website.layout">
             <div id="wrap" class="o_wprofile_wrap">
                 <div class="container pt-4 pb-5">
@@ -185,8 +186,9 @@
 
     <!-- Profile Page -->
     <template id="user_profile_main" name="Profile Page">
+        <t t-set="body_classname" t-value="'o_wprofile_body'"/>
         <t t-call="website.layout">
-            <div id="wrap" class="o_wprofile_wrap">
+            <div id="wrap" class="o_wprofile_wrap mt-0">
                 <t t-call="website_profile.user_profile_header"/>
                 <t t-call="website_profile.user_profile_content"/>
             </div>
@@ -203,7 +205,7 @@
                 <div class="row">
                     <!-- ==== Header Left ==== -->
                     <div class="col-12 col-md-4 col-lg-3">
-                        <div t-attf-class="d-flex align-items-start #{'justify-content-between' if (request.env.user == user) else 'justify-content-around' }">
+                        <div t-attf-class="d-flex align-items-start h-100 #{'justify-content-between' if (request.env.user == user) else 'justify-content-around' }">
                             <div class="o_wprofile_pict d-inline-block mb-3 mb-md-0" t-attf-style="background-image:url(/web/image/res.users/#{user.id}/image)"/>
                             <a class="btn btn-primary d-inline-block d-md-none" t-if="request.env.user == user and validation_email_done" t-attf-href="/profile/edit?url_param=#{edit_button_url_param}">
                                 <i class="fa fa-pencil mr-1"/>EDIT
@@ -246,8 +248,8 @@
 
                 <!-- ========== SIDEBAR ========== -->
                 <div class="col-12 col-md-4 col-lg-3 mt-3 mt-md-0">
-                    <div class="bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
-                        <div class="d-flex justify-content-between">
+                    <div class="o_wprofile_sidebar bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
+                        <div class="o_wprofile_sidebar_top d-flex justify-content-between">
                             <div t-if="user.rank_id" class="d-flex align-items-center">
                                 <small class="font-weight-bold mr-2">Current rank:</small>
                                 <img t-attf-src="/web/image/gamification.karma.rank/#{user.rank_id.id}/image_small" height="16" alt="" class="mr-1"/>
@@ -320,7 +322,10 @@
                     <t t-set="user_points" t-value="0"/>
                 </t>
                 <path class="o_pc_circle_bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
-                <path class="o_pc_circle" t-attf-stroke-dasharray="#{user_points}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke="url(#gradient)" />
+                <path class="o_pc_circle" t-attf-stroke-dasharray="#{user_points}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke="url(#gradient)" mask="url(#mask)"/>
+                <mask id="mask">
+                    <polygon points="0,0 17.2,0 17.2,10 18,10 18,0 36,0 36,36 0,36" fill="white"/>
+                </mask>
                 <linearGradient id="gradient">
                     <stop offset="0%" stop-color="var(--o-pc-color-stop-1)"/>
                     <stop offset="100%" stop-color="var(--o-pc-color-stop-2)"/>
@@ -448,8 +453,9 @@
     All Users Page
     -->
     <template id="users_page_main" name="Users Page">
+        <t t-set="body_classname" t-value="'o_wprofile_body'"/>
          <t t-call="website.layout">
-            <div id="wrap" class="o_wprofile_wrap pb-5">
+            <div id="wrap" class="o_wprofile_wrap mt-0 pb-5">
                 <t t-call="website_profile.users_page_header"/>
                 <t t-call="website_profile.users_page_content"/>
             </div>

addons/website_sale_slides/views/website_slides_templates.xml

@@ -6,27 +6,26 @@
     <xpath expr="//div[hasclass('o_wslides_js_course_join')]" position="inside">
         <t t-if="not channel.is_member and channel.enroll == 'payment'">
             <t t-if="channel.product_id.website_published">
-                <h4>
-                    <!-- original discounted price, if any -->
-                    <span t-att-class="'text-danger oe_default_price %s' % ('' if product_info['has_discounted_price'] else 'd-none')"
-                        style="text-decoration: line-through; white-space: nowrap;"
-                        t-esc="product_info['list_price']"
-                        t-options="{'widget': 'monetary', 'display_currency': product_info['currency_id']}"/>
-                        <!-- real price -->
-                    <b class="oe_price" style="white-space: nowrap;"
+                <div t-attf-class="text-center d-flex align-items-center text-center pb-1 #{'justify-content-between' if product_info['has_discounted_price'] else 'justify-content-around'}">
+                    <!-- real price -->
+                    <div class="oe_price font-weight-bold text-nowrap h2 my-2"
                         t-esc="product_info['price']"
                         t-options="{'widget': 'monetary', 'display_currency': product_info['currency_id']}"/>
                     <span itemprop="price" style="display:none;" t-esc="product_info['price']"/>
                     <span itemprop="priceCurrency" style="display:none;" t-esc="product_info['currency_id'].name"/>
-                </h4>
-                <a role="button" class="col-10 btn btn-primary" t-att-href="channel.product_id.website_url">
+                    <!-- original discounted price, if any -->
+                    <del t-att-class="'text-600 text-nowrap oe_default_price %s' % ('' if product_info['has_discounted_price'] else 'd-none')"
+                        t-esc="product_info['list_price']"
+                        t-options="{'widget': 'monetary', 'display_currency': product_info['currency_id']}"/>
+                </div>
+                <a role="button" class="btn btn-primary btn-block" t-att-href="channel.product_id.website_url">
                     <span class="cta-title text_small_caps">Buy Course</span>
                 </a>
             </t>
             <t t-else="">
-                <a role="button" class="col-10 btn btn-light" href="#">
-                    <span class="cta-title text_small_caps">Course Not Buyable</span>
-                </a>
+                <div class="alert my-0 bg-200 text-center">
+                    Course Not Buyable
+                </div>
             </t>
         </t>
     </xpath>

addons/website_slides/static/src/scss/slides_slide_fullscreen.scss

@@ -1,6 +1,4 @@
 
-$o-wslides-tabs-height: 36px;
-
 .o_wslides_fs_main {
     @include o-position-absolute(0,0,0,0);
     z-index: 2000;

addons/website_slides/static/src/scss/website_slides.scss

@@ -1,6 +1,12 @@
 $MAX-Z-INDEX : 2147483647 !default;
-$o-wslides-tabs-height: 36px;
-$o-wslides-color-bg: desaturate(map-get($grays, "200"), 80%);
+
+// Retrive the tab's height by summ its properties
+$o-wslides-tabs-height: ($nav-link-padding-y*2) + ($font-size-base * $line-height-base);
+
+// Overal page bg-color: Blend it 'over' the color choosen by the user
+// ($body-bg), rather than force it replacing the variable's value.
+$o-wslides-color-bg: mix($body-bg, #efeff4);
+
 $o-wslides-color-dark1: #47525f;
 $o-wslides-color-dark2: #1f262d;
 $o-wslides-color-dark3: #101216;
@@ -14,18 +20,19 @@ $o-wslides-fs-side-width: 300px;
 }
 
 .o_wslides_course_pict {
-    @include size(100%, 30%);
+    @include size(100%);
     padding-top: 30%;
     background-size: cover;
     background-position: center;
 
     @include media-breakpoint-up(md)  {
-        @include size(100%);
-        padding-top: 100%;
+        padding-top: 70%;
+        border: 1px solid darken(#875A7B, 10%);
+        border-bottom-width: 0;
     }
 }
 
-.o_wslides_wrap {
+.o_wslides_body {
     background-color: $o-wslides-color-bg;
 
     .o_wslides_home_nav {
@@ -42,11 +49,6 @@ $o-wslides-fs-side-width: 300px;
         }
     }
 
-    .o_wslides_course_card,
-    .o_wslides_lesson_card {
-        border-width: 0 0 3px 0;
-    }
-
     .o_wslides_js_slide_like_up,
     .o_wslides_js_slide_like_down {
         &:not(.disabled) {
@@ -80,10 +82,16 @@ $o-wslides-fs-side-width: 300px;
         opacity: 0.5;
     }
 
+    // Solve an overfow issue caused in some
+    // circumstances by flex containers.
+    hr {
+        min-height: 1px;
+    }
+
     // Truncate text descriptions to a specific number of lines.
     // If '-webkit-line-clamp' is not supported, a less effective
     // 'line-height' fallback will be used instead.
-    $truncate-limits: 2, 3, 5, 10;
+    $truncate-limits: 2, 3, 10;
 
     @each $limit in $truncate-limits {
         .o_wslides_desc_truncate_#{$limit} {
@@ -109,18 +117,33 @@ $o-wslides-fs-side-width: 300px;
             border: none;
         }
     }
+
+    .o_wprofile_progress_circle {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 200px;
+    }
 }
 
 // New course page
 // **************************************************
 
+.o_wslides_course_sidebar {
+    border: 1px solid $border-color;
+
+    @include media-breakpoint-up(md) {
+        border-top-width: 0;
+    }
+}
+
 @mixin o-wslides-tabs($tab-active-color: $o-wslides-color-bg) {
-    margin-top: $o-wslides-tabs-height * -1;
+    margin-top: ($o-wslides-tabs-height * -1) + 0.05rem;
     border-bottom: 0;
 
     .nav-link {
         border-radius: 0;
         border-width: 0 1px;
+        line-height: $line-height-base;
         @include o-hover-text-color(rgba(white, 0.8), white);
 
         &, &:hover {

addons/website_slides/views/website_slides_templates_course.xml

@@ -99,8 +99,9 @@
         <t t-call-assets="web.pdf_js_lib" t-css="false"/>
         <script type="text/javascript" src="/website_slides/static/lib/pdfslidesviewer/PDFSlidesViewer.js"></script>
     </t>
+    <t t-set="body_classname" t-value="'o_wslides_body'"/>
     <t t-call="website.layout">
-        <div class="wrap o_wslides_wrap">
+        <div id="wrap" t-attf-class="wrap mt-0">
             <t t-set="main_object" t-value="channel"/>
 
             <div t-attf-class="o_wslides_course_header o_wslides_gradient position-relative text-white pb-md-0 pt-2 pt-md-5 #{'pb-3' if channel.channel_type == 'training' else 'o_wslides_course_doc_header pb-5'}">
@@ -111,7 +112,7 @@
                         <!-- ==== Header Left ==== -->
                         <div class="col-12 col-md-4 col-lg-3">
                             <div class="d-flex align-items-start justify-content-around h-100">
-                                <div class="o_wslides_course_pict d-inline-block mb-2 mt-3 my-md-0" t-attf-style="background-image:url(/web/image/slide.channel/#{channel.id}/image)"/>
+                                <div class="o_wslides_course_pict d-inline-block mb-2 mt-3 my-md-0" t-attf-style="background-image:url(/web/image/slide.channel/#{channel.id}/image)" t-ignore="True"/>
                             </div>
                         </div>
 
@@ -232,7 +233,7 @@
 
 <template id="course_sidebar" name="Course Sidebar (infos, CTA)">
     <!-- Training-only: Channel sidebar (aka general information + CTAs) -->
-    <div class="bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
+    <div class="o_wslides_course_sidebar bg-white px-3 py-2 py-md-3 mb-3 mb-md-5">
 
         <div class="o_wslides_sidebar_top d-flex justify-content-between">
             <div class="o_wslides_js_course_join flex-grow-1">
@@ -364,17 +365,17 @@
                 </li>
             </t>
         </ul>
-        <div t-if="channel.can_upload" class="o_wslides_content_actions">
-            <a  class="o_wslides_js_slide_upload mr-1 border btn btn-light text-muted"
+        <div t-if="channel.can_upload" class="o_wslides_content_actions btn-group">
+            <a  class="o_wslides_js_slide_upload mr-1 border btn btn-light bg-white"
                 role="button"
                 aria-label="Upload Presentation"
                 href="#"
                 t-att-data-channel-id="channel.id"
                 t-att-data-can-upload="channel.can_upload"
-                t-att-data-can-publish="channel.can_publish"><i class="fa fa-plus mr-1"/>Add Content</a>
-            <a class="o_wslides_js_slide_section_add border btn btn-light text-muted" t-attf-channel_id="#{channel.id}"
+                t-att-data-can-publish="channel.can_publish"><i class="fa fa-plus mr-1 align-middle"/><span>Add Content</span></a>
+            <a class="o_wslides_js_slide_section_add border btn btn-light bg-white" t-attf-channel_id="#{channel.id}"
                 href="#" role="button"
-                groups="website.group_website_publisher"><i class="fa fa-folder-o mr-1"/>Add Section</a>
+                groups="website.group_website_publisher"><i class="fa fa-folder-o mr-1 align-middle"/><span>Add Section</span></a>
         </div>
     </div>
     <div t-field="channel.description_html"/>
@@ -514,35 +515,30 @@
         </a>
     </div>
     <!-- Featured lesson  -->
-    <div t-if="not search and not search_slide_type and slide_promoted" class="container mb-3">
-        <div class="card">
-            <div class="card-body d-flex flex-column flex-lg-row">
-                <t t-set="image_url" t-value="'/web/image/slide.slide/%s/image' % slide_promoted.id"/>
+    <div t-if="not search and not search_slide_type and slide_promoted" class="container py-1 mb-2">
+        <div class="card flex-column flex-lg-row">
+            <t t-set="image_url" t-value="'/web/image/slide.slide/%s/image' % slide_promoted.id"/>
 
-                <t t-if="slide_promoted.is_preview or channel.is_member or is_slides_publisher">
-                    <a t-attf-href="/slides/slide/#{slug(slide_promoted)}" class="w-100 w-lg-50 mr-0 mr-lg-4 mb-3 mb-lg-0 flex-shrink-0 rounded border">
-                        <div t-attf-style="background-image:url(#{image_url}); background-size: cover; background-position:center; padding-bottom: 35%;" class="h-lg-100"/>
-                    </a>
-                </t>
-                <t t-else="">
-                    <div class="w-100 w-lg-50 mr-0 mr-lg-4 mb-3 mb-lg-0 flex-shrink-0 rounded border">
-                        <div t-attf-style="background-image:url(#{image_url}); background-size: cover; background-position:center; padding-bottom: 35%;" class="h-lg-100"/>
-                    </div>
-                </t>
+            <a t-if="slide_promoted.is_preview or channel.is_member or is_slides_publisher"
+               t-attf-href="/slides/slide/#{slug(slide_promoted)}" class="w-100 w-lg-50 flex-shrink-0 rounded">
+                <div t-attf-style="background-image:url(#{image_url}); background-size: cover; background-position:center; padding-bottom: 35%;" class="h-lg-100"/>
+            </a>
+            <div t-else="" class="w-100 w-lg-50 flex-shrink-0 rounded">
+                <div t-attf-style="background-image:url(#{image_url}); background-size: cover; background-position:center; padding-bottom: 35%;" class="h-lg-100"/>
+            </div>
 
-                <div>
-                    <a t-if="slide_promoted.is_preview or channel.is_member or is_slides_publisher"
-                       t-attf-href="/slides/slide/#{slug(slide_promoted)}"
-                       class="h4 d-block" t-att-title="slide_promoted.name" t-field="slide_promoted.name"/>
-                    <h4 t-else="" class="text-muted" t-field="slide_promoted.name"/>
+            <div class="card-body">
+                <a t-if="slide_promoted.is_preview or channel.is_member or is_slides_publisher"
+                   t-attf-href="/slides/slide/#{slug(slide_promoted)}"
+                   class="h4 d-block" t-att-title="slide_promoted.name" t-field="slide_promoted.name"/>
+                <h4 t-else="" class="text-muted" t-field="slide_promoted.name"/>
 
-                    <div t-if="slide_promoted.tag_ids" class="border-top mt-2 pt-1">
-                        <t t-foreach="slide_promoted.tag_ids" t-as="tag">
-                            <a t-att-href="'/slides/%s/tag/%s' % (slug(slide_promoted.channel_id), slug(tag))" class="badge badge-light" t-esc="tag.name"/>
-                        </t>
-                    </div>
-                    <div class="o_wslides_desc_truncate_10 mt-3" t-field="slide_promoted.description"/>
+                <div t-if="slide_promoted.tag_ids" class="border-top mt-2 pt-1">
+                    <t t-foreach="slide_promoted.tag_ids" t-as="tag">
+                        <a t-att-href="'/slides/%s/tag/%s' % (slug(slide_promoted.channel_id), slug(tag))" class="badge badge-light" t-esc="tag.name"/>
+                    </t>
                 </div>
+                <div class="o_wslides_desc_truncate_10 mt-3" t-field="slide_promoted.description"/>
             </div>
         </div>
     </div>
@@ -561,9 +557,10 @@
         <t t-foreach="category_data" t-as="category">
             <div class="mb-2" t-if="(category['slides'] or channel.can_publish) and (search_category and search_category.id == category['id'] or not search_category)">
                 <div class="d-flex align-items-center justify-content-between border-bottom pb-2 mb-3" t-if="category['name'] != 'Uncategorized'">
-                    <h5 class="m-0"><t t-esc="category['name']"/></h5>
-                    <a t-if="category['id']" t-att-href="'/slides/%s/category/%s' % (slug(channel), category['slug_name'])">View all</a>
-                    <a t-else="" t-att-href="'/slides/%s?uncategorized=1' % (slug(channel))">View all</a>
+                    <t t-set="is_empty_editable" t-value="not category['slides'] and channel.can_publish"/>
+                    <h5 t-attf-class="m-0 #{'text-muted' if is_empty_editable else ''}"><t t-esc="category['name']"/></h5>
+                    <a t-if="category['id'] and not is_empty_editable" t-att-href="'/slides/%s/category/%s' % (slug(channel), category['slug_name'])">View all</a>
+                    <a t-elif="not is_empty_editable" t-att-href="'/slides/%s?uncategorized=1' % (slug(channel))">View all</a>
                 </div>
                 <div class="row mx-n2">
                     <t t-foreach="category['slides']" t-as="slide">
@@ -613,9 +610,9 @@
             <div t-else="" class="card-img-top border-bottom o_wslides_gradient" t-attf-style="padding-top: 50%;"/>
         </t>
 
-        <div class="card-body">
-            <a t-if="can_access" class="card-title h5" t-attf-href="/slides/slide/#{slug(slide)}" t-esc="slide.name"/>
-            <span t-else="" class="card-title h5 text-muted" t-esc="slide.name"/>
+        <div class="card-body p-3">
+            <a t-if="can_access" class="card-title h5 mb-2o_wslides_desc_truncate_2" t-attf-href="/slides/slide/#{slug(slide)}" t-esc="slide.name"/>
+            <span t-else="" class="card-title h5 mb-2 o_wslides_desc_truncate_2 text-muted" t-esc="slide.name"/>
             <div class="card-subtitle mb-2 text-muted" t-if="slide.is_preview or (not slide.is_published and user.has_group('website.group_website_publisher'))">
                 <t t-if="slide.is_preview">
                     <span class="badge badge-info">Free preview</span>
@@ -626,14 +623,14 @@
             </div>
             <div class="card-text pt-2">
                 <div class="o_wslides_desc_truncate_3 font-weight-light oe_no_empty" t-field="slide.description"/>
-                <div t-if="slide.tag_ids" class="border-top mt-2 pt-1">
+                <div t-if="slide.tag_ids" class="mt-2 pt-1 o_wslides_desc_truncate_2">
                     <t t-foreach="slide.tag_ids" t-as="tag">
-                        <a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge badge-light" t-esc="tag.name"/>
+                        <a t-att-href="'/slides/all?channel_tag_id=%s' % tag.id" class="badge badge-light" t-esc="tag.name"/>
                     </t>
                 </div>
             </div>
         </div>
-        <div class="card-footer border-top-0 text-600">
+        <div class="card-footer bg-white text-600">
             <div class="d-flex align-items-center small">
                 <span class="font-weight-bold mr-auto" t-field="slide.completion_time" t-options='{"widget": "float_time"}'/>
                 <div class="o_wslides_js_slide_like mr-2">

addons/website_slides/views/website_slides_templates_homepage.xml

@@ -3,6 +3,7 @@
 
 <!-- Channels home template -->
 <template id='courses_home' name="Odoo Courses Homepage">
+    <t t-set="body_classname" t-value="'o_wslides_body'"/>
     <t t-call="website.layout">
         <div class="wrap o_wslides_wrap">
             <section class="s_banner overflow-hidden bg-900" style="background-image: url(&quot;/website_slides/static/src/img/banner_default.svg&quot;); background-size: cover; background-position: 55% 65%">
@@ -87,7 +88,7 @@
                                 <div class="row mb-5 mt-3 mt-lg-0">
                                     <div class="col-12 col-sm-6 col-lg-12">
                                         <t t-call="website_slides.slides_home_user_profile_small"/>
-                                        <hr class="d-sm-none d-lg-block" />
+                                        <hr class="d-sm-none d-lg-block"/>
                                     </div>
                                     <div class="col-12 col-sm-6 col-lg-12 d-flex align-items-center">
                                         <t t-call="website_slides.slides_home_user_achievements_small"/>
@@ -163,8 +164,9 @@
 
 <!-- Channel all/main template -->
 <template id='courses_all' name="Odoo All Courses">
+    <t t-set="body_classname" t-value="'o_wslides_body'"/>
     <t t-call="website.layout">
-        <div class="wrap o_wslides_wrap">
+        <div class="wrap">
             <section class="s_banner bg-900" style="background-image: url(&quot;/website_slides/static/src/img/banner_default_all.svg&quot;); background-size: cover; background-position: 80% 20%">
                 <div class="container py-5">
                     <h1 t-if="search_my" class="display-3 mb-0">My Courses</h1>
@@ -173,14 +175,33 @@
             </section>
             <div class="container mt16 o_wslides_home_nav position-relative">
                 <!-- Navbar dynamically composed using displayed channel tag groups. -->
-                <nav class="navbar navbar-expand-md navbar-light shadow-sm" style="background: white!important">
-                    <div class="navbar-nav border-right pr-3">
-                        <a class="nav-link nav-item" t-att-href="'/slides?%s' % keep_query('debug')"><i class="fa fa-chevron-left"/></a>
+                <nav class="navbar navbar-expand-md navbar-light shadow-sm pl-0" style="background: white!important">
+                    <div class="navbar-nav border-right">
+                        <a class="nav-link nav-item px-3" t-att-href="'/slides?%s' % keep_query('debug')"><i class="fa fa-chevron-left"/></a>
                     </div>
-                    <button class="navbar-toggler" type="button"
+                    <!-- Clear filtering (mobile)-->
+                    <div class="form-inline text-nowrap ml-auto d-md-none" t-if="search_slide_type or search_my or search_tags or search_channel_tag_id">
+                        <a t-att-href="'/slides/all?%s' % keep_query('debug')" class="btn btn-info mr-2" role="button" title="Clear filters">
+                            <i class="fa fa-eraser"/> Clear filters
+                        </a>
+                    </div>
+                    <form t-else="" method="GET" class="form-inline o_wslides_nav_navbar_right d-md-none">
+                        <!-- Search box (mobile)-->
+                        <div class="input-group">
+                            <input type="search" name="search" class="form-control"
+                                placeholder="Search courses" aria-label="Search"
+                                t-att-value="search_term"/>
+                            <div class="input-group-append">
+                                <button class="btn border border-left-0 oe_search_button" type="submit" aria-label="Search" title="Search">
+                                    <i class="fa fa-search"/>
+                                </button>
+                            </div>
+                        </div>
+                    </form>
+                    <button class="navbar-toggler px-1" type="button"
                         data-toggle="collapse" data-target="#navbarTagGroups"
                         aria-controls="navbarTagGroups" aria-expanded="false" aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
+                        <span class="navbar-toggler-icon small"/>
                     </button>
                     <div class="collapse navbar-collapse" id="navbarTagGroups">
                         <t t-set="search_tag_groups" t-value="search_tags.mapped('group_id')"/>
@@ -202,16 +223,15 @@
                                     </div>
                                 </li>
                             </t>
-                            <!-- clear filtering -->
-                            <li class="nav-item ml-auto" t-if="search_slide_type or search_my or search_tags or search_channel_tag_id">
-                                <a t-att-href="'/slides/all?%s' % keep_query('debug')" class="nav-link mr-2"
-                                    role="button" title="Clear filters">
-                                    <i class="fa fa-eraser"/> Clear filters
-                                </a>
-                            </li>
                         </ul>
-                        <!-- search box -->
-                        <form method="GET" class="form-inline o_wslides_nav_navbar_right">
+                        <!-- Clear filtering (desktop)-->
+                        <div class="form-inline ml-auto d-none d-md-flex" t-if="search_slide_type or search_my or search_tags or search_channel_tag_id">
+                            <a t-att-href="'/slides/all?%s' % keep_query('debug')" class="btn btn-info text-nowrap mr-2" role="button" title="Clear filters">
+                                <i class="fa fa-eraser"/> Clear filters
+                            </a>
+                        </div>
+                        <!-- Search box (desktop) -->
+                        <form method="GET" class="form-inline o_wslides_nav_navbar_right d-none d-md-flex">
                             <div class="input-group">
                                 <input type="search" name="search" class="form-control"
                                     placeholder="Search courses" aria-label="Search"
@@ -262,7 +282,7 @@
 
 <template id='course_card' name="Course Card">
     <div class="card w-100 o_wslides_course_card mb-4">
-        <t t-set="course_image" t-value="'/web/image/slide.channel/%s/image_large' % channel.id"/>
+        <t t-set="course_image" t-value="'/web/image/slide.channel/%s/image' % channel.id"/>
         <a t-attf-href="/slides/#{slug(channel)}" t-title="channel.name">
             <div t-if="channel.image_large" class="card-img-top" t-attf-style="padding-top: 50%; background-image: url(#{course_image}); background-size: cover; background-position:center"/>
             <div t-else="" class="o_wslides_gradient card-img-top position-relative" style="padding-top: 50%; opacity: 0.8">
@@ -270,7 +290,7 @@
             </div>
         </a>
         <div class="card-body p-3">
-            <a class="card-title h5 o_wslides_desc_truncate_2" t-attf-href="/slides/#{slug(channel)}" t-esc="channel.name"/>
+            <a class="card-title h5 mb-2 o_wslides_desc_truncate_2" t-attf-href="/slides/#{slug(channel)}" t-esc="channel.name"/>
             <div class="card-text mt-1">
                 <div class="font-weight-light o_wslides_desc_truncate_3" t-field="channel.description"/>
                 <div t-if="channel.tag_ids" class="mt-2 pt-1 o_wslides_desc_truncate_2">
@@ -280,7 +300,7 @@
                 </div>
             </div>
         </div>
-        <div class="card-footer border-top-0 text-600 px-3">
+        <div class="card-footer bg-white text-600 px-3">
             <div class="d-flex justify-content-between align-items-center">
                 <small class="font-weight-bold" t-field="channel.total_time" t-options='{"widget": "float_time"}'/>
                 <div class="d-flex flex-grow-1 justify-content-end">

addons/website_slides/views/website_slides_templates_lesson.xml

@@ -3,6 +3,7 @@
 
 <!-- Slide: main template: detailed view -->
 <template id="slide_main" name="Slide Detailed View">
+    <t t-set="body_classname" t-value="'o_wslides_body'"/>
     <t t-call="website.layout">
         <t t-set="main_object" t-value="slide"/>
         <div class="wrap o_wslides_wrap">
@@ -225,7 +226,7 @@
     </div>
     <div t-if="slide.tag_ids" class="pb-2">
         <t t-foreach="slide.tag_ids" t-as="tag">
-            <a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge badge-light py-1 px-2" t-esc="tag.name"/>
+            <a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge badge-info py-1 px-2" t-esc="tag.name"/>
         </t>
     </div>
     <div class="o_wslides_lesson_content_type">

addons/website_slides_forum/views/website_slides_forum_templates.xml

@@ -3,7 +3,7 @@
     <template id="website_slides_forum_header" inherit_id="website_forum.header">
         <xpath expr="//div[hasclass('container')]" position="before">
             <t t-if="forum.slide_channel_id">
-                <div class="row o_wforum_elearning_navtabs_container">
+                <div class="o_wforum_elearning_navtabs_container">
                     <div class="container">
                         <ul class="nav nav-tabs o_wprofile_nav_tabs mt-0 flex-nowrap" role="tablist" id="profile_extra_info_tablist">
                             <li class="nav-item">

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

@@ -0,0 +1 @@
+<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>

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

@@ -1,26 +0,0 @@
-// 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

@@ -0,0 +1,34 @@
+$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

@@ -1,6 +1,23 @@
 <?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>