From 489c8623e2c4869ce1ed8be3d186e36cc1c47456 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Warnon?= <awa@odoo.com>
Date: Thu, 6 Jun 2019 09:28:19 +0000
Subject: [PATCH] [IMP] website_[profile,slides]: improve karma rank layout

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

Task #2003222
---
 .../data/gamification_karma_rank_demo.xml     |  2 +-
 .../website_profile/views/website_profile.xml | 33 +++++++++++++------
 .../website_slides_templates_homepage.xml     |  6 ++--
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/addons/gamification/data/gamification_karma_rank_demo.xml b/addons/gamification/data/gamification_karma_rank_demo.xml
index c2d81ebbcc7..6250ee227f6 100644
--- a/addons/gamification/data/gamification_karma_rank_demo.xml
+++ b/addons/gamification/data/gamification_karma_rank_demo.xml
@@ -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>
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index d03428d9287..8ea869d5455 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -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>
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index d7e6956ebd4..1b822e16037 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -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>