Skip to content
Snippets Groups Projects
Commit d372c8c4 authored by sri-odoo's avatar sri-odoo Committed by Thibault Delavallée
Browse files

[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
parent d5c6c908
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 289 additions and 301 deletions
addons/website_slides/static/src/js/slides_course_slides_list.js
+ 6
− 4
View file @ d372c8c4
...@@ -29,16 +29,18 @@ sAnimations.registry.websiteSlidesCourseSlidesList = sAnimations.Class.extend({ ...@@ -29,16 +29,18 @@ sAnimations.registry.websiteSlidesCourseSlidesList = sAnimations.Class.extend({
*/ */
_bindSortable: function () { _bindSortable: function () {
this.$('ul.o_wslides_js_slides_list_container').sortable({ this.$('ul.o_wslides_js_slides_list_container').sortable({
handle: '.fa-arrows', handle: '.o_wslides_slides_list_drag',
stop: this._reorderCategories.bind(this), 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({ 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', connectWith: '.o_wslides_js_slides_list_container ul',
stop: this._reorderSlides.bind(this), 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'
}); });
}, },
......
addons/website_slides/static/src/scss/website_slides.scss
+ 103
− 116
View file @ d372c8c4
...@@ -2,8 +2,7 @@ ...@@ -2,8 +2,7 @@
$nav-tabs-border-color: #dddddd !default; $nav-tabs-border-color: #dddddd !default;
$body-bg: #FFFFFF !default; $body-bg: #FFFFFF !default;
$MAX-Z-INDEX : 2147483647 !default; $MAX-Z-INDEX : 2147483647 !default;
$gray-50: #f4f4f4 !default; $o-wslides-tabs-height: 36px;
$o-enterprise-radient-color: #62495B !default;
$o-wslides-color-bg: desaturate(map-get($grays, "200"), 80%); $o-wslides-color-bg: desaturate(map-get($grays, "200"), 80%);
$o-wslides-color-dark1: #47525f; $o-wslides-color-dark1: #47525f;
...@@ -12,15 +11,27 @@ $o-wslides-color-dark3: #101216; ...@@ -12,15 +11,27 @@ $o-wslides-color-dark3: #101216;
$o-wslides-fs-side-width: 300px; $o-wslides-fs-side-width: 300px;
// Common to new slides pages
// **************************************************
.o_wslides_gradient { .o_wslides_gradient {
background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%)); 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 { .o_wslides_wrap {
background-color: desaturate(map-get($grays, "200"), 80%); background-color: $o-wslides-color-bg;
.o_wslides_home_nav { .o_wslides_home_nav {
top: -40px; top: -40px;
...@@ -84,45 +95,6 @@ $o-wslides-fs-side-width: 300px; ...@@ -84,45 +95,6 @@ $o-wslides-fs-side-width: 300px;
.o_wslides_entry_muted { .o_wslides_entry_muted {
opacity: 0.5; 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; ...@@ -159,99 +131,115 @@ $o-wslides-fs-side-width: 300px;
color: white; 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); color: rgba(white, 0.8);
} }
} }
.o_wslides_course_header { .o_wslides_course_header:before {
margin: auto; @include media-breakpoint-up(md) {
background: linear-gradient(150deg, #875A7B 20%, #62495B 80%) !important; content: "";
border-bottom: 48px solid #66445e; @include o-position-absolute(auto, 0, 0, 0);
height: $o-wslides-tabs-height;
.o_wslides_course_header_container { background: rgba(black, 0.2);
position: relative; }
top: 48px; }
padding-top: 0px;
.o_wslides_nav_tabs {
.o_wslides_course_header_aside { @include media-breakpoint-up(md) {
max-width: 286px; margin-top: $o-wslides-tabs-height * -1;
img { border-bottom: 0;
width: 100%;
max-width: 256px; .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 { &.active {
font-size: 16px; color: $headings-color;
color: #FFFFFF; background: $o-wslides-color-bg;
border-color: $o-wslides-color-bg;
.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;
}
}
}
} }
} }
} }
}
.o_wslides_course_main { @include media-breakpoint-only(xs) {
.o_wslides_course_content_aside { overflow-x: auto;
max-width: 286px; overflow-y: hidden;
.bg-white {
max-width: 256px; li {
background-color: white; white-space: nowrap;
padding-bottom: 8px;
> div.row {
padding-left: 15px;
padding-right: 15px;
}
} }
} }
} }
.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 // Slides list reordering widget
.o_wslides_slides_list { .o_wslides_slides_list {
.o_wslides_slides_list_slide { .o_wslides_slide_list_category_header {
&.o_not_editable { z-index: 1;
height: 0px;
& + 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) { &:hover > * {
background-color: $gray-100; color: inherit;
} }
}
.o_wslides_slides_list_slide_controls { .o_wslides_slides_list_drag {
i:hover { cursor: pointer;
color: $primary !important;
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; ...@@ -261,7 +249,6 @@ $o-wslides-fs-side-width: 300px;
// ************************************************** // **************************************************
.o_wslides_lesson_header { .o_wslides_lesson_header {
background: linear-gradient(150deg, $o-enterprise-color 20%, $o-enterprise-radient-color 80%);
margin: auto; margin: auto;
.o_wslides_lesson_header_container { .o_wslides_lesson_header_container {
......
addons/website_slides/views/website_slides_templates_lesson.xml
+ 1
− 1
View file @ d372c8c4
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<t t-call="website_slides.course_nav"> <t t-call="website_slides.course_nav">
<t t-set="channel" t-value="slide.channel_id"/> <t t-set="channel" t-value="slide.channel_id"/>
</t> </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="container o_wslides_lesson_header_container pt-3 pb-3">
<div class="row align-items-end d-flex"> <div class="row align-items-end d-flex">
<div class="col-md-9 offset-md-3 col-xs-12"> <div class="col-md-9 offset-md-3 col-xs-12">
......
addons/website_slides_forum/views/website_slides_templates.xml
+ 1
− 1
View file @ d372c8c4
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<odoo><data> <odoo><data>
<template id='course_main' inherit_id="website_slides.course_main"> <template id='course_main' inherit_id="website_slides.course_main">
<!-- Channel main template: add link to forum --> <!-- 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"> <li class="nav-item" t-if="channel.forum_id">
<a t-att-href="'/forum/%s' % (slug(channel.forum_id))" <a t-att-href="'/forum/%s' % (slug(channel.forum_id))"
t-att-class="'nav-link'" target="new">Forum</a> t-att-class="'nav-link'" target="new">Forum</a>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment