diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss index a20b1ea2eef..ad1771c5d62 100644 --- a/addons/website_profile/static/src/scss/website_profile.scss +++ b/addons/website_profile/static/src/scss/website_profile.scss @@ -1,5 +1,5 @@ $owprofile-color-bg: desaturate(map-get($grays, "200"), 80%); -$owprofile-tabs-height: 37px; +$owprofile-tabs-height: 36px; .o_wprofile_wrap { background-color: $owprofile-color-bg; @@ -119,52 +119,24 @@ $owprofile-tabs-height: 37px; // All Users Page .o_wprofile_all_users_nav { - margin: auto; - background: linear-gradient(90deg, #875A7B 20%, #62495B 80%) !important; - a { - color: #FFFFFF; - } - nav { - .breadcrumb-item::before { - font-weight: bold; - color: #FFFFFF; - opacity: 0.8; - } - .breadcrumb-item { - a { - font-weight: bold; - color: #FFFFFF; - opacity: 0.8; - transition: opacity linear .3s; - } - &.active { - a { - opacity: 1.0; - } - } - } - ol { - background-color: transparent; - } - } -} + border-width: 1px 0; -.o_wprofile_all_users_header { - @include media-breakpoint-up(sm) { - min-height: 200px; - margin-bottom: -60px; + &, .o_wprofile_course_nav_search { + background-color: rgba(white, 0.05); + border-color: rgba(white, 0.1); + border-style: solid; } - margin: auto; - background: linear-gradient(90deg, #875A7B 20%, #62495B 80%) !important; - > div:first-child { - margin: auto; - width: 100%; - max-width: 1140px; - padding: 32px 32px 0px 32px; + + .o_wprofile_course_nav_search { + border-width: 0 1px; + } + + .breadcrumb-item.active a, .breadcrumb-item a:hover { color: white; - top: 48px; - padding-top: 0px; - height: 250px; + } + + .breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before, .o_wprofile_course_nav_search input::placeholder { + color: rgba(white, 0.8); } } diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml index 540c7c608b5..1a457a19958 100644 --- a/addons/website_profile/views/website_profile.xml +++ b/addons/website_profile/views/website_profile.xml @@ -9,6 +9,74 @@ + +
@@ -169,13 +241,13 @@ @@ -500,24 +539,20 @@ diff --git a/addons/website_rating/static/src/xml/portal_chatter.xml b/addons/website_rating/static/src/xml/portal_chatter.xml index e331c0393cc..5d0395c099b 100644 --- a/addons/website_rating/static/src/xml/portal_chatter.xml +++ b/addons/website_rating/static/src/xml/portal_chatter.xml @@ -44,17 +44,17 @@ It can alse be used to modify a message --> -
-
+
+
- ( ratings) + ( ratings)
-
@@ -73,7 +73,7 @@ - +
diff --git a/addons/website_rating/views/website_rating_templates.xml b/addons/website_rating/views/website_rating_templates.xml index c5893a7944e..36bd88a1186 100644 --- a/addons/website_rating/views/website_rating_templates.xml +++ b/addons/website_rating/views/website_rating_templates.xml @@ -30,7 +30,7 @@ - + () diff --git a/addons/website_slides/controllers/main.py b/addons/website_slides/controllers/main.py index 197dc7b3cae..edb00cc0e7b 100644 --- a/addons/website_slides/controllers/main.py +++ b/addons/website_slides/controllers/main.py @@ -63,12 +63,12 @@ class WebsiteSlides(WebsiteProfile): slide.action_set_viewed(quiz_attempts_inc=quiz_attempts_inc) return True - def _set_completed_slide(self, slide, quiz_attempts_inc=False): + def _set_completed_slide(self, slide): # quiz use their specific mechanism to be marked as done if slide.slide_type == 'quiz' or slide.question_ids: raise werkzeug.exceptions.Forbidden(_("Slide with questions must be marked as done when submitting all good answers ")) if slide.website_published and slide.channel_id.is_member: - slide.action_set_completed(quiz_attempts_inc=quiz_attempts_inc) + slide.action_set_completed() return True def _get_slide_detail(self, slide): @@ -624,6 +624,7 @@ class WebsiteSlides(WebsiteProfile): return fetch_res slide = fetch_res['slide'] quiz_info = self._get_slide_quiz_info(slide) + slide_completed = slide.user_membership_id.sudo().completed return { 'questions': [{ 'id': question.id, @@ -631,7 +632,7 @@ class WebsiteSlides(WebsiteProfile): 'answers': [{ 'id': answer.id, 'text_value': answer.text_value, - 'is_correct': answer.is_correct, + 'is_correct': answer.is_correct if slide_completed else None } for answer in question.answer_ids], } for question in slide.question_ids], 'quizAttemptsCount': quiz_info['quiz_attempts_count'], @@ -666,7 +667,7 @@ class WebsiteSlides(WebsiteProfile): rank_progress = {} if not user_bad_answers: slide._action_set_quiz_done() - slide.action_set_completed(quiz_attempts_inc=True) + slide.action_set_completed() lower_bound = request.env.user.rank_id.karma_min upper_bound = request.env.user.next_rank_id.karma_min rank_progress = { diff --git a/addons/website_slides/models/slide_slide.py b/addons/website_slides/models/slide_slide.py index a733dda6ffb..c71d9acb441 100644 --- a/addons/website_slides/models/slide_slide.py +++ b/addons/website_slides/models/slide_slide.py @@ -451,34 +451,26 @@ class Slide(models.Model): 'quiz_attempts_count': 1 if quiz_attempts_inc else 0, 'vote': 0} for new_slide in new_slides]) - def action_set_completed(self, quiz_attempts_inc=False): + def action_set_completed(self): if not all(slide.channel_id.is_member for slide in self): raise UserError(_('You cannot mark a slide as completed if you are not among its members.')) - return self._action_set_completed(self.env.user.partner_id, quiz_attempts_inc=quiz_attempts_inc) + return self._action_set_completed(self.env.user.partner_id) - def _action_set_completed(self, target_partner, quiz_attempts_inc=False): + def _action_set_completed(self, target_partner): self_sudo = self.sudo() SlidePartnerSudo = self.env['slide.slide.partner'].sudo() existing_sudo = SlidePartnerSudo.search([ ('slide_id', 'in', self.ids), ('partner_id', '=', target_partner.id) ]) - if quiz_attempts_inc: - for existing_slide in existing_sudo: - existing_slide.write({ - 'completed': True, - 'quiz_attempts_count': existing_slide.quiz_attempts_count + 1 - }) - else: - existing_sudo.write({'completed': True}) + existing_sudo.write({'completed': True}) new_slides = self_sudo - existing_sudo.mapped('slide_id') SlidePartnerSudo.create([{ 'slide_id': new_slide.id, 'channel_id': new_slide.channel_id.id, 'partner_id': target_partner.id, - 'quiz_attempts_count': 1 if quiz_attempts_inc else 0, 'vote': 0, 'completed': True} for new_slide in new_slides]) diff --git a/addons/website_slides/static/src/img/quiz_modal_success.svg b/addons/website_slides/static/src/img/quiz_modal_success.svg new file mode 100644 index 00000000000..7bb62ea18a9 --- /dev/null +++ b/addons/website_slides/static/src/img/quiz_modal_success.svg @@ -0,0 +1 @@ + \ No newline at end of file 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 30d23f20f2f..d947d455d06 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 @@ -181,7 +181,7 @@ odoo.define('website_slides.fullscreen', function (require) { */ setSlideCompleted: function (slideId) { var $elem = this.$('.fa-circle-thin[data-slide-id="'+slideId+'"]'); - $elem.removeClass('fa-circle-thin').addClass('fa-check-circle text-success bg-white o_wslides_slide_completed rounded-circle'); + $elem.removeClass('fa-circle-thin').addClass('fa-check text-success o_wslides_slide_completed'); }, /** * Updates the progressbar whenever a lesson is completed @@ -236,7 +236,6 @@ odoo.define('website_slides.fullscreen', function (require) { */ _onClickTab: function (ev) { ev.stopPropagation(); - ev.preventDefault(); var $elem = $(ev.currentTarget); var isQuiz = $elem.data('isQuiz'); var slideID = parseInt($elem.data('id')); @@ -412,8 +411,10 @@ odoo.define('website_slides.fullscreen', function (require) { _pushUrlState: function (){ var urlParts = window.location.pathname.split('/'); urlParts[urlParts.length-1] = this.get('slide').slug; - var url = _.str.sprintf('%s?fullscreen=1', urlParts.join('/')); - history.pushState(null, '', url); + var url = urlParts.join('/'); + this.$('.o_wslides_fs_exit_fullscreen').attr('href', url); + var fullscreenUrl = _.str.sprintf('%s?fullscreen=1', url); + history.pushState(null, '', fullscreenUrl); }, /** * Render the current slide content using specific mecanism according to slide type: @@ -484,8 +485,7 @@ odoo.define('website_slides.fullscreen', function (require) { _onChangeSlide: function () { var self = this; var slide = this.get('slide'); - return this._fetchSlideContent().then(function() { // update title and render content - self.$('.o_wslides_fs_slide_title').html(QWeb.render('website.slides.fullscreen.title', {widget: self})); + return this._fetchSlideContent().then(function() { // render content return self._renderSlide(); }).then(function() { if (slide._autoSetDone && !session.is_website_user) { // no useless RPC call 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 9e2b9b7ece5..45ea9829cb0 100644 --- a/addons/website_slides/static/src/js/slides_course_quiz.js +++ b/addons/website_slides/static/src/js/slides_course_quiz.js @@ -117,7 +117,7 @@ odoo.define('website_slides.quiz', function (require) { _renderAnswers: function () { var self = this; this.$('input[type=radio]').each(function () { - $(this).prop('disabled', self.slide.readonly); + $(this).prop('disabled', self.slide.readonly || self.slide.completed); }); }, @@ -127,24 +127,26 @@ odoo.define('website_slides.quiz', function (require) { */ _renderAnswersHighlighting: function () { var self = this; - this.$('li.o_wslides_quiz_answer').each(function () { + this.$('a.o_wslides_quiz_answer').each(function () { var $answer = $(this); var answerId = $answer.data('answerId'); if (_.contains(self.quiz.goodAnswers, answerId)) { - $answer.removeClass('border-danger').addClass('border border-success'); + $answer.removeClass('list-group-item-danger').addClass('list-group-item-success'); $answer.find('i.fa').addClass('d-none'); $answer.find('i.fa-check-circle').removeClass('d-none'); } else if (_.contains(self.quiz.badAnswers, answerId)) { - $answer.removeClass('border-success').addClass('border border-danger'); + $answer.removeClass('list-group-item-success').addClass('list-group-item-danger'); $answer.find('i.fa').addClass('d-none'); $answer.find('i.fa-times-circle').removeClass('d-none'); $answer.find('label input').prop('checked', false); } else { - $answer.removeClass('border border-danger border-success'); - $answer.find('i.fa').addClass('d-none'); - $answer.find('i.fa-circle').removeClass('d-none'); + if (!self.slide.completed) { + $answer.removeClass('list-group-item-danger list-group-item-success'); + $answer.find('i.fa').addClass('d-none'); + $answer.find('i.fa-circle').removeClass('d-none'); + } } }); }, @@ -195,12 +197,13 @@ odoo.define('website_slides.quiz', function (require) { self._alertShow(data.error); } else { self.quiz = _.extend(self.quiz, data); - self._renderAnswersHighlighting(); - self._renderValidationInfo(); if (data.completed) { self._renderSuccessModal(data); + self.slide.completed = true; self.trigger_up('slide_completed', {slide: self.slide, completion: data.channel_completion}); } + self._renderAnswersHighlighting(); + self._renderValidationInfo(); } }); }, @@ -216,7 +219,7 @@ odoo.define('website_slides.quiz', function (require) { * @param OdooEvent ev */ _onAnswerClick: function (ev) { - if (! this.slide.readonly) { + if (! this.slide.readonly && ! this.slide.completed) { $(ev.currentTarget).find('input[type=radio]').prop('checked', true); } this._alertHide(); @@ -295,7 +298,7 @@ odoo.define('website_slides.quiz', function (require) { var self = this; var slide = ev.data.slide; var completion = ev.data.completion; - this.$('#o_wslides_lesson_aside_slide_check_' + slide.id).addClass('text-success fa-check-circle').removeClass('text-600 fa-circle-o'); + this.$('#o_wslides_lesson_aside_slide_check_' + slide.id).addClass('text-success fa-check').removeClass('text-600 fa-circle-o'); // need to use global selector as progress bar is ouside this animation widget scope $('.o_wslides_lesson_header .progress-bar').css('width', completion + "%"); $('.o_wslides_lesson_header .progress span').text(_.str.sprintf("%s %%", completion)); 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 93376a08d31..5a6b3242355 100644 --- a/addons/website_slides/static/src/js/slides_course_slides_list.js +++ b/addons/website_slides/static/src/js/slides_course_slides_list.js @@ -29,16 +29,18 @@ sAnimations.registry.websiteSlidesCourseSlidesList = sAnimations.Class.extend({ */ _bindSortable: function () { this.$('ul.o_wslides_js_slides_list_container').sortable({ - handle: '.fa-arrows', + handle: '.o_wslides_slides_list_drag', stop: this._reorderCategories.bind(this), - items: '.o_wslides_slide_list_category' + items: '.o_wslides_slide_list_category', + placeholder: 'o_wslides_slides_list_slide_hilight position-relative mb-1' }); this.$('.o_wslides_js_slides_list_container ul').sortable({ - handle: '.fa-arrows', + handle: '.o_wslides_slides_list_drag', connectWith: '.o_wslides_js_slides_list_container ul', stop: this._reorderSlides.bind(this), - items: '.o_wslides_slides_list_slide:not(.o_wslides_js_slides_list_empty)' + items: '.o_wslides_slides_list_slide:not(.o_wslides_js_slides_list_empty)', + placeholder: 'o_wslides_slides_list_slide_hilight position-relative mb-1' }); }, diff --git a/addons/website_slides/static/src/js/slides_embed.js b/addons/website_slides/static/src/js/slides_embed.js index b5ea4325375..5d86a257c7d 100644 --- a/addons/website_slides/static/src/js/slides_embed.js +++ b/addons/website_slides/static/src/js/slides_embed.js @@ -32,7 +32,6 @@ $(document).ready(function () { this.$('canvas').show(); this.$('#page_count').text(this.pdf_viewer.pdf_page_total); this.$('#PDFViewerLoader').hide(); - this.$('#PDFViewerLoader').toggleClass('d-flex'); if (this.pdf_viewer.pdf_page_total > 1) { this.$('.o_slide_navigation_buttons').removeClass('hide'); } @@ -44,16 +43,19 @@ $(document).ready(function () { on_rendered_page: function (pageNumber) { if (pageNumber) { this.$('#page_number').val(pageNumber); + this.navUpdate(pageNumber); } }, // page switching render_page: function (pageNumber) { this.pdf_viewer.renderPage(pageNumber).then(this.on_rendered_page.bind(this)); + this.navUpdate(pageNumber); }, change_page: function () { var pageAsked = parseInt(this.$('#page_number').val(), 10); if (1 <= pageAsked && pageAsked <= this.pdf_viewer.pdf_page_total) { this.pdf_viewer.changePage(pageAsked).then(this.on_rendered_page.bind(this)); + this.navUpdate(pageAsked); } else { // if page number out of range, reset the page_counter to the actual page this.$('#page_number').val(this.pdf_viewer.pdf_page_current); @@ -77,23 +79,28 @@ $(document).ready(function () { if (pageNum) { self.on_rendered_page(pageNum); } - self.$("#slide_suggest").hide(); + self.$("#slide_suggest").addClass('d-none'); }); }, first: function () { var self = this; this.pdf_viewer.firstPage().then(function (pageNum) { self.on_rendered_page(pageNum); - self.$("#slide_suggest").hide(); + self.$("#slide_suggest").addClass('d-none'); }); }, last: function () { var self = this; this.pdf_viewer.lastPage().then(function (pageNum) { self.on_rendered_page(pageNum); - self.$("#slide_suggest").hide(); + self.$("#slide_suggest").addClass('d-none'); }); }, + navUpdate: function (pageNum) { + this.$('#first').toggleClass('disabled', pageNum < 3 ); + this.$('#previous').toggleClass('disabled', pageNum < 2 ); + this.$('#next, #last').removeClass('disabled'); + }, // full screen mode fullscreen: function () { this.pdf_viewer.toggleFullScreen(); @@ -105,7 +112,8 @@ $(document).ready(function () { }, // display suggestion displayed after last slide display_suggested_slides: function () { - this.$("#slide_suggest").show(); + this.$("#slide_suggest").removeClass('d-none'); + this.$('#next, #last').addClass('disabled'); }, }; diff --git a/addons/website_slides/static/src/js/slides_share.js b/addons/website_slides/static/src/js/slides_share.js index 4ac2ee81809..423b84bda1b 100644 --- a/addons/website_slides/static/src/js/slides_share.js +++ b/addons/website_slides/static/src/js/slides_share.js @@ -60,7 +60,6 @@ sAnimations.registry.websiteSlidesShare = sAnimations.Class.extend({ linkedin: 'https://www.linkedin.com/countserv/count/share?url=', twitter: 'https://cdn.api.twitter.com/1/urls/count.json?url=', facebook: 'https://graph.facebook.com/?id=', - gplus: 'https://clients6.google.com/rpc', }; } @@ -82,42 +81,15 @@ sAnimations.registry.websiteSlidesShare = sAnimations.Class.extend({ */ _updateStatistics: function (socialSite, slideURL) { var self = this; - if (socialSite === 'gplus') { - $.ajax({ - url: self.socialURLs['gplus'], - type: 'POST', - dataType: 'json', - contentType: 'application/json', - data: JSON.stringify([{ - method: 'pos.plusones.get', - id: 'p', - params: { - nolog: true, - id: slideURL, - source: 'widget', - userId: '@viewer', - groupId: '@self' - }, - // TDE NOTE: should there be a key here ? - jsonrpc: '2.0', - apiVersion: 'v1' - }]), - success: function (data) { - $('#google-badge').text(data[0].result.metadata.globalCounts.count || 0); - $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#google-badge').text())); - }, - }); - } else { - $.ajax({ - url: self.socialURLs[socialSite] + slideURL, - dataType: 'jsonp', - success: function (data) { - var shareCount = (socialSite === 'facebook' ? data.shares : data.count) || 0; - $('#' + socialSite + '-badge').text(shareCount); - $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#' + socialSite + '-badge').text())); - }, - }); - } + $.ajax({ + url: self.socialURLs[socialSite] + slideURL, + dataType: 'jsonp', + success: function (data) { + var shareCount = (socialSite === 'facebook' ? data.shares : data.count) || 0; + $('#' + socialSite + '-badge').text(shareCount); + $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#' + socialSite + '-badge').text())); + }, + }); }, //-------------------------------------------------------------------------- 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 d4a5cbd7105..301887e87be 100644 --- a/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss +++ b/addons/website_slides/static/src/scss/slides_slide_fullscreen.scss @@ -4,10 +4,10 @@ $o-wslides-tabs-height: 36px; .o_wslides_fs_main { @include o-position-absolute(0,0,0,0); z-index: 2000; + background-image: linear-gradient(120deg, $o-wslides-color-dark2, $o-wslides-color-dark3); .o_wslides_slide_fs_header { - background-image: linear-gradient(120deg, $o-wslides-color-dark1, $o-wslides-color-dark2); - padding-bottom: 3px; + background-image: linear-gradient(-6deg, $o-wslides-color-dark1, $o-wslides-color-dark2); height: 50px; > div > a { @@ -24,29 +24,22 @@ $o-wslides-tabs-height: 36px; } &.active{ - background-color: transparent; + background-color: $o-wslides-color-dark1; color: #fff; } } } - .o_wslides_fs_container { - background-color: $o-wslides-color-dark2; - } - - .o_wslides_fs_content { + .o_wslides_fs_player, .o_wslides_fs_sidebar, .o_wslides_fs_sidebar_content { transition: all .2s ease-in; } .o_wslides_fs_sidebar { - transition: all .2s ease-in; background-image: linear-gradient(160deg, $o-wslides-color-dark1, $o-wslides-color-dark2); - box-shadow: 5px 0 15px rgba(black, 0.2); position: relative; .o_wslides_fs_sidebar_content { min-width: $o-wslides-fs-side-width; - transition: all .2s ease-in; } .o_wslides_fs_toggle_sidebar { @@ -57,6 +50,7 @@ $o-wslides-tabs-height: 36px; @include media-breakpoint-down (md) { @include o-position-absolute(0, auto, 0, 0); + box-shadow: 5px 0 15px rgba(black, 0.2); &.o_wslides_fs_sidebar_hidden { display: none; @@ -82,6 +76,7 @@ $o-wslides-tabs-height: 36px; .o_wslides_fs_sidebar_section { background-color: rgba($o-wslides-color-dark3, 0.3); + margin-bottom: 1px; } .o_wslides_fs_sidebar_section_slides li { @@ -97,48 +92,9 @@ $o-wslides-tabs-height: 36px; } } - i.o_wslides_slide_completed{ - @include size(13px); - box-shadow: inset 0 0 0 1px theme-color('success'); - } - .o_wslides_fs_slide_name { line-height: 1; } } } - - // quizz - .o_wslides_fs_quiz_container { - background-color: $gray-200; - height: 100%; - overflow: scroll; - overflow-x: hidden; - width: 100%; - - .o_wslides_js_lesson_quiz_question { - li { - font-size: 1.2rem; - } - - .o_wslides_quiz_answer { - - &:hover { - cursor: pointer; - } - - label { - font-size: 1.4rem; - - i.fa-circle { - } - - input:checked + i.fa-circle { - color: $primary !important; - overflow: hidden; - } - } - } - } - } } diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss index 9cbdef9fc87..c4797b85995 100644 --- a/addons/website_slides/static/src/scss/website_slides.scss +++ b/addons/website_slides/static/src/scss/website_slides.scss @@ -1,10 +1,5 @@ -// FIXME may be useless (check initial code here: https://github.com/odoo/odoo/blob/51be5bbfb38db784cb3406877cc0e8806b1bf55a/addons/website_slides/static/src/less/website_slides.less#L1) -$nav-tabs-border-color: #dddddd !default; -$body-bg: #FFFFFF !default; $MAX-Z-INDEX : 2147483647 !default; -$gray-50: #f4f4f4 !default; -$o-enterprise-radient-color: #62495B !default; - +$o-wslides-tabs-height: 36px; $o-wslides-color-bg: desaturate(map-get($grays, "200"), 80%); $o-wslides-color-dark1: #47525f; $o-wslides-color-dark2: #1f262d; @@ -12,20 +7,31 @@ $o-wslides-color-dark3: #101216; $o-wslides-fs-side-width: 300px; +// Common to new slides pages +// ************************************************** .o_wslides_gradient { background-image: linear-gradient(120deg, #875A7B, darken(#875A7B, 10%)); } -// Common to new slides pages -// ************************************************** +.o_wslides_course_pict { + @include size(100%, 30%); + padding-top: 30%; + background-size: cover; + background-position: center; + + @include media-breakpoint-up(md) { + @include size(100%); + padding-top: 100%; + } +} .o_wslides_wrap { - background-color: desaturate(map-get($grays, "200"), 80%); + background-color: $o-wslides-color-bg; .o_wslides_home_nav { top: -40px; - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { font-size: 1rem; .o_wslides_nav_navbar_right { @@ -50,33 +56,22 @@ $o-wslides-fs-side-width: 300px; } .o_wslides_js_lesson_quiz_question { - li { - font-size: 1.2rem; + .list-group-item { + font-size: 1rem; + + input:checked + i.fa-circle { + color: $primary !important; + } } - .o_wslides_quiz_answer { - - &:hover { - cursor: pointer; - } - - label { - font-size: 1.4rem; - - i.fa-circle { - } - - input:checked + i.fa-circle { - color: $primary !important; - overflow: hidden; - } - } + &.disabled { + opacity: 0.5; + cursor: not-allowed; } } // tools // **************************************** - .text_small_caps { font-variant: small-caps; } @@ -85,55 +80,29 @@ $o-wslides-fs-side-width: 300px; opacity: 0.5; } - .bg-brand { - background-color: $o-enterprise-color; - } + // 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; - .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; - } + @each $limit in $truncate-limits { + .o_wslides_desc_truncate_#{$limit} { + $line-height: 1.3; + max-height: $limit * $line-height * 1em; + overflow: hidden; + text-overflow: ellipsis; + white-space: normal; + line-height: $line-height; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: $limit; } } } - // New home page // ************************************************** - .o_wslides_home_main { - .o_wprofile_next_rank_card { - background-color: transparent !important; - } - .o_wslides_home_aside_loggedin { @include media-breakpoint-up(lg) { background: none; @@ -145,177 +114,188 @@ $o-wslides-fs-side-width: 300px; // New course page // ************************************************** -.o_wslides_course_nav { - margin: auto; - background: linear-gradient(150deg, #875A7B 20%, #62495B 80%) !important; - opacity: 0.95; +@mixin o-wslides-tabs($tab-active-color: $o-wslides-color-bg) { + margin-top: $o-wslides-tabs-height * -1; + border-bottom: 0; - a { - color: #FFFFFF; - } + .nav-link { + border-radius: 0; + border-width: 0 1px; + @include o-hover-text-color(rgba(white, 0.8), white); - small a { - color: #000000; - } - - nav { - .breadcrumb-item::before { - font-weight: bold; - color: #FFFFFF; - opacity: 0.8; + &, &:hover { + border-color: #875A7B; + background: transparent; } - .breadcrumb-item { - a { - font-weight: bold; - color: #FFFFFF; - opacity: 0.8; - transition: opacity linear .3s; - } - &.active { - a { - opacity: 1.0; - } - } - } - ol { - background-color: transparent; + + &.active { + color: $headings-color; + background: $tab-active-color; + border-color: $tab-active-color; } } } -.o_wslides_course_header { - margin: auto; - background: linear-gradient(150deg, #875A7B 20%, #62495B 80%) !important; - border-bottom: 48px solid #66445e; - - .o_wslides_course_header_container { - position: relative; - top: 48px; - padding-top: 0px; - - .o_wslides_course_header_aside { - max-width: 286px; - img { - width: 100%; - max-width: 256px; - } - } - - .o_wslides_course_header_content { - font-size: 16px; - color: #FFFFFF; - - .o_wslides_course_header_nav { - ul.o_wslides_nav_tabs { - border-bottom: 0px; - li.nav-item { - margin-bottom: 0px; - } - a.nav-link { - color: white; - border-radius: 0px; - height: 48px; - font-weight: bold; - padding-top: 12px; - text-align: center; - width: 120px; - &:hover { - border: 0px; - border-radius: 0px; - background-color: #875A7B; - } - &.active { - color: #212529; - background-color: #f2f2f2; - border: 0px; - } - } - } - } - } +@mixin o-wslides-header-bar() { + &:before { + content: ""; + @include o-position-absolute(auto, 0, 0, 0); + height: $o-wslides-tabs-height; + background: rgba(black, 0.2); } } +.o_wslides_course_nav { + @include o-position-absolute(0,0,auto,0); + border-width: 1px 0; + + &, .o_wslides_course_nav_search { + background-color: rgba(white, 0.05); + border-color: rgba(white, 0.1); + border-style: solid; + } + + .o_wslides_course_nav_search { + border-width: 0 1px; + } + + .breadcrumb-item.active a, .breadcrumb-item a:hover { + color: white; + } + + .breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before, .o_wslides_course_nav_search input::placeholder { + color: rgba(white, 0.8); + } +} + + +.o_wslides_course_header { + @include media-breakpoint-up(md) { + @include o-wslides-header-bar(); + } +} + +.o_wslides_course_doc_header { + @include o-wslides-header-bar(); +} + .o_wslides_course_main { - .o_wslides_course_content_aside { - max-width: 286px; - .bg-white { - max-width: 256px; - background-color: white; - padding-bottom: 8px; - > div.row { - padding-left: 15px; - padding-right: 15px; - } + .o_wslides_nav_tabs { + @include media-breakpoint-up(md) { + @include o-wslides-tabs(); + } + + @include media-breakpoint-only(xs) { + overflow-x: auto; + overflow-y: hidden; + line-height: 1.51; + + li { + white-space: nowrap; + } } } -} -// Slides list reordering widget -.o_wslides_slides_list { - .o_wslides_slides_list_slide { - &.o_not_editable { - height: 0px; + .o_wslides_doc_nav_tabs { + @include o-wslides-tabs($gray-100); + } + + .o_wslides_tabs_content { + @include media-breakpoint-down(sm) { + background-color: $nav-tabs-link-active-bg; + padding:0 ($grid-gutter-width * 0.5); } - &:nth-child(odd) { - background-color: $gray-50; + @include media-breakpoint-only(xs) { + margin: 0 ($grid-gutter-width * -0.5); + } + } + + // Slides list reordering widget + .o_wslides_slides_list { + .o_wslides_slide_list_category_header { + z-index: 1; + + & + ul { + z-index: 0; + } } - &:nth-child(even) { - background-color: $gray-100; + .o_text_link { + text-decoration: none!important; + + > * { + text-decoration: none!important; + color: map-get($grays, "600"); + } + + &:hover > * { + color: inherit; + } } - .o_wslides_slides_list_slide_controls { - i:hover { - color: $primary !important; - cursor: pointer; + .o_wslides_slides_list_drag { + cursor: pointer; + + i { opacity: 0.4; } + &:hover i { opacity: 1; } + } + + .o_wslides_slide_list_category_header, .o_wslides_slides_list_slide { + border: 1px solid $border-color; + } + + .o_wslides_slides_list_slide_hilight { + background-color: #1252F3; + height: 1px; + z-index: 3; + + &:before, &:after { + content: ""; + @include size(6px); + display: block; + border-radius: 100%; + background-color: inherit; + @include o-position-absolute(-2px, -2px); + } + + &:after { + right: auto; + left: -2px; } } } } -// New lesson page +// New lesson page (not fullscreens) // ************************************************** - -.o_wslides_lesson_header { - background: linear-gradient(150deg, $o-enterprise-color 20%, $o-enterprise-radient-color 80%); - margin: auto; - - .o_wslides_lesson_header_container { - a:hover { - text-decoration: none; - } - - .fa-trophy { - font-size: 2em; - } - } -} - .o_wslides_lesson_main { .o_wslides_lesson_aside { - .o_wslides_lesson_aside_list, - .o_wslides_lesson_aside_doc { - border: 0; - border-bottom: 3px solid $border-color; - position: relative; - top: -50px; + .o_wslides_lesson_aside_collapse.collapsed { + transform: rotate(90deg); + } - .nav-tabs .nav-link { - border-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; + .o_wslides_lesson_aside_list { + @include media-breakpoint-up (lg) { + top: -58px; } } .o_wslides_lesson_aside_list { .o_wslides_lesson_aside_list_link { - text-decoration: none; + @include o-hover-text-color($gray-600, $headings-color ); + + .o_wslides_lesson_link_name { + line-height: 1.2; + } &.active { - background-color: $gray-200; + box-shadow:inset 2px 0 theme-color('primary'); + } + + &:hover .o_wslides_lesson_link_name { + color: $headings-color; } } } @@ -338,6 +318,29 @@ $o-wslides-fs-side-width: 300px; } } + +// Modals +// ************************************************** + +.o_wslides_quiz_modal { + @include media-breakpoint-up (sm) { + .modal-body { + overflow: visible!important; + } + + .modal-content { + height: 461px; + + .o_wslides_quiz_modal_hero { + margin-left: -30px; + position: absolute; + margin-top: -45px; + } + } + } +} + + // Embed PDFViewer // ************************************************** #PDFViewer.o_wslides_fs_pdf_viewer { @@ -361,28 +364,10 @@ $o-wslides-fs-side-width: 300px; } } -// Slide display -div.embed-responsive { - iframe.o_wslides_iframe_viewer { - position: relative; - } -} - -// PDF Viewer Share bar .oe_slides_share_bar{ padding: 10px 0; } -.oe_slides_panel_footer #page_number { - width: 45px; -} - .oe_show_footer { z-index: $MAX-Z-INDEX; // Looks terrible but seems necessary due to fullscreen & canvas in PDFSlidesViewer } - - -// Upload Modal -.o_wslides_select_type { - cursor: pointer; -} diff --git a/addons/website_slides/static/src/xml/slide_quiz.xml b/addons/website_slides/static/src/xml/slide_quiz.xml index c8b4bc66186..8b7e871151b 100644 --- a/addons/website_slides/static/src/xml/slide_quiz.xml +++ b/addons/website_slides/static/src/xml/slide_quiz.xml @@ -1,83 +1,106 @@ -
-
+
+
+
+
+
+
-
+ t-attf-class="o_wslides_js_lesson_quiz_question my-3 #{widget.slide.completed ? 'disabled' : ''}" + t-att-data-question-id="question.id" t-att-data-title="question.question"> +
.
-
    +
    -
  • + t-attf-class="o_wslides_quiz_answer list-group-item d-flex align-items-center #{widget.slide.completed ? 'disabled bg-transparent' : 'list-group-item-action' } #{widget.slide.completed && answer.is_correct ? 'list-group-item-success' : '' }"> -
    • +     -
+
-