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
Pierre-Yves Dufays
c46c60d398