[IMP] website_rating: visual improvements for product rating

Rating Improvements on product page:
  1) Now we display ratings filter in descending order which
     is common behavior for eCommerce/Appstore sites
  2) Stop scrolling to top while removing selected rating filter
  3) UI improvements for mobile/tablet view
  4) Percentage is rounded up to two decimal points so that
     it does not look ugly

task-1850446

closes odoo/odoo#28245

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website_rating/static/src/js/website_mail.js

@@ -5,6 +5,7 @@ var core = require('web.core');
 var publicWidget = require('web.public.widget');
 var session = require('web.session');
 var portalChatter = require('portal.chatter');
+var utils = require('web.utils');
 
 var _t = core._t;
 
@@ -219,11 +220,11 @@ PortalChatter.include({
                 'avg': Math.round(result['rating_stats']['avg'] / STAR_RATING_RATIO * 100) / 100,
                 'percent': [],
             };
-            _.each(_.keys(result['rating_stats']['percent']), function (rating) {
+            _.each(_.keys(result['rating_stats']['percent']).reverse(), function (rating) {
                 if (rating % 2 === 0) {
                     ratingData['percent'].push({
                         'num': rating / STAR_RATING_RATIO,
-                        'percent': result['rating_stats']['percent'][rating],
+                        'percent': utils.round_precision(result['rating_stats']['percent'][rating], 0.01),
                     });
                 }
             });

addons/website_rating/static/src/scss/website_rating.scss

@@ -15,8 +15,8 @@ $o-w-rating-star-color: #FACC2E;
         width: 100%;
         overflow: visible;
 
-        .o_website_rating_table_star_num{
-            min-width: 30px;
+        .o_website_rating_table_star_num {
+            min-width: 50px;
         }
         .o_website_rating_select[style*="opacity: 1"] {
             cursor: pointer;

addons/website_rating/static/src/xml/website_mail.xml

@@ -49,7 +49,10 @@
                                     <strong><t t-esc="Math.round(percent['percent'] * 100) / 100"/>%</strong>
                                 </td>
                                 <td class="o_website_rating_table_reset">
-                                    <a href="#" role="button" class="btn btn-link o_website_rating_select_text" t-att-data-star="percent['num']">Remove selection</a>
+                                    <button class="btn btn-link o_website_rating_select_text" t-att-data-star="percent['num']">
+                                        <i class="fa fa-times d-block d-sm-none" role="img" aria-label="Remove Selection"/>
+                                        <span class="d-none d-sm-block">Remove Selection</span>
+                                    </button>
                                 </td>
                             </tr>
                         </t>