CmsKit: Rating widget design

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml

@@ -1,52 +1,46 @@
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Volo.Abp.Users
 @using Volo.CmsKit.Localization
-@using Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating
 @inject ICurrentUser CurrentUser
 @model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating.RatingViewModel
 @inject IHtmlLocalizer<CmsKitResource> L
 
-@section styles{
-    <abp-style type="typeof(RatingStyleBundleContributor)" />
-}
-
-@section scripts{
-    <abp-script type="typeof(RatingScriptBundleContributor)" />
-}
-
-<div class="cms-rating-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
+<div class="cms-rating-area container" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
     @if (CurrentUser.IsAuthenticated)
     {
-        <hr/>
-        <span class="my-rating-5" data-rating="@(Model.CurrentRating != null ? Model.CurrentRating.StarCount : 0)" data-authenticated="@(Model.CurrentRating != null)"></span>
-        <span class="live-rating">@(Model.CurrentRating != null ? Model.CurrentRating.StarCount : 0)</span>
-        if (Model.CurrentRating != null)
-        {
-            <a href="#" class="rating-undo-link" data-id="@Model.CurrentRating.Id">
-                <i class="fa fa-undo"></i> @L["Undo"]
-            </a>
-        }
-        <hr/>
-        <div class="container text-center">
-            <h2 class="mb-5">All Stars</h2>
-            @if (Model.Ratings != null)
+        <div class="m-auto">
+            <span class="my-rating-5" data-rating="@(Model.CurrentRating != null ? Model.CurrentRating.StarCount : 0)" data-authenticated="@(Model.CurrentRating != null)"></span>
+            <span class="live-rating">@(Model.CurrentRating != null ? Model.CurrentRating.StarCount + " | " : 0 + "")</span>
+            @if (Model.CurrentRating != null)
             {
-                <ul class="list-group">
-                    @foreach (var rating in Model.Ratings)
-                    {
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            @rating.StarCount @L["Stars"]
-                            <span class="badge badge-primary badge-pill">@rating.Count</span>
-                        </li>
-                    }
-                </ul>
+                <a href="#" class="rating-undo-link m-auto" data-id="@Model.CurrentRating.Id">
+                    <i class="fa fa-undo"></i> @L["Undo"]
+                </a>
             }
         </div>
+        if (Model.Ratings != null)
+        {
+            <div class="row text-center col-6 mt-3">
+                @foreach (var rating in Model.Ratings)
+                {
+                    <div class="side col-2">
+                        <div>@rating.StarCount @L["Stars"]</div>
+                    </div>
+                    <div class="middle col-8">
+                        <div class="bar-container">
+                            <div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
+                        </div>
+                    </div>
+                    <div class="side col-2">
+                        <div>@rating.Count</div>
+                    </div>
+                }
+            </div>
+        }
     }
     else
     {
-        <div class="float-right mb-2">
-            <a href="@Model.LoginUrl" class="btn btn-primary">@L["LoginToRate"]</a>
-        </div>
+        <span class="my-rating-5" data-authenticated="True" data-toggle="popover" data-placement="right" data-html="true" data-content="<div class='text-center'><a href='@Model.LoginUrl' class='btn btn-primary btn-block'>@L["LoginToRate"]</a></div>"></span>
+        <span class="rating-login"></span>
     }
-</div>
+</div>

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/RatingViewComponent.cs

@@ -1,4 +1,5 @@
 using System.Collections.Generic;
+using System.Linq;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Options;
@@ -32,6 +33,7 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating
         public virtual async Task<IViewComponentResult> InvokeAsync(string entityType, string entityId)
         {
             var ratings = await RatingPublicAppService.GetGroupedStarCountsAsync(entityType, entityId);
+            var totalRating = ratings.Sum(x => x.Count);
             
             RatingDto currentUserRating = null;
             if (CurrentUser.IsAuthenticated)
@@ -48,7 +50,8 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating
                 EntityType = entityType,
                 LoginUrl = loginUrl,
                 Ratings = ratings,
-                CurrentRating = currentUserRating
+                CurrentRating = currentUserRating,
+                TotalRating = totalRating
             };
             
             return View("~/Pages/CmsKit/Shared/Components/Rating/Default.cshtml", viewModel);
@@ -66,5 +69,7 @@ namespace Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating
         public List<RatingWithStarCountDto> Ratings { get; set; }
 
         public RatingDto CurrentRating { get; set; }
+
+        public int TotalRating { get; set; }
     }
 }

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css

@@ -1 +1,44 @@
-
+.side {
+    width: 15%;
+    margin-top:10px;
+}
+
+.middle {
+    float: left;
+    width: 70%;
+    margin-top:10px;
+    padding-top: 4px;
+}
+
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.bar-container {
+    width: 100%;
+    background-color: #f1f1f1;
+    text-align: center;
+    color: white;
+}
+
+.bar {
+    height: 18px;
+}
+
+/* Individual bars */
+.bar-5 { background-color: #173F5F; }
+.bar-4 { background-color: #20639B; }
+.bar-3 { background-color: #3CAEA3; }
+.bar-2 { background-color: #F6D55C; }
+.bar-1 { background-color: #ED553B; }
+
+@media (max-width: 400px) {
+    .side, .middle {
+        width: 100%;
+    }
+    .right {
+        display: none;
+    }
+}

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js

@@ -1,22 +1,4 @@
 (function () {
-    var authenticated = $(".my-rating-5").attr("data-authenticated");
-
-    $(".my-rating-5").starRating({
-        initialRating: 0,
-        disableAfterRate: true,
-        useFullStars: true,
-        readOnly: authenticated === "True",
-        onHover: function(currentIndex, currentRating, $el) {
-            $(".live-rating").text(currentIndex);
-        },
-        onLeave: function(currentIndex, currentRating, $el) {
-            $(".live-rating").text(currentRating);
-        },
-        callback: function(currentRating, $el) {
-            alert(currentRating);
-        }
-    });
-    
     var l = abp.localization.getResource("CmsKit");
     
     $(document).ready(function () {
@@ -32,6 +14,8 @@
             }
             
             function registerCreateOfNewRating() {
+                var authenticated = $(".my-rating-5").attr("data-authenticated");
+
                 $(".my-rating-5").starRating({
                     initialRating: 0,
                     disableAfterRate: true,
@@ -58,7 +42,6 @@
             }
             
             function registerUndoLink() {
-                console.log("asdf");
                 $(".rating-undo-link").on('click', '', function (e) {
                     e.preventDefault();