Skip to content
Permalink
Browse files

[MERGE] website_slides: improve layout of courses main pages and appl…

…y various fixes

Purpose of this merge is to provide several fixes related to new elearning
application [1]. This is second batch of fixes [2]. Those are mainly fixes
and improvements for front-end templates: layouting, clean design. Some
other fixes are also included, notably links and search capabilities.

See sub commits for more details.

Thanks to @awa-odoo @jem-odoo @stefanorigano @qmo-odoo @dbeguin
for their work as most of code come from cherry-picks.

Merge linked to task ID 1941250.

[1] eLearning feature: see task ID 1902304
[2] First batch of fixes landed at 5cec06b

closes #31317
  • Loading branch information...
robodoo committed Feb 21, 2019
2 parents 5da4fa4 + 039df4a commit 1af67ffdfa370ade4ea12f227d7c4fae5bc02170
Showing with 508 additions and 298 deletions.
  1. +5 −5 addons/gamification/data/gamification_karma_rank_demo.xml
  2. BIN addons/gamification/static/img/rank_misc_hat.jpg
  3. BIN addons/gamification/static/img/rank_misc_hat.png
  4. BIN addons/gamification/static/img/rank_misc_mug.jpg
  5. BIN addons/gamification/static/img/rank_misc_mug.png
  6. BIN addons/gamification/static/img/rank_misc_unicorn.jpg
  7. BIN addons/gamification/static/img/rank_misc_unicorn.png
  8. BIN addons/gamification/static/img/rank_misc_wand.jpg
  9. BIN addons/gamification/static/img/rank_misc_wand.png
  10. +67 −0 addons/website_profile/static/src/scss/website_profile.scss
  11. +25 −15 addons/website_profile/views/website_profile.xml
  12. +8 −3 addons/website_rating/static/src/js/website_mail.js
  13. +1 −1 addons/website_rating/static/src/xml/website_mail.xml
  14. +1 −1 addons/website_rating/views/website_rating_templates.xml
  15. +1 −0 addons/website_slides/controllers/mail.py
  16. +59 −21 addons/website_slides/controllers/main.py
  17. +9 −10 addons/website_slides/data/slide_channel_demo.xml
  18. +78 −7 addons/website_slides/data/slide_slide_demo.xml
  19. +36 −0 addons/website_slides/data/slide_user_demo.xml
  20. +2 −2 addons/website_slides/models/slide_slide.py
  21. +1 −0 addons/website_slides/static/src/img/banner_default.svg
  22. +1 −0 addons/website_slides/static/src/img/banner_default_all.svg
  23. BIN addons/website_slides/static/src/img/channel_demo_tree_1.jpg
  24. BIN addons/website_slides/static/src/img/slide_demo_tree_img_3.jpg
  25. +2 −2 addons/website_slides/static/src/js/slides_join_channel.js
  26. +4 −1 addons/website_slides/static/src/js/slides_like.js
  27. +27 −36 addons/website_slides/static/src/scss/website_slides.scss
  28. +67 −58 addons/website_slides/views/website_slides_templates_course.xml
  29. +114 −136 addons/website_slides/views/website_slides_templates_homepage.xml
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo><data noupdate="1">
<odoo><data noupdate="0">
<!-- Set demo karma for test tour as demo user-->
<record id="base.user_demo" model="res.users">
<field name="karma">20</field>
@@ -15,7 +15,7 @@
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank and gain a very nice mug !</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_mug.jpg"/>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_mug.png"/>
</div></field>
<field name="karma_min">100</field>
<field name="image" type="base64" file="gamification/static/img/rank_student_badge.svg"/>
@@ -27,7 +27,7 @@
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank and gain a very magic wand !</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_wand.jpg"/>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_wand.png"/>
</div></field>
<field name="karma_min">500</field>
<field name="image" type="base64" file="gamification/static/img/rank_bachelor_badge.svg"/>
@@ -39,7 +39,7 @@
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank and gain a very nice hat !</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_hat.jpg"/>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_hat.png"/>
</div></field>
<field name="karma_min">2000</field>
<field name="image" type="base64" file="gamification/static/img/rank_master_badge.svg"/>
@@ -51,7 +51,7 @@
<field name="description_motivational" type="html">
<div class="media align-items-center">
<div class="media-body">Reach the next rank and gain a week-end with a unicorn !</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_unicorn.jpg"/>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_unicorn.png"/>
</div></field>
<field name="karma_min">10000</field>
<field name="image" type="base64" file="gamification/static/img/rank_doctor_badge.svg"/>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -120,6 +120,73 @@ $bronze: #eea91e;
}
}

/// Progress Circle
.o_wprofile_progress_circle {
position: relative;

$circle-size: 220px;
$circle-background: rgba(black, 0.1);
$circle-color: theme-color('primary');
$inset-size: $circle-size - 20;
$transition-length: 1s;

.o_progress_circle_container, .o_pc, .o_pc div {
@include size($circle-size);
}

.o_pc_overlay, .o_pc, .o_pc div {
border-radius: 50%;
}

.o_progress_circle_container {
position: relative;
margin: 0 auto;
background-color: inherit;
}

.o_pc_overlay {
$tmp-gap: ($circle-size - $inset-size)/2;
@include o-position-absolute($tmp-gap, $left: $tmp-gap);
@include size($inset-size);

background-color: inherit;
}

.o_pc {
background-color: $circle-background;

div {
position: absolute;
-webkit-backface-visibility: hidden;
transition: transform $transition-length;

&.o_pc_slice {
clip: rect(0px, $circle-size, $circle-size, $circle-size/2);

.o_pc_fill {
clip: rect(0px, $circle-size/2, $circle-size, 0px);
background-color: $circle-color;
}
}
}

$i: 0;
$increment: 180deg / 100;
@while $i <= 100 {
&[data-progress='#{$i}'] {
.o_pc_slice.full, .o_pc_fill {
transform: rotate($increment * $i);
}
.o_pc_fill.o_pc_bar {
transform: rotate($increment * $i * 2);
}
$i: $i + 1;
}
}
}
}


.o_wprofile_next_rank_card {
div {
text-align: center;
@@ -252,19 +252,29 @@
</template>

<template id="profile_next_rank_card" name="Profile Next Rank Card">
<div class="card-body o_wprofile_next_rank_card mt-2 pt-2">
<div><img class="o_wprofile_img_medium" t-attf-src="/web/image/gamification.karma.rank/#{user.next_rank_id.id}/image_medium"/></div>
<div><span class="text-center font-weight-bold">"<span t-field="user.next_rank_id.name"/>"</span></div>
<div><span class="text-center"><span class="font-weight-bold text-primary" t-field="user.karma"/>/<span class="font-weight-bold" t-field="user.next_rank_id.karma_min"/> xp</span></div>
<div class="progress o_wprofile_next_rank_progress">
<t t-if="user.next_rank_id.karma_min - user.rank_id.karma_min > 0">
<div class="progress-bar o_wprofile_next_rank_progress_bar" style="background-color: #00A09D !important"
t-att-style="'width: '+ str(100*(user.karma - user.rank_id.karma_min)/(user.next_rank_id.karma_min - user.rank_id.karma_min))+'%'"></div>
</t>
<t t-else="">
<div class="progress-bar o_wprofile_next_rank_progress_bar" style="background-color: #00A09D !important"
t-att-style="'width: 0%'"></div>
</t>
<div t-attf-class="o_wprofile_progress_circle #{bg_class if bg_class else ''}">
<div class="o_progress_circle_container">
<div class="o_pc" t-att-data-progress="int(100*(user.karma - user.rank_id.karma_min)/(user.next_rank_id.karma_min - user.rank_id.karma_min))" >
<div class="o_pc_circle">
<div class="o_pc_slice full">
<div class="o_pc_fill"/>
</div>
<div class="o_pc_slice">
<div class="o_pc_fill full"/>
<div class="o_pc_fill o_pc_bar"/>
</div>
</div>
</div>
<div class="o_pc_overlay d-flex flex-column align-items-center justify-content-center">
<img class="img-fluid"
t-attf-src="/web/image/gamification.karma.rank/#{user.next_rank_id.id}/image_medium"
t-att-alt="user.next_rank_id.name + ' badge'"
t-att-style="'max-width: ' + (img_max_width if img_max_width else '60%;')"/>
<h4 class="mt-2 mb-0">"<span t-field="user.next_rank_id.name"/>"</h4>
<small>
<span class="font-weight-bold text-primary" t-field="user.karma"/>/<span class="font-weight-bold" t-field="user.next_rank_id.karma_min"/> xp
</small>
</div>
</div>
</div>
</template>
@@ -305,10 +315,10 @@
Ranks &amp; Badges
</h1>
<p>
Do not stop learning with <t t-esc="user.company_id.name"/>. Collects points on the forum or the eLearning platform. Those points will make you reach new ranks.
Keep learning with <t t-esc="user.company_id.name"/>. Collect points on the forum or on the eLearning platform. Those points will make you reach new ranks.
</p>
<p>
<span class="font-weight-bold">How do I earn badges?</span> When you finish a course, reach milestones, you're awarded badges.
<span class="font-weight-bold">How do I earn badges?</span> When you finish a course or reach milestones, you're awarded badges.
</p>
<p>
<span class="font-weight-bold">How do I score more points?</span> You can score more points by answering quizzes at the end of each course content. Points can also be earned on the forum. Follow this link to the guidelines of the forum.
@@ -33,6 +33,11 @@ odoo.define('website_rating.thread', function(require) {
init: function(parent, options){
this._super.apply(this, arguments);

// apply ratio to default rating value
if (options.default_rating_value) {
options.default_rating_value = parseFloat(options.default_rating_value) / STAR_RATING_RATIO;
}

// default options
this.options = _.defaults(this.options, {
'default_message': false,
@@ -50,7 +55,7 @@ odoo.define('website_rating.thread', function(require) {
'5': _t("I love it"),
};
this.user_click = false; // user has click or not
this.set("star_value", this.options.rating_default_value);
this.set("star_value", this.options.default_rating_value);
this.on("change:star_value", this, this._onChangeStarValue);
},
start: function(){
@@ -59,7 +64,7 @@ odoo.define('website_rating.thread', function(require) {
// rating stars
self.$input = self.$('input[name="rating_value"]');
self.$star_list = self.$('.stars').find('i');
self.set("star_value", self.options.rating_default_value); // set the default value to trigger the display of star widget
self.set("star_value", self.options.default_rating_value); // set the default value to trigger the display of star widget
});
},

@@ -265,7 +270,7 @@ odoo.define('website_rating.thread', function(require) {
_onChangeRatingDomain: function(){
var domain = [];
if(this.get('rating_value')){
domain = [['rating_value', '=', this.get('rating_value')]];
domain = [['rating_value', '=', this.get('rating_value') * STAR_RATING_RATIO]];
}
this._changeCurrentPage(1, domain);
},
@@ -79,7 +79,7 @@
<div class="rate_text">
<span class="badge badge-info"></span>
</div>
<input type="hidden" readonly="readonly" name="rating_value" t-att-value="default_rating"/>
<input type="hidden" readonly="readonly" name="rating_value" t-att-value="default_rating || ''"/>
</div>
</t>

@@ -18,7 +18,7 @@
Rating widget static: show 5 stars (full or empty) regarding the given rating_avg and rating_count
-->
<template id="rating_widget_stars_static" name="Rating: static star widget">
<t t-set="rating_avg" t-value="round(rating_avg * 100) / 100"/>
<t t-set="rating_avg" t-value="round(rating_avg * 100) / 100 / 2"/>
<t t-set="val_decimal" t-value="round(rating_avg % 1, 1)"/>
<t t-set="val_integer" t-value="int(rating_avg)"/>
<t t-set="empty_star" t-value="5 - (val_integer+1) if val_decimal else 5 - val_integer"/>
@@ -33,6 +33,7 @@ def mail_update_message(self, res_id, message, message_id, **post):
('res_id', '=', res_id),
('website_published', '=', True),
('author_id', '=', request.env.user.partner_id.id),
('message_type', '=', 'comment'),
('id', '=', message_id)
] # restrict to the given message_id
message = request.env['mail.message'].search(domain, limit=1)
Oops, something went wrong.

0 comments on commit 1af67ff

Please sign in to comment.
You can’t perform that action at this time.