From d372c8c42f18c0a4dd82962f57f8e37e4130ddc3 Mon Sep 17 00:00:00 2001
From: sri-odoo <sri@odoo.com>
Date: Mon, 18 Mar 2019 11:55:28 +0000
Subject: [PATCH] [FIX] website_slides: improve course overall layout and
training content list
Purpose of this commit is to improve the global look of course layout
(notably banner, navigation, course / channel informations). Content list
layout displayed in training (orderable) is also tweaked and improved.
Commit linked to task ID 1941250 and PR #31977
---
.../src/js/slides_course_slides_list.js | 10 +-
.../static/src/scss/website_slides.scss | 219 +++++------
.../views/website_slides_templates_course.xml | 357 +++++++++---------
.../views/website_slides_templates_lesson.xml | 2 +-
.../views/website_slides_templates.xml | 2 +-
5 files changed, 289 insertions(+), 301 deletions(-)
diff --git a/addons/website_slides/static/src/js/slides_course_slides_list.js b/addons/website_slides/static/src/js/slides_course_slides_list.js
index 93376a08d31c..5a6b32423551 100644
--- a/addons/website_slides/static/src/js/slides_course_slides_list.js
+++ b/addons/website_slides/static/src/js/slides_course_slides_list.js
@@ -29,16 +29,18 @@ sAnimations.registry.websiteSlidesCourseSlidesList = sAnimations.Class.extend({
*/
_bindSortable: function () {
this.$('ul.o_wslides_js_slides_list_container').sortable({
- handle: '.fa-arrows',
+ handle: '.o_wslides_slides_list_drag',
stop: this._reorderCategories.bind(this),
- items: '.o_wslides_slide_list_category'
+ items: '.o_wslides_slide_list_category',
+ placeholder: 'o_wslides_slides_list_slide_hilight position-relative mb-1'
});
this.$('.o_wslides_js_slides_list_container ul').sortable({
- handle: '.fa-arrows',
+ handle: '.o_wslides_slides_list_drag',
connectWith: '.o_wslides_js_slides_list_container ul',
stop: this._reorderSlides.bind(this),
- items: '.o_wslides_slides_list_slide:not(.o_wslides_js_slides_list_empty)'
+ items: '.o_wslides_slides_list_slide:not(.o_wslides_js_slides_list_empty)',
+ placeholder: 'o_wslides_slides_list_slide_hilight position-relative mb-1'
});
},
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 7d638b31d0c2..c79600276dfe 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -2,8 +2,7 @@
$nav-tabs-border-color: #dddddd !default;
$body-bg: #FFFFFF !default;
$MAX-Z-INDEX : 2147483647 !default;
-$gray-50: #f4f4f4 !default;
-$o-enterprise-radient-color: #62495B !default;
+$o-wslides-tabs-height: 36px;
$o-wslides-color-bg: desaturate(map-get($grays, "200"), 80%);
$o-wslides-color-dark1: #47525f;
@@ -12,15 +11,27 @@ $o-wslides-color-dark3: #101216;
$o-wslides-fs-side-width: 300px;
+// Common to new slides pages
+// **************************************************
+
.o_wslides_gradient {
background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%));
}
-// Common to new slides pages
-// **************************************************
+.o_wslides_course_pict {
+ @include size(100%, 30%);
+ padding-top: 30%;
+ background-size: cover;
+ background-position: center;
+
+ @include media-breakpoint-up(md) {
+ @include size(100%);
+ padding-top: 100%;
+ }
+}
.o_wslides_wrap {
- background-color: desaturate(map-get($grays, "200"), 80%);
+ background-color: $o-wslides-color-bg;
.o_wslides_home_nav {
top: -40px;
@@ -84,45 +95,6 @@ $o-wslides-fs-side-width: 300px;
.o_wslides_entry_muted {
opacity: 0.5;
}
-
- .bg-brand {
- background-color: $o-enterprise-color;
- }
-
- .progress {
- overflow: visible;
-
- .progress-bar {
- background-color: $primary;
- position: relative;
-
- span {
- background-color: $primary;
- position: absolute;
- bottom: -20px;
- font-size: 10px;
- line-height: 10px;
- padding: 2px 3px 2px 4px;
- right: -1.4em;
- border-radius: 2px;
- }
-
- span:after {
- bottom: 100%;
- left: 50%;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
- border-color: rgba(255, 255, 255, 0);
- border-bottom-color: #00A09D;
- border-width: 5px;
- margin-left: -5px;
- }
- }
- }
}
@@ -159,99 +131,115 @@ $o-wslides-fs-side-width: 300px;
color: white;
}
- .breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before {
+ .breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before, .o_wslides_course_nav_search input::placeholder {
color: rgba(white, 0.8);
}
}
-.o_wslides_course_header {
- margin: auto;
- background: linear-gradient(150deg, #875A7B 20%, #62495B 80%) !important;
- border-bottom: 48px solid #66445e;
-
- .o_wslides_course_header_container {
- position: relative;
- top: 48px;
- padding-top: 0px;
-
- .o_wslides_course_header_aside {
- max-width: 286px;
- img {
- width: 100%;
- max-width: 256px;
+.o_wslides_course_header:before {
+ @include media-breakpoint-up(md) {
+ content: "";
+ @include o-position-absolute(auto, 0, 0, 0);
+ height: $o-wslides-tabs-height;
+ background: rgba(black, 0.2);
+ }
+}
+
+.o_wslides_nav_tabs {
+ @include media-breakpoint-up(md) {
+ margin-top: $o-wslides-tabs-height * -1;
+ border-bottom: 0;
+
+ .nav-link {
+ border-radius: 0;
+ border-width: 0 1px;
+ @include o-hover-text-color(rgba(white, 0.8), white);
+
+ &, &:hover {
+ border-color: #875A7B;
+ background: transparent;
}
- }
- .o_wslides_course_header_content {
- font-size: 16px;
- color: #FFFFFF;
-
- .o_wslides_course_header_nav {
- ul.o_wslides_nav_tabs {
- border-bottom: 0px;
- li.nav-item {
- margin-bottom: 0px;
- }
- a.nav-link {
- color: white;
- border-radius: 0px;
- height: 48px;
- font-weight: bold;
- padding-top: 12px;
- text-align: center;
- width: 120px;
- &:hover {
- border: 0px;
- border-radius: 0px;
- background-color: #875A7B;
- }
- &.active {
- color: #212529;
- background-color: #f2f2f2;
- border: 0px;
- }
- }
- }
+ &.active {
+ color: $headings-color;
+ background: $o-wslides-color-bg;
+ border-color: $o-wslides-color-bg;
}
}
}
-}
-.o_wslides_course_main {
- .o_wslides_course_content_aside {
- max-width: 286px;
- .bg-white {
- max-width: 256px;
- background-color: white;
- padding-bottom: 8px;
- > div.row {
- padding-left: 15px;
- padding-right: 15px;
- }
+ @include media-breakpoint-only(xs) {
+ overflow-x: auto;
+ overflow-y: hidden;
+
+ li {
+ white-space: nowrap;
}
}
}
+.o_wslides_tabs_content {
+ @include media-breakpoint-down(sm) {
+ background-color: $nav-tabs-link-active-bg;
+ padding:0 ($grid-gutter-width * 0.5);
+ }
+
+ @include media-breakpoint-only(xs) {
+ margin: 0 ($grid-gutter-width * -0.5);
+ }
+}
+
// Slides list reordering widget
.o_wslides_slides_list {
- .o_wslides_slides_list_slide {
- &.o_not_editable {
- height: 0px;
+ .o_wslides_slide_list_category_header {
+ z-index: 1;
+
+ & + ul {
+ z-index: 0;
}
+ }
+
+ .o_text_link {
+ text-decoration: none!important;
- &:nth-child(odd) {
- background-color: $gray-50;
+ > * {
+ text-decoration: none!important;
+ color: map-get($grays, "600");
}
- &:nth-child(even) {
- background-color: $gray-100;
+ &:hover > * {
+ color: inherit;
}
+ }
- .o_wslides_slides_list_slide_controls {
- i:hover {
- color: $primary !important;
- cursor: pointer;
- }
+ .o_wslides_slides_list_drag {
+ cursor: pointer;
+
+ i { opacity: 0.4; }
+ &:hover i { opacity: 1; }
+ }
+
+ .o_wslides_slide_list_category_header, .o_wslides_slides_list_slide {
+ border: 1px solid $border-color;
+ }
+
+ .o_wslides_slides_list_slide_hilight {
+ background-color: #1252F3;
+ height: 1px;
+ z-index: 3;
+
+ &:before, &:after {
+ content: "";
+ @include size(6px);
+ display: block;
+ border-radius: 100%;
+ background-color: inherit;
+ @include o-position-absolute(-2px, -2px);
+ }
+
+ &:after {
+ right: auto;
+ left: -2px;
}
}
}
@@ -261,7 +249,6 @@ $o-wslides-fs-side-width: 300px;
// **************************************************
.o_wslides_lesson_header {
- background: linear-gradient(150deg, $o-enterprise-color 20%, $o-enterprise-radient-color 80%);
margin: auto;
.o_wslides_lesson_header_container {
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index b96c45a98c68..4612f58d7902 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -133,60 +133,70 @@
<div class="wrap o_wslides_wrap">
<t t-set="main_object" t-value="channel"/>
- <div class="o_wslides_course_header position-relative pt-5">
+ <div class="o_wslides_course_header o_wslides_gradient position-relative text-white pb-3 pb-md-0 pt-2 pt-md-5">
<t t-call="website_slides.course_nav"/>
- <div class="container o_wslides_course_header_container">
- <div class="row align-items-end d-flex">
- <div class="col-md-4 d-none d-sm-block o_wslides_course_header_aside">
- <div t-field="channel.image" widget="image" t-options="{'widget': 'image'}"/>
+
+ <div class="container mt-5 mt-md-3 mt-xl-4">
+ <div class="row align-items-end align-items-md-stretch">
+ <!-- ==== Header Left ==== -->
+ <div class="col-12 col-md-4 col-lg-3">
+ <div class="d-flex align-items-start justify-content-around">
+ <div class="o_wslides_course_pict d-inline-block mb-3 mb-md-0" t-attf-style="background-image:url(/web/image/slide.channel/#{channel.id}/image)"/>
+ </div>
</div>
- <div class="col-md-8 col-xs-12 align-self-stretch d-flex flex-column o_wslides_course_header_content">
- <div class="row">
- <h3 class="col-12"><span class="font-weight-bold" t-field="channel.name"/></h3>
- <div class="col-12" t-field="channel.description"/>
- <div class="col-xs-12 col-md-6 mt8" t-if="channel.allow_comment">
- <t t-call="website_rating.rating_stars_static_popup_composer">
- <t t-set="rating_avg" t-value="rating_avg"/>
- <t t-set="rating_total" t-value="rating_count"/>
- <t t-set="object" t-value="channel"/>
- <t t-set="hash" t-value="message_post_hash"/>
- <t t-set="pid" t-value="message_post_pid"/>
- <t t-set="default_message_id" t-value="last_message_id"/>
- <t t-set="default_message" t-value="last_message"/>
- <t t-set="default_rating_value" t-value="last_rating_value"/>
- <t t-set="force_submit_url" t-value="'/slides/mail/update_comment' if last_message_id else False"/>
- <t t-set="disable_composer" t-value="not channel.can_review"/>
- </t>
- </div>
+
+ <!-- ==== Header Right ==== -->
+ <div class="col-12 col-md-8 col-lg-9 d-flex flex-column">
+ <div class="d-flex flex-column align-items-start">
+ <h1 t-field="channel.name"/>
+ <p t-field="channel.description"/>
</div>
- <div class="row mt-auto o_wslides_course_header_nav">
- <div class="col-xs-12 col-md-8">
- <ul class="nav nav-tabs o_wslides_nav_tabs" id="profile_extra_info_tablist" role="tablist">
- <li class="nav-item o_wlides_course_header_nav_home">
- <a t-att-class="'nav-link %s' % ('' if search_slide_type else 'active')" id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">
- <i class="fa fa-home"/> Course
- </a>
- </li>
- <li class="nav-item" t-if="channel.allow_comment">
- <a class="nav-link" id="review-tab" data-toggle="pill" href="#review" role="tab" aria-controls="review" aria-selected="false">Review</a>
- </li>
- </ul>
- </div>
+ <div class="d-flex flex-column justify-content-center flex-grow-1 mb-0 mb-md-5" t-if="channel.allow_comment">
+ <t t-call="website_rating.rating_stars_static_popup_composer">
+ <t t-set="rating_avg" t-value="rating_avg"/>
+ <t t-set="rating_total" t-value="rating_count"/>
+ <t t-set="object" t-value="channel"/>
+ <t t-set="hash" t-value="message_post_hash"/>
+ <t t-set="pid" t-value="message_post_pid"/>
+ <t t-set="default_message_id" t-value="last_message_id"/>
+ <t t-set="default_message" t-value="last_message"/>
+ <t t-set="default_rating_value" t-value="last_rating_value"/>
+ <t t-set="force_submit_url" t-value="'/slides/mail/update_comment' if last_message_id else False"/>
+ <t t-set="disable_composer" t-value="not channel.can_review"/>
+ </t>
</div>
</div>
</div>
</div>
</div>
- <div class="container o_wslides_course_main">
- <div class="tab-content" id="courseMainTabContent">
- <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
- <t t-if="channel.channel_type == 'training'" t-call="website_slides.course_slides_list"/>
- <t t-if="channel.channel_type == 'documentation'" t-call="website_slides.course_slides_cards"/>
+
+ <div class="o_wprofile_content container">
+ <div class="row">
+
+ <!-- ========== SIDEBAR ========== -->
+ <div class="col-12 col-md-4 col-lg-3 mt-3 mt-md-0">
+ <t t-call="website_slides.course_sidebar"/>
</div>
- <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
- <div class="row">
- <t t-call="website_slides.course_sidebar"/>
- <div class="col-lg-8">
+
+ <!-- ========== COURSE CONTENT ========== -->
+ <div class="col-12 col-md-8 col-lg-9">
+ <ul class="nav nav-tabs o_wslides_nav_tabs flex-nowrap" role="tablist" id="profile_extra_info_tablist">
+ <li class="nav-item o_wslides_course_header_nav_home">
+ <a t-att-class="'nav-link %s' % ('' if search_slide_type else 'active')" id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">
+ <i class="fa fa-home"/> Course
+ </a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" id="review-tab" data-toggle="pill" href="#review" role="tab" aria-controls="review" aria-selected="false">Review</a>
+ </li>
+ </ul>
+
+ <div class="tab-content py-4 o_wslides_tabs_content mb-4" id="courseMainTabContent">
+ <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
+ <t t-if="channel.channel_type == 'training'" t-call="website_slides.course_slides_list"/>
+ <t t-if="channel.channel_type == 'documentation'" t-call="website_slides.course_slides_cards"/>
+ </div>
+ <div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
<t t-call="portal.message_thread">
<t t-set="object" t-value="channel"/>
<t t-set="hash" t-value="message_post_hash"/>
@@ -205,11 +215,12 @@
<template id="course_sidebar" name="Course Sidebar (infos, CTA)">
<!-- Channel presentation, aka general information + CTAs -->
- <div class="col-lg-4 col-xs-12 o_wslides_course_content_aside">
- <div class="bg-white">
- <div class="row justify-content-center o_wslides_js_course_join">
+ <div class="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">
<a t-if="not channel.is_member and channel.enroll == 'public'" role="button"
- class="col-10 mt8 btn btn-primary o_wslides_js_course_join_link"
+ class="btn btn-primary btn-block o_wslides_js_course_join_link"
title="Start Course" aria-label="Start Course Channel"
t-att-href="'#'"
t-att-data-channel-id="channel.id">
@@ -218,62 +229,61 @@
<t t-else="">Join Course</t>
</span>
</a>
- <t t-if="not channel.is_member and channel.enroll == 'invite'">
- <a role="button" class="col-10 mt8 btn btn-light" t-att-href="'#'">
- <span class="cta-title text_small_caps">Private Course</span>
- </a>
+ <div t-if="not channel.is_member and channel.enroll == 'invite'" class="text-center">
+ <div class="alert my-0 bg-100 p-2">Private Course</div>
<div t-if="channel.enroll_msg" t-field="channel.enroll_msg"/>
- <span t-if="not channel.enroll_msg">Contact website administrator.</span>
- </t>
- <span t-if="channel.is_member" class="col-10 mt8 btn btn-primary">
- <i class="fa fa-chevron-right"></i>
- <span class="cta-title text_small_caps">Already member</span>
- </span>
- </div>
- <div class="row mt8">
- <span class="col-5">Last Update</span>
- <span class="col"><t t-esc="channel.slide_last_update" t-options="{'widget': 'date'}"/></span>
- </div>
- <div class="row mt8">
- <span class="col-5">Members</span>
- <span class="col" t-esc="channel.members_count"/>
+ <small t-if="not channel.enroll_msg">Contact website administrator.</small>
+ </div>
+ <div t-if="channel.is_member" class="d-flex align-items-center alert my-0 px-2 px-xl-3 bg-100">
+ <t t-call="website_slides.slides_misc_user_image">
+ <t t-set="img_class" t-value="'rounded-circle mr-1'"/>
+ <t t-set="img_style" t-value="'height: 1.4em'"/>
+ </t>
+ <h6 class="d-flex flex-grow-1 my-0">You're enrolled</h6>
+ <i class="fa fa-check"/>
+ </div>
</div>
- <t t-if="channel.channel_type == 'documentation'">
- <div class="row mt8"><div class="col"><hr/></div></div>
- <t t-set="slide_type_keys" t-value="slide_types.keys()"/>
- <t t-foreach="slide_type_keys" t-as="slide_type_key">
- <div class="row mt8 align-items-center">
- <span class="col-5">
- <t t-if="search_category">
+ <button class="btn btn-sm d-md-none bg-white ml-1 border" type="button" data-toggle="collapse" data-target="#o_wslides_sidebar_collapse" aria-expanded="false" aria-controls="o_wslides_sidebar_collapse">More info</button>
+ </div>
+
+ <div id="o_wslides_sidebar_collapse" class="collapse d-md-block">
+ <table class="table table-sm mt-3">
+ <tr>
+ <th class="border-top-0">Last Update</th>
+ <td class="border-top-0"><t t-esc="channel.slide_last_update" t-options="{'widget': 'date'}"/></td>
+ </tr>
+ <tr>
+ <th>Members</th>
+ <td><t t-esc="channel.members_count"/></td>
+ </tr>
+ <t t-if="channel.channel_type == 'documentation'">
+ <t t-set="slide_type_keys" t-value="slide_types.keys()"/>
+ <t t-foreach="slide_type_keys" t-as="slide_type_key">
+ <tr t-if="search_category">
+ <th>
<a t-att-href="'/slides/%s/category/%s?%s' % (slug(channel), slug(search_category), keep_query('debug', slide_type=slide_type_key))"
- t-att-class="'%s' % ('active' if search_slide_type == slide_type_key else '')">
- <t t-esc="slide_types[slide_type_key]"/>
+ t-att-class="'%s' % ('active' if search_slide_type == slide_type_key else '')"><t t-esc="slide_types[slide_type_key]"/>
</a>
- </t>
- <t t-else="">
+ </th>
+ <td><span class="badge badge-pill badge-info" t-esc="search_category['nbr_%s' % slide_type_key]"/></td>
+ </tr>
+ <tr t-else="">
+ <th>
<a t-att-href="'/slides/%s?%s' % (slug(channel), keep_query('debug', slide_type=slide_type_key))"
- t-att-class="'%s' % ('active' if search_slide_type == slide_type_key else '')">
- <t t-esc="slide_types[slide_type_key]"/>
+ t-att-class="'%s' % ('active' if search_slide_type == slide_type_key else '')"><t t-esc="slide_types[slide_type_key]"/>
</a>
- </t>
- </span>
- <span class="col">
- <t t-if="search_category">
- <span class="badge badge-pill badge-info" t-esc="search_category['nbr_%s' % slide_type_key]"/>
- </t>
- <t t-else="">
- <span class="badge badge-pill badge-info" t-esc="channel['nbr_%s' % slide_type_key]"/>
- </t>
- </span>
- </div>
+ </th>
+ <td><span class="badge badge-pill badge-info" t-esc="channel['nbr_%s' % slide_type_key]"/></td>
+ </tr>
+ </t>
</t>
- </t>
- <div class="row mt8"><div class="col"><hr/></div></div>
- <div class="row justify-content-center mt8">
- <button role="button" class="btn btn-primary col-10" title="Share Channel"
+ </table>
+
+ <div class="mt-3">
+ <button role="button" class="btn btn-link btn-block" title="Share Channel"
aria-label="Share Channel"
data-toggle="modal" data-target="#slideChannelShareModal">
- <i class="fa fa-share-square"></i> Share
+ <i class="fa fa-share-square fa-fw"/> Share
</button>
<div class="modal fade" id="slideChannelShareModal" tabindex="-1" role="dialog" aria-labelledby="slideChannelShareModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
@@ -299,13 +309,14 @@
</div>
</div>
</div>
- <div t-if="channel.can_upload" class="row justify-content-center mt8">
- <a role="button" class="btn btn-primary o_wslides_js_slide_upload col-10" title="Upload Presentation"
+
+ <div t-if="channel.can_upload" class="justify-content-center mt-1">
+ <a role="button" class="btn btn-link btn-block o_wslides_js_slide_upload" title="Upload Presentation"
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-cloud-upload"></i> Upload
+ <i class="fa fa-cloud-upload fa-fw"/> Upload
</a>
</div>
</div>
@@ -313,118 +324,106 @@
</template>
<template id="course_slides_list" name="Training Course content: list">
- <div class="row">
- <t t-call="website_slides.course_sidebar"/>
- <div class="col-lg-8 mt-3 mb-5 o_wslides_slides_list" t-att-data-channel-id="channel.id">
- <ul class="o_wslides_js_slides_list_container border-bottom list-unstyled">
- <t t-set="j" t-value="0"/>
- <t t-foreach="category_data" t-as="category">
- <t t-set="category_record" t-value="category['category'] if category['id'] else None"/>
- <t t-set="category_id" t-value="category['id'] if category['id'] else None"/>
- <li t-if="category['total_slides'] or channel.can_publish" class="o_wslides_slide_list_category"
- t-att-data-category-id="category_id">
- <div t-att-data-category-id="category_id"
- t-att-class="'text-muted bg-white border-bottom font-weight-bold pt-0 pb-0 pl-2 pr-2 d-flex justify-content-between align-items-center %s' % ('o_wslides_js_category' if category_id else '')">
- <div class="pt-2 pb-2 d-flex align-items-center">
- <i t-if="channel.can_publish and category_id" class="fa fa-arrows mr-3"></i>
- <t t-if="category_record">
- <span t-field="category_record.name"/>
- </t>
- <t t-else="">
- <span>Uncategorized</span>
- </t>
+ <div class="mb-5 o_wslides_slides_list" t-att-data-channel-id="channel.id">
+
+ <ul class="o_wslides_js_slides_list_container list-unstyled">
+ <t t-set="j" t-value="0"/>
+ <t t-foreach="category_data" t-as="category">
+ <t t-set="category_id" t-value="category['id'] if category['id'] else None"/>
+
+ <li t-if="category['total_slides'] or channel.can_publish" t-att-class="'o_wslides_slide_list_category mb-2' if category_id else 'mb-3'" t-att-data-category-id="category_id">
+ <div t-att-data-category-id="category_id"
+ t-att-class="'o_wslides_slide_list_category_header position-relative d-flex justify-content-between align-items-center %s' % ('o_wslides_js_category bg-white shadow-sm border-bottom-0' if category_id and channel.can_upload else 'border-0 py-1')">
+ <div t-att-class="'d-flex align-items-center pl-3 %s' % ('o_wslides_slides_list_drag' if channel.can_publish else '')">
+ <div t-if="channel.can_publish and category_id" class="o_wslides_slides_list_drag py-2 pr-3">
+ <i class="fa fa-bars"/>
</div>
+ <span t-if="category_id" t-att-class="'text-muted' if not channel.can_upload else ''" t-esc="category['name']"/>
+ <em t-elif="channel.can_publish" class="text-muted mb-1">Uncategorized</em>
+ <small t-if="not category['total_slides']" class="ml-1 text-muted"><b>(empty)</b></small>
+ </div>
+ <div t-if="category_id" class="o_text_link d-flex border-left">
<a t-if="channel.can_upload"
- class="mr-2 pt-2 pb-2 border-left o_wslides_js_slide_upload"
+ class="o_wslides_js_slide_upload px-3 py-2"
role="button"
aria-label="Upload Presentation"
href="#"
- style="text-decoration: none;"
t-att-data-channel-id="channel.id"
t-att-data-category-id="category_id"
t-att-data-can-upload="channel.can_upload"
t-att-data-can-publish="channel.can_publish">
- <i class="fa fa-plus ml-2"></i> Add content
+ <i class="fa fa-plus mr-1"/> <span class="d-none d-md-inline-block">Add content</span>
</a>
</div>
- <ul t-att-data-category-id="category_id" class="list-unstyled">
- <li t-att-class="('text-muted font-italic o_wslides_slides_list_slide o_wslides_js_slides_list_empty justify-content-between align-items-center p-2 %s') % ('d-none' if category['total_slides'] else 'd-flex')">
- <div class="ml-2">
- <span>Empty category</span>
- </div>
- </li>
- <li class="o_wslides_slides_list_slide o_not_editable"></li>
- <t t-foreach="category['slides']" t-as="slide">
- <t t-call="website_slides.course_slides_list_slide" />
- <t t-set="j" t-value="j+1"/>
- </t>
- </ul>
- </li>
- </t>
- </ul>
- <div t-if="channel.can_upload" class="o_wslides_content_actions">
- <a class="o_wslides_js_slide_upload mr-2 border btn btn-light text-muted font-weight-bold"
- 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"></i> Add Content</a>
- <a class="o_wslides_js_slide_section_add border btn btn-light text-muted font-weight-bold" t-attf-channel_id="#{channel.id}"
- href="#" role="button"
- groups="website.group_website_publisher"><i class="fa fa-folder-o"></i> Add Section</a>
- </div>
+ </div>
+ <ul t-att-data-category-id="category_id" class="list-unstyled pb-1 border-top">
+ <li class="o_wslides_slides_list_slide o_not_editable border-0"/>
+ <li class="o_wslides_js_slides_list_empty border-0"/>
+
+ <t t-foreach="category['slides']" t-as="slide">
+ <t t-call="website_slides.course_slides_list_slide" />
+ <t t-set="j" t-value="j+1"/>
+ </t>
+ </ul>
+ </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"
+ 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}"
+ href="#" role="button"
+ groups="website.group_website_publisher"><i class="fa fa-folder-o mr-1"/>Add Section</a>
</div>
- <div t-field="channel.description_html"/>
</div>
+ <div t-field="channel.description_html"/>
</template>
<template id="course_slides_list_slide" name="Slide template for a training channel">
- <li t-att-index="j" t-att-data-slide-id="slide.id" t-att-data-category-id="category_id"
- class="o_wslides_slides_list_slide d-flex align-items-center px-2 py-0">
- <div t-if="channel.can_publish" class="border-right pt-2 pb-2">
- <i class="fa fa-arrows mr-2 text-muted"></i>
+ <li t-att-index="j" t-att-data-slide-id="slide.id" t-att-data-category-id="category_id" t-attf-class="o_wslides_slides_list_slide bg-white-50 border-top-0 d-flex align-items-center pl-2 #{'py-1 pr-2' if not channel.can_upload else ''}">
+ <div t-if="channel.can_publish" class=" o_wslides_slides_list_drag border-right p-2">
+ <i class="fa fa-bars mr-2"></i>
</div>
- <a t-if="slide.is_preview or channel.is_member or channel.can_publish" class="o_wslides_js_slides_list_slide_link font-weight-bold mr-auto"
- t-attf-href="/slides/slide/#{slug(slide)}">
- <t t-call="website_slides.slide_icon">
- <t t-set="icon_class" t-value="'pt-2 pb-2 ml-2 mr-2'"/>
- </t>
+ <t t-call="website_slides.slide_icon">
+ <t t-set="icon_class" t-value="'py-2 mx-2'"/>
+ </t>
+ <a t-if="slide.is_preview or channel.is_member or channel.can_publish" class="o_wslides_js_slides_list_slide_link mr-auto" t-attf-href="/slides/slide/#{slug(slide)}">
<span t-field="slide.name"/>
</a>
- <span t-else="" class="text-muted mr-auto">
- <t t-call="website_slides.slide_icon">
- <t t-set="icon_class" t-value="'pt-2 pb-2 ml-2 mr-2'"/>
- </t>
+ <span t-else="" class="mr-auto">
<span t-esc="slide.name"/>
</span>
- <t t-if="slide.question_ids">
- <span t-att-class="'badge text-white font-weight-bold %s' % ('badge-success' if channel_progress[slide.id].get('completed') else 'badge-warning')">
- <i class="fa fa-flag mr-2"></i>
+
+ <div class="d-flex flex-wrap">
+ <span t-if="slide.question_ids" t-att-class="'badge font-weight-bold px-2 py-1 m-1 %s' % ('badge-success' if channel_progress[slide.id].get('completed') else 'badge-warning')">
+ <i t-attf-class="fa fa-fw #{'fa-check' if channel_progress[slide.id].get('completed') else 'fa-flag'}"/>
<t t-esc="channel_progress[slide.id].get('quiz_karma_won', 0) if channel_progress[slide.id].get('completed') else channel_progress[slide.id].get('quiz_karma_gain', 0)"/> xp
</span>
- </t>
- <span class="badge badge-danger ml-2" t-if="not slide.website_published">Unpublished</span>
- <span class="badge badge-info ml-2" t-if="slide.is_preview">Free preview</span>
+ <span class="badge badge-danger font-weight-normal px-2 py-1 m-1" t-if="not slide.website_published">Unpublished</span>
+ <span class="badge badge-success font-weight-normal px-2 py-1 m-1" t-if="slide.is_preview and not channel.is_member">Free preview</span>
+ </div>
+
<div t-if="channel.is_member or channel.can_publish" class="pt-2 pb-2 border-left ml-2 mr-2 pl-2 d-flex align-items-center o_wslides_slides_list_slide_controls">
<t t-if="channel.is_member">
- <i t-if="not channel_progress[slide.id].get('completed')" class="check-done fa fa-check-circle text-muted mr-2"></i>
- <i t-if="channel_progress[slide.id].get('completed')" class="check-done text-primary fa fa-check-circle mr-2"></i>
+ <i t-if="not channel_progress[slide.id].get('completed')" class="check-done fa fa-circle-o text-500 px-2"></i>
+ <i t-else="" class="check-done text-success fa fa-check-circle px-2"></i>
</t>
- <a t-if="channel.can_publish and not slide.slide_type == 'webpage'" t-attf-href="/web#id=#{slide.id}&action=#{slide_action}&model=slide.slide&view_type=form">
- <i class="fa fa-pencil text-muted mr-2"></i>
- </a>
- <a t-if="channel.can_publish and slide.slide_type == 'webpage'" t-attf-href="/slides/slide/#{slug(slide)}?enable_editor=1">
- <i class="fa fa-pencil text-muted mr-2"></i>
- </a>
- <i t-if="channel.can_publish" t-att-data-slide-id="slide.id" class="fa fa-trash text-muted o_wslides_js_slide_archive"></i>
+ <span t-if="channel.can_publish" class="d-none d-md-inline-block">
+ <a t-if="slide.slide_type == 'webpage'" class="px-2 o_text_link text-primary" target="_blank" t-attf-href="/slides/slide/#{slug(slide)}?enable_editor=1"><span class="fa fa-pencil"/></a>
+ <a t-else="" class="px-2 o_text_link text-primary" target="_blank" t-attf-href="/web#id=#{slide.id}&action=#{slide_action}&model=slide.slide&view_type=form"><span class="fa fa-pencil"/></a>
+ <a href="#" t-att-data-slide-id="slide.id" class="o_text_link text-danger px-2 o_wslides_js_slide_archive"><span class="fa fa-trash"/></a>
+ </span>
</div>
</li>
</template>
<template id="course_slides_cards" name="Documentation Course content: cards / categories">
<div t-if="not search" class="row mb-5">
- <t t-call="website_slides.course_sidebar"/>
<div class="col-lg-8">
<div class="mt-3 w-100">
<h5 class="m-0"> Featured lesson</h5>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index 5683ff75d621..5db8513d4eb6 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -9,7 +9,7 @@
<t t-call="website_slides.course_nav">
<t t-set="channel" t-value="slide.channel_id"/>
</t>
- <div class="o_wslides_lesson_header">
+ <div class="o_wslides_lesson_header o_wslides_gradient">
<div class="container o_wslides_lesson_header_container pt-3 pb-3">
<div class="row align-items-end d-flex">
<div class="col-md-9 offset-md-3 col-xs-12">
diff --git a/addons/website_slides_forum/views/website_slides_templates.xml b/addons/website_slides_forum/views/website_slides_templates.xml
index 534c9a50ef86..42601c7f012b 100644
--- a/addons/website_slides_forum/views/website_slides_templates.xml
+++ b/addons/website_slides_forum/views/website_slides_templates.xml
@@ -2,7 +2,7 @@
<odoo><data>
<template id='course_main' inherit_id="website_slides.course_main">
<!-- Channel main template: add link to forum -->
- <xpath expr="//li[hasclass('o_wlides_course_header_nav_home')]" position="after">
+ <xpath expr="//li[hasclass('o_wslides_course_header_nav_home')]" position="after">
<li class="nav-item" t-if="channel.forum_id">
<a t-att-href="'/forum/%s' % (slug(channel.forum_id))"
t-att-class="'nav-link'" target="new">Forum</a>
--
GitLab