pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website_[profile,slides]: improve karma rank layout

Browse Source 
This commit improves the karma rank layout displayed on the courses home page
and on the user profile.

Task #2003222
This commit is contained in:
Aurélien Warnon
2019-06-13 06:39:32 +00:00
parent 3a487bdde3
commit 489c8623e2
3 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/gamification/data/gamification_karma_rank_demo.xml
+1 -1
View File
@@ -39,7 +39,7 @@
<record id="rank_doctor" model="gamification.karma.rank">
<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>
<div class="media-body">You have reached the last rank. Congratulations!</div>
<img class="ml-3 img img-fluid" style="max-height: 72px;" src="/gamification/static/img/rank_misc_unicorn.png"/>
</div>
</field>
addons/website_profile/views/website_profile.xml
+23 -10
View File
@@ -258,8 +258,8 @@
<button class="btn btn-sm d-md-none bg-white border" type="button" data-toggle="collapse" data-target="#o_wprofile_sidebar_collapse" aria-expanded="false" aria-controls="o_wprofile_sidebar_collapse">More info</button>
</div>
<div class="collapse d-md-block" id="o_wprofile_sidebar_collapse">
<div t-if="user.next_rank_id" class="mb-3">
<small class="font-weight-bold mt-1">Next rank:</small>
<div t-if="user.rank_id" class="mb-3">
<small t-if="user.next_rank_id" class="font-weight-bold mt-1">Next rank:</small>
<t t-call="website_profile.profile_next_rank_card">
<t t-set="img_max_width">40%</t>
</t>
@@ -313,13 +313,18 @@
</template>
<template id="profile_next_rank_card" name="Profile Next Rank Card">
<div t-if="user.next_rank_id" class="o_wprofile_progress_circle">
<div class="o_wprofile_progress_circle">
<svg viewBox="0 0 36 36" class="o_pc_circular_chart">
<t t-if="(user.next_rank_id.karma_min - user.rank_id.karma_min) > 0">
<t t-set="user_points" t-value="int(100*(user.karma - user.rank_id.karma_min)/(user.next_rank_id.karma_min - user.rank_id.karma_min))"/>
<t t-if="user.next_rank_id">
<t t-if="(user.next_rank_id.karma_min - user.rank_id.karma_min) > 0">
<t t-set="user_points" t-value="int(100*(user.karma - user.rank_id.karma_min)/(user.next_rank_id.karma_min - user.rank_id.karma_min))"/>
</t>
<t t-else="">
<t t-set="user_points" t-value="0"/>
</t>
</t>
<t t-else="">
<t t-set="user_points" t-value="0"/>
<t t-set="user_points" t-value="100"/>
</t>
<path class="o_pc_circle_bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<path class="o_pc_circle" t-attf-stroke-dasharray="#{user_points}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke="url(#gradient)" mask="url(#mask)"/>
@@ -333,12 +338,20 @@
</svg>
<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-attf-src="/web/image/gamification.karma.rank/#{user.next_rank_id.id if user.next_rank_id else user.rank_id.id}/image_medium"
t-att-alt="(user.next_rank_id.name if user.next_rank_id else user.rank_id.name) + ' badge'"
t-att-style="'max-width: ' + (img_max_width if img_max_width else '50%;')"/>
<h4 class=" mb-0">"<span t-field="user.next_rank_id.name"/>"</h4>
<h4 class=" mb-0">
"
<span t-if="user.next_rank_id" t-field="user.next_rank_id.name"/>
<span t-else="" t-field="user.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
<span class="font-weight-bold text-primary" t-field="user.karma"/>/
<span t-if="user.next_rank_id" class="font-weight-bold" t-field="user.next_rank_id.karma_min"/>
<span t-else="" class="font-weight-bold" t-field="user.rank_id.karma_min"/>
xp
</small>
</div>
</div>
addons/website_slides/views/website_slides_templates_homepage.xml
+3 -3
View File
@@ -396,13 +396,13 @@
<img t-attf-src="/web/image/gamification.karma.rank/#{user.rank_id.id}/image_small" height="16" alt="" class="mr-1"/>
<a href="/profile/ranks_badges" t-field="user.rank_id"/>
</div>
<t t-if="user.next_rank_id">
<div class="font-weight-bold text-muted mt-1">Next rank:</div>
<t t-if="user.rank_id">
<div t-if="user.next_rank_id" class="font-weight-bold text-muted mt-1">Next rank:</div>
<t t-call="website_profile.profile_next_rank_card">
<t t-set="bg_class">bg-200</t>
<t t-set="img_max_width">50%</t>
</t>
<div t-field="user.next_rank_id.description_motivational"/>
<div t-field="user.rank_id.description_motivational"/>
</t>
</div>
</template>