[FIX] website_slides: fix various issues to eLearning platform

Including

* change h4 to h1 on the slide page;
* add the rel='canonical' link header on the fullscreen view in order to
improve SEO and links;
* add space between quiz questions;
* remove social share statistics as they are broken and not really useful;
* moved tabs before the Quiz on the slide page;
* allow to modify slide in backend by removing some readonly attributes;

Linked to task ID 2010024
Related to PR #34176

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
Patrick Hoste
2019-06-18 11:25:03 +00:00
committed by Thibault Delavallée
parent 800a55c06f
commit f0ec2a8fc8
5 changed files with 39 additions and 96 deletions
+1 -1
View File
@@ -135,7 +135,7 @@ class Slide(models.Model):
('video', 'Video'),
('quiz', "Quiz")],
string='Type', required=True,
default='document', readonly=True,
default='document',
help="The document type will be set automatically based on the document URL and properties (e.g. height and width for presentation and document).")
index_content = fields.Text('Transcript')
datas = fields.Binary('Content', attachment=True)
@@ -50,48 +50,12 @@ sAnimations.registry.websiteSlidesShare = sAnimations.Class.extend({
* @param {Object} parent
*/
start: function (parent) {
var self = this;
var defs = [this._super.apply(this, arguments)];
defs.push(new ShareMail(this).attachTo($('.oe_slide_js_share_email')));
if ($('div#statistic').length) {
this.slideURL = $('div#statistic').attr('slide-url');
this.socialURLs = {
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=',
};
}
_.each(this.socialURLs, function (value, key) {
self._updateStatistics(key, self.slideURL);
});
return $.when.apply($, defs);
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @private
* @param {string} socialSite
* @param {string} slide_url
*/
_updateStatistics: function (socialSite, slideURL) {
var self = this;
$.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()));
},
});
},
//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------
@@ -101,14 +65,11 @@ sAnimations.registry.websiteSlidesShare = sAnimations.Class.extend({
* @param {Object} ev
*/
_onSlidesSocialShare: function (ev) {
var self = this;
ev.preventDefault();
var key = $(ev.currentTarget).attr('social-key');
var popUpURL = $(ev.currentTarget).attr('href');
var popUp = window.open(popUpURL, 'Share Dialog', 'width=626,height=436');
$(window).on('focus', function () {
if (popUp.closed) {
self._updateStatistics(key, self.slide_url);
$(window).off('focus');
}
});
@@ -71,13 +71,13 @@
</page>
<page string="Document">
<group>
<field name="slide_type" readonly="1"/>
<field name="slide_type"/>
<field name="url"
attrs="{'required': [('slide_type', 'in', ('video'))], 'readonly': [('slide_type', 'in', ('document', 'video'))], 'invisible': [('slide_type', 'not in', ('document', 'presentation', 'video'))]}" />
attrs="{'required': [('slide_type', 'in', ('video'))], 'invisible': [('slide_type', 'not in', ('document', 'presentation', 'video'))]}" />
<field name="document_id" readonly="1" attrs="{'invisible': [('document_id', '=', False)]}"/>
<field name="mime_type" readonly="1"
attrs="{'invisible': [('slide_type', 'not in', ('document', 'presentation', 'infographic', 'webpage'))]}"/>
<field name="datas" readonly="1"
<field name="datas"
attrs="{'invisible': [('slide_type', 'not in', ('document', 'presentation', 'infographic', 'webpage'))]}"/>
</group>
</page>
@@ -185,7 +185,7 @@
<div class="row align-items-center my-3">
<div class="col-12 col-md order-2 order-md-1 d-flex">
<div class="d-flex align-items-center">
<h1 class="h5 my-0">
<h1 class="h4 my-0">
<t t-call="website_slides.slide_icon">
<t t-set="icon_class">mr-1</t>
</t>
@@ -245,36 +245,7 @@
<div t-field="slide.html_content"/>
</div>
</div>
<div class="row" t-if="slide.question_ids">
<t t-call="website_slides.lesson_content_quiz"/>
</div>
<div class="row mt-3 mb-3">
<div class="col-12 col-md d-flex align-items-start mb-4 mb-md-0" t-if="len(slide.link_ids)">
<span t-if="slide.link_ids" class="text-muted font-weight-bold mr-3">External sources</span>
<div class="text-muted mr-auto border-left pl-3">
<t t-foreach="slide.link_ids" t-as="link">
<a t-att-href="link.link" t-esc="link.name"/><br />
</t>
</div>
</div>
<div t-if="slide.channel_id.allow_comment and slide.channel_id.channel_type == 'documentation'"
class="col-12 col-md d-flex align-items-start justify-content-md-end mb-2 mb-md-0">
<span class="text-muted font-weight-bold mr-3">Rating</span>
<div class="text-muted border-left pl-3">
<div class="o_wslides_js_slide_like mr-2">
<span t-att-class="('o_wslides_js_slide_like_up %s') % ('disabled' if not slide.channel_id.can_vote else '')" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id">
<i class="fa fa-thumbs-up fa-1x" role="img" aria-label="Likes" title="Likes"></i>
<span t-esc="slide.likes"/>
</span>
<span t-att-class="('o_wslides_js_slide_like_down ml-3 %s') % ('disabled' if not slide.channel_id.can_vote else '')" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id">
<i class="fa fa-thumbs-down fa-1x" role="img" aria-label="Dislikes" title="Dislikes"></i>
<span t-esc="slide.dislikes"/>
</span>
</div>
</div>
</div>
</div>
<div class="mb-5">
<div class="my-3">
<ul class="nav nav-tabs o_wslides_lesson_nav" role="tablist">
<li class="nav-item">
<a href="#about" aria-controls="about" class="nav-link active" role="tab" data-toggle="tab">
@@ -362,27 +333,6 @@
</tbody>
</table>
</div>
<div class="col-12 col-md">
<table class="table table-sm">
<tbody>
<tr>
<th colspan="2" class="border-top-0">Share count</th>
</tr>
<tr class="border-top-0">
<th class="border-top-0"><span id="facebook-badge">0</span></th>
<td class="border-top-0 w-100">Facebook</td>
</tr>
<tr>
<th><span id="twitter-badge">0</span></th>
<td>Twitter</td>
</tr>
<tr>
<th><span id="linkedin-badge"/></th>
<td>LinkedIn</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" t-if="slide.website_published" id="share">
@@ -409,6 +359,35 @@
</div>
</div>
</div>
<div class="row" t-if="slide.question_ids">
<t t-call="website_slides.lesson_content_quiz"/>
</div>
<div class="row mt-3 mb-3">
<div class="col-12 col-md d-flex align-items-start mb-4 mb-md-0" t-if="len(slide.link_ids)">
<span t-if="slide.link_ids" class="text-muted font-weight-bold mr-3">External sources</span>
<div class="text-muted mr-auto border-left pl-3">
<t t-foreach="slide.link_ids" t-as="link">
<a t-att-href="link.link" t-esc="link.name"/><br />
</t>
</div>
</div>
<div t-if="slide.channel_id.allow_comment and slide.channel_id.channel_type == 'documentation'"
class="col-12 col-md d-flex align-items-start justify-content-md-end mb-2 mb-md-0">
<span class="text-muted font-weight-bold mr-3">Rating</span>
<div class="text-muted border-left pl-3">
<div class="o_wslides_js_slide_like mr-2">
<span t-att-class="('o_wslides_js_slide_like_up %s') % ('disabled' if not slide.channel_id.can_vote else '')" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id">
<i class="fa fa-thumbs-up fa-1x" role="img" aria-label="Likes" title="Likes"></i>
<span t-esc="slide.likes"/>
</span>
<span t-att-class="('o_wslides_js_slide_like_down ml-3 %s') % ('disabled' if not slide.channel_id.can_vote else '')" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id">
<i class="fa fa-thumbs-down fa-1x" role="img" aria-label="Dislikes" title="Dislikes"></i>
<span t-esc="slide.dislikes"/>
</span>
</div>
</div>
</div>
</div>
</template>
<!-- Slide sub-tempalte: render a quiz serverside. Should be sync with JS qweb template "slide.slide.quiz" -->
@@ -427,7 +406,7 @@
t-att-data-has-next="1 if next_slide else 0"
t-att-data-next-slide-url="'/slides/slide/%s' % (slug(next_slide)) if next_slide else None">
<div t-foreach="slide_questions" t-as="question"
t-att-class="'o_wslides_js_lesson_quiz_question mt-3 mb-4 %s' % ('completed-disabled' if slide_completed else ('disabled' if not slide.channel_id.is_member else ''))" t-att-data-question-id="question['id']" t-att-data-title="question['question']">
t-att-class="'o_wslides_js_lesson_quiz_question my-5 %s' % ('completed-disabled' if slide_completed else ('disabled' if not slide.channel_id.is_member else ''))" t-att-data-question-id="question['id']" t-att-data-title="question['question']">
<div class="h4">
<small class="text-muted"><span t-esc="question_index+1"/>. </small> <span t-esc="question['question']"/>
</div>
@@ -3,6 +3,9 @@
<!-- Slide template for the fullscreen mode -->
<template id="slide_fullscreen" name="Fullscreen">
<t t-set="head">
<link rel="canonical" t-att-href="slide.website_url" />
</t>
<t t-call="website.layout">
<div class="o_wslides_fs_main d-flex flex-column font-weight-light">