From 70add1c2126ce65b1482c1c0c242edb06d430507 Mon Sep 17 00:00:00 2001
From: Quentin Mourier <qmo@odoo.com>
Date: Mon, 25 Feb 2019 08:59:04 +0000
Subject: [PATCH] [REF] website_slides: apply linting and cleaning to elearning
lesson pages and widgets
Purpose of this commit is to perform some linting and cleaning in lesson widget
JS and its related css. Notably for fullscreen widget of eLearning. Containing
* better naming of css classes;
* deleted sidebar file as it is now included directly in the fullscreen
widget;
* removed unused css;
* apply JS linting;
* clean some controllers;
Commit linked to task ID 1942852 and PR #31394.
---
addons/website_slides/controllers/main.py | 44 +-
.../src/js/slides_course_fullscreen_player.js | 180 +++---
.../static/src/js/slides_course_quiz.js | 54 +-
.../src/js/slides_course_sidebar_list.js | 34 --
.../src/js/slides_course_slides_list.js | 36 +-
.../static/src/js/slides_upload.js | 22 +-
.../static/src/scss/slide_course.scss | 536 ------------------
.../static/src/scss/slide_slide.scss | 34 +-
.../src/scss/slides_slide_fullscreen.scss | 149 ++---
.../static/src/scss/website_slides.scss | 84 +--
.../website_slides_drag_and_drop_list.scss | 49 ++
.../static/src/scss/website_slides_quiz.scss | 2 +-
.../src/xml/website_slides_fullscreen.xml | 22 +-
addons/website_slides/views/assets.xml | 3 +-
.../views/website_slides_templates_course.xml | 14 +-
.../website_slides_templates_homepage.xml | 6 +-
.../views/website_slides_templates_lesson.xml | 110 ++--
.../static/src/scss/website_slides.scss | 2 +-
.../src/xml/website_slides_fullscreen.xml | 6 +-
19 files changed, 403 insertions(+), 984 deletions(-)
delete mode 100644 addons/website_slides/static/src/js/slides_course_sidebar_list.js
delete mode 100644 addons/website_slides/static/src/scss/slide_course.scss
create mode 100644 addons/website_slides/static/src/scss/website_slides_drag_and_drop_list.scss
diff --git a/addons/website_slides/controllers/main.py b/addons/website_slides/controllers/main.py
index 7ab6b6052d74..01f52fb536ad 100644
--- a/addons/website_slides/controllers/main.py
+++ b/addons/website_slides/controllers/main.py
@@ -65,20 +65,20 @@ class WebsiteSlides(WebsiteProfile):
'user_progress': {}
}
if slide.channel_id.channel_type == "training":
- channel_slides = slide.channel_id.slide_ids.ids
- slide_index = channel_slides.index(slide.id)
- previous_slide = None
- next_slide = None
- if slide_index > 0:
- previous_slide = slide.channel_id.slide_ids[slide_index-1]
- if slide_index < len(channel_slides) - 1:
- next_slide = slide.channel_id.slide_ids[slide_index+1]
+ channel_slides_ids = slide.channel_id.slide_ids.ids
+ slide_index = channel_slides_ids.index(slide.id)
+ previous_slide = slide.channel_id.slide_ids[slide_index-1] if slide_index > 0 else None
+ next_slide = slide.channel_id.slide_ids[slide_index+1] if slide_index < len(channel_slides_ids) - 1 else None
values.update({
'previous_slide': slug(previous_slide) if previous_slide else "",
'next_slide': slug(next_slide) if next_slide else ""
})
return values
+ def _get_quiz_points(self, slide, attempt_count):
+ possible_points = [slide.quiz_first_attempt_reward,slide.quiz_second_attempt_reward,slide.quiz_third_attempt_reward, slide.quiz_fourth_attempt_reward]
+ return possible_points[attempt_count] if attempt_count < len(possible_points) else possible_points[-1]
+
def _get_user_progress(self, channel):
user_progress = { slide_partner.slide_id.id: slide_partner for slide_partner in request.env['slide.slide.partner'].sudo().search([('channel_id', '=', channel.id),('partner_id', '=', request.env.user.partner_id.id)])}
return {
@@ -489,32 +489,35 @@ class WebsiteSlides(WebsiteProfile):
good_answers = request.env['slide.answer'].search([('id', 'in', answer_ids), ('is_correct', '=', True)])
bad_answers = request.env['slide.answer'].browse(answer_ids) - good_answers
slide_partner = request.env['slide.slide.partner'].search([('slide_id', '=', slide_id), ('partner_id', '=', request.env.user.partner_id.id)])
- possible_points = [slide.quiz_first_attempt_reward, slide.quiz_second_attempt_reward, slide.quiz_third_attempt_reward, slide.quiz_fourth_attempt_reward]
points = 0
if not slide_partner:
- slide_partner = request.env['slide.slide.partner'].sudo().create({
- "slide_id": slide.id,
- "partner_id": request.env.user.partner_id.id,
- "channel_id": slide.channel_id.id,
- "completed": False
- })
+ slide.action_set_viewed()
if not slide_partner.completed:
- if slide_partner.quiz_attempts_count < len(possible_points):
- points = possible_points[slide_partner.quiz_attempts_count]
- else:
- points = possible_points[-1]
+ points = self._get_quiz_points(slide, slide_partner.quiz_attempts_count)
slide_partner.sudo().write({
'quiz_attempts_count': slide_partner.quiz_attempts_count if not bad_answers else slide_partner.quiz_attempts_count + 1,
'points_won': points if not bad_answers else 0,
'completed': not bad_answers
})
+ user = {}
+ if not bad_answers:
+ request.env.user.sudo().add_karma(points)
+ lower_bound = request.env.user.rank_id.karma_min
+ upper_bound = request.env.user.next_rank_id.karma_min
+ user= {
+ 'lower_bound': lower_bound,
+ 'upper_bound': upper_bound,
+ 'karma': request.env.user.karma,
+ 'progress_bar_percentage': 100 * ((request.env.user.karma - lower_bound) / (upper_bound - lower_bound))
+ }
return {
'goodAnswers': [good_answer.id for good_answer in good_answers],
'badAnswers': [bad_answer.id for bad_answer in bad_answers],
'passed': not bad_answers,
'points': points if not bad_answers else 0,
'attempts_count': slide_partner.quiz_attempts_count if slide_partner else 0,
- 'channel_completion': slide.channel_id.completion
+ 'channel_completion': slide.channel_id.completion,
+ 'user': user
}
return {
'error': "You already passed this quiz"
@@ -568,6 +571,7 @@ class WebsiteSlides(WebsiteProfile):
@http.route(['/slides/channel/enroll'], type='http', auth='public', website=True)
def slide_channel_join_http(self, channel_id):
+ # TDE FIXME: why 2 routes ?
if not request.website.is_public_user():
channel = request.env['slide.channel'].browse(int(channel_id))
channel.action_add_member()
diff --git a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
index 5114c091c64f..4141c5dc6e8a 100644
--- a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
+++ b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
@@ -1,4 +1,4 @@
-var onYouTubeIframeAPIReady;
+var onYouTubeIframeAPIReady = undefined;
odoo.define('website_slides.fullscreen', function (require) {
'use strict';
@@ -22,8 +22,7 @@ odoo.define('website_slides.fullscreen', function (require) {
* @param {Object} el
* @param {Object} data holding channelId and optionally upload and publish control parameters
*/
- init: function(el, course_id,slide_id, user_id){
- this._super.apply(this,arguments);
+ init: function (el, course_id,slide_id, user_id){
this.courseID = parseInt(course_id, 10);
this.slideID = parseInt(slide_id, 10);
this.userID = parseInt(user_id, 10);
@@ -39,15 +38,14 @@ odoo.define('website_slides.fullscreen', function (require) {
this.goToQuiz = false;
this.answeredQuestions = [];
this.slideTitle = undefined;
+ return this._super.apply(this,arguments);
},
- start: function(){
- var self = this;
+ start: function (){
this.url = window.location.pathname;
this.urlToSmallScreen = this.url.replace('/fullscreen','');
this._getSlides();
this._renderPlayer();
this._bindListEvents();
-
$(document).keydown(this._onKeyDown.bind(this));
return this._super.apply(this, arguments);
},
@@ -58,18 +56,18 @@ odoo.define('website_slides.fullscreen', function (require) {
* @private
* Renders the player accordingly to the current slide
*/
- _renderPlayer: function(){
+ _renderPlayer: function (){
var self = this;
var embed_url;
- if(self.slide.slide_type !== 'webpage' || self.slide.htmlContent){
- if((self.slide.slide_type == "quiz" || self.slide.hasQuiz) && !self.slide.quiz){
+ if (self.slide.slide_type !== 'webpage' || self.slide.htmlContent){
+ if ((self.slide.slide_type === "quiz" || self.slide.has_quiz) && !self.slide.quiz){
self._fetchQuiz();
} else {
embed_url = $(this.slide.embed_code).attr('src');
if (self.slide.slide_type === "video"){
embed_url = "https://" + embed_url + "&rel=0&autoplay=1&enablejsapi=1&origin=" + window.location.origin;
}
- $('.o_wslides_fullscreen_player').html(QWeb.render('website.slides.fullscreen', {
+ $('.o_wslides_fs_player').html(QWeb.render('website.slides.fullscreen', {
slide: self.slide,
nextSlide: self.nextSlide,
questions: self.slide.quiz ? self.slide.quiz.questions: '',
@@ -79,13 +77,13 @@ odoo.define('website_slides.fullscreen', function (require) {
letters: self.slide.quiz ? self.letters : '',
showMiniQuiz: self.goToQuiz
}));
- if(self.slide.slide_type === "video"){
+ if (self.slide.slide_type === "video"){
self._renderYoutubeIframe();
}
- if(self.slide.slide_type == 'webpage'){
+ if (self.slide.slide_type === 'webpage'){
self._renderWebpage();
}
- if((self.slide.slide_type == "presentation" || self.slide.slide_type == "document" || self.slide.slide_type == "infographic" || self.slide.slide_type == "webpage") && !self.slide.quiz){
+ if ((self.slide.slide_type === "presentation" || self.slide.slide_type === "document" || self.slide.slide_type === "infographic" || self.slide.slide_type === "webpage") && !self.slide.quiz){
self._setSlideStateAsDone();
}
if ((self.slide.quiz && self.slide.slide_type === "quiz") || self.goToQuiz){
@@ -97,40 +95,40 @@ odoo.define('website_slides.fullscreen', function (require) {
}
self._renderTitle();
},
- _renderYoutubeIframe: function(){
+ _renderYoutubeIframe: function (){
var self = this;
/**
* Due to issues of synchronization between the youtube api script and the widget's instanciation.
*/
- try{
+ try {
self._setupYoutubePlayer();
}
- catch {
- onYouTubeIframeAPIReady = function(){
+ catch (error) {
+ onYouTubeIframeAPIReady = function (){
var self = this;
self._setupYoutubePlayer();
- }.bind(this)
+ }.bind(this);
}
},
- _renderWebpage: function(){
+ _renderWebpage: function (){
var self = this;
- $(self.slide.htmlContent).appendTo('.o_wslides_fullscreen_webpage_content');
+ $(self.slide.htmlContent).appendTo('.o_wslides_fs_webpage_content');
},
- _renderQuiz: function(){
+ _renderQuiz: function (){
var self = this;
- var Quiz = new QuizWidget(this, self.slide);
- Quiz.appendTo('.o_wslides_fullscreen_player');
- $('.next-slide').click(function(){
+ var Quiz = new QuizWidget(this, self.slide, self.nextSlide);
+ Quiz.appendTo('.o_wslides_fs_player');
+ $('.next-slide').click(function (){
self._goToNextSlide();
- })
- $('.back-to-video').click(function(){
+ });
+ $('.back-to-video').click(function (){
self.goToQuiz = false;
self._renderPlayer();
});
},
- _renderTitle: function(){
+ _renderTitle: function (){
var self = this;
- $('.o_wslides_fullscreen_slide_title').empty().html(QWeb.render('website.course.fullscreen.title', {
+ $('.o_wslides_fs_slide_title').empty().html(QWeb.render('website.course.fullscreen.title', {
slide: self.slide,
miniQuiz: self.goToQuiz
}));
@@ -139,7 +137,7 @@ odoo.define('website_slides.fullscreen', function (require) {
* @private
* Links the youtube api to the iframe present in the template
*/
- _setupYoutubePlayer: function(){
+ _setupYoutubePlayer: function (){
var self = this;
self.player = new YT.Player('youtube-player', {
host: 'https://www.youtube.com',
@@ -159,18 +157,18 @@ odoo.define('website_slides.fullscreen', function (require) {
* Once the user reaches a particular time in the video, the slide will be considered as completed if the video doesn't have a mini-quiz.
* This method also allows to automatically go to the next slide (or the quiz associated to the current video) once the video is over
*/
- _onPlayerStateChange: function(event){
+ _onPlayerStateChange: function (event){
var self = this;
var tid;
clearInterval(self.tid);
- if (event.data == YT.PlayerState.PLAYING && !self.slide.done) {
- self.tid = setInterval(function(){
- if(event.target.getCurrentTime){
+ if (event.data === YT.PlayerState.PLAYING && !self.slide.done) {
+ self.tid = setInterval(function (){
+ if (event.target.getCurrentTime){
var currentTime = event.target.getCurrentTime();
var totalTime = event.target.getDuration();
- if(totalTime && currentTime > totalTime - 30){
+ if (totalTime && currentTime > totalTime - 30){
clearInterval(self.tid);
- if(!self.slide.hasQuiz && !self.slide.done){
+ if (!self.slide.has_quiz && !self.slide.done){
self.slide.done = true;
self._setSlideStateAsDone();
}
@@ -178,7 +176,7 @@ odoo.define('website_slides.fullscreen', function (require) {
}
}, 1000);
}
- if(event.data == YT.PlayerState.ENDED){
+ if (event.data === YT.PlayerState.ENDED){
self.player = undefined;
self._goToNextSlide();
}
@@ -187,21 +185,12 @@ odoo.define('website_slides.fullscreen', function (require) {
* @private
* Creates slides objects from every slide-list-cells attributes
*/
- _getSlides: function(){
+ _getSlides: function (){
var self = this;
- var slides = $('.o_wslides_fullscreen_sidebar_slide_tab');
- for(var i = 0; i < slides.length;i++){
+ var slides = $('.o_wslides_fs_sidebar_slide_tab');
+ for (var i = 0; i < slides.length;i++){
var slide = $(slides[i]);
- self.slides.push({
- id: parseInt(slide.attr('slide_id'), 10),
- name: slide.attr('slide_name'),
- embed_code: slide.attr('slide_embed_code'),
- slide_type: slide.attr('slide_type'),
- done: slide.attr('done'),
- hasQuiz: slide.attr('quiz'),
- slug: slide.attr('slide_slug'),
- htmlContent: undefined
- });
+ self.slides.push(slide.data());
this._getActiveSlide();
}
},
@@ -210,77 +199,77 @@ odoo.define('website_slides.fullscreen', function (require) {
* @param {object} slide
* Fetch the quiz for a particular slide
*/
- _fetchQuiz: function(){
+ _fetchQuiz: function (){
var self = this;
self._rpc({
route:"/slide/quiz/get",
params: {
'slide_id': self.slide.id
}
- }).then(function(data){
- if(data){
+ }).then(function (data){
+ if (data){
self.slide.quiz = data;
self._renderPlayer();
}
- })
+ });
},
- _fetchHtmlContent: function(){
+ _fetchHtmlContent: function (){
var self = this;
self._rpc({
route:"/slide/html_content/get",
params: {
'slide_id': self.slide.id
}
- }).then(function(data){
+ }).then(function (data){
if (data.html_content) {
self.slide.htmlContent = data.html_content;
self._renderPlayer();
}
- })
+ });
},
/**
* @private
* Once the completion conditions are filled,
* sends a json request to the backend to set the relation between the slide and the user as being completed
*/
- _setSlideStateAsDone: function(){
+ _setSlideStateAsDone: function (){
var self = this;
self._rpc({
route: '/slides/set_completed',
params: {
slide_id: self.slide.id,
}
- }).then(function(data){
- $('#check-'+self.slide.id).replaceWith($('<i class="check-done o_wslides_slide_completed fa fa-check-circle"></i>'))
+ }).then(function (data){
+ $('#check-'+self.slide.id).replaceWith($('<i class="check-done o_wslides_slide_completed fa fa-check-circle"></i>'));
self.slide.done = true;
clearInterval(self.tid);
self.channelCompletion = data.channel_completion;
self._updateProgressbar();
});
},
- _updateProgressbar: function(){
+ _updateProgressbar: function (){
var self = this;
var completion = self.channelCompletion <= 100 ? self.channelCompletion : 100;
- $('.o_wslides_fullscreen_sidebar_progress_gauge').css('width', completion + "%" );
+ $('.o_wslides_fs_sidebar_progress_gauge').css('width', completion + "%" );
$('.o_wslides_progress_percentage').text(completion);
},
/**
* @private
* Creates an array of letters to be used in the quiz with a foreach
*/
- _generateQuizLetters: function(){
+ _generateQuizLetters: function (){
var letters = [];
- for(var i = 65; i < 91; i++){
+ for (var i = 65; i < 91; i++){
letters.push(String.fromCharCode(i));
}
return letters;
},
- _goToNextSlide: function(){
+ _goToNextSlide: function (){
var self = this;
clearInterval(self.tid);
self.player = undefined;
- self.goToQuiz = self.slide.hasQuiz && !self.goToQuiz;
- if(self.nextSlide && !self.goToQuiz){
+ self.goToQuiz = self.slide.has_quiz && !self.goToQuiz && self.slide.slide_type !== 'quiz';
+ if (self.nextSlide && !self.goToQuiz){
self.slide = self.nextSlide;
self.index++;
self._setActiveTab();
@@ -289,16 +278,16 @@ odoo.define('website_slides.fullscreen', function (require) {
self._updateUrl();
history.pushState(null,'',self.url);
}
- else if(self.nextSlide){
+ else if (self.nextSlide){
self._renderPlayer();
}
},
- _goToPreviousSlide: function(){
+ _goToPreviousSlide: function (){
var self = this;
clearInterval(self.tid);
self.goToQuiz = false;
self.player = undefined;
- if(self.previousSlide){
+ if (self.previousSlide){
self.slide = self.previousSlide;
self.index--;
self._setActiveTab();
@@ -308,7 +297,7 @@ odoo.define('website_slides.fullscreen', function (require) {
history.pushState(null,'',self.url);
}
},
- _setPreviousAndNextSlides: function(){
+ _setPreviousAndNextSlides: function (){
var self = this;
self.previousSlide = self.index > 0 ? self.slides[self.index-1] : undefined;
self.nextSlide = self.index < (self.slides.length - 1) ? self.slides[self.index+1] : undefined;
@@ -317,7 +306,7 @@ odoo.define('website_slides.fullscreen', function (require) {
* Changes the url whenever the user changes slides.
* This allows the user to refresh the page and stay at the right video
*/
- _updateUrl: function(){
+ _updateUrl: function (){
var self = this;
var url = window.location.pathname.split('/');
url[url.length-1] = self.slide.slug;
@@ -330,21 +319,21 @@ odoo.define('website_slides.fullscreen', function (require) {
/**
* Whenever the user changes slide, change the active tab
*/
- _setActiveTab: function(){
+ _setActiveTab: function (){
var self = this;
self.activeTab.removeClass('active');
$('li.active').removeClass('active');
$('li[slide_id='+self.slide.id+']').addClass('active');
- self.activeTab = $('.o_wslides_fullscreen_sidebar_slide_tab[index="'+self.index+'"]')
+ self.activeTab = $('.o_wslides_fs_sidebar_slide_tab[index="'+self.index+'"]');
self.activeTab.addClass('active');
},
/**
* The first time the user gets on the player,
* get the slide that is represented by the active tab in the sidebar
*/
- _getActiveSlide: function(){
+ _getActiveSlide: function (){
var self = this;
- self.activeTab = $('.o_wslides_fullscreen_sidebar_slide_tab.active');
+ self.activeTab = $('.o_wslides_fs_sidebar_slide_tab.active');
self.index = parseInt(self.activeTab.attr('index'), 10);
self.slide = self.slides[self.index];
self._setPreviousAndNextSlides();
@@ -352,13 +341,13 @@ odoo.define('website_slides.fullscreen', function (require) {
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
- _onListCellClick: function(ev){
+ _onListCellClick: function (ev){
var self = this;
clearInterval(self.tid);
self.player = undefined;
var target = $(ev.currentTarget);
self.goToQuiz = false;
- if(target[0] !== self.activeTab[0]){
+ if (target[0] !== self.activeTab[0]){
self.activeTab.removeClass('active');
target.addClass('active');
self.index = parseInt(target.attr('index'));
@@ -371,7 +360,13 @@ odoo.define('website_slides.fullscreen', function (require) {
history.pushState(null,'',self.url);
}
},
- _onMiniQuizClick: function(ev){
+ _sidebarToggle: function (ev){
+ ev.preventDefault();
+ $(ev.currentTarget).toggleClass('active');
+ $('.o_wslides_fs_sidebar').toggleClass('o_wslides_fs_sidebar_hidden');
+ $('.o_wslides_fs_player').toggleClass('o_wslides_fs_player_no_sidebar');
+ },
+ _onMiniQuizClick: function (ev){
var self = this;
self.index = parseInt($(ev.currentTarget).attr('index'));
self.slide = self.slides[self.index];
@@ -386,19 +381,21 @@ odoo.define('website_slides.fullscreen', function (require) {
* @private
* Binds events related to the list
*/
- _bindListEvents: function(){
+ _bindListEvents: function (){
var self = this;
- $('.o_wslides_fullscreen_sidebar_slide_tab').each(function () {
+ $('.o_wslides_fs_sidebar_slide_tab').each(function () {
$(this).click(self._onListCellClick.bind(self));
});
-
- $('.o_wslides_slide_quiz ').each(function(){
+ $('.o_wslides_fs_slide_quiz ').each(function (){
$(this).click(self._onMiniQuizClick.bind(self));
- })
+ });
+ $('.o_wslides_fs_toggle_sidebar').click(function (ev){
+ self._sidebarToggle(ev);
+ });
},
- _onKeyDown: function(ev){
+ _onKeyDown: function (ev){
var self = this;
- switch(ev.key){
+ switch (ev.key){
case "ArrowRight":
self._goToNextSlide();
break;
@@ -407,21 +404,22 @@ odoo.define('website_slides.fullscreen', function (require) {
break;
}
},
- })
+ });
sAnimations.registry.websiteSlidesFullscreenPlayer = Widget.extend({
- selector: '.oe_js_course_slide',
+ selector: '.o_wslides_fs_main',
xmlDependencies: ['/website_slides/static/src/xml/website_slides_fullscreen.xml'],
- init: function(el){
+ init: function (el){
this._super.apply(this, arguments);
},
- start: function(){
- this._super.apply(this, arguments);
+ start: function (){
+ var defs = [this._super.apply(this, arguments)];
var user_id = this.$el.attr('user_id');
var course_id = this.$el.attr('course_id');
var slide_id = this.$el.attr('slide_id');
var fullscreen = new Fullscreen(this, course_id, slide_id, user_id);
- fullscreen.appendTo(".oe_js_course_slide");
+ defs.push(fullscreen.attachTo(this.$el));
+ return $.when.apply($, defs);
}
});
diff --git a/addons/website_slides/static/src/js/slides_course_quiz.js b/addons/website_slides/static/src/js/slides_course_quiz.js
index f98d5b3ed8ab..dd921d5a17f9 100644
--- a/addons/website_slides/static/src/js/slides_course_quiz.js
+++ b/addons/website_slides/static/src/js/slides_course_quiz.js
@@ -13,39 +13,41 @@ odoo.define('website_slides.quiz', function (require) {
* @param {Object} data holding all the slide elements needed for the quiz
* It will either come from the fullscreen widget or the sAnimation at the end of this file
*/
- init: function(el, data){
+ init: function (el, data, nextSlide){
this.slide = data;
+ this.nextSlide = nextSlide;
this.answeredQuestions = [];
this.fullscreen = el;
return this._super.apply(this,arguments);
},
- start: function(){
+ start: function (){
var self = this;
self._bindQuizEvents();
/**
* If the quiz is rendered by the server instead of the fullscreen widget,
* questions and their answers will have to be created manually from attributes
*/
- if(self.slide.quiz.questions.length === 0){
+ if (self.slide.quiz.questions.length === 0){
this._setQuestions();
}
return this._super.apply(this, arguments);
},
- _renderSuccessModal: function(){
+ _renderSuccessModal: function (data){
var self =this;
- $('.o_wslides_fullscreen_quiz').append(QWeb.render('website.course.quiz.success', {
- data: data
+ $('.o_wslides_fs_quiz').append(QWeb.render('website.course.quiz.success', {
+ data: data,
+ nextSlide: self.nextSlide
}));
$('.submit-quiz').remove();
$('.next-slide').css('display', 'inline-block');
- $('.next-slide').click(function(){
+ $('.next-slide').click(function (){
self.fullscreen._goToNextSlide();
});
- $('.o_wslides_quiz_success_modal_close').click(function(){
+ $('.o_wslides_quiz_success_modal_close').click(function (){
$('.o_wslides_quiz_success_modal').remove();
$('.o_wslides_quiz_modal_background').remove();
});
- $(".o_wslides_quiz_modal_background").click(function(ev){
+ $(".o_wslides_quiz_modal_background").click(function (ev){
$(ev.currentTarget).remove();
$('.o_wslides_quiz_success_modal').remove();
});
@@ -58,21 +60,20 @@ odoo.define('website_slides.quiz', function (require) {
* In case the quiz is rendered by the server and the data don't come from the fullscreen widget,
* questions and their answers will have to be set here by using attributes
*/
- _setQuestions: function(){
+ _setQuestions: function (){
var self = this;
- $('.o_wslides_quiz_question').each(function(){
+ $('.o_wslides_quiz_question').each(function (){
self.slide.quiz.questions.push({
id: parseInt($(this).attr('id')),
title: $(this).attr('title'),
answers: []
});
- })
- for(var i = 0; i < self.slide.quiz.questions.length; i++){
+ });
+ for (var i = 0; i < self.slide.quiz.questions.length; i++){
self._setAnswersForQuestion(self.slide.quiz.questions[i]);
}
},
_setAnswersForQuestion: function (question){
- var self = this;
$('.o_wslides_quiz_answer[question_id='+question.id+']').each(function (){
question.answers.push({
id: parseInt($(this).attr('id')),
@@ -84,13 +85,13 @@ odoo.define('website_slides.quiz', function (require) {
_updateProgressbar: function (){
var self = this;
var completion = self.channelCompletion <= 100 ? self.channelCompletion : 100;
- $('.o_wslides_fullscreen_sidebar_progress_gauge').css('width', completion + "%" );
+ $('.o_wslides_fs_sidebar_progress_gauge').css('width', completion + "%" );
$('.o_wslides_progress_percentage').text(completion);
},
_bindQuizEvents: function (){
var self = this;
if (!self.slide.done){
- $('.o_wslides_quiz_answer').each(function(){
+ $('.o_wslides_quiz_answer').each(function (){
$(this).click(self._onAnswerClick.bind(self));
});
}
@@ -105,10 +106,10 @@ odoo.define('website_slides.quiz', function (require) {
var questionID =$('#answer'+ answers.goodAnswers[i] +' .o_wslides_quiz_radio_box input').attr('question_id');
self.answeredQuestions.push(questionID);
$('.o_wslides_quiz_answer[question_id='+questionID+']:not(.o_wslides_quiz_good_answer)').addClass('o_wslides_quiz_ignored_answer');
- $('.o_wslides_quiz_answer[question_id='+questionID+']').each(function(){
- $(this).unbind('click')
+ $('.o_wslides_quiz_answer[question_id='+questionID+']').each(function (){
+ $(this).unbind('click');
});
- $('input[question_id='+questionID+']').each(function(){
+ $('input[question_id='+questionID+']').each(function (){
$(this).prop('disabled',true);
});
}
@@ -149,7 +150,7 @@ odoo.define('website_slides.quiz', function (require) {
answer_ids: values,
quiz_id: self.slide.quiz_id
}
- }).then(function(data){
+ }).then(function (data){
self._highlightAnswers(data);
self.slide.quiz.nb_attempts = data.attempts_count;
if (data.passed){
@@ -157,14 +158,15 @@ odoo.define('website_slides.quiz', function (require) {
self._updateProgressbar();
$('#check-'+self.slide.id).replaceWith($('<i class="check-done o_wslides_slide_completed fa fa-check-circle"></i>'));
self.slide.done = true;
- self._renderSuccessModal();
+ self._renderSuccessModal(data);
}
else {
- $('#quiz-points').text(self.slide.quiz.nb_attempts < 3 ? self.slide.quiz.possible_rewards[self.slide.quiz.nb_attempts] : self.slide.quiz.possible_rewards[self.slide.quiz.possible_rewards.length-1]);
+ var points = self.slide.quiz.nb_attempts < self.slide.quiz.possible_rewards.length ? self.slide.quiz.possible_rewards[self.slide.quiz.nb_attempts] : self.slide.quiz.possible_rewards[self.slide.quiz.possible_rewards.length-1];
+ $('#quiz-points').text(points);
}
});
} else {
- $('.o_wslides_fullscreen_player').append($('<p class="quiz-danger text-danger mt-1">All questions must be answered !</p>'));
+ $('#quiz_buttons').append($('<p class="quiz-danger text-danger mt-1">All questions must be answered !</p>'));
}
},
});
@@ -184,7 +186,7 @@ odoo.define('website_slides.quiz', function (require) {
var secondAttemptReward = this.$el.attr('second_reward');
var thirdAttemptReward = this.$el.attr('third_reward');
var fourthAttemptReward = this.$el.attr('fourth_reward');
- var possibleRewards = [firstAttemptReward,secondAttemptReward,thirdAttemptReward,fourthAttemptReward]
+ var possibleRewards = [firstAttemptReward,secondAttemptReward,thirdAttemptReward,fourthAttemptReward];
var data = {
id: slideID,
done: slideDone,
@@ -194,8 +196,8 @@ odoo.define('website_slides.quiz', function (require) {
possible_rewards: possibleRewards,
reward: nbAttempts < possibleRewards.length ? possibleRewards[nbAttempts] : possibleRewards[possibleRewards.length-1]
}
- }
- if(!slideDone){
+ };
+ if (!slideDone){
var NewQuiz = new Quiz(this, data);
NewQuiz.appendTo(".o_w_slides_quiz_no_fullscreen");
}
diff --git a/addons/website_slides/static/src/js/slides_course_sidebar_list.js b/addons/website_slides/static/src/js/slides_course_sidebar_list.js
deleted file mode 100644
index 11b61d4e5ec6..000000000000
--- a/addons/website_slides/static/src/js/slides_course_sidebar_list.js
+++ /dev/null
@@ -1,34 +0,0 @@
-odoo.define('website_slides.sidebar', function (require) {
- 'use strict';
- var sAnimations = require('website.content.snippets.animation');
- var core = require('web.core');
- var Widget = require('web.Widget');
-
- var SideBar = Widget.extend({
- init: function (el){
- this._super.apply(this,arguments);
- },
- start: function (){
- $('.o_wslides_fullscreen_toggle_sidebar').click(function (ev){
- ev.preventDefault();
- $(ev.currentTarget).toggleClass('active');
- $('.o_wslides_fullscreen_sidebar').toggleClass('o_wslides_fullscreen_sidebar_hidden');
- $('.o_wslides_fullscreen_player').toggleClass('o_wslides_fullscreen_player_no_sidebar')
- })
- return this._super.apply(this, arguments);
- },
- });
-
- sAnimations.registry.websiteSlidesSidebarList = Widget.extend({
- selector: '.o_wslides_fullscreen_toggle_sidebar',
- // xmlDependencies: ['/website_slides/static/src/xml/website_slides.xml'],
- init: function (el){
- this._super.apply(this, arguments);
- },
- start: function (){
- this._super.apply(this, arguments);
- var sideBar = new SideBar(this);
- sideBar.appendTo(".oe_js_side_bar_list");
- }
- });
-});
\ No newline at end of file
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 bf634f542e3b..c71eed1cb040 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
@@ -48,8 +48,8 @@ odoo.define('website_slides.slideslist', function (require) {
},
_getSlides: function (){
var self = this;
- var slides = $('li.content-slide');
- for(var i = 0; i < slides.length;i++){
+ var slides = $('li.o_wsldies_content_slide');
+ for (var i = 0; i < slides.length;i++){
var slide = $(slides[i]);
self.slides.push({
id: parseInt(slide.attr('slide_id')),
@@ -75,12 +75,12 @@ odoo.define('website_slides.slideslist', function (require) {
}
self.dropTarget = $(ev.currentTarget);
self.draggedElement[0].parentNode.removeChild(self.draggedElement[0]);
- $('ul[category_id='+target.attr('category_id')+']').append(self.draggedElement)
+ $('ul[category_id='+target.attr('category_id')+']').append(self.draggedElement);
self._addSlideDragAndDropHandlers(self.draggedElement);
self._reorderSlides();
});
target.on('dragover', function (ev){
- if(ev.preventDefault){
+ if (ev.preventDefault){
ev.preventDefault();
}
});
@@ -88,7 +88,7 @@ odoo.define('website_slides.slideslist', function (require) {
_addSlideDragAndDropHandlers: function (target){
var self = this;
target.on('dragstart', function (ev){
- $('.section-draggable').removeClass('hold')
+ $('.section-draggable').removeClass('hold');
self._unbind('section-draggable');
ev.originalEvent.dataTransfer.effectAllowed = 'move';
ev.originalEvent.dataTransfer.setData('text/html', this.outerHTML);
@@ -136,7 +136,7 @@ odoo.define('website_slides.slideslist', function (require) {
target.removeClass('hold');
});
},
- _addSectionDragAndDropHandlers: function(target){
+ _addSectionDragAndDropHandlers: function (target){
var self = this;
target.on('dragstart', function (ev){
self._unbind('slide-draggable');
@@ -161,14 +161,14 @@ odoo.define('website_slides.slideslist', function (require) {
target.removeClass('slide-hovered');
});
target.on('drop', function (ev){
- if(ev.preventDefault){
+ if (ev.preventDefault){
ev.preventDefault();
}
- if(self.draggedElement.hasClass('section-draggable') && target.hasClass('section-draggable')){
+ if (self.draggedElement.hasClass('section-draggable') && target.hasClass('section-draggable')){
target.removeClass('slide-hovered');
target.removeClass('hold');
self.dropTarget = $(ev.currentTarget);
- if(target !== self.draggedElement && $(ev.currentTarget).hasClass('section-draggable')){
+ if (target !== self.draggedElement && $(ev.currentTarget).hasClass('section-draggable')){
self.draggedElement[0].parentNode.removeChild(self.draggedElement[0]);
var dropHTML = ev.originalEvent.dataTransfer.getData('text/html');
target[0].insertAdjacentHTML('beforebegin',dropHTML);
@@ -203,16 +203,16 @@ odoo.define('website_slides.slideslist', function (require) {
});
},
_resetCategoriesIndex: function (){
- var categoriesIndexes = $('.section-index')
+ var categoriesIndexes = $('.section-index');
for (var i = 0; i < categoriesIndexes.length; i++){
- $(categoriesIndexes[i]).text(i+1)
+ $(categoriesIndexes[i]).text(i+1);
}
},
- _reorderSlides: function(){
+ _reorderSlides: function (){
var self = this;
// In case the slide was transfered to another section
if (self.draggedElement.hasClass('slide-draggable')){
- self.draggedElement.attr('category_id', parseInt(self.dropTarget.attr('category_id')))
+ self.draggedElement.attr('category_id', parseInt(self.dropTarget.attr('category_id')));
}
self.slides = [];
self._getSlides();
@@ -221,20 +221,20 @@ odoo.define('website_slides.slideslist', function (require) {
params: {
slides_data: self.slides
}
- }).then(function(){
+ }).then(function (){
});
},
- _rebindUploadButton: function(categoryID){
+ _rebindUploadButton: function (categoryID){
var self = this;
- this.$('.oe_slide_js_upload[data-category-id='+categoryID+']').click(function(ev){
+ this.$('.oe_slide_js_upload[data-category-id='+categoryID+']').click(function (ev){
ev.preventDefault();
var data = $(ev.currentTarget).data();
var dialog = new SlideUpload.SlideUploadDialog(self, data);
dialog.appendTo(document.body);
dialog.open();
- })
+ });
}
- })
+ });
sAnimations.registry.websiteSlidesCourseSlidesList = Widget.extend({
selector: '.oe_js_course_slides_list',
diff --git a/addons/website_slides/static/src/js/slides_upload.js b/addons/website_slides/static/src/js/slides_upload.js
index 7b0a2964bf8a..aa6cc6131c53 100644
--- a/addons/website_slides/static/src/js/slides_upload.js
+++ b/addons/website_slides/static/src/js/slides_upload.js
@@ -30,7 +30,7 @@ var SlideUploadDialog = Dialog.extend({
this._setup();
this.channelID = parseInt(options.channelId, 10);
- this.defaultCategoryID = parseInt(options.categoryId,10)
+ this.defaultCategoryID = parseInt(options.categoryId,10);
this.canUpload = options.canUpload === 'True';
this.canPublish = options.canPublish === 'True';
@@ -213,7 +213,7 @@ var SlideUploadDialog = Dialog.extend({
result['tag_ids'] = tagValues;
}
// category
- if(!self.defaultCategoryID){
+ if (!self.defaultCategoryID){
var categoryValue = this.$('#category_id').select2('data');
if (categoryValue && categoryValue.create) {
result['category_id'] = [0, {'name': categoryValue.text}];
@@ -311,24 +311,24 @@ var SlideUploadDialog = Dialog.extend({
return values;
},
- _reorderSlidesSequence: function(){
+ _reorderSlidesSequence: function (){
var self = this;
- var slidesElement = $('li.content-slide');
+ var slidesElement = $('li.o_wslides_content_slide');
var slides = [];
- for(var i = 0; i < slidesElement.length;i++){
+ for (var i = 0; i < slidesElement.length;i++){
slides.push({
id: parseInt($(slidesElement[i]).attr('slide_id')),
category_id: parseInt($(slidesElement[i]).attr('category_id')),
sequence: i
- })
+ });
}
self._rpc({
route: '/slides/resequence_slides',
params: {
slides_data: slides
}
- }).then(function(){
- })
+ }).then(function (){
+ });
},
/**
* Init the data relative to the support slide type to upload
@@ -540,9 +540,9 @@ var SlideUploadDialog = Dialog.extend({
self._alertDisplay(data.error);
} else {
//Quick and really dirty fix for reordering issues
- if(data.channel_type == 'training' && self.categoryID){
+ if (data.channel_type === 'training' && self.categoryID){
var categoryElement = $('ul[category_id='+self.categoryID+']');
- $('<li hidden class="content-slide" slide_id="'+data.slide_id+'" category_id="'+self.categoryID+'">temp</li>').appendTo(categoryElement)
+ $('<li hidden class="content-slide" slide_id="'+data.slide_id+'" category_id="'+self.categoryID+'">temp</li>').appendTo(categoryElement);
self._reorderSlidesSequence();
}
window.location = data.url;
@@ -584,7 +584,7 @@ sAnimations.registry.websiteSlidesUpload = sAnimations.Class.extend({
_openDialog: function ($element) {
var data = $element.data();
- var dialog = new SlideUploadDialog(this, data)
+ var dialog = new SlideUploadDialog(this, data);
dialog.appendTo(document.body);
return dialog.open();
},
diff --git a/addons/website_slides/static/src/scss/slide_course.scss b/addons/website_slides/static/src/scss/slide_course.scss
deleted file mode 100644
index 38179498415a..000000000000
--- a/addons/website_slides/static/src/scss/slide_course.scss
+++ /dev/null
@@ -1,536 +0,0 @@
-
-.banner{
- position: absolute;
- top: 0;
- left: 0;
- height: 20%;
- background-color: $primary;
- width: 256px;
- opacity: 0;
- color: #fff;
- transition: all .3s ease-out;
- z-index: 2;
- visibility: hidden;
- display: flex;
- justify-content: space-around;
- align-items: center;
- margin-left: 15px;
-}
-
-.banner a {
- font-size: 1.5rem;
- text-align: center;
- padding: 20px;
-}
-
-.banner a:hover{
- cursor: pointer;
-}
-
-.fill {
- display: flex;
- justify-content: center;
- align-items: center;
- overflow: hidden
-}
-.fill img {
- flex-shrink: 0;
- min-width: 100%;
- min-height: 100%
-}
-
-.main_image{
- position: relative
-}
-.main_image:hover{
- .banner{
- opacity: 1;
- visibility: visible;
- }
-
-}
-
-.course-content {
- padding: 0;
-
- ul {
- list-style: none;
- padding: 0
- }
-}
-
-.course-section {
- margin: 0;
- background-color: #ddd;
- display: flex;
- list-style: none;
- font-size: 1.05rem;
- border-bottom: 1px solid #ccc
-}
-
-.content-type {
- width: 30%;
-}
-
-.content-type:hover{
- cursor: pointer;
-}
-
-.course-progress-bar{
- height: 10px;
- width: 80%;
- box-sizing: border-box;
- border-radius: 5px;
- background-color: rgba(0,0,0,.2);
- overflow: hidden;
-
- .progress-gauge{
- height: 100%;
- width: 0;
- background-color: $primary;
-
- transition: all .8s ease-out;
- }
-}
-
-.course-rating{
- color:$primary;
-}
-.course-banner{
- border-bottom: 1px solid $primary;
-}
-
-.content-tab{
- .active {
-
- border: none;
- border-bottom: 1px solid $secondary;
- }
-}
-
-.content-tab a:hover{
- border:none;
- border-bottom: 1px solid $secondary;
-}
-
-.content-container{
- border:none;
-}
-
-.content-slide:nth-child(odd){
- background-color: #f6f6f6;
-}
-
-.content-slide:nth-child(even){
- background-color: #f9f9f9;
-}
-
-.content-slide-controls {
- i:hover{
- color: $primary !important;
- cursor: pointer;
- }
-}
-
-.viewer-container {
- display: flex;
- align-items: stretch;
- height: 500px;
- width: 100%;
- background-color: #ccc;
- justify-content: flex-start;
-}
-
-
-
-.slide-infos {
- margin-top: 1rem;
- display: flex;
- justify-content: space-between;
- align-items: start;
-}
-
-.oe_js_player {
-
-}
-
-.slide-deactivated {
- pointer-events: none;
-}
-
-.slide-draggable {
- user-select: none;
- -khtml-user-drag: element;
- -webkit-user-drag: element;
-}
-
-.slide-hovered{
- margin-top: 10px;
-}
-
-.section-draggable {
- user-select: none;
- -khtml-user-drag: element;
- -webkit-user-drag: element;
-}
-
-.hold{
- border: solid #ccc 4px;
-}
-
-
-.fullscreen {
- position: absolute;
- top: 0;
- right: 0;
- width: 100%;
- z-index: 1000;
- height: 100%;
- margin: 0;
- padding: 0;
-}
-
-
-.sidebar-list{
- position: fixed;
- top: 46px;
- bottom: 0;
- left: 0;
- width: 300px;
- z-index: 2000;
-}
-
-
-
-.sidebar-list-visible {
- left: 50px;
-}
-
-.show-list {
- position: absolute;
- top: 15%;
- left: 50px;
- font-size: 2rem;
- z-index: 10000;
- color: #a0a0a0;
- border: 2px solid #ccc;
- border-radius: 10px;
- padding: 5px 10px;
-}
-
-.hover-background {
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 3000;
-}
-
-.hover-background:hover {
- opacity: 1;
-}
-
-
-.show-list:hover {
- cursor: pointer;
-}
-
-.change-small-screen {
- font-size: 1.5rem;
- z-index: 10000;
- color: #a0a0a0;
-}
-
-.change-small-screen:hover {
- cursor: pointer;
- border-color: $primary;
- color: $primary;
-}
-
-.sidebar-header {
- padding: 10px 15px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 1.5rem;
- border-bottom: 1px solid #ccc;
- height: 80px;
-
- a {
- color: black;
- }
-
- a:hover {
- color: $primary;
- }
-
- i:hover{
- color: $primary;
- }
-}
-
-.close-list:hover {
- cursor: pointer;
-}
-
-.fullscreen-btn{
- font-size: 2rem;
- display: inline-block;
- a {
- text-decoration: none;
- color: $text-muted;
- }
-}
-
-.fullscreen-btn:hover{
- cursor: pointer;
-
- a {
- color: $primary;
- }
-}
-
-.sidebar-fullscreen {
- position: relative;
- top: 0;
- left: 0;
- bottom: 0;
- height: auto;
- transform: translateX(-100%);
- width: 0;
-}
-
-.fullscreen-question-container{
- background-color: #fff;
- width: 100%;
- padding-top: 20px;
- overflow: auto;
-}
-
-.fullscreen-question{
- border-radius: 10px;
- padding: 10px 20px;
- box-shadow: 0px 1px 4px rgba(0,0,0,.5);
- margin-top: 50px;
-}
-
-.question-title {
- font-size: 1.5rem;
-}
-
-.buttons-container{
- width: 80%;
- display: flex;
- justify-content: space-between;
- flex-direction: row-reverse;
- margin-top: 40px;
-}
-
-// .slide-resources {
-// border-bottom: 1px solid #ccc;
-// }
-
-.slide-resource {
- padding: 5px 50px;
- width: 100%;
- i{
- margin-right: 10px;
- }
-}
-
-.list-cell {
-}
-
-
-.quiz-header{
- border-bottom: 2px solid #CBCBCB;
- margin-bottom: 50px;
-}
-
-.quiz-header-container{
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- h1 {
- width: 80%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-}
-
-.quiz-good-answer{
- background-color: #C7EAE9;
-}
-
-.quiz-bad-answer{
- background-color: #FEBEBE;
-}
-
-.quiz-bad-answer label.radio-box,
-.quiz-good-answer label.radio-box{
- border: none;
-}
-
-.quiz-bad-answer label.radio-box i{
- background-color: #FD0606;
- color: white;
- height: 100%;
- width: 100%;
- font-size: 1.5rem;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 50px;
-}
-
-.quiz-ignored-answer {
- color: $text-muted;
-}
-
-
-.quiz-good-answer label.radio-box input:checked + i{
- height: 100%;
- width: 100%;
- background-color: #fff;
- display: flex;
- justify-content: center;
- align-items: center;
- font-size: 2.4rem;
- border: 10px solid $primary;
- border-radius: 50px;
-}
-
-.quiz-answer {
- border-radius: 10px;
- padding: 5px 10px;
- transition: all .2s ease-in-out;
- display: flex;
- align-items: center;
- margin-bottom: 5px;
-}
-
-.quiz-answer:not(.quiz-good-answer,.quiz-bad-answer,.quiz-ignored-answer):hover{
- background-color: #E5E5E5;
- cursor: pointer;
-}
-
-label.radio-box{
- border: 2px solid #CBCBCB;
- background-color: #fff;
- width: 50px;
- height: 50px;
- display: inline-flex;
- border-radius: 50%;
- overflow: hidden;
- justify-content: center;
- align-items: center;
- margin: 0;
- margin-right: 20px;
- font-size: 1.2rem;
- outline: none;
-}
-
-.quiz-answer:not(.quiz-good-answer,.quiz-bad-answer,.quiz-ignored-answer) label.radio-box:hover{
- cursor: pointer;
-}
-
-label.radio-box input{
- display:none;
- outline: none;
- border: none;
-}
-
-
-label.radio-box span{
- color: inherit;
- padding: 20px;
-}
-
-label.radio-box input:checked + span{
- background-color: $primary;
- color: #fff;
-}
-
-label.radio-box input:checked{
- background-color: #C7EAE9;
-}
-
-.quiz-question {
- border-bottom: 2px solid #CBCBCB;
- padding-bottom: 20px;
- margin-bottom: 20px;
-}
-
-.quiz-question-answers {
- list-style: none;
- margin: 0;
- margin-top: 20px;
- padding: 0;
- font-size: 1rem;
-}
-
-.submit-quiz {
- margin-top: 20px;
-}
-
-
-.quiz-modal-background{
- position: absolute;
- top: 0;
- left: 0;
- background-color: rgba(0,0,0,.5);
- width: 100%;
- height: 100%;
-}
-
-.quiz-modal-container{
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-
-.quiz-modal{
- position: absolute;
- width: 30%;
- height: 500px;
- background-color: #fff;
- top: 50%;
- left: 50%;
- transform: translateX(-50%) translateY(-50%);
- border-radius: 10px;
- z-index: 2000;
-}
-.quiz-points-container{
- font-size: 1.2rem;
-}
-
-.quiz-points {
- background-color: #C4C4C4;
- padding: 0 4px ;
- border-radius: 10px;
- color: #fff;
-}
-
-
-.quiz-points-won{
- background-color: $primary;
-}
-
-.webpage-container{
- background-color: #fff;
- width: 100%;
-}
-
-.webpage-content {
- background-color: #fff;
- height: 100%;
-}
-
-
-
-
diff --git a/addons/website_slides/static/src/scss/slide_slide.scss b/addons/website_slides/static/src/scss/slide_slide.scss
index d99aaea101aa..2aeac35b8896 100644
--- a/addons/website_slides/static/src/scss/slide_slide.scss
+++ b/addons/website_slides/static/src/scss/slide_slide.scss
@@ -1,15 +1,15 @@
-.slide-header {
+.o_wslides_slide_header {
background-color: #62495B;
height: 200px;
}
-.slide-header-container {
+.o_wslides_slide_header_container {
width: 1000px;
margin: 0 auto;
height: 100%;
}
-.slide-header-box{
+.o_wslides_slide_header_box{
display: flex;
height: 100%;
width: 50%;
@@ -25,7 +25,7 @@
}
-.slide-content-list {
+.o_wslides_slide_content_list {
position: absolute;
top: 140px;
left: 80px;
@@ -34,7 +34,7 @@
z-index: 200;
}
-.slide-list{
+.o_wslides_slide_list{
background-color: #fff;
list-style: none;
height: 100%;
@@ -55,19 +55,19 @@
}
}
-.slide-content-list-section{
+.o_wslides_slide_content_list_section{
border-bottom: 1px solid #fff;
color: #9B9B9B;
text-transform: uppercase;
padding: 10px 15px;
}
-.slide-content-list-slide{
+.o_wslides_slide_content_list_slide{
color: #666666;
padding: 10px 15px;
}
-.slide-list-cell{
+.o_wslides_slide_list_cell{
word-wrap: none;
padding: 0.5rem 1rem;;
height: 40px;
@@ -77,25 +77,25 @@
text-decoration: none !important;
}
-.slide-list-cell:hover{
+.o_wslides_slide_list_cell:hover{
background-color: #eee;
cursor: pointer;
}
-.slide-list-cell:active{
+.o_wslides_slide_list_cell:active{
background-color: #eee;
cursor: pointer;
}
-.slide-content-list-header {
+.o_wslides_slide_content_list_header {
padding: 10px 15px;
font-size: 1.2rem;
background-color: #F7F7F7;
color: #6F6F6F;
}
-.slide-button {
+.o_wslides_slide_button {
color: #666;
text-decoration: none;
border:1px solid #B9B9B9;
@@ -107,7 +107,7 @@
border-radius: 3px;
}
-.slide-button-fullscreen {
+.o_wslides_slide_button_fullscreen {
color: #666;
text-decoration: none;
border:1px solid #B9B9B9;
@@ -118,7 +118,7 @@
border-radius: 3px;
}
-.slide-button-done {
+.o_wslides_slide_button_done {
color: #fff;
text-transform: uppercase;
background-color: $primary;
@@ -130,7 +130,7 @@
margin: 0;
}
-.slide-title {
+.o_wslides_slide_title {
width: 60%;
display: flex;
align-items: center;
@@ -139,7 +139,7 @@
font-size: 1.5rem;
}
- .slide-points {
+ .o_wslides_slide_points {
margin-left: 20px;
padding: 5px 10px;
background-color: #DC9D45;
@@ -149,7 +149,7 @@
}
}
-.slide-documentation-sidebar {
+.o_wslides_slide_documentation_sidebar {
position: absolute;
top: 300px;
left: 30px;
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 d73681607331..3310b570c8e2 100644
--- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
+++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss
@@ -1,12 +1,11 @@
-.o_wslides {
+.o_wslides_fs_main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000;
-
- .o_wslides_slide_fullscreen_header {
+ .o_wslides_slide_fs_header {
align-items: center;
background-color: #313A44;
color: #AEB0B2;
@@ -15,7 +14,7 @@
justify-content: space-between;
width: 100%;
- .o_wslides_fullscreen_slide_title {
+ .o_wslides_fs_slide_title {
height: 100%;
display: flex;
align-items: center;
@@ -63,7 +62,7 @@
}
}
- .o_wslides_fullscreen_container {
+ .o_wslides_fs_container {
display: flex;
align-items: stretch;
height: calc(100% - 50px);
@@ -71,11 +70,11 @@
background-color: #313A44;
}
- .o_wslides_fullscreen_sidebar_hidden{
+ .o_wslides_fs_sidebar_hidden{
transform: translateX(-100%);
}
- .o_wslides_fullscreen_sidebar{
+ .o_wslides_fs_sidebar{
width: 400px;
min-width: 400px;
background-color: #313A44;
@@ -98,78 +97,94 @@
padding-left: 20px;
}
- .o_wslides_fullscreen_sidebar_header{
+ .o_wslides_fs_sidebar_header{
height: 100px;
padding: 20px 0;
display: flex;
flex-direction: column;
- .o_wslides_slide_fullscreen_progress_box{
+ .o_wslides_slide_fs_progress_box{
display: flex;
align-items: center;
font-size: .9rem;
- .o_wslides_fullscreen_sidebar_progressbar{
+ .o_wslides_fs_sidebar_progressbar{
height: 5px;
border-radius: 10px;
width: 70%;
background-color: rgba(0,0,0,.3);
margin-right: 40px;
overflow: hidden;
-
}
-
- .o_wslides_fullscreen_sidebar_progress_gauge {
+ .o_wslides_fs_sidebar_progress_gauge {
background-color: $primary;
height: 100%;
width: 0;
transition: all 1.5s ease-in;
}
-
span {
color: #BABDC0;
}
-
}
-
a {
font-size: 1.5rem;
font-weight: bold;
}
-
}
-
- .o_wslides_fullscreen_sidebar_section {
+ .o_wslides_fs_sidebar_section {
margin-bottom: 20px;
background-color: #283038;
padding: 10px 0;
-
- }
-
- .o_wslides_fullscreen_sidebar_section_tab {
- color: #656B72;
- font-size: .8rem;
- text-transform: uppercase;
- font-weight: bold;
- padding: 5px 0 5px 15px;
+ > a > li {
+ color: #656B72;
+ font-size: .8rem;
+ text-transform: uppercase;
+ font-weight: bold;
+ padding: 5px 0 5px 15px;
+ }
}
-
- .o_wslides_fullscreen_sidebar_section_slides{
+ .o_wslides_fs_sidebar_section_slides{
padding: 0;
margin-bottom: 15px;
-
-
-
li {
margin: 0;
padding: 0;
border-left: 2px solid transparent;
display: flex;
-
a {
flex: 1;
}
+ > span{
+ width: 15px;
+ padding: 0;
+ margin: 0;
+ margin-left: 10px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ i {
+ z-index: 100;
+ padding: 0;
+ margin: 0;
+ }
+ i.o_wslides_slide_completed{
+ color: #00A04A;
+ border-radius: 50%;
+ overflow: hidden;
+ background-color: #fff;
+ height: 12px;
+ width: 12px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #00A04A;
+ }
+ .o_wslides_fs_full_line{
+ width: 1px;
+ height: 100%;
+ background-color: #787D82;
+ }
+ }
}
-
.o_wslides_top_line,
.o_wslides_bottom_line{
width: 1px;
@@ -177,82 +192,38 @@
flex-grow: 1;
background-color: #787D82;
}
-
li:first-child .o_wslides_top_line{
background-color: transparent;
}
-
li:last-child .o_wslides_bottom_line{
background-color: transparent;
}
-
li:hover,
li.active {
border-left: 2px solid $primary;
cursor: pointer;
background-color: #1D2228;
}
-
- .o_wslides_fullscreen_sidebar_slide_tab {
+ .o_wslides_fs_sidebar_slide_tab {
padding:5px 0 5px 15px;
font-size: .8rem;
color: #8A8F93;
font-weight: bold;
flex: 1;
-
}
-
- .o_wslides_fullscreen_sidebar_slide_tab.active{
+ .o_wslides_fs_sidebar_slide_tab.active{
color: #fff;
}
-
- .o_wslides_fullscreen_slide_tab_line{
- width: 15px;
- padding: 0;
- margin: 0;
- margin-left: 10px;
- display: flex;
- flex-direction: column;
- align-items: center;
-
- i {
- z-index: 100;
- padding: 0;
- margin: 0;
- }
-
- i.o_wslides_slide_completed{
- color: #00A04A;
- border-radius: 50%;
- overflow: hidden;
- background-color: #fff;
- height: 12px;
- width: 12px;
- display: flex;
- justify-content: center;
- align-items: center;
- border: 1px solid #00A04A;
- }
-
- .o_wslides_full_line{
- width: 1px;
- height: 100%;
- background-color: #787D82;
- }
- }
-
- .o_wslides_slide_link {
+ .o_wslides_fs_slide_link {
color: #098586;
font-size: .8rem;
margin-left: 15px;
flex: 1;
-
i {
margin-right: 10px;
}
}
-
- .o_wslides_slide_quiz {
+ .o_wslides_fs_slide_quiz {
font-size: .8rem;
margin-left: 15px;
color: #8A8F93;
@@ -267,7 +238,7 @@
}
- .o_wslides_fullscreen_player {
+ .o_wslides_fs_player {
display: flex;
align-items: stretch;
max-width: calc(100% - 400px);
@@ -286,7 +257,7 @@
}
}
- .o_wslides_fullscreen_webpage {
+ .o_wslides_fs_webpage {
background-color: #fff;
width: 100%;
height: 100%;
@@ -294,10 +265,8 @@
padding: 20px 0;
}
- .o_wslides_fullscreen_player_no_sidebar {
+ .o_wslides_fs_player_no_sidebar {
max-width: 100%;
width: 100%;
- }
-
-
-}
\ No newline at end of file
+ }
+}
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index b884a0df64f5..2324835a4015 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -4,11 +4,6 @@ $body-bg: #FFFFFF !default;
$link-color: theme-color('primary') !default;
$MAX-Z-INDEX : 2147483647 !default;
-@mixin top-covered-image {
- object-fit: cover;
- object-position: top;
-}
-
// Common to new slides pages
// **************************************************
@@ -20,39 +15,28 @@ $MAX-Z-INDEX : 2147483647 !default;
padding: 0px 32px 0px 32px;
}
-div .o_wslides_home_nav {
- top: -40px;
-
- @include media-breakpoint-up(md) {
- font-size: 1rem;
-
- .o_wslides_nav_navbar_right {
- margin-left: auto;
- padding-left: $spacer;
- border-left: 1px solid $border-color;
- }
- }
-}
-
.o_wslides_wrap {
background-color: desaturate(map-get($grays, "200"), 80%);
- .o_wslides_course_card {
- border-width: 0 0 3px 0;
+ .o_wslides_home_nav {
+ top: -40px;
+
+ @include media-breakpoint-up(md) {
+ font-size: 1rem;
+
+ .o_wslides_nav_navbar_right {
+ padding-left: $spacer;
+ margin-left: auto;
+ border-left: 1px solid $border-color;
+ }
+ }
}
+ .o_wslides_course_card,
.o_wslides_lesson_card {
border-width: 0 0 3px 0;
}
- // responsive card-deck like
- // .row.o_wslides_row > div[class*='col-'] {
- // display: flex;
- // flex:1 0 auto;
- // .card {
- // width:100%;
- // }
- // }
// tools
// ****************************************
@@ -64,10 +48,6 @@ div .o_wslides_home_nav {
.o_wslides_entry_muted {
opacity: 0.5;
}
- img.o_wslides_img_center_crop {
- object-fit: cover;
- object-position: center;
- }
.o_wslides_home_circled {
border-radius: 50%;
@@ -83,10 +63,12 @@ div .o_wslides_home_nav {
overflow: visible;
margin-bottom: 0em;
height: 4px;
+
.progress-bar {
background-color: #00A09D;
position: relative;
border-radius: 4px;
+
span {
background-color: #00A09D;
position: absolute;
@@ -97,6 +79,7 @@ div .o_wslides_home_nav {
right: -1.4em;
border-radius: 2px;
}
+
span:after {
bottom: 100%;
left: 50%;
@@ -119,27 +102,14 @@ div .o_wslides_home_nav {
// New home page
// **************************************************
-div .o_wslides_home_nav {
- top: -40px;
-
- @include media-breakpoint-up(md) {
- font-size: 1rem;
-
- .o_wslides_nav_navbar_right {
- margin-left: auto;
- padding-left: $spacer;
- border-left: 1px solid $border-color;
- }
- }
-}
-
-div .o_wslides_home_main {
+.o_wslides_home_main {
.o_wslides_home_aside {
.fa-check {
color: #00A09D;
font-size: 1.2em;
}
}
+
.o_wprofile_next_rank_card {
background-color: transparent !important;
}
@@ -244,13 +214,6 @@ div .o_wslides_home_main {
background-color: #f2f2f2;
.o_wslides_course_content_main {
- h3 {
- font-size: 1.4em;
- }
-
- h4 {
- font-size: 1.3em;
- }
.o_wslides_course_content_aside {
max-width: 286px;
@@ -263,13 +226,15 @@ div .o_wslides_home_main {
padding-right: 15px;
}
}
-
- .o_wslides_course_aside_line {
- }
}
}
}
+
+// New lesson page
+// **************************************************
+
+
// Old brol to clean someday
// **************************************************
@@ -292,9 +257,10 @@ div .o_wslides_home_main {
}
.oe_slides_apart_small {
- @include top-covered-image;
height: 60px;
width: 90px;
+ object-fit: cover;
+ object-position: top;
}
.oe_slides_statistics_title {
diff --git a/addons/website_slides/static/src/scss/website_slides_drag_and_drop_list.scss b/addons/website_slides/static/src/scss/website_slides_drag_and_drop_list.scss
new file mode 100644
index 000000000000..e0bf31c284fd
--- /dev/null
+++ b/addons/website_slides/static/src/scss/website_slides_drag_and_drop_list.scss
@@ -0,0 +1,49 @@
+.o_wslides_course_content {
+ padding: 0;
+
+ ul {
+ list-style: none;
+ padding: 0
+ }
+}
+
+.o_wslides_course_section {
+ margin: 0;
+ background-color: #ddd;
+ display: flex;
+ list-style: none;
+ font-size: 1.05rem;
+ border-bottom: 1px solid #ccc
+}
+
+.o_wslides_content_tab{
+ .active {
+
+ border: none;
+ border-bottom: 1px solid $secondary;
+ }
+}
+
+.o_wslides_content_tab a:hover{
+ border:none;
+ border-bottom: 1px solid $secondary;
+}
+
+.o_wslides_content_container{
+ border:none;
+}
+
+.o_wslides_content_slide:nth-child(odd){
+ background-color: #f6f6f6;
+}
+
+.o_wslides_content_slide:nth-child(even){
+ background-color: #f9f9f9;
+}
+
+.o_wslides_content_slide_controls {
+ i:hover{
+ color: $primary !important;
+ cursor: pointer;
+ }
+}
\ No newline at end of file
diff --git a/addons/website_slides/static/src/scss/website_slides_quiz.scss b/addons/website_slides/static/src/scss/website_slides_quiz.scss
index 9fe4438ee576..cca013c0be9b 100644
--- a/addons/website_slides/static/src/scss/website_slides_quiz.scss
+++ b/addons/website_slides/static/src/scss/website_slides_quiz.scss
@@ -1,5 +1,5 @@
- .o_wslides_fullscreen_quiz {
+ .o_wslides_fs_quiz {
background-color: #F6F6F6;
width: 100%;
height: 100%;
diff --git a/addons/website_slides/static/src/xml/website_slides_fullscreen.xml b/addons/website_slides/static/src/xml/website_slides_fullscreen.xml
index c1161a024883..1817d085f71d 100644
--- a/addons/website_slides/static/src/xml/website_slides_fullscreen.xml
+++ b/addons/website_slides/static/src/xml/website_slides_fullscreen.xml
@@ -9,20 +9,20 @@
<div style="width:100%;height:100%;text-align:center;" t-if="slide.slide_type == 'infographic' && !showMiniQuiz">
<img t-attf-src="/web/image/slide.slide/#{slide.id}/image" class="img-fluid" style="height: 100%" alt="Slide image"/>
</div>
- <div t-if="(slide.slide_type == 'quiz' || showMiniQuiz) && questions " class="o_wslides_fullscreen_quiz">
+ <div t-if="(slide.slide_type == 'quiz' || showMiniQuiz) && questions " class="o_wslides_fs_quiz">
<div>
<t t-call="website.slide.quiz"/>
- <div class="container">
+ <div id="quiz_buttons" class="container">
<button t-if="!slide.done" class="btn btn-primary submit-quiz" >Check your answers</button>
<button t-if="embed_url" class="btn btn-primary back-to-video" >Watch again</button>
<button t-if="slide.done && nextSlide" class="btn btn-primary next-slide" >Continue</button>
</div>
</div>
</div>
- <div t-if="slide.slide_type == 'webpage'" class="o_wslides_fullscreen_webpage">
- <div class="o_wslides_fullscreen_webpage_content container"/>
+ <div t-if="slide.slide_type == 'webpage'" class="o_wslides_fs_webpage">
+ <div class="o_wslides_fs_webpage_content container"/>
</div>
- <div class="o_wslides_fullscreen_content"/>
+ <div class="o_wslides_fs_content"/>
</t>
<t t-name="website.slide.quiz">
@@ -76,17 +76,17 @@
<div class="o_wslides_quiz_success_modal_close"><i class="fa fa-times"></i></div>
<h1>Amazing!</h1>
<div class="o_wslides_quiz_success_xp">
- <p>You gained <span t-esc="data.points"/> !</p>
+ <p>You gained <span t-esc="data.points"/> points!</p>
<div class="o_wslides_quiz_success_progress_bar">
- <div class="o_wslides_quiz_success_progress_gauge"/>
+ <div class="o_wslides_quiz_success_progress_gauge" t-att-style="'width:'+data.user.progress_bar_percentage+'%'"/>
</div>
<div class="o_wslides_quiz_success_progress_bounds">
- <span>600</span>
- <span>1000</span>
+ <span t-esc="data.user.lower_bound"/>
+ <span t-esc="data.user.upper_bound"/>
</div>
</div>
<div class="o_wslides_quiz_success_reward"></div>
- <div class="o_wslides_quiz_success_button">
+ <div t-if="nextSlide" class="o_wslides_quiz_success_button">
<a class="next-slide">Next ></a>
</div>
</div>
@@ -101,7 +101,7 @@
<i t-if="slide.slide_type == 'link'" class="fa fa-file-code-o mr-2"></i>
<i t-if="slide.slide_type == 'webpage'" class="fa fa-file-text mr-2"></i>
<i t-if="slide.slide_type == 'quiz'" class="fa fa-question-circle mr-2 text"></i>
- <span class="o_wslides_fullscreen_slide_title_span" t-esc="slide.name"/>
+ <span class="o_wslides_fs_slide_title_span" t-esc="slide.name"/>
</t>
<t t-else="">
<span><i class="fa fa-flag-checkered"></i>Quiz: <span t-esc="slide.name"/></span>
diff --git a/addons/website_slides/views/assets.xml b/addons/website_slides/views/assets.xml
index a43729f527db..97a0f13ccf84 100644
--- a/addons/website_slides/views/assets.xml
+++ b/addons/website_slides/views/assets.xml
@@ -6,7 +6,7 @@
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/website_slides/static/src/scss/website_slides.scss" t-ignore="true"/>
<link rel="stylesheet" type="text/scss" href="/website_slides/static/src/scss/website_slides_profile.scss"/>
- <link rel="stylesheet" type="text/scss" href="/website_slides/static/src/scss/slide_course.scss" t-ignore="true"/>
+ <link rel="stylesheet" type="text/scss" href="/website_slides/static/src/scss/website_slides_drag_and_drop_list.scss" t-ignore="true"/>
<link rel="stylesheet" type="text/scss" href="/website_slides/static/src/scss/slide_slide.scss" t-ignore="true"/>
<link rel="stylesheet" type="text/scss" href="/website_slides/static/src/scss/slides_slide_fullscreen.scss" t-ignore="true"/>
<link rel="stylesheet" type="text/scss" href="/website_slides/static/src/scss/website_slides_quiz.scss"/>
@@ -21,7 +21,6 @@
<script type="text/javascript" src="/website_slides/static/src/js/slides_delete_slide.js"/>
<script type="text/javascript" src="/website_slides/static/src/js/slides_course_slides_list.js"/>
<script type="text/javascript" src="/website_slides/static/src/js/slides_course_progress_bar.js"/>
- <script type="text/javascript" src="/website_slides/static/src/js/slides_course_sidebar_list.js"/>
<script type="text/javascript" src="/website_slides/static/src/js/slides_course_fullscreen_player.js"/>
<script type="text/javascript" src="/website_slides/static/src/js/slides_course_quiz.js"/>
</xpath>
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index 3459fba05a55..b481dd4be4de 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -245,13 +245,13 @@
<template id="course_content_training" name="Content of a training channel">
<div class="col-8 d-flex flex-column ml-4">
- <div class="course-content oe_js_course_slides_list w-100 mt8">
+ <div class="o_wslides_course_content oe_js_course_slides_list w-100 mt8">
<ul>
<t t-set="i" t-value="1"/>
<t t-set="j" t-value="0"/>
<t t-foreach="channel.category_ids" t-as="category">
<li t-attf-class="#{'section-draggable' if user == user_id else ''}" t-attf-category_id="#{category.id}">
- <div t-attf-category_id="#{category.id}" class="course-section text-muted font-weight-bold pt-0 pb-0 pl-2 pr-2 d-flex justify-content-between align-items-center">
+ <div t-attf-category_id="#{category.id}" class="o_wslides_course_section text-muted font-weight-bold pt-0 pb-0 pl-2 pr-2 d-flex justify-content-between align-items-center">
<div style="width:50%;" class="d-flex align-items-center">
<i t-if="channel.user_id == user" class="fa fa-arrows mr-3 text-muted"></i>
<div class="mr-2">Section <span class="section-index" t-esc="i"/>:</div>
@@ -270,8 +270,8 @@
</div>
<ul t-attf-category_id="#{category.id}" >
<t t-foreach="category.slide_ids" t-as="slide">
- <li t-att-index="j" t-attf-slide_id="#{slide.id}" t-attf-category_id="#{category.id}" t-attf-class="#{'content-slide slide-draggable d-flex justify-content-between align-items-center p-2' if channel.user_id == user else 'content-slide d-flex justify-content-between align-items-center p-2'}">
- <div class="content-slide-infos ml-2">
+ <li t-att-index="j" t-attf-slide_id="#{slide.id}" t-attf-category_id="#{category.id}" t-attf-class="#{'o_wslides_content_slide slide-draggable d-flex justify-content-between align-items-center p-2' if channel.user_id == user else 'content-slide d-flex justify-content-between align-items-center p-2'}">
+ <div class="ml-2">
<i t-if="channel.user_id == user" class="fa fa-arrows mr-2 text-muted"></i>
<i t-if="slide.slide_type == 'document'" class="fa fa-file-pdf-o mr-2 text-muted"></i>
<i t-if="slide.slide_type == 'infographic'" class="fa fa-file-picture-o mr-2 text-muted"></i>
@@ -282,7 +282,7 @@
<i t-if="slide.slide_type == 'certification'" class="fa fa-trophy mr-2 text-muted"></i>
<a class="link-to-slide" t-attf-href="/slides/slide/#{slug(slide)}"><span t-field="slide.name"/></a>
</div>
- <div class="content-slide-controls mr-2">
+ <div class="o_wslides_content_slide_controls mr-2">
<i t-if="not slide.id in user_progress or not user_progress[slide.id].completed" class="check-done fa fa-check-circle text-muted mr-1"></i>
<i t-if="slide.id in user_progress and user_progress[slide.id].completed" class="check-done text-primary fa fa-check-circle mr-1"></i>
<a t-if="channel.user_id == user 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-1"></i></a>
@@ -296,7 +296,7 @@
</li>
</t>
</ul>
- <div t-if="channel.can_upload" class="content-actions">
+ <div t-if="channel.can_upload" class="o_wslides_content_actions">
<a class="mr-2 oe_slide_js_upload"
role="button"
aria-label="Upload Presentation"
@@ -376,7 +376,7 @@
<!-- Embedded template: display a list of slides in a grid view -->
<template id='course_lessons_grid' name="Course: Lessons Grid View">
- <div class="row o_wslides_row mx-n2 mt8">
+ <div class="row mx-n2 mt8">
<t t-foreach="slides" t-as="slide">
<div class="col-md-3 col-sm-6 px-2 col-xs-12 d-flex flex-grow-1" t-call="website_slides.lesson_card"/>
</t>
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index cad54cf323d2..145120c2b5d6 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -55,7 +55,7 @@
<hr class="mt-2"/>
</div>
</div>
- <div class="row o_wslides_row mx-n2 mt8">
+ <div class="row mx-n2 mt8">
<t t-foreach="channels_my[:3]" t-as="channel">
<div class="col-md-4 col-sm-6 px-2 col-xs-12 d-flex flex-grow-1" t-call="website_slides.course_card"/>
</t>
@@ -70,7 +70,7 @@
<hr class="mt-2"/>
</div>
</div>
- <div class="row o_wslides_row mx-n2 mt8">
+ <div class="row mx-n2 mt8">
<t t-foreach="channels_popular[:3]" t-as="channel">
<div class="col-md-4 col-sm-6 px-2 col-xs-12 d-flex flex-grow-1" t-call="website_slides.course_card"/>
</t>
@@ -84,7 +84,7 @@
<hr class="mt-2"/>
</div>
</div>
- <div class="row o_wslides_row mx-n2 mt8">
+ <div class="row mx-n2 mt8">
<t t-foreach="channels_newest[:3]" t-as="channel">
<div class="col-md-4 col-sm-6 px-2 col-xs-12 d-flex flex-grow-1" t-call="website_slides.course_card"/>
</t>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index 6c3c9c9f54bb..b765d2f58e25 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -8,36 +8,36 @@
<t t-call="website_slides.course_nav">
<t t-set="channel" t-value="slide.channel_id"/>
</t>
- <div class="slide-header">
- <div class="slide-header-container">
- <div class="slide-header-box">
+ <div class="o_wslides_slide_header">
+ <div class="o_wslides_slide_header_container">
+ <div class="o_wslides_slide_header_box">
<a t-attf-href="/slides/#{slug(slide.channel_id)}" t-field="slide.channel_id.name"/>
<div t-if="slide.channel_id.channel_type == 'training'" class="d-flex align-items-end">
- <div class="course-progress-bar">
- <div class="progress-gauge m-0 oe_slide_js_progress_bar" t-attf-channel_completion="#{slide.channel_id.completion}"/>
+ <div class="o_wslides_slide_progress_bar">
+ <div class="o_wslides_progress_gauge m-0 oe_slide_js_progress_bar" t-attf-channel_completion="#{slide.channel_id.completion}"/>
</div>
<i class="fa fa-trophy ml-2 mb-0 p-0" style="font-size:1.8rem; color: #cdcdcd;"></i>
</div>
</div>
</div>
</div>
- <div t-if="slide.channel_id.channel_type == 'training'" class="sidebar-list oe_js_side_bar_list slide-content-list">
- <ul class="slide-list">
+ <div t-if="slide.channel_id.channel_type == 'training'" class="o_wslides_slide_content_list">
+ <ul class="o_wslides_slide_list">
<li>
- <div class="slide-content-list-header">
+ <div class="o_wslides_slide_content_list_header">
Course content
</div>
</li>
<t t-set="i" t-value="0"/>
<t t-foreach="slide.channel_id.category_ids" t-as="category">
<a data-toggle="collapse" t-attf-href="#collapse-#{category.id}" role="button" aria-expanded="false" t-attf-aria-controls="collapse-#{category.id}">
- <li class="slide-content-list-section">
+ <li class="o_wslides_slide_content_list_section">
<span t-field="category.name"/>
</li>
</a>
<ul class="collapse p-0 m-0" t-attf-id="collapse-#{category.id}" >
<t t-foreach="category.slide_ids" t-as="course_slide">
- <li class="slide-content-list-slide">
+ <li class="o_wslides_slide_content_list_slide">
<a t-attf-href="/slides/slide/#{slug(course_slide)}" t-att-index="i" t-att-slide_id="course_slide.id">
<div t-attf-index="#{i}" t-attf-slide_id="#{course_slide.id}" t-attf-class="#{'active' if slide.id == course_slide.id else ''} d-flex justify-content-between">
<div>
@@ -49,16 +49,16 @@
<i t-if="course_slide.slide_type == 'quiz'" class="fa fa-question-circle mr-2 text-muted"></i>
<t t-esc="course_slide.name"/>
</div>
- <div class="content-slide-controls mr-2">
+ <div class="o_wslides_content_slide_controls mr-2">
<i t-attf-id="check-#{course_slide.id}" t-if="course_slide.id in user_progress and not user_progress[course_slide.id].completed" class="check-done fa fa-check-circle text-muted mr-1"></i>
<i t-attf-id="check-#{course_slide.id}" t-if="course_slide.id in user_progress and user_progress[course_slide.id].completed" class="check-done text-primary fa fa-check-circle mr-1"></i>
</div>
</div>
</a>
- <ul t-if="course_slide.link_ids" class="list-group slide-resources">
+ <ul t-if="course_slide.link_ids" class="list-group o_wslides_slide_resources">
<t t-foreach="course_slide.link_ids" t-as="resource">
<a t-attf-href="#{resource.link}" target="new">
- <li><div class="slide-resource"><i class="fa fa-link"></i><span t-field="resource.link"/></div></li>
+ <li><div class="o_wslides_slide_resource"><i class="fa fa-link"></i><span t-field="resource.link"/></div></li>
</a>
</t>
</ul>
@@ -69,10 +69,10 @@
</t>
</ul>
</div>
- <div class="slide-header-container d-flex justify-content-between mt-4 mb-3">
- <div class="slide-title">
+ <div class="o_wslides_slide_header_container d-flex justify-content-between mt-4 mb-3">
+ <div class="o_wslides_slide_title">
<h1 t-field="slide.name"/>
- <span t-if="slide.question_ids" t-attf-class="slide-points ml-2 #{'quiz-points-won' if slide.id in user_progress and user_progress[slide.id].completed else ''}">
+ <span t-if="slide.question_ids" t-attf-class="o_wslides_slide_points ml-2 #{'quiz-points-won' if slide.id in user_progress and user_progress[slide.id].completed else ''}">
<span t-if="slide.id in user_progress and user_progress[slide.id].quiz_attempts_count == 0" id="quiz-points" t-esc="slide.quiz_first_attempt_reward"/>
<span t-if="slide.id in user_progress and user_progress[slide.id].quiz_attempts_count == 1" id="quiz-points" t-esc="slide.quiz_second_attempt_reward"/>
<span t-if="slide.id in user_progress and user_progress[slide.id].quiz_attempts_count == 2" id="quiz-points" t-esc="slide.quiz_third_attempt_reward"/>
@@ -80,18 +80,20 @@
points
</span>
</div>
- <div class="course-nav-links">
+ <div>
<t t-if="previous_slide">
- <a class="slide-button" t-attf-href="/slides/slide/#{previous_slide}">Prev</a>
+ <a class="o_wslides_slide_button" t-attf-href="/slides/slide/#{previous_slide}">Prev</a>
</t>
- <a t-if="slide.slide_type in ('webpage', 'video', 'document', 'iconographic') and not slide.question_ids and (slide.id in user_progress and not user_progress[slide.id].completed)" t-attf-href="/slide/completed/#{slide.id}?next_slide=#{next_slide}&course=#{slug(slide.channel_id)}" class="slide-button-done">Set Done</a>
+ <a t-if="slide.slide_type in ('webpage', 'video', 'document', 'iconographic') and not slide.question_ids and (slide.id in user_progress and not user_progress[slide.id].completed)"
+ t-att-href="'/slides/slide/%s/set_completed?next_slide=%s' % (slide.id, next_slide.id)"
+ class="o_wslides_slide_button_done">Set Done</a>
<t t-if="next_slide">
- <a class="slide-button" t-attf-href="/slides/slide/#{next_slide}">Next</a>
+ <a class="o_wslides_slide_button" t-attf-href="/slides/slide/#{next_slide}">Next</a>
</t>
- <a t-if="slide.channel_id.channel_type == 'training'" t-attf-href="/slides/slide/#{slug(slide)}?fullscreen=1" class="slide-button-fullscreen ml-2"><i class="fa fa-desktop mr-2"></i>fullscreen</a>
+ <a t-if="slide.channel_id.channel_type == 'training'" t-attf-href="/slides/slide/#{slug(slide)}?fullscreen=1" class="o_wslides_slide_button_fullscreen ml-2"><i class="fa fa-desktop mr-2"></i>fullscreen</a>
</div>
</div>
- <div class="slide-header-container mt16">
+ <div class="o_wslides_slide_header_container mt16">
<div class="row">
<div style="width:100%;">
<div class="o_w_slides_slide_detail_container" style="width: 100%;">
@@ -108,7 +110,7 @@
<div t-field="slide.html_content"/>
</div>
<div t-if="slide.question_ids">
- <div class=".o_wslides_fullscreen_quiz o_w_slides_quiz_no_fullscreen mt-2"
+ <div class=".o_wslides_fs_quiz o_w_slides_quiz_no_fullscreen mt-2"
t-attf-slide_id="#{slide.id}"
t-attf-slide_done="#{slide.id in user_progress and user_progress[slide.id].completed}"
t-attf-nb_attempts="#{user_progress[slide.id].quiz_attempts_count if slide.id in user_progress else ''}"
@@ -447,28 +449,28 @@
<!-- Slide template for the fullscreen mode -->
<template id="slide_fullscreen" name="Fullscreen">
<t t-call="website.layout">
- <div class="o_wslides">
- <div class="o_wslides_slide_fullscreen_header">
+ <div class="o_wslides_fs_main">
+ <div class="o_wslides_slide_fs_header">
<div>
- <a id="fullscreen_sidebar_button" href="#" class="active o_wslides_fullscreen_toggle_sidebar"><i class="fa fa-bars"></i>Lessons</a>
+ <a id="fullscreen_sidebar_button" href="#" class="active o_wslides_fs_toggle_sidebar"><i class="fa fa-bars"></i>Lessons</a>
<a class="o_wslides_small_screen" t-attf-href="/slides/slide/#{slug(slide)}" target="new"><i class="fa fa-pencil"></i>write a review</a>
- <div class="o_wslides_fullscreen_slide_title"/>
+ <div class="o_wslides_fs_slide_title"/>
</div>
<div>
<a t-attf-href="/slides/">back to courses</a>
</div>
</div>
- <div class="o_wslides_fullscreen_container">
- <div class="oe_js_side_bar_list o_wslides_fullscreen_sidebar">
+ <div class="o_wslides_fs_container">
+ <div class="o_wslides_fs_sidebar">
<ul>
<li>
- <div class="o_wslides_fullscreen_sidebar_header">
+ <div class="o_wslides_fs_sidebar_header">
<a t-attf-href="/slides/#{slug(slide.channel_id)}">
<span t-field="slide.channel_id.name"/>
</a>
- <div class="o_wslides_slide_fullscreen_progress_box">
- <div class="o_wslides_fullscreen_sidebar_progressbar">
- <div class="o_wslides_fullscreen_sidebar_progress_gauge oe_slide_js_progress_bar" t-attf-channel_completion="#{slide.channel_id.completion}"/>
+ <div class="o_wslides_slide_fs_progress_box">
+ <div class="o_wslides_fs_sidebar_progressbar">
+ <div class="o_wslides_fs_sidebar_progress_gauge oe_slide_js_progress_bar" t-attf-channel_completion="#{slide.channel_id.completion}"/>
</div>
<span><span class="o_wslides_progress_percentage" t-esc="slide.channel_id.completion"/>%</span>
</div>
@@ -476,16 +478,16 @@
</li>
<t t-set="i" t-value="0"/>
<t t-foreach="slide.channel_id.category_ids" t-as="category">
- <div class="o_wslides_fullscreen_sidebar_section">
+ <div class="o_wslides_fs_sidebar_section">
<a data-toggle="collapse" t-attf-href="#collapse-#{category.id}" role="button" aria-expanded="true" t-attf-aria-controls="collapse-#{category.id}">
- <li class="o_wslides_fullscreen_sidebar_section_tab">
+ <li>
<span t-field="category.name"/>
</li>
</a>
- <ul class="o_wslides_fullscreen_sidebar_section_slides collapsed p-0 m-0" t-attf-id="collapse-#{category.id}" >
+ <ul class="o_wslides_fs_sidebar_section_slides collapsed p-0 m-0" t-attf-id="collapse-#{category.id}" >
<t t-foreach="category.slide_ids" t-as="course_slide">
- <li t-att-index="i" t-att-slide_id="course_slide.id" t-attf-class="#{'active' if slide.id == course_slide.id else ''}">
- <span class="o_wslides_fullscreen_slide_tab_line">
+ <li t-attf-index="#{i}" t-att-slide_id="course_slide.id" t-attf-class="#{'active' if slide.id == course_slide.id else ''}">
+ <span>
<span class="o_wslides_top_line"></span>
<i t-attf-id="check-#{course_slide.id}" t-if="not course_slide.id in user_progress or not user_progress[course_slide.id].completed" class="check-done fa fa-circle-thin"></i>
<i t-attf-id="check-#{course_slide.id}" t-if="course_slide.id in user_progress and user_progress[course_slide.id].completed" class="check-done o_wslides_slide_completed fa fa-check-circle"></i>
@@ -493,14 +495,14 @@
</span>
<a t-att-index="i" t-att-slide_id="course_slide.id">
<div t-attf-index="#{i}"
- t-attf-slide_slug="#{slug(course_slide)}"
- t-attf-done="#{course_slide.id in user_progress and user_progress[course_slide.id].completed}"
- t-attf-slide_id="#{course_slide.id}"
- t-attf-slide_name="#{course_slide.name}"
- t-attf-quiz="#{True if course_slide.question_ids else False}"
- t-attf-slide_type="#{course_slide.slide_type}"
- t-attf-slide_embed_code="#{course_slide.embed_code}"
- t-attf-class="o_wslides_fullscreen_sidebar_slide_tab #{'active' if slide.id == course_slide.id else ''} d-flex justify-content-between">
+ t-att-data-slug="slug(course_slide)"
+ t-att-data-done="course_slide.id in user_progress and user_progress[course_slide.id].completed"
+ t-att-data-id="course_slide.id"
+ t-att-data-name="course_slide.name"
+ t-attf-data-has_quiz="#{True if course_slide.question_ids else False}"
+ t-att-data-slide_type="course_slide.slide_type"
+ t-att-data-embed_code="course_slide.embed_code"
+ t-attf-class="o_wslides_fs_sidebar_slide_tab #{'active' if slide.id == course_slide.id else ''} d-flex justify-content-between">
<div>
<i t-if="course_slide.slide_type == 'document'" class="fa fa-file-pdf-o mr-2 text-muted"></i>
<i t-if="course_slide.slide_type == 'infographic'" class="fa fa-file-picture-o mr-2 text-muted"></i>
@@ -516,17 +518,17 @@
</li>
<t t-if="course_slide.link_ids" t-foreach="course_slide.link_ids" t-as="link">
<li>
- <span class="o_wslides_fullscreen_slide_tab_line">
- <span class="o_wslides_full_line"/>
+ <span>
+ <span class="o_wslides_fs_full_line"/>
</span>
- <a class="o_wslides_slide_link" t-att-href="link.link" target="new"><i class="fa fa-link"></i><span t-esc="link.name"/></a>
+ <a class="o_wslides_fs_slide_link" t-att-href="link.link" target="new"><i class="fa fa-link"></i><span t-esc="link.name"/></a>
</li>
</t>
- <li t-att-index="i" t-if="course_slide.question_ids and not course_slide.slide_type =='quiz'">
- <span class="o_wslides_fullscreen_slide_tab_line">
- <span class="o_wslides_full_line"/>
+ <li t-attf-index="#{i}" t-if="course_slide.question_ids and not course_slide.slide_type =='quiz'">
+ <span>
+ <span class="o_wslides_fs_full_line"/>
</span>
- <span class="o_wslides_slide_quiz" t-att-index="i"><i class="fa fa-flag-checkered"></i>Quiz: <span t-esc="course_slide.name"/></span>
+ <span class="o_wslides_fs_slide_quiz" t-attf-index="#{i}"><i class="fa fa-flag-checkered"></i>Quiz: <span t-esc="course_slide.name"/></span>
</li>
<t t-set="i" t-value="i+1"/>
</t>
@@ -536,7 +538,7 @@
</ul>
</div>
<div class="oe_js_course_slide" t-attf-user_id="#{user.id}" t-attf-course_name="#{slide.channel_id.name}" t-attf-course_id="#{slide.channel_id.id}" t-attf-course_slug="#{slug(slide.channel_id)}" t-attf-slide_id="#{slide.id}"/>
- <div class="o_wslides_fullscreen_player"/>
+ <div class="o_wslides_fs_player"/>
</div>
</div>
</t>
diff --git a/addons/website_slides_survey/static/src/scss/website_slides.scss b/addons/website_slides_survey/static/src/scss/website_slides.scss
index 3cef87764d8b..84a24ede56fa 100644
--- a/addons/website_slides_survey/static/src/scss/website_slides.scss
+++ b/addons/website_slides_survey/static/src/scss/website_slides.scss
@@ -1,4 +1,4 @@
-.o_wslides_fullscreen_certification {
+.o_wslides_fs_certification {
display: flex;
justify-content: center;
align-items: center;
diff --git a/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml b/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
index c56cf727dfc0..97f35fc3a32e 100644
--- a/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
+++ b/addons/website_slides_survey/static/src/xml/website_slides_fullscreen.xml
@@ -1,15 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates>
<t t-extend="website.slides.fullscreen">
- <t t-jquery=".o_wslides_fullscreen_content" t-operation="append">
- <div class="o_wslides_fullscreen_certification" t-if="slide.slide_type == 'certification'">
+ <t t-jquery=".o_wslides_fs_content" t-operation="append">
+ <div class="o_wslides_fs_certification" t-if="slide.slide_type == 'certification'">
<a class="btn btn-primary" t-att-href="'/slides/slide/' + slide.slug" target="new"><i class="fa fa-trophy"/> Pass Certification</a>
</div>
</t>
</t>
<t t-extend="website.course.fullscreen.title">
- <t t-jquery=".o_wslides_fullscreen_slide_title_span" t-operation="before">
+ <t t-jquery=".o_wslides_fs_slide_title_span" t-operation="before">
<i t-if="slide.slide_type == 'certification'" class="fa fa-trophy mr-2 text"></i>
</t>
</t>
--
GitLab