From 48a5ea290a408666eb7eb823dc08a893d4a37d65 Mon Sep 17 00:00:00 2001
From: David Beguin <dbe@odoo.com>
Date: Mon, 10 Aug 2020 13:24:26 +0000
Subject: [PATCH] [FIX] website_event_meet_quiz: redesign leaderboard in
 community page

Make it looking nice in mobile (and desktop). Also remove some unnecessary
complexity in DOM.

Display leaderboard even if only one or two visitors had points. It is
better for onboarding purpose.

Display 'You' only in if the visitor is you AND if visitor.name is empty.
This allows to display 'You' instead of 'Website Visitor #123' but still
display your complete name if you are logged in or if you have a registration.

LINKS

Coming from internal feedback while deploying online support
Task ID-2314778
PR #55634

X-original-commit: d767c998f2d269ec0f23a6e96874b47f78fd87f8
---
 .../views/event_meet_templates.xml            | 55 +++++++++----------
 .../views/event_leaderboard_templates.xml     |  6 +-
 2 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/addons/website_event_meet_quiz/views/event_meet_templates.xml b/addons/website_event_meet_quiz/views/event_meet_templates.xml
index 04b7be6b768..614ce5a921d 100644
--- a/addons/website_event_meet_quiz/views/event_meet_templates.xml
+++ b/addons/website_event_meet_quiz/views/event_meet_templates.xml
@@ -8,39 +8,34 @@
 </template>
 
 <template id="community_leaderboard_small" name="Small Leaderboard">
-    <div class="row">
-        <div class="col">
-            <div class="w-100 d-flex justify-content-between align-items-end o_page_header">
-                <h1 class="m-0">Leaderboard</h1>
-                <a t-attf-href="#{'/event/%s/community/leaderboard' % (slug(event))}">View all</a>
-            </div>
-        </div>
-    </div>
-    <div class="row">
-        <div class="col">
-            <t t-foreach="top3_visitors" t-as="visitor">
-                <t t-call="website_event_meet_quiz.visitor_quiz_points_card"/>
-            </t>
-        </div>
+    <div class="w-100 d-flex justify-content-between align-items-end o_page_header">
+        <h1 class="m-0">Leaderboard</h1>
+        <a t-attf-href="#{'/event/%s/community/leaderboard' % (slug(event))}">View all</a>
     </div>
+    <t t-call="website_event_meet_quiz.visitor_quiz_points_card"/>
 </template>
 
-<template id='visitor_quiz_points_card' name="User Quick Quiz Points Card">
-    <div class="d-flex mb-3 align-items-center justify-content-between">
-        <div class="d-flex align-items-center">
-            <b class="mr-2 text-muted" t-esc="visitor['position']"/>
-            <img class="rounded-circle float-left"
-                style="width: 32px; height: 32px; object-fit: cover;"
-                t-att-src="image_data_uri(visitor['visitor'].partner_image) if visitor['visitor'].partner_image else '/web/static/src/img/user_placeholder.jpg'"
-                t-att-alt="visitor['visitor'].display_name"/>
-            <div style="line-height:1.3">
-                <span class="font-weight-bold" t-esc="visitor['visitor'].display_name"/>
-            </div>
-        </div>
-        <div class="d-flex align-items-center">
-            <span><t t-esc="visitor['points']"/> Points</span>
-        </div>
-    </div>
+<template id='visitor_quiz_points_card' name="Small Leaderboard: top3">
+    <table class="w-100">
+        <tr t-foreach="top3_visitors" t-as="visitor">
+            <td><div class="d-flex align-items-center mb-3">
+                <b class="mr-2 text-muted" t-esc="visitor['position']"/>
+                <img class="rounded-circle float-left"
+                    style="width: 32px; height: 32px; object-fit: cover;"
+                    t-att-src="image_data_uri(visitor['visitor'].partner_image) if visitor['visitor'].partner_image else '/web/static/src/img/user_placeholder.jpg'"
+                    t-att-alt="visitor['visitor'].display_name"/>
+                <div class="o_we_leaderboard_name">
+                    <span t-if="visitor['visitor'] == current_visitor and not visitor['visitor'].name" class="font-weight-bold">You</span>
+                    <span t-else="" class="font-weight-bold" t-esc="visitor['visitor'].display_name"/>
+                </div>
+            </div></td>
+            <td class="text-right">
+                <div class="mb-3">
+                    <span class="text-nowrap"><t t-esc="visitor['points']"/> xp</span>
+                </div>
+            </td>
+        </tr>
+    </table>
 </template>
 
 </odoo>
diff --git a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
index 8e0eda03aba..8a2e4eb60cd 100644
--- a/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
+++ b/addons/website_event_track_quiz/views/event_leaderboard_templates.xml
@@ -61,7 +61,8 @@
                     t-att-src="image_data_uri(visitor['visitor'].partner_image) if visitor['visitor'].partner_image else '/web/static/src/img/user_placeholder.jpg'"/>
                 <img class="position-absolute" t-attf-src="/website_profile/static/src/img/rank_#{visitor['position']}.svg" alt="User rank" style="bottom: 0; right: -10px"/>
             </div>
-            <h3 class="mt-2 mb-0" t-esc="visitor['visitor'].display_name"></h3>
+            <h3 t-if="visitor['visitor'] == current_visitor and not visitor['visitor'].name" class="mt-2 mb-0">You</h3>
+            <h3 t-else="" class="mt-2 mb-0" t-esc="visitor['visitor'].display_name"/>
         </div>
         <div class="row mx-0 o_wprofile_top3_card_footer text-nowrap">
             <div class="col py-3"><b t-esc="visitor['points']"/> <span class="text-muted">Points</span></div>
@@ -80,7 +81,8 @@
         t-att-src="image_data_uri(visitor['visitor'].partner_image) if visitor['visitor'].partner_image else '/web/static/src/img/user_placeholder.jpg'"/>
     </td>
     <td class="align-middle w-md-75">
-        <span class="font-weight-bold" t-esc="visitor['visitor'].display_name"/><br/>
+        <span t-if="visitor['visitor'] == current_visitor and not visitor['visitor'].name" class="font-weight-bold">You</span>
+        <span t-else="" class="font-weight-bold" t-esc="visitor['visitor'].display_name"/><br/>
     </td>
     <td class="align-middle font-weight-bold text-right text-nowrap">
         <b t-esc="visitor['points']"/> <span class="text-muted small font-weight-bold">Points</span>