From e5c7e43c71aa2794831fc6d91430dca44a99ab1d Mon Sep 17 00:00:00 2001
From: sri-odoo <sri@odoo.com>
Date: Thu, 21 Mar 2019 08:42:22 +0000
Subject: [PATCH] [IMP] website_slides: reduce bootstrap customization and
improve circular progress design
Purpose: reduce some customization and ease eLearning link with themes. For
that purpose use the body class name propagation recently added.
Linked to task 1958372
Related to PR #32648
---
.../src/scss/slides_slide_fullscreen.scss | 2 -
.../static/src/scss/website_slides.scss | 49 ++++++++---
.../views/website_slides_templates_course.xml | 83 +++++++++----------
.../website_slides_templates_homepage.xml | 12 +--
.../views/website_slides_templates_lesson.xml | 3 +-
5 files changed, 85 insertions(+), 64 deletions(-)
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 301887e87be3..7a0e59d29609 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/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;
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index c4797b859953..8f90d98c22ae 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/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 {
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 1b835af6335c..38d28900d011 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/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"/>
-
- <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>
+ <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"/>
+
+ <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">
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index dde3e222cc61..1d75ac237c4e 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/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("/website_slides/static/src/img/banner_default.svg"); 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("/website_slides/static/src/img/banner_default_all.svg"); 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>
@@ -262,7 +264,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 +272,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 +282,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">
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index fcb324a41937..1d89aa83bbbf 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/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">
--
GitLab