[FIX] website_slides: fix various fullscreen layout issues
Improve overall widget layout, perform some small tweaks. Also remove top title as it is not wanted. Commit linked to task ID 1941250 and PR #31977
This commit is contained in:
sri-odoo
committed by
Thibault Delavallée
Thibault Delavallée
parent
7d0d49b4e3
commit
b2e555eb0b
@@ -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
|
||||
@@ -484,8 +484,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
|
||||
|
||||
@@ -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');
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -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,11 +92,6 @@ $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;
|
||||
}
|
||||
|
||||
@@ -130,10 +130,6 @@ $o-wslides-fs-side-width: 300px;
|
||||
// **************************************************
|
||||
|
||||
.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;
|
||||
@@ -361,22 +357,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
|
||||
}
|
||||
|
||||
@@ -1,28 +1,14 @@
|
||||
<templates id="template" xml:space="preserve">
|
||||
|
||||
<t t-name="website.slides.fullscreen.title">
|
||||
<t t-if="!widget.get('slide').isQuiz">
|
||||
<i t-if="widget.get('slide').type == 'document'" class="fa fa-file-pdf-o mr-2"></i>
|
||||
<i t-if="widget.get('slide').type == 'infographic'" class="fa fa-file-picture-o mr-2"></i>
|
||||
<i t-if="widget.get('slide').type == 'video'" class="fa fa-play-circle mr-2"></i>
|
||||
<i t-if="widget.get('slide').type == 'webpage'" class="fa fa-file-text mr-2"></i>
|
||||
<i t-if="widget.get('slide').type == 'quiz'" class="fa fa-question-circle mr-2 text"></i>
|
||||
<span class="o_wslides_fs_slide_title_span" t-esc="widget.get('slide').name"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<span><i class="fa fa-flag-checkered"></i>Quiz: <span t-esc="widget.get('slide').name"/></span>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<t t-name="website.slides.fullscreen.content">
|
||||
<t t-if="_.contains(['document', 'presentation'], widget.get('slide').type)">
|
||||
<div class="embed-responsive embed-responsive-4by3 embed-responsive-item h-100">
|
||||
<iframe t-att-src="widget.get('slide').embedUrl" class="o_wslides_iframe_viewer h-100 w-100" allowFullScreen="true" frameborder="0"></iframe>
|
||||
<div class="embed-responsive h-100">
|
||||
<iframe t-att-src="widget.get('slide').embedUrl" class="o_wslides_iframe_viewer" allowFullScreen="true" frameborder="0"/>
|
||||
</div>
|
||||
</t>
|
||||
<t t-if="widget.get('slide').type === 'infographic'">
|
||||
<div class="w-100 h-100 text-center">
|
||||
<img t-att-src="'/web/image/slide.slide/'+ widget.get('slide').id +'/image'" class="img-fluid" style="height: 100%" alt="Slide image"/>
|
||||
<div class="o_wslides_fs_player w-100 h-100 overflow-auto d-flex align-items-start justify-content-center">
|
||||
<img t-att-src="'/web/image/slide.slide/'+ widget.get('slide').id +'/image'" class="img-fluid position-relative m-auto" alt="Slide image"/>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<t t-if="slide.slide_type in ('presentation', 'document')">
|
||||
<div id="PDFViewerLoader" class="oe_slides_loader d-flex justify-content-center align-items-center position-absolute h-100 w-100">
|
||||
<div id="PDFViewerLoader" class="oe_slides_loader position-absolute mt-3 mr-3" style="right:0">
|
||||
<div class="toast show">
|
||||
<div class="toast-header">
|
||||
<i class="fa fa-circle-o-notch fa-spin mr-2"/><b>Loading...</b>
|
||||
|
||||
@@ -8,20 +8,14 @@
|
||||
|
||||
<div class="o_wslides_slide_fs_header d-flex flex-shrink-0 text-white">
|
||||
<div class="d-flex">
|
||||
<a class="o_wslides_fs_toggle_sidebar d-flex align-items-center px-3" href="#" title="Lessons">
|
||||
<a class="o_wslides_fs_toggle_sidebar d-flex align-items-center px-3 active" href="#" title="Lessons">
|
||||
<i class="fa fa-bars"/><span class="d-none d-md-inline-block ml-1">Lessons</span>
|
||||
</a>
|
||||
<a class="o_wslides_fs_review d-flex align-items-center px-3" t-att-href="slide.channel_id.website_url" title="Reviews" t-if="slide.channel_id.allow_comment">
|
||||
<i class="fa fa-pencil"/><span class="d-none d-md-inline-block ml-1">Write a review</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="o_wslides_fs_slide_title flex-grow-1 d-flex align-items-center px-2 px-md-3">
|
||||
<t t-call="website_slides.slide_icon">
|
||||
<t t-set="icon_class" t-value="'mr-2 text'"/>
|
||||
</t>
|
||||
<span class="o_wslides_fs_slide_title_span" t-esc="slide.name"/>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="d-flex ml-auto">
|
||||
<a class="d-flex align-items-center px-3" t-attf-href="/slides/#{slug(slide.channel_id)}">
|
||||
<i class="fa fa-sign-out d-md-none"/><span class="d-none d-md-inline-block ml-1">Back to course</span>
|
||||
</a>
|
||||
@@ -70,19 +64,14 @@
|
||||
|
||||
|
||||
<template id="slide_fullscreen_sidebar_category" name="Slides category template for fullscreen view side bar">
|
||||
<li class="o_wslides_fs_sidebar_section py-2 px-3 mb-2">
|
||||
<a class="text-uppercase text-500 py-1 small d-block" t-attf-id="category-collapse-#{category.id if category else 0}" data-toggle="collapse" role="button" aria-expanded="true" t-att-href="('#collapse-%s') % (category.id if category else 0)" t-attf-aria-controls="collapse-#{category.id if category else 0}">
|
||||
<t t-if="category">
|
||||
<b t-field="category.name"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<b >Uncategorized</b>
|
||||
</t>
|
||||
<li class="o_wslides_fs_sidebar_section py-2 px-3">
|
||||
<a t-if="category" class="text-uppercase text-500 py-1 small d-block" t-attf-id="category-collapse-#{category.id if category else 0}" data-toggle="collapse" role="button" aria-expanded="true" t-att-href="('#collapse-%s') % (category.id if category else 0)" t-attf-aria-controls="collapse-#{category.id if category else 0}">
|
||||
<b t-field="category.name"/>
|
||||
</a>
|
||||
<ul class="o_wslides_fs_sidebar_section_slides collapse show position-relative px-0 pb-1 my-0 mx-n3" t-att-id="('collapse-%s') % (category.id if category else 0)">
|
||||
<t t-foreach="slides" t-as="slide">
|
||||
<t t-set="slide_completed" t-value="channel_progress[slide.id].get('completed')"/>
|
||||
<li t-att-class="'o_wslides_fs_sidebar_list_item d-flex align-items-top py-2 %s text-truncate' % ('active' if slide.id == current_slide.id else '')"
|
||||
<li t-att-class="'o_wslides_fs_sidebar_list_item d-flex align-items-top py-1 %s' % ('active' if slide.id == current_slide.id else '')"
|
||||
t-att-data-id="slide.id"
|
||||
t-att-data-name="slide.name"
|
||||
t-att-data-type="slide.slide_type"
|
||||
@@ -93,17 +82,13 @@
|
||||
t-att-data-embed-code="slide.embed_code if slide.slide_type in ['video', 'document', 'presentation', 'infographic'] else False"
|
||||
t-att-data-readonly="not channel_progress[slide.id]"
|
||||
>
|
||||
<span class="ml-3 pt-1">
|
||||
<i t-if="not slide_completed" class="fa fa-circle-thin overflow-hidden d-flex align-items-center justify-content-center" t-att-data-slide-id="slide.id"/>
|
||||
<i t-if="slide_completed" class="o_wslides_slide_completed fa fa-check-circle rounded-circle text-success bg-white border border-success overflow-hidden d-flex align-items-center justify-content-center" t-att-data-slide-id="slide.id"/>
|
||||
<span class="ml-3">
|
||||
<i t-if="slide_completed" class="o_wslides_slide_completed fa fa-check fa-fw text-success" t-att-data-slide-id="slide.id"/>
|
||||
<i t-else="" class="fa fa-circle-thin fa-fw" t-att-data-slide-id="slide.id"/>
|
||||
</span>
|
||||
<div class="ml-2">
|
||||
<a class="d-block pt-1" href="#">
|
||||
<div class="d-flex ">
|
||||
<t t-call="website_slides.slide_icon">
|
||||
<t t-set="icon_class" t-value="'mr-1 fw-fw'"/>
|
||||
<t t-set="slide" t-value="slide"/>
|
||||
</t>
|
||||
<div class="o_wslides_fs_slide_name" t-esc="slide.name"/>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user