From e96b5bf26b9888bdf2fd73539ef50524d1e82503 Mon Sep 17 00:00:00 2001 From: EngincanV Date: Thu, 27 Aug 2020 18:16:36 +0300 Subject: [PATCH] CmsKit: Rating widget design --- .../Shared/Components/Rating/Default.cshtml | 66 +++++++++---------- .../Components/Rating/RatingViewComponent.cs | 7 +- .../Shared/Components/Rating/default.css | 45 ++++++++++++- .../Shared/Components/Rating/default.js | 21 +----- 4 files changed, 82 insertions(+), 57 deletions(-) diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml index 51b799d2e6..f1d96fa97e 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/Default.cshtml +++ b/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 L -@section styles{ - -} - -@section scripts{ - -} - -
+
@if (CurrentUser.IsAuthenticated) { -
- - @(Model.CurrentRating != null ? Model.CurrentRating.StarCount : 0) - if (Model.CurrentRating != null) - { - - @L["Undo"] - - } -
-
-

All Stars

- @if (Model.Ratings != null) +
+ + @(Model.CurrentRating != null ? Model.CurrentRating.StarCount + " | " : 0 + "") + @if (Model.CurrentRating != null) { -
    - @foreach (var rating in Model.Ratings) - { -
  • - @rating.StarCount @L["Stars"] - @rating.Count -
    • - } -
+ + @L["Undo"] + }
+ if (Model.Ratings != null) + { +
+ @foreach (var rating in Model.Ratings) + { +
+
@rating.StarCount @L["Stars"]
+
+
+
+
+
+
+
+
@rating.Count
+
+ } +
+ } } else { -
- @L["LoginToRate"] -
+
"> + } -
+
\ No newline at end of file diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/RatingViewComponent.cs b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/RatingViewComponent.cs index 31dedbc532..7c458d033b 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/RatingViewComponent.cs +++ b/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 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 Ratings { get; set; } public RatingDto CurrentRating { get; set; } + + public int TotalRating { get; set; } } } \ No newline at end of file diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css index 5f282702bb..c38f44cace 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css +++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.css @@ -1 +1,44 @@ - \ No newline at end of file +.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; + } +} \ No newline at end of file diff --git a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js index 6bc8dc763e..2835e57a3c 100644 --- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Rating/default.js +++ b/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();