tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

blogging: changes applied to user-interface

pull/16503/head
Onur Pıçakcı 3 years ago
parent
9651fc22d8
commit
d9c3818d62
5 changed files with 417 additions and 311 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 701
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Detail.cshtml
  2. 6
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Detail.cshtml.cs
  3. 10
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/detail.js
  4. 6
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/blog.css
  5. 5
      modules/blogging/src/Volo.Blogging.Web/Pages/Members/Index.css

701
modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Detail.cshtml
View File

@ -13,12 +13,6 @@
@inject IOptionsSnapshot<BloggingTwitterOptions> twitterOptions
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.AspNetCore.Mvc.TagHelpers
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Alert
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Blockquote
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
@using Volo.Abp.AspNetCore.Mvc.UI.Bundling.TagHelpers
@using Volo.Blogging.Localization
@using Volo.Blogging.Pages.Blog
@inject IHtmlLocalizer<BloggingResource> L
@ -57,359 +51,446 @@
}
<div class="vs-blog vs-blog-detail">
<abp-input asp-for="FocusCommentId" class="m-0" />
<div class="container">
<div class="row">
<div class="col-12 col-md-8 col-lg-7 mx-auto">
<section class="hero-section">
<div class="hero-articles">
<div class="hero-content">
<h1 class="mb-3" id="PostTitle">@Model.Post.Title</h1>
<abp-input asp-for="FocusCommentId" class="m-0"/>
<div class="container-xxl">
<div class="row">
<div class="col-12 col-md-8 col-lg-8 mx-auto">
<section class="hero-section">
<div class="hero-articles">
<div class="hero-content">
<h1 class="mb-3" id="PostTitle">@Model.Post.Title</h1>
<div class="article-owner">
<div class="article-infos">
<div class="user-card mt-3 mb-4">
<div class="row">
<div class="col-auto pe-1">
@if (Model.Post.Writer != null)
{
<a href="/Members/@Model.Post.Writer.UserName" aria-label="Go to user profile">
<img gravatar-email="@Model.Post.Writer.Email" default-image="Identicon" class="article-avatar" alt="User Avatar"/>
</a>
}
</div>
<div class="col ps-1">
@if (Model.Post.Writer != null)
{
<h5 class="mt-2 mb-1">
<a href="/Members/@Model.Post.Writer.UserName">
@(Model.Post.Writer.UserName)
</a>
<span>@BloggingPageHelper.ConvertDatetimeToTimeAgo(Model.Post.CreationTime)</span>
</h5>
}
<i class="fa fa-eye"></i> @L["WiewsWithCount", @Model.Post.ReadCount]
<span class="vs-seperator">|</span>
<i class="fa fa-comment"></i> @L["CommentWithCount", @Model.CommentCount]
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Posts.Update))
{
<span class="seperator">|</span>
<a asp-page="./Edit" asp-route-postId="@Model.Post.Id" asp-route-blogShortName="@Model.BlogShortName">
<i class="fa fa-pencil"></i> @L["Edit"]
</a>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Posts.Delete) || (CurrentUser.Id.HasValue && CurrentUser.Id == Model.Post.CreatorId))
{
<span class="seperator">|</span>
<a href="#" id="DeletePostLink" data-postid="@Model.Post.Id" data-blogShortName="@Model.BlogShortName">
<i class="fa fa-trash"></i> @L["Delete"]
</a>
}
<div class="float-end">
<a href="#" target="_blank" class="me-2" id="TwitterShareLink" title="Twitter">
<i class="fa fa-twitter fa-lg"></i>
</a>
<a href="#" target="_blank" class="me-2" id="LinkedinShareLink" title="LinkedIn">
<i class="fa fa-linkedin fa-lg"></i>
</a>
<a href="#" target="_blank" class="me-2" id="FacebookShareLink" title="Facebook">
<i class="fa fa-facebook fa-lg"></i>
</a>
<a href="#" target="_blank" class="me-2" id="EmailShareLink" title="E-mail">
<i class="fa fa-envelope-square fa-lg"></i>
</a>
<a class="copy-link">
<i class="fa fa-link fa-lg"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="img-container mb-3">
<img src="@Model.Post.CoverImage" alt="Cover Image"/>
</div>
</div>
</section>
</div>
<div class="col-lg-2">
<div class="list-group">
<div class="col-auto pe-2">
@if (Model.Post.Writer != null)
{
<a href="/Members/@Model.Post.Writer.UserName" aria-label="Go to user profile">
<img gravatar-email="@Model.Post.Writer.Email" default-image="Identicon" class="article-avatar rounded-circle" alt="User Avatar"/>
</a>
}
</div>
<div class="col ps-1">
<h5 class="mt-2 mb-1">
<a href="/Members/@Model.Post.Writer.UserName">
@if (Model.Post.Writer.Name != null && Model.Post.Writer.Surname != null)
{
<p class="fw-bold pt-2 fs-5">@Model.Post.Writer.Name @Model.Post.Writer.Surname</p>
}
else
{
<p class="fw-bold pt-2 fs-5">@Model.Post.Writer.UserName</p>
}
</a>
</h5>
<div class="position-relative">
@if (Model.Post.Writer.JobTitle != null)
{
<p class="fw-lighter">@Model.Post.Writer.JobTitle</p>
}
</div>
</div>
<hr/>
<p class="fs-4 fw-bold text-dark">Last Blog Posts</p>
@for (var index = 0; index < Model.LatestPosts.Count && index < 4; index++)
{
if (Model.LatestPosts[index].Id != Model.Post.Id)
{
var post = Model.LatestPosts[index];
<section class="box-articles p-0">
<div class="row align-middle">
<div class="article-owner">
<div class="article-infos">
<div class="user-card mt-3 mb-4">
<div class="user-card pt-3">
<div class="row">
<div class="col-auto pe-1">
@if (Model.Post.Writer != null)
@if (post.Writer != null)
{
<a href="/Members/@Model.Post.Writer.UserName" aria-label="Go to user profile">
<img gravatar-email="@Model.Post.Writer.Email" default-image="Identicon" class="article-avatar" alt="User Avatar" />
<a href="/Members/@post.Writer.UserName" aria-label="Go to user profile">
<img gravatar-email="@post.Writer.Email" default-image="Identicon" class="article-avatar" alt="User Avatar"/>
</a>
}
</div>
<div class="col ps-1">
@if (Model.Post.Writer != null)
{
<h5 class="mt-2 mb-1">
<a href="/Members/@Model.Post.Writer.UserName">
@(Model.Post.Writer.UserName)
</a>
<span>@BloggingPageHelper.ConvertDatetimeToTimeAgo(Model.Post.CreationTime)</span>
</h5>
}
<i class="fa fa-eye"></i> @L["WiewsWithCount", @Model.Post.ReadCount]
<span class="vs-seperator">|</span>
<i class="fa fa-comment"></i> @L["CommentWithCount", @Model.CommentCount]
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Posts.Update))
{
<span class="seperator">|</span>
<a asp-page="./Edit" asp-route-postId="@Model.Post.Id" asp-route-blogShortName="@Model.BlogShortName">
<i class="fa fa-pencil"></i> @L["Edit"]
<div class="col">
<h5 class="mt-3">
<a href="/Members/@post.Writer.UserName">
@(post.Writer.UserName)
</a>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Posts.Delete) || (CurrentUser.Id.HasValue && CurrentUser.Id == Model.Post.CreatorId))
{
<span class="seperator">|</span>
<a href="#" id="DeletePostLink" data-postid="@Model.Post.Id" data-blogShortName="@Model.BlogShortName">
<i class="fa fa-trash"></i> @L["Delete"]
</a>
}
</h5>
</div>
</div>
</div>
</div>
<div class="col mt-2">
<p>
<a class="last-post-title" asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</p>
</div>
</div>
</div>
<div class="img-container mb-3">
<img src="@Model.Post.CoverImage" alt="Cover Image" />
</div>
</div>
</section>
</div>
</section>
}
}
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-8 col-lg-8 mx-auto">
<section class="post-content">
<p>
@Html.Raw(BloggingPageHelper.RenderMarkdownToHtml(Model.Post.Content))
</p>
</section>
</div>
<div class="col-12 col-md-4 col-lg-2">
</div>
</div>
<div class="row">
<div class="col-12 col-md-8 col-lg-8 mx-auto">
@if (Model.Post.Tags.Count > 0)
{
<div class="tags">
<h5>@L["TagsInThisArticle"]</h5>
@foreach (var tag in Model.Post.Tags)
{
<a asp-page="/Blogs/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</div>
}
@if (Model.CommentsWithReplies.Count > 0)
{
<abp-row v-align="Start">
<abp-column size-sm="_12">
<p class="float-start"><i class="fa fa-comment"></i> @L["CommentWithCount", @Model.CommentCount]</p>
@if (hasCommentingPermission)
{
<a abp-button="Primary" class="btn-rounded float-end active" href="#LeaveComment">@L["LeaveComment"]</a>
}
else
{
<a abp-button="Primary" class="btn-rounded float-end active" href="/Account/Login?returnUrl=@System.Web.HttpUtility.UrlEncode(@Request.Path)">@L["LeaveComment"]</a>
}
</abp-column>
</abp-row>
<div class="row">
<div class="col-12 col-md-8 col-lg-7 mx-auto">
<section class="post-content">
<p>
@Html.Raw(BloggingPageHelper.RenderMarkdownToHtml(Model.Post.Content))
<div class="comment-area">
@foreach (var commentWithRepliesDto in Model.CommentsWithReplies)
{
<div class="media">
<img gravatar-email="@commentWithRepliesDto.Comment.Writer.Email" default-image="Identicon" class="d-flex me-3 rounded-circle comment-avatar" alt="User Avatar"/>
<div class="media-body">
<h5 class="comment-owner">
@(commentWithRepliesDto.Comment.Writer == null ? "" : commentWithRepliesDto.Comment.Writer.UserName)
<span>@BloggingPageHelper.ConvertDatetimeToTimeAgo(commentWithRepliesDto.Comment.CreationTime)</span>
</h5>
<p id="@commentWithRepliesDto.Comment.Id">
@commentWithRepliesDto.Comment.Text
</p>
</section>
</div>
</div>
<div class="comment-buttons">
<div class="row">
<div class="col-12 col-md-8 col-lg-7 mx-auto">
<hr />
<div class="mb-2 mt-1">
@(L["ShareOn"].Value + " :")
<a href="#" target="_blank" class="me-2" id="TwitterShareLink" title="Twitter">
Twitter <i class="fa fa-twitter"></i>
</a>
<a href="#" target="_blank" class="me-2" id="LinkedinShareLink" title="LinkedIn">
Linkedin <i class="fa fa-linkedin"></i>
</a>
<a href="#" target="_blank" class="me-2" id="EmailShareLink" title="E-mail">
E-mail <i class="fa fa-envelope-square"></i>
</a>
</div>
@if (Model.Post.Tags.Count > 0)
{
<div class="tags">
<h5>@L["TagsInThisArticle"]</h5>
@foreach (var tag in Model.Post.Tags)
@if (hasCommentingPermission)
{
<a asp-page="/Blogs/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
<a href="#" class="tag replyLink" data-relpyid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-reply" aria-hidden="true"></i> @L["Reply"]
</a>
}
</div>
}
@if (Model.CommentsWithReplies.Count > 0)
{
<abp-row v-align="Start">
<abp-column size-sm="_12">
<p class="float-start"><i class="fa fa-comment"></i> @L["CommentWithCount", @Model.CommentCount]</p>
@if (hasCommentingPermission)
{
<a abp-button="Primary" class="btn-rounded float-end active" href="#LeaveComment">@L["LeaveComment"]</a>
}
else
{
<a abp-button="Primary" class="btn-rounded float-end active" href="/Account/Login?returnUrl=@System.Web.HttpUtility.UrlEncode(@Request.Path)">@L["LeaveComment"]</a>
}
</abp-column>
</abp-row>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Delete) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<span class="seperator">|</span>
<a href="#" class="tag deleteLink" data-deleteid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-trash" aria-hidden="true"></i> @L["Delete"]
</a>
}
<div class="comment-area">
@foreach (var commentWithRepliesDto in Model.CommentsWithReplies)
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<div class="media">
<img gravatar-email="@commentWithRepliesDto.Comment.Writer.Email" default-image="Identicon" class="d-flex me-3 rounded-circle comment-avatar" alt="User Avatar" />
<div class="media-body">
<h5 class="comment-owner">
@(commentWithRepliesDto.Comment.Writer == null ? "" : commentWithRepliesDto.Comment.Writer.UserName)
<span>@BloggingPageHelper.ConvertDatetimeToTimeAgo(commentWithRepliesDto.Comment.CreationTime)</span>
</h5>
<p id="@commentWithRepliesDto.Comment.Id">
@commentWithRepliesDto.Comment.Text
</p>
<div class="comment-buttons">
<span class="seperator">|</span>
<a href="#" class="tag updateLink" data-updateid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-pencil" aria-hidden="true"></i> @L["Edit"]
</a>
}
</div>
@if (hasCommentingPermission)
{
<a href="#" class="tag replyLink" data-relpyid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-reply" aria-hidden="true"></i> @L["Reply"]
</a>
}
@if (hasCommentingPermission)
{
<div class="comment-form mt-4 replyForm">
<div class="clearfix p-4">
<h3 class="mt-0">
@L["ReplyTo", commentWithRepliesDto.Comment.Writer == null ? "" : commentWithRepliesDto.Comment.Writer.UserName]
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Delete) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<span class="seperator">|</span>
<a href="#" class="tag deleteLink" data-deleteid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-trash" aria-hidden="true"></i> @L["Delete"]
</a>
}
</h3>
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" type="hidden"/>
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden/>
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<span class="seperator">|</span>
<a href="#" class="tag updateLink" data-updateid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-pencil" aria-hidden="true"></i> @L["Edit"]
</a>
}
</div>
<div class="mb-3">
<textarea class="form-control" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-end" type="submit" text="@L["Comment"].Value"/>
<abp-button button-type="Danger" class="btn-rounded float-end replyCancelButton" text="@L["Cancel"].Value"/>
</form>
</div>
</div>
</div>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<div class="comment-form mt-4 editForm">
<div class="clearfix p-4">
<div>
<form class="editFormClass">
<input name="commentId" value="@commentWithRepliesDto.Comment.Id" hidden/>
<input name="concurrencyStamp" value="@commentWithRepliesDto.Comment.ConcurrencyStamp" hidden/>
<div class="mb-3">
<textarea class="form-control" name="text" id="textBoxId" rows="4">@commentWithRepliesDto.Comment.Text</textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-end" type="submit" text="@L["Submit"].Value"/>
<abp-button button-type="Danger" class="btn-rounded float-end editCancelButton" text="@L["Cancel"].Value"/>
</form>
</div>
</div>
</div>
}
@foreach (var reply in commentWithRepliesDto.Replies)
{
<div class="media">
<img gravatar-email="@reply.Writer.Email" default-image="Identicon" class="d-flex me-3 rounded-circle comment-avatar" alt="User Avatar"/>
<div class="media-body">
<h5 class="comment-owner">
@(reply.Writer == null ? "" : reply.Writer.UserName)
<span>@BloggingPageHelper.ConvertDatetimeToTimeAgo(reply.CreationTime)</span>
</h5>
<p id="@reply.Id">
@reply.Text
</p>
<div class="comment-buttons">
@if (hasCommentingPermission)
{
<div class="comment-form mt-4 replyForm">
<div class="clearfix p-4">
<h3 class="mt-0">
@L["ReplyTo", commentWithRepliesDto.Comment.Writer == null ? "" : commentWithRepliesDto.Comment.Writer.UserName]
</h3>
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" type="hidden" />
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="mb-3">
<textarea class="form-control" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-end" type="submit" text="@L["Comment"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-end replyCancelButton" text="@L["Cancel"].Value" />
</form>
</div>
</div>
</div>
<a href="#" class="tag replyLink" data-relpyid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-reply" aria-hidden="true"></i> @L["Reply"]
</a>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Delete) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<div class="comment-form mt-4 editForm">
<div class="clearfix p-4">
<div>
<form class="editFormClass">
<input name="commentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<input name="concurrencyStamp" value="@commentWithRepliesDto.Comment.ConcurrencyStamp" hidden />
<div class="mb-3">
<textarea class="form-control" name="text" id="textBoxId" rows="4">@commentWithRepliesDto.Comment.Text</textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-end" type="submit" text="@L["Submit"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-end editCancelButton" text="@L["Cancel"].Value" />
</form>
</div>
</div>
</div>
<span class="seperator">|</span>
<a href="#" class="tag deleteLink" data-deleteid="@reply.Id">
<i class="fa fa-trash" aria-hidden="true"></i> @L["Delete"]
</a>
}
@foreach (var reply in commentWithRepliesDto.Replies)
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<div class="media">
<img gravatar-email="@reply.Writer.Email" default-image="Identicon" class="d-flex me-3 rounded-circle comment-avatar" alt="User Avatar" />
<div class="media-body">
<h5 class="comment-owner">
@(reply.Writer == null ? "" : reply.Writer.UserName)
<span>@BloggingPageHelper.ConvertDatetimeToTimeAgo(reply.CreationTime)</span>
</h5>
<p id="@reply.Id">
@reply.Text
</p>
<div class="comment-buttons">
@if (hasCommentingPermission)
{
<a href="#" class="tag replyLink" data-relpyid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-reply" aria-hidden="true"></i> @L["Reply"]
</a>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Delete) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<span class="seperator">|</span>
<a href="#" class="tag deleteLink" data-deleteid="@reply.Id">
<i class="fa fa-trash" aria-hidden="true"></i> @L["Delete"]
</a>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<span class="seperator">|</span>
<a href="#" class="tag updateLink" data-updateid="@reply.Id">
<i class="fa fa-pencil" aria-hidden="true"></i> @L["Edit"]
</a>
}
</div>
<span class="seperator">|</span>
<a href="#" class="tag updateLink" data-updateid="@reply.Id">
<i class="fa fa-pencil" aria-hidden="true"></i> @L["Edit"]
</a>
}
</div>
@if (hasCommentingPermission)
{
<div class="comment-form mt-4 replyForm">
<div class="clearfix bg-light py-4">
<h3 class="mt-0">
@L["ReplyTo", commentWithRepliesDto.Comment.Writer == null ? "" : commentWithRepliesDto.Comment.Writer.UserName]
</h3>
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="mb-3">
<textarea class="form-control" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-end" type="submit" text="@L["Submit"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-end replyCancelButton" text="@L["Cancel"].Value" />
</form>
</div>
</div>
@if (hasCommentingPermission)
{
<div class="comment-form mt-4 replyForm">
<div class="clearfix bg-light py-4">
<h3 class="mt-0">
@L["ReplyTo", commentWithRepliesDto.Comment.Writer == null ? "" : commentWithRepliesDto.Comment.Writer.UserName]
</h3>
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden/>
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden/>
<div class="mb-3">
<textarea class="form-control" name="text" id="textBoxId" rows="4"></textarea>
</div>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<div class="comment-form mt-4 editForm">
<div class="clearfix bg-light py-4">
<div>
<form class="editFormClass">
<input name="commentId" value="@reply.Id" hidden />
<div class="mb-3">
<textarea class="form-control" name="text" id="textBoxId" rows="4">@reply.Text</textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-end" type="submit" text="@L["Submit"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-end editCancelButton" text="@L["Cancel"].Value" />
</form>
</div>
</div>
<abp-button button-type="Primary" class="btn-rounded float-end" type="submit" text="@L["Submit"].Value"/>
<abp-button button-type="Danger" class="btn-rounded float-end replyCancelButton" text="@L["Cancel"].Value"/>
</form>
</div>
</div>
</div>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Update) || (CurrentUser.Id == commentWithRepliesDto.Comment.CreatorId))
{
<div class="comment-form mt-4 editForm">
<div class="clearfix bg-light py-4">
<div>
<form class="editFormClass">
<input name="commentId" value="@reply.Id" hidden/>
<div class="mb-3">
<textarea class="form-control" name="text" id="textBoxId" rows="4">@reply.Text</textarea>
</div>
}
<abp-button button-type="Primary" class="btn-rounded float-end" type="submit" text="@L["Submit"].Value"/>
<abp-button button-type="Danger" class="btn-rounded float-end editCancelButton" text="@L["Cancel"].Value"/>
</form>
</div>
</div>
}
</div>
</div>
}
</div>
}
@if (hasCommentingPermission)
{
<div class="comment-form mt-4" id="LeaveComment">
<div class="vs-blog-title mb-0">
<h3>@L["LeaveComment"]</h3>
</div>
<div class="clearfix bg-light py-4">
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" id="repliedCommentId" hidden />
<div class="mb-3">
<textarea class="form-control" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-end" type="submit" text="@L["Submit"].Value" />
</form>
</div>
</div>
</div>
}
else
{
<a abp-button="Primary" class="btn-rounded float-end active mt-3" href="/Account/Login?returnUrl=@System.Web.HttpUtility.UrlEncode(@Request.Path)">@L["LeaveComment"]</a>
}
<div class="hero articles">
<div class="hero content">
<h3>More from @CultureInfo.CurrentCulture.TextInfo.ToTitleCase(Model.Post.Writer.UserName)</h3>
@for (var index = 1; index < Model.PostsList.Count && index < 5; index++)
{
var post = Model.PostsList[index];
<div class="post-item">
<div class="post-type-cont">
<a href="/members/@Model.Post.Writer.UserName" class="text-decoration-none">
<img gravatar-email="@Model.Post.Writer.Email" default-image="Identicon" class="post-member-img rounded-circle d-block"/>
</a>
<span class="post-type">
<i class="fas fa-pen-nib"></i>
@L["Blog"].Value.ToUpper()
</span>
</div>
<div class="post-detail-cont">
<div class="post-info fs-12 mb-2">
<a href="/members/@Model.Post.Writer.UserName" class="text-decoration-none">
<span class="text-dark dot">@Model.Post.Writer.UserName</span>
</a>
<span class="text-dark-200">@post.CreationTime.ToString("MMMM yyyy")</span>
</div>
<h2 class="post-title mt-2">
<a asp-page="./Detail" asp-route-postUrl="@post.Url">
@post.Title
</a>
</h2>
<p class="post-desc">
<a asp-page="./Detail" asp-route-postUrl="@post.Url">
@post.Description.TruncateWithPostfix(150)
</a>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" class="readMore">@L["ReadMore"]</a>
</p>
</div>
<div class="post-img-cont">
<div class="post-list-span text-center post">
<img src="@post.CoverImage" class="box-articles">
</div>
}
</div>
</div>
}
</div>
</div>
}
</div>
}
@if (hasCommentingPermission)
{
<div class="comment-form mt-4" id="LeaveComment">
<div class="vs-blog-title mb-0">
<h3>@L["LeaveComment"]</h3>
</div>
<div class="clearfix bg-light py-4">
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden/>
<input name="repliedCommentId" id="repliedCommentId" hidden/>
<div class="mb-3">
<textarea class="form-control" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-end" type="submit" text="@L["Submit"].Value"/>
</form>
</div>
</div>
</div>
}
else
{
<a abp-button="Primary" class="btn-rounded float-end active mt-3" href="/Account/Login?returnUrl=@System.Web.HttpUtility.UrlEncode(@Request.Path)">@L["LeaveComment"]</a>
}
<div class="hero articles">
<div class="hero content">
<p class="fs-3 fw-bold text-dark">More from @CultureInfo.CurrentCulture.TextInfo.ToTitleCase(Model.Post.Writer.UserName)</p>
@for (var index = 0; index < Model.PostsList.Count && index <= 5; index++)
{
if (Model.PostsList[index].Id != Model.Post.Id)
{
var post = Model.PostsList[index];
<div class="post-item">
<div class="post-type-cont">
<a href="/members/@Model.Post.Writer.UserName" class="text-decoration-none">
<img gravatar-email="@Model.Post.Writer.Email" default-image="Identicon" class="post-member-img rounded-circle d-block"/>
</a>
<span class="post-type">
<i class="fas fa-pen-nib"></i>
@L["Blog"].Value.ToUpper()
</span>
</div>
<div class="post-detail-cont">
<div class="post-info fs-12 mb-2">
<a href="/members/@Model.Post.Writer.UserName" class="text-decoration-none">
<span class="text-dark dot">@Model.Post.Writer.UserName</span>
</a>
<span class="text-dark-200">@post.CreationTime.ToString("MMMM yyyy")</span>
</div>
<h2 class="post-title mt-2">
<a asp-page="./Detail" asp-route-postUrl="@post.Url">
@post.Title
</a>
</h2>
<p class="post-desc">
<a asp-page="./Detail" asp-route-postUrl="@post.Url">
@post.Description.TruncateWithPostfix(150)
</a>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" class="readMore">@L["ReadMore"]</a>
</p>
</div>
<div class="post-img-cont">
<div class="post-list-span text-center post">
<img src="@post.CoverImage" class="box-articles">
</div>
</div>
</div>
}
}
</div>
</div>
</div>
<div class="col-12 col-md-4 col-lg-2">
</div>
</div>
</div>
</div>
<p id="BlogFullName" name="@Model.Blog.Name" hidden></p>

6
modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Detail.cshtml.cs
View File

@ -41,6 +41,11 @@ namespace Volo.Blogging.Pages.Blog.Posts
public BlogDto Blog { get; set; }
public List<PostWithDetailsDto> PostsList { get; set; }
public IReadOnlyList<PostWithDetailsDto> LatestPosts { get; set; }
[BindProperty(SupportsGet = true)]
public string TagName { get; set; }
public DetailModel(IPostAppService postAppService, IBlogAppService blogAppService, ICommentAppService commentAppService)
{
@ -82,6 +87,7 @@ namespace Volo.Blogging.Pages.Blog.Posts
Blog = await _blogAppService.GetByShortNameAsync(BlogShortName);
Post = await _postAppService.GetForReadingAsync(new GetPostInput { BlogId = Blog.Id, Url = PostUrl });
PostsList = await _postAppService.GetListByUserIdAsync(Post.Writer.Id);
LatestPosts = (await _postAppService.GetListByBlogIdAndTagNameAsync(Blog.Id, TagName)).Items;
CommentsWithReplies = await _commentAppService.GetHierarchicalListOfPostAsync(Post.Id);
CountComments();
}

10
modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/detail.js
View File

@ -15,6 +15,12 @@
pageHeader + ' | ' + blogName + ' | ' + window.location.href
)
);
$('#FacebookShareLink').attr(
'href',
'https://www.facebook.com/sharer/sharer.php?u=' +
encodeURI(window.location.href)
);
$('#LinkedinShareLink').attr(
'href',
@ -43,6 +49,10 @@
encodeURI(pageHeader + ' | ' + blogName) +
'&'
);
$(".copy-link").click(function() {
var copiedLink = $(this);
});
};
$('div .replyForm').hide();

6
modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/blog.css
View File

@ -320,3 +320,9 @@ div.vs-blog {
text-decoration: none; }
div.vs-blog > .form-group {
margin: 0 !important; }
.last-post-title{
font-size: 0.9rem;
font-weight: 550;
text-decoration: none;
color: black;
}

5
modules/blogging/src/Volo.Blogging.Web/Pages/Members/Index.css
View File

@ -1,3 +1,6 @@
.post-desc {
overflow-wrap: break-word;
}
}
a:not(#all-posts-tab,#edit-profile-tab) {
color: unset!important;
}

Write Preview
Loading…
Cancel
Save