From c46c60d398e7dae9b4766825002b52c208a2b708 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Dufays <pydu@odoo.com>
Date: Mon, 12 Feb 2024 13:35:41 +0100
Subject: [PATCH] [FIX] website_profile: fix karma wheel layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

How to reproduce:
- Install "French" for the website
- log out and log in as demo
- Go to the front-end and click on "Courses"

The design of the karma wheel is broken because the translation for
"Get 7.5k< xp to level up!" displayed in the wheel is too large ("Obtenez 7.5k
xp pour passer au niveau supérieur"). While in French the text go outside the
wheel and it appears clearly broken, it is also the case in English as the rank
name is hidden due to the length of the text (for example when gaining one
karma: 7.49k is displayed instead of 7.5k which takes more place).

To avoid modifying the template "profile_next_rank_card" that could break
community overrides, we solve this problem in css by increasing the karma
wheel size and the precentage of width occupied by the text inside the wheel.
We also reduce the vertical margin between the rank name and the descriptive
text and reduce the line height to avoid the text to overlap with the wheel.
And if the text is still too large for some language it will be truncated and
an ellipsis will be used.

Technical note: we do the change in website_profile.scss (and not in
website_slides.scss) because it applies to both karma wheel: the one on course
home page and the one in the profile page.

Task-3617054

X-original-commit: f32eabf55db4db4d46b45032c76bfa17dfce475f
Part-of: odoo/odoo#157655
---
 .../static/src/scss/website_profile.scss             | 12 ++++++++++++
 .../static/src/scss/website_slides.scss              |  1 -
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index 5c25a5e4af1..8322ffe211b 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -98,6 +98,7 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
 /// Progress Circle
 .o_wprofile_progress_circle {
     position: relative;
+    max-width: 300px;
 
     svg.o_pc_circular_chart {
         // Allow hover effect on svg paths in order to display bootstrap tooltip,
@@ -135,6 +136,17 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
             &:not(.o_editable) {
                 @include o-text-overflow();
             }
+            margin-bottom: 0 !important;
+        }
+
+        small.text-center {
+            display: -webkit-box;
+            line-height: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 75% !important;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
         }
     }
 
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index fcddae6f31d..cb57cf8eafd 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -249,7 +249,6 @@ $line-height-truncate: 1.25em;
     .o_wprofile_progress_circle {
         margin-left: auto;
         margin-right: auto;
-        max-width: 200px;
     }
 }