Updated version of the AtGlance widget

EdmundsWidgets · May 27, 2014 · 3e7c4e4 · 3e7c4e4
1 parent d55c803
commit 3e7c4e4
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 5 deletions.
diff --git a/edmunds/widgets/glance/app/css/main.css b/edmunds/widgets/glance/app/css/main.css
@@ -6733,6 +6733,10 @@ footer .logo a {
   border-top: 1px solid #e5e5e5;
   padding: 18px 0;
 }
+.reviews-tab .consumer-review.reviews-list:hover {
+  background: rgba(38, 201, 255, 0.3);
+  cursor: pointer;
+}
 .reviews-tab .consumer-review:first-child {
   border-color: transparent;
 }

diff --git a/edmunds/widgets/glance/app/js/model/consumer-reviews-tab/consumer-reviews-tab.js b/edmunds/widgets/glance/app/js/model/consumer-reviews-tab/consumer-reviews-tab.js
@@ -7,6 +7,7 @@ define([
             return 'https://api.edmunds.com/api/vehiclereviews/v2/styles/' + styleId;
         },
         parse: function(response) {
+            response.averageRating = parseFloat(response.averageRating).toFixed(1);
             response.reviews = new ReviewsListCollection(response.reviews, {
                 parse: true
             });

diff --git a/edmunds/widgets/glance/app/js/template/consumer-reviews-tab/reviews-list.js b/edmunds/widgets/glance/app/js/template/consumer-reviews-tab/reviews-list.js
@@ -8,14 +8,14 @@ define(function() {
         '<div class="star filled"></div>' +
         '<div class="star filled"></div>' +
         '<div class="star"></div>' +
-        '<div class="text-rating-star hidden-xs"><span>4.0</span> out of 5.0</div>' +
+        '<div class="text-rating-star hidden-xs"><span><%= averageRating %></span> out of 5.0</div>' +
         '</div>' +
         '<div class="reviews-count col-xs-5 col-sm-4">' +
-        '<span class="hidden-xs">Based on</span><span>12</span> reviews</div>' +
+        '<span class="hidden-xs">Based on</span> <span><%= reviewsCount %></span> reviews</div>' +
         '</div>' +
         '</div>' +
         '<section class="content col-xs-12">' +
-        '<% _.each(collection, function(review) { %><div class="consumer-review" data-id="<%= review.id %>"><div class="container-fluid"><div class="row"><div class="col-xs-12 col-sm-10"><div class="row"><div class="col-xs-12"><div class="rating-stars"><div class="star filled"></div><div class="star filled"></div><div class="star filled"></div><div class="star filled"></div><div class="star"></div></div><div class="date"><%= review.created %></div> </div> <div class="col-xs-12"><h4><%= review.title %></h4> <p class="vehicle">Vehicle: 2014 Mazda MAZDA3 i Touring 4dr Hatchback (2.0L 4cyl 6A)</p></div> </div> </div> <div class="hidden-xs col-sm-2"> <div class="pros"><%= review.thumbsUpDownCounter.thumbsUp %></div> <div class="clearmine"></div> <div class="cons"><%= review.thumbsUpDownCounter.thumbsDown %></div> </div> </div> </div> </div> <% }) %>' +
+        '<% _.each(collection, function(review) { %><div class="consumer-review reviews-list" data-id="<%= review.id %>"><div class="container-fluid"><div class="row"><div class="col-xs-12 col-sm-10"><div class="row"><div class="col-xs-12"><div class="rating-stars"><div class="star filled"></div><div class="star filled"></div><div class="star filled"></div><div class="star filled"></div><div class="star"></div></div><div class="date"><%= review.created %></div> </div> <div class="col-xs-12"><h4><%= review.title %></h4> <p class="vehicle">Vehicle: 2014 Mazda MAZDA3 i Touring 4dr Hatchback (2.0L 4cyl 6A)</p></div> </div> </div> <div class="hidden-xs col-sm-2"> <div class="pros"><%= review.thumbsUpDownCounter.thumbsUp %></div> <div class="clearmine"></div> <div class="cons"><%= review.thumbsUpDownCounter.thumbsDown %></div> </div> </div> </div> </div> <% }) %>' +
         '</section>' +
     '');
 });
diff --git a/edmunds/widgets/glance/app/js/view/consumer-reviews-tab/consumer-reviews-tab.js b/edmunds/widgets/glance/app/js/view/consumer-reviews-tab/consumer-reviews-tab.js
@@ -30,6 +30,8 @@ define([
         },
         init: function() {
             this.reviewsListView = new ReviewsListView({
+                averageRating: this.model.get('averageRating'),
+                reviewsCount: this.model.get('reviewsCount'),
                 collection: this.model.get('reviews')
             });
         }

diff --git a/edmunds/widgets/glance/app/js/view/consumer-reviews-tab/reviews-list.js b/edmunds/widgets/glance/app/js/view/consumer-reviews-tab/reviews-list.js
@@ -9,10 +9,14 @@ define([
             'click .consumer-review': 'renderFullReview',
             'click .list-reviews': 'render'
         },
-        initialize: function() {},
+        initialize: function(options) {
+            this.options = options || {};
+        },
         render: function() {
             this.$el.html(this.template({
-                collection: this.collection.toJSON()
+                collection: this.collection.toJSON(),
+                averageRating: this.options.averageRating,
+                reviewsCount: this.options.reviewsCount
             }));
             return this;
         },