Resolved #5749

6 years ago · 0a2a516f71
11 changed files with 296 additions and 136 deletions
--- a/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Properties/launchSettings.json
+++ b/modules/cms-kit/src/Volo.CmsKit.Admin.Web/Properties/launchSettings.json
@ -0,0 +1,27 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:51860/",
+      "sslPort": 44364
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "Volo.CmsKit.Admin.Web": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:5001;http://localhost:5000"
+    }
+  }
+}
--- a/modules/cms-kit/src/Volo.CmsKit.Common.Web/Properties/launchSettings.json
+++ b/modules/cms-kit/src/Volo.CmsKit.Common.Web/Properties/launchSettings.json
@ -0,0 +1,27 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:51861/",
+      "sslPort": 44300
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "Volo.CmsKit.Common.Web": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:5001;http://localhost:5000"
+    }
+  }
+}
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPost/Default.cshtml
@ -10,19 +10,43 @@

 <abp-card>
    <img src="/api/cms-kit/media/@Model.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
-    <abp-card-body>
-        <abp-card-title>@Model.Title</abp-card-title>
-        <abp-card-subtitle>@Model.Author?.UserName</abp-card-subtitle>
-
-        @Html.Raw(Model.Content)
-    </abp-card-body>
-    <abp-card-footer>
-        <abp-card-subtitle>@Model.CreationTime</abp-card-subtitle>
-        @if (Model.LastModificationTime != null)
-        {
-            <abp-card-text><i>@L["LastModification"].Value : @Model.LastModificationTime</i></abp-card-text>
-        }
-    </abp-card-footer>
+    <abp-card-body> 
+        <abp-row>
+            <div class="col-lg-8 col-md-10 mx-auto pb-4">
+                <h1 class="mt-lg-4 mt-md-3">@Model.Title</h1>
+                <p class="mb-lg-5 mb-md-3">
+                    <span class="font-weight-bold">@@@Model.Author?.UserName</span>
+                    <small style="opacity:.65;">@Model.CreationTime</small>
+                </p>
+                @Html.Raw(Model.Content) 
+                <p>
+                    @if (Model.LastModificationTime != null)
+                    {
+                    <small style="opacity:.65;">@L["LastModification"].Value : @Model.LastModificationTime</small>
+                    }
+                </p>
+            </div>
+        </abp-row>
+    </abp-card-body> 
 </abp-card>


+<style>
+    .card-body img { 
+        width: 100%;
+        border-radius: 4px;
+        margin: 20px 0;
+    }
+    .badge.badge-light {
+        color: #757575;
+        background: #f2f2f2;
+    }
+    .reaction-in-comment span.area-title {
+        display: none;
+    }
+    span.area-title {
+        font-weight: 600;
+        padding: 3px;
+        display: block;
+    }
+</style>
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPostComment/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Blogs/BlogPostComment/Default.cshtml
@ -8,11 +8,11 @@
@model DefaultBlogPostCommentViewComponent.DefaultBlogPostCommentViewModel


-<abp-card>
-    <abp-card-header>
-        <abp-card-title>@L["Comments"]</abp-card-title>
-    </abp-card-header>
+<abp-card> 
    <abp-card-body>
+        <span class="area-title pt-0 pb-3">
+            @L["Comments"]
+        </span>
        @await Component.InvokeAsync(typeof(CommentingViewComponent), new
           {
               entityType = Model.EntityType,
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Commenting/Default.cshtml
@ -25,7 +25,7 @@
 }
@{
    Func<dynamic, IHtmlContent> GetCommentArea(Guid? repliedCommentId, bool cancelButton = false) =>
-    @<div class="cms-comment-form-area bg-light card p-3 mx-0 mt-4  @(repliedCommentId.HasValue ? "my-1" : "mb-0")"
+    @<div class="cms-comment-form-area bg-light card p-3 mx-0  @(repliedCommentId.HasValue ? "my-1" : "mb-0")"
          data-reply-id="@(repliedCommentId?.ToString() ?? "")"
          style="@(string.IsNullOrEmpty(repliedCommentId?.ToString() ?? "") ? "" : "display:none")">
        <form class="cms-comment-form">
--- 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
@ -5,57 +5,78 @@
@model Volo.CmsKit.Public.Web.Pages.CmsKit.Shared.Components.Rating.RatingViewModel
@inject IHtmlLocalizer<CmsKitResource> L

-<div class="text-center text-md-left">
-    <div class="cms-rating-area d-inline-block px-2 py-1 my-2  card border-0 shadow-sm " data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
-        @if (CurrentUser.IsAuthenticated)
-        {
-            <span class="my-rating" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)"></span>
-            <small class="live-rating text-center d-inline-block" style="width: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + "  " : 0 + "")</small>
-            @if (Model.CurrentRating != null)
-            {
-                <a href="#" class="rating-undo-link">
-                    <small class="text-muted"><i class="fa fa-undo"></i> @L["Undo"]</small>
-                </a>
-            }
-            if (Model.Ratings != null)
-            {
-                <a href="#" class="text-muted ml-1" data-toggle="modal" data-target="#ratingDetail">
-                    <i class="fas fa-info-circle"></i>
-                </a>
+<div class="p-3 my-3 card">
+    <div class="row">
+        <div class="col-auto text-left">
+            <span class="area-title">
+                Rating
+            </span>
+        </div>
+        <div class="col text-right">
+            <div class="cms-rating-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId" id="cms-rating_{@Model.EntityType}_{@Model.EntityId}">
+                @if (CurrentUser.IsAuthenticated)
+                {
+                    @if (Model.CurrentRating != null)
+                    {
+                        <a href="#" class="rating-undo-link">
+                            <small class="text-muted"><i class="fa fa-undo"></i> @L["Undo"]</small>
+                        </a>
+                    }
+                    if (Model.Ratings != null)
+                    {
+                        <a href="#" class="text-muted ml-1" data-toggle="modal" data-target="#ratingDetail">
+                            <i class="far fa-question-circle"></i>
+                        </a>

-                <div class="modal fade" id="ratingDetail" tabindex="-1" role="dialog" aria-labelledby="ratingDetail" aria-hidden="true">
-                    <div class="modal-dialog modal-dialog-centered" role="document">
-                        <div class="modal-content">
-                            <div class="modal-header">
-                                <h5 class="modal-title" id="exampleModalLabel">Rating Detail</h5>
-                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                    <span aria-hidden="true">&times;</span>
-                                </button>
-                            </div>
-                            <div class="modal-body">
-
-                                <div class="row text-center">
-                                    @foreach (var rating in Model.Ratings)
-                                    {
-                                        <div class="col">
-                                            <label>@rating.StarCount @L["Star"]</label>
-                                            <div class="bar-container">
-                                                <div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
-                                            </div>
-                                            <div><small class="text-muted">@rating.Count Rate(s)</small> </div>
+                        <div class="modal fade" id="ratingDetail" tabindex="-1" role="dialog" aria-labelledby="ratingDetail" aria-hidden="true">
+                            <div class="modal-dialog modal-dialog-centered" role="document">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h5 class="modal-title" id="exampleModalLabel">Rating Detail</h5>
+                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                                            <span aria-hidden="true">&times;</span>
+                                        </button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <div class="row text-center">
+                                            @foreach (var rating in Model.Ratings)
+                                            {
+                                                <div class="col">
+                                                    <label>@rating.StarCount @L["Star"]</label>
+                                                    <div class="bar-container">
+                                                        <div class="bar bar-@rating.StarCount" style="width: @(rating.Count * 100 / Model.TotalRating)%"></div>
+                                                    </div>
+                                                    <div><small class="text-muted">@rating.Count Rate(s)</small> </div>
+                                                </div>
+                                            }
                                        </div>
-                                    }
+                                    </div>
                                </div>
                            </div>
                        </div>
-                    </div>
-                </div>
-            }
-        }
-        else
-        {
-            <span class="my-rating" 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>
-        }
+                    }
+
+                    <span class="my-rating btn btn-secondary btn-sm py-1 ml-2" data-rating="@(Model.CurrentRating ?? 0)" data-authenticated="@(Model.CurrentRating != null)">
+                        <small class="live-rating text-center d-inline-block" style="width: 24px">@(Model.CurrentRating != null ? Model.CurrentRating + "  " : 0 + "")</small>
+                    </span>
+                }
+                else
+                {
+                    <span class="my-rating btn btn-secondary btn-sm py-1 ml-2" 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>
    </div>
-</div>
+</div>
+<style>
+    .reaction-in-comment span.area-title {
+        display: none;
+    }
+
+    span.area-title {
+        font-weight: 600;
+        padding: 3px;
+        display: block;
+    }
+</style>
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/ReactionSelection/Default.cshtml
@ -4,32 +4,51 @@

@if (CurrentUser.IsAuthenticated || Model.Reactions.Count(r => r.Count > 0) > 0)
 {
-    <div class="text-center text-md-right">
-        <div class="px-2 py-1 my-2 card border-0 shadow-sm d-inline-block">
-            <span class="cms-reaction-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">
+    <div class="p-3 my-3 card">
+        <div class="row">
+            <div class="col-auto text-left">
+                <span class="area-title">
+                    Reactions
+                </span>
+            </div>
+            <div class="col text-right">
+                <span class="cms-reaction-area" data-entity-type="@Model.EntityType" data-entity-id="@Model.EntityId">

-                @if (CurrentUser.IsAuthenticated)
-                {
-                    <a class="cms-reaction-select-icon" href="javascript:;">
-                        <i class="fa fa-smile-o text-muted"></i>
-                    </a>
-                    <div class="cms-reaction-selection-popover-content" style="display: none">
-                        @foreach (var reaction in Model.Reactions)
-                        {
-                            <span class="m-2 p-2 w-25 d-inline-block text-center cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "shadow-sm  bg-light rounded cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name">
-                                <i class="@reaction.Icon fa-2x"></i>
-                            </span>
-                        }
-                    </div>
-                }
-                @foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
-                {
-                    <span class="ml-1 cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name" data-click-action="@(CurrentUser.IsAuthenticated ? "true" : "false")">
-                        <i class="@reaction.Icon"></i>
-                        <small class="text-muted" style="opacity: .45;">@(reaction.Count)</small>
-                    </span>
-                }
-            </span>
+                    @foreach (var reaction in Model.Reactions.Where(r => r.Count > 0))
+                    {
+                        <span class="ml-1 cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name" data-click-action="@(CurrentUser.IsAuthenticated ? "true" : "false")">
+                            <i class="@reaction.Icon"></i>
+                            <small class="text-muted" style="opacity: .45;">@(reaction.Count)</small>
+                        </span>
+                    }
+                    @if (CurrentUser.IsAuthenticated)
+                    {
+                        <a class="cms-reaction-select-icon btn btn-secondary text-light btn-sm py-1 ml-2" href="javascript:;">
+                            <i class="fa fa-smile-o"></i>
+                        </a>
+                        <div class="cms-reaction-selection-popover-content" style="display: none">
+                            @foreach (var reaction in Model.Reactions)
+                            {
+                                <span class="m-2 p-2 w-25 d-inline-block text-center cms-reaction-icon @(reaction.IsSelectedByCurrentUser ? "shadow-sm  bg-light rounded cms-reaction-icon-selected" : "")" data-reaction-name="@reaction.Name">
+                                    <i class="@reaction.Icon fa-2x"></i>
+                                </span>
+                            }
+                        </div>
+                    }
+                </span>
+            </div>
        </div>
    </div>
 }
+
+<style>
+    .reaction-in-comment span.area-title {
+        display: none;
+    }
+
+    span.area-title {
+        font-weight: 600;
+        padding: 3px;
+        display: block;
+    }
+</style>
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
@ -2,12 +2,39 @@

@model TagViewComponent.TagViewModel

-@if (Model.Tags != null)
-{
-    foreach (var tag in Model.Tags)
-    {
-        <span class="cmskit-tag">
-            @tag.Name
-        </span>
-    }
-}
+    <div>
+        <div class="p-3 my-3 card">
+            <div class="row">
+                <div class="col-auto text-left">
+                    <span class="area-title">
+                        Tags
+                    </span>
+                </div>
+                <div class="col text-right">
+                    <div class="cms-tags-area">
+                        @if (Model.Tags != null)
+                        {
+                            foreach (var tag in Model.Tags)
+                            {
+                                <span class="badge badge-light px-3 py-2 cmskit-tag font-weight-normal">
+                                    @tag.Name
+                                </span>
+                            }
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <style>
+        .reaction-in-comment span.area-title {
+            display: none;
+        }
+
+        span.area-title {
+            font-weight: 600;
+            padding: 3px;
+            display: block;
+        }
+    </style>
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
@ -54,8 +54,7 @@
        })
    }
 }
-
-<hr />
+ 

@if (GlobalFeatureManager.Instance.IsEnabled<CommentsFeature>())
 {
--- a/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml
+++ b/modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/Index.cshtml
@ -14,46 +14,35 @@
 <abp-row id="blogs-container">
    @foreach (var blog in Model.Blogs.Items)
    {
-        <abp-column size="_12" class="m-3">
+        <abp-column size="_12" size-md="_6" size-lg="_4">
            <abp-card>
-                <abp-card-header>
-                    <abp-card-title>
-                        @blog.Title
-                    </abp-card-title>
-                    <abp-card-subtitle>
-                        @@@blog.Author?.UserName
-                    </abp-card-subtitle>
-                </abp-card-header>
-                <abp-card-body>
-                    @if (blog.CoverImageMediaId != null)
-                    {
-                        <img src="/api/cms-kit/media/@blog.CoverImageMediaId" class="card-img-top" style="max-width:200px;max-height:200px;" onerror="this.src='@dummyImageSource'" />
-                    }
-                    else
-                    {
-                        <img src="@dummyImageSource" class="card-img-top" style="max-width:200px;max-height:200px;" />
-                    }
-                    <abp-card-text>
-                        @blog.ShortDescription
-                    </abp-card-text>
-                    <abp-card-text>
-                        <a href="/blogs/@Model.BlogSlug/@blog.Slug">
-                            <abp-button text="@L["Read"]"
-                                        button-type="Outline_Primary" />
-                        </a>
-                    </abp-card-text>
-                </abp-card-body>
-                <abp-card-footer>
-                    <abp-card-text>
-                        @blog.CreationTime
-                    </abp-card-text>
-                </abp-card-footer>
+                @if (blog.CoverImageMediaId != null)
+                {
+                    <img src="/api/cms-kit/media/@blog.CoverImageMediaId" class="card-img-top" onerror="this.src='@dummyImageSource'" />
+                }
+                else
+                {
+                    <img src="@dummyImageSource" class="card-img-top" />
+                } 
+            <abp-card-body class="p-4">
+                <h5>@blog.Title</h5> 
+                <p class="mb-2">
+                    <span class="font-weight-bold">@@@blog.Author?.UserName</span>
+                    <small style="opacity:.65;">@blog.CreationTime</small>
+                </p> 
+                <p style="min-height: 60px;">@blog.ShortDescription</p>
+                <a href="/blogs/@Model.BlogSlug/@blog.Slug" class="btn btn-block btn-light">
+                    @L["Read"]
+                </a>
+            </abp-card-body> 
            </abp-card>
        </abp-column>

    }
 </abp-row>
 <abp-row>
-    <abp-paginator model="Model.PagerModel" />
+    <abp-column>
+        <abp-paginator model="Model.PagerModel" />
+    </abp-column>
 </abp-row>

--- a/modules/cms-kit/src/Volo.CmsKit.Web/Properties/launchSettings.json
+++ b/modules/cms-kit/src/Volo.CmsKit.Web/Properties/launchSettings.json
@ -0,0 +1,27 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:51859/",
+      "sslPort": 44370
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "Volo.CmsKit.Web": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:5001;http://localhost:5000"
+    }
+  }
+}