imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Blog module revision

Browse Source
pull/1718/head
Armağan Ünlü 5 years ago
parent 373fd299c3
commit f15be4fed5
13 changed files with 657 additions and 733 deletions
Show Stats Download Patch File Download Diff File

511
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/Detail.cshtml
Unescape View File

@ -23,302 +23,297 @@
</abp-style-bundle>
}
<abp-input asp-for="FocusCommentId" />
<div class="vs-blog vs-blog-detail">
<abp-input asp-for="FocusCommentId" class="m-0" />
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 mx-auto">
<section class="hero-section">
<div class="hero-articles">
<div class="hero-content">
<h1 class="mb-3">
<a asp-page="./Detail" asp-route-postUrl="@Model.Post.Url" asp-route-blogShortName="@Model.BlogShortName">@Model.Post.Title</a>
</h1>
<div class="vs-blog">
<div class="row">
<div class="col-md-12 mx-auto">
<section class="hero-section">
<div class="hero-articles">
<div class="img-container" style="min-height: 480px; background: url(@Model.Post.CoverImage) center center no-repeat; background-size: cover; ">
</div>
<div class="hero-content">
<p class="tags">
@foreach (var tag in Model.Post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</p>
<h1>
<a asp-page="./Detail" asp-route-postUrl="@Model.Post.Url" asp-route-blogShortName="@Model.BlogShortName">@Model.Post.Title</a>
</h1>
</div>
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
@if (Model.Post.Writer != null)
{
<a>
<img gravatar-email="@Model.Post.Writer.Email" default-image="Identicon" class="article-avatar" />
</a>
}
<a>
@if (Model.Post.Writer != null)
{
<strong>@(Model.Post.Writer.UserName),</strong>
}
@ConvertDatetimeToTimeAgo(Model.Post.CreationTime)
</a>
<span class="vs-seperator">|</span>
<a>
<i class="fa fa-eye"></i> @L["WiewsWithCount", @Model.Post.ReadCount]
</a>
<span class="vs-seperator">|</span>
<a>
<i class="fa fa-comment"></i> @L["CommentWithCount", @Model.CommentCount]
</a>
@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="article-owner">
<div class="article-infos">
<div class="user-card mt-3 mb-4">
<div class="row">
<div class="col-auto pr-1">
@if (Model.Post.Writer != null)
{
<img gravatar-email="@Model.Post.Writer.Email" default-image="Identicon" class="article-avatar" />
}
</div>
<div class="col pl-1">
@if (Model.Post.Writer != null)
{
<h5 class="mt-2 mb-1">@(Model.Post.Writer.UserName) <span>@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>
</div>
</div>
</div>
</div>
</div>
<div class="img-container mb-3">
<img src="@Model.Post.CoverImage" />
</div>
</div>
</div>
</section>
</section>
</div>
</div>
<div class="row">
<div class="col-md-8 col-lg-8 mx-auto">
<section class="post-content">
<p>
@Html.Raw(RenderMarkdownToHtml(Model.Post.Content))
</p>
</section>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 mx-auto">
<section class="post-content">
<p>
@Html.Raw(RenderMarkdownToHtml(Model.Post.Content))
<div class="row">
<div class="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="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</div>
}
</p>
</section>
</div>
</div>
@if (Model.CommentsWithReplies.Count > 0)
{
<abp-row v-align="Start">
<abp-column size-sm="_12">
<p class="float-left"><i class="fa fa-comment"></i> @L["CommentWithCount", @Model.CommentCount]</p>
@if (hasCommentingPermission)
{
<a abp-button="Primary" class="btn-rounded float-right active" href="#LeaveComment">@L["LeaveComment"]</a>
}
else
{
<a abp-button="Primary" class="btn-rounded float-right active" href="/Account/Login?returnUrl=@Request.GetEncodedPathAndQuery()">@L["LeaveComment"]</a>
}
</abp-column>
</abp-row>
}
<div class="row">
<div class="col-md-8 mx-auto">
@if (Model.Post.Tags.Count > 0)
{
<div class="tags">
<h5>@L["TagsInThisArticle"]</h5>
@foreach (var tag in Model.Post.Tags)
<div class="comment-area">
@foreach (var commentWithRepliesDto in Model.CommentsWithReplies)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</div>
}
<div class="media">
<img gravatar-email="@commentWithRepliesDto.Comment.Writer.Email" default-image="Identicon" class="d-flex mr-3 rounded-circle comment-avatar" />
<div class="media-body">
<h5 class="comment-owner">
@(commentWithRepliesDto.Comment.Writer == null ? "" : commentWithRepliesDto.Comment.Writer.UserName)
<span>@ConvertDatetimeToTimeAgo(commentWithRepliesDto.Comment.CreationTime)</span>
</h5>
<p id="@commentWithRepliesDto.Comment.Id">
@commentWithRepliesDto.Comment.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 (Model.CommentsWithReplies.Count > 0)
{
<abp-row v-align="Start">
<abp-column size-sm="_12">
<p class="float-left"><i class="fa fa-comment"></i> @L["CommentWithCount", @Model.CommentCount]</p>
@if (hasCommentingPermission)
{
<a abp-button="Primary" class="btn-rounded float-right active" href="#LeaveComment">@L["LeaveComment"]</a>
}
else
{
<a abp-button="Primary" class="btn-rounded float-right active" href="/Account/Login?returnUrl=@Request.GetEncodedPathAndQuery()">@L["LeaveComment"]</a>
}
</abp-column>
</abp-row>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Comments.Delete))
{
<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)
{
<div class="media">
<img gravatar-email="@commentWithRepliesDto.Comment.Writer.Email" default-image="Identicon" class="d-flex mr-3 rounded-circle comment-avatar" />
<div class="media-body">
<h5 class="comment-owner">
@(commentWithRepliesDto.Comment.Writer == null ? "" : commentWithRepliesDto.Comment.Writer.UserName)
<span class="float-right">@ConvertDatetimeToTimeAgo(commentWithRepliesDto.Comment.CreationTime)</span>
</h5>
<p id="@commentWithRepliesDto.Comment.Id">
@commentWithRepliesDto.Comment.Text
</p>
<div class="comment-buttons font-75 bg-light">
@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>
@if (hasCommentingPermission)
{
<a href="#" class="tag replyLink" data-relpyid="@commentWithRepliesDto.Comment.Id">
<i class="fa fa-reply" aria-hidden="true"></i> @L["Reply"]
</a>
}
<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))
{
<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" hidden />
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Comment"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-right replyCancelButton" text="@L["Cancel"].Value" />
</form>
</div>
</div>
</div>
}
@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 class="comment-form mt-4 editForm">
<div class="clearfix p-4">
<div>
<form class="editFormClass">
<input name="commentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4">@commentWithRepliesDto.Comment.Text</textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-right editCancelButton" text="@L["Cancel"].Value" />
</form>
</div>
</div>
</div>
}
</div>
@if (hasCommentingPermission)
{
<div class="comment-form mt-4 replyForm">
<div class="clearfix bg-light p-4">
<h3 class="mt-0">
@L["ReplyTo", commentWithRepliesDto.Comment.Writer == null ? "" : commentWithRepliesDto.Comment.Writer.UserName]
@foreach (var reply in commentWithRepliesDto.Replies)
{
<div class="media">
<img gravatar-email="@reply.Writer.Email" default-image="Identicon" class="d-flex mr-3 rounded-circle comment-avatar" />
<div class="media-body">
<h5 class="comment-owner">
@(reply.Writer == null ? "" : reply.Writer.UserName)
<span>@ConvertDatetimeToTimeAgo(reply.CreationTime)</span>
</h5>
<p id="@reply.Id">
@reply.Text
</p>
<div class="comment-buttons">
</h3>
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden />
@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>
}
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Comment"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-right 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 p-4">
<div>
<form class="editFormClass">
<input name="commentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4">@commentWithRepliesDto.Comment.Text</textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-right 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 mr-3 rounded-circle comment-avatar" />
<div class="media-body">
<h5 class="comment-owner">
@(reply.Writer == null ? "" : reply.Writer.UserName)
<span class="float-right">@ConvertDatetimeToTimeAgo(reply.CreationTime)</span>
</h5>
<p id="@reply.Id">
@reply.Text
</p>
<div class="comment-buttons font-75 bg-light">
@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>
@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>
<div class="comment-form mt-4 replyForm">
<div class="clearfix bg-light 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" hidden />
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-right replyCancelButton" text="@L["Cancel"].Value" />
</form>
</div>
</div>
</div>
}
@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 class="comment-form mt-4 editForm">
<div class="clearfix bg-light p-4">
<div>
<form class="editFormClass">
<input name="commentId" value="@reply.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4">@reply.Text</textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-right editCancelButton" text="@L["Cancel"].Value" />
</form>
</div>
</div>
</div>
}
</div>
</div>
}
</div>
</div>
}
</div>
@if (hasCommentingPermission)
{
<div class="comment-form mt-4 replyForm">
<div class="clearfix bg-light 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" hidden />
<input name="repliedCommentId" value="@commentWithRepliesDto.Comment.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-right 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 p-4">
<div>
<form class="editFormClass">
<input name="commentId" value="@reply.Id" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4">@reply.Text</textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
<abp-button button-type="Danger" class="btn-rounded float-right editCancelButton" text="@L["Cancel"].Value" />
</form>
</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 p-4">
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" id="repliedCommentId" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
</div>
}
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
</form>
</div>
</div>
</div>
}
else
{
<a abp-button="Primary" class="btn-rounded float-right active mt-3" href="/Account/Login?returnUrl=@Request.GetEncodedPathAndQuery()">@L["LeaveComment"]</a>
}
</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 p-4">
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" id="repliedCommentId" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
</div>
<abp-button button-type="Primary" class="btn-rounded float-right" type="submit" text="@L["Submit"].Value" />
</form>
</div>
</div>
</div>
}
else
{
<a abp-button="Primary" class="btn-rounded float-right active mt-3" href="/Account/Login?returnUrl=@Request.GetEncodedPathAndQuery()">@L["LeaveComment"]</a>
}
</div>
</div>
</div>

317
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/Index.cshtml
Unescape View File

@ -22,205 +22,192 @@
</abp-style-bundle>
}
<div class="vs-blog">
<div class="container">
<div class="pb-3">
<div class="row">
<div class="col-md-8">
<section class="hero-section">
@for (var index = 0; index < Model.Posts.Count && index < 1; index++)
{
var post = Model.Posts[index];
<div class="hero-articles">
<div class="img-container">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">
<img src="@post.CoverImage" class="hero-article-img">
</a>
</div>
<div class="hero-content">
<p class="tags">
@foreach (var tag in post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</p>
<h2>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</h2>
<p class="article-sum">
@Html.Raw(GetShortContent(post.Content))
</p>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName" class="btn btn-primary btn-rounded">@L["ContinueReading"]</a>
</div>
@if (post.Writer != null)
{
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
<a>
<div class="vs-blog blah">
<div class="container">
<div class="pb-3">
<div class="row">
<div class="col-md-8">
<section class="hero-section">
@for (var index = 0; index < Model.Posts.Count && index < 1; index++)
{
var post = Model.Posts[index];
<div class="hero-articles">
<div class="img-container">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">
<img src="@post.CoverImage" class="hero-article-img">
</a>
</div>
<div class="hero-content pt-3">
<h2>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</h2>
<p class="article-sum">
@Html.Raw(GetShortContent(post.Content))
</p>
</div>
@if (post.Writer != null)
{
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
<div class="row">
<div class="col-auto pr-1">
<img gravatar-email="@post.Writer.Email" default-image="Identicon" class="article-avatar" />
</a>
<a>
<strong>@post.Writer.UserName</strong>, @ConvertDatetimeToTimeAgo(post.CreationTime)
</a>
<span class="vs-seperator">|</span>
<a>
</div>
<div class="col pl-1">
<h5 class="mt-2 mb-1">@post.Writer.UserName <span>@ConvertDatetimeToTimeAgo(post.CreationTime)</span></h5>
<i class="fa fa-eye"></i> @L["WiewsWithCount", post.ReadCount]
</a>
<span class="vs-seperator">|</span>
<a>
<span class="vs-seperator">|</span>
<i class="fa fa-comment"></i> @L["CommentWithCount", post.CommentCount]
</a>
</div>
</div>
</div>
</div>
}
</div>
</div>
}
</div>
<p class="tags">
@foreach (var tag in post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</p>
}
</section>
</div>
}
</section>
</div>
<div class="col-md-4">
<div class="col-md-4">
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Posts.Create))
{
<a class="btn btn-primary btn-rounded mb-3 active " asp-page="./New" asp-route-blogShortName="@Model.BlogShortName">@L["CreateANewPost"]</a>
}
@if (await Authorization.IsGrantedAsync(BloggingPermissions.Posts.Create))
{
<a class="btn btn-primary btn-rounded mb-3 active " asp-page="./New" asp-route-blogShortName="@Model.BlogShortName">@L["CreateANewPost"]</a>
}
<div class="list-group">
@for (var index = 0; index < Model.Posts.Count && index < 3; index++)
{
var post = Model.Posts[index];
<div class="list-group-item list-group-item-action flex-column align-items-start">
<section class="box-articles p-0">
<div class="row align-middle">
<div class="col-4">
<div class="img-container" style="height: 80px;">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">
<img src="@post.CoverImage" class="box-article-img">
</a>
</div>
<div class="list-group">
@for (var index = 0; index < Model.Posts.Count && index < 3; index++)
{
var post = Model.Posts[index];
<div class="list-group-item list-group-item-action flex-column align-items-start">
<section class="box-articles p-0">
<div class="row align-middle">
<div class="col-4">
<div class="img-container">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">
<img src="@post.CoverImage" class="box-article-img">
</a>
</div>
<div class="col-8 pl-0">
<h3 class="font-125">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</h3>
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">
@if (post.Writer != null)
{
<strong>@(post.Writer.UserName),</strong>
}
@ConvertDatetimeToTimeAgo(post.CreationTime)
</a>
</div>
</div>
<div class="col-8 pl-0">
<h3 class="font-125">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</h3>
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
@if (post.Writer != null)
{
<h5 class="mt-2 mb-1">@post.Writer.UserName <span>@ConvertDatetimeToTimeAgo(post.CreationTime)</span></h5>
}
<i class="fa fa-eye"></i> @L["WiewsWithCount", post.ReadCount]
<span class="vs-seperator">|</span>
<i class="fa fa-comment"></i> @L["CommentWithCount", post.CommentCount]
</div>
</div>
</div>
</div>
</section>
</div>
}
</div>
</div>
</section>
</div>
}
</div>
</div>
</div>
</div>
<div class="pb-5">
<div class="row">
<div class="col-md-8 box-articles">
@if (Model.Posts.Count > 3)
{
<div class="vs-blog-title">
<h2>@L["LastPosts"]</h2>
</div>
<div class="list-group">
@for (var index = 3; index < Model.Posts.Count; index++)
{
var post = Model.Posts[index];
var oddPost = index % 2 == 1;
<div class="pb-5">
<div class="row">
<div class="col-md-8 box-articles">
@if (Model.Posts.Count > 3)
{
<div class="vs-blog-title">
<h2>@L["LastPosts"]</h2>
</div>
<div class="list-group">
@for (var index = 3; index < Model.Posts.Count; index++)
{
var post = Model.Posts[index];
var oddPost = index % 2 == 1;
<div class="list-group-item">
<div class="row @(oddPost ? "align-middle" : "")">
<div class="col-md-4 order-md-@(oddPost ? "last" : "first")">
<div class="img-container">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">
<img src="@post.CoverImage" class="box-article-img">
</a>
</div>
<div class="list-group-item">
<div class="row @(oddPost ? "align-middle" : "")">
<div class="col-md-4 order-md-@(oddPost ? "last" : "first")">
<div class="img-container">
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">
<img src="@post.CoverImage" class="box-article-img">
</a>
</div>
<div class="col order-md-@(oddPost ? "first" : "last")">
<p class="tags">
@foreach (var tag in post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</p>
<h3>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</h3>
<p>
@Html.Raw(GetShortContent(post.Content))
</p>
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
<a>
</div>
<div class="col order-md-@(oddPost ? "first" : "last")">
<h3>
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">@post.Title</a>
</h3>
<p>
@Html.Raw(GetShortContent(post.Content))
</p>
<div class="article-owner">
<div class="article-infos">
<div class="user-card">
<div class="row">
<div class="col-auto pr-1">
<img gravatar-email="@post.Writer.Email" default-image="Identicon" class="article-avatar" />
</a>
<a>
@if (post.Writer != null)
{
<strong>@(post.Writer.UserName),</strong>
}
@ConvertDatetimeToTimeAgo(post.CreationTime)
</a>
<span class="vs-seperator">|</span>
<a>
<i class="fa fa-eye"></i> @post.ReadCount
</a>
<span class="vs-seperator">|</span>
<a>
<i class="fa fa-comment"></i> @post.CommentCount
</a>
</div>
<div class="col pl-1">
<h5 class="mt-2 mb-1">@post.Writer.UserName <span>@ConvertDatetimeToTimeAgo(post.CreationTime)</span></h5>
<i class="fa fa-eye"></i> @L["WiewsWithCount", post.ReadCount]
<span class="vs-seperator">|</span>
<i class="fa fa-comment"></i> @L["CommentWithCount", post.CommentCount]
</div>
</div>
</div>
</div>
</div>
<p class="tags">
@foreach (var tag in post.Tags)
{
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@tag.Name" class="tag">@tag.Name</a>
}
</p>
</div>
</div>
}
</div>
}
</div>
</div>
}
</div>
}
</div>
@if (Model.PopularTags.Count > 0)
{
<div class="col-md-4">
<div class="vs-blog-title">
<h2>@L["PopularTags"]</h2>
</div>
<div class="list-group small-list popular-tags">
@foreach (var popularTag in Model.PopularTags)
{
<div class="list-group-item">
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@popularTag.Name">@popularTag.Name <span>(@popularTag.UsageCount @L["Posts"])</span></a>
</div>
@if (Model.PopularTags.Count > 0)
{
<div class="col-md-4">
<div class="vs-blog-title">
<h2>@L["PopularTags"]</h2>
</div>
<div class="list-group small-list popular-tags">
@foreach (var popularTag in Model.PopularTags)
{
<div class="list-group-item">
<a asp-page="/Blog/Posts/Index" asp-route-blogShortName="@Model.BlogShortName" asp-route-tagName="@popularTag.Name">@popularTag.Name <span>(@popularTag.UsageCount @L["Posts"])</span></a>
</div>
}
</div>
}
</div>
}
</div>
</div>
}
</div>
</div>
</div>
</div>

18
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Scripts/blog.js
Unescape View File

@ -7,15 +7,15 @@
}
function handleImages() {
if ($(window).width() > 767) {
$(".box-articles .img-container").each(function () {
var squareWidth = $(this).width();
$(this).css("height", squareWidth);
});
}
else {
$(".box-articles .img-container").css("height", "auto");
}
//if ($(window).width() > 767) {
// $(".box-articles .img-container").each(function () {
// var squareWidth = $(this).width();
// $(this).css("height", squareWidth);
// });
//}
//else {
// $(".box-articles .img-container").css("height", "auto");
//}
}
function handleOwlCarousel() {

6
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_bootstrap-overwrite.scss
Unescape View File

@ -11,13 +11,13 @@ p {
h1, h2, h3, h4, h5, h6, .tab-title {
font-family: Helvetica, Arial, sans-serif;
font-weight: 700;
}
}
h1 {
font-size: 2.25em;
margin: 1.5rem 0 .75rem;
margin: 1rem 0 1.5rem;
}
h2, .tab-title {
font-size: 1.75em;
font-size: 1.5em;
margin: 1.5rem 0 .75rem;
}
h3 {

21
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_custom.scss
Unescape View File

@ -1,23 +1,4 @@
@media (min-width: 767px) {
.box-articles {
.img-container {
position: relative;
overflow: hidden;
}
.img-container img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
max-width: initial;
}
.img-container img.portrait {
width: 100%;
height: auto;
}
.box-articles {
}
}

3
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_header.scss
Unescape View File

@ -1,7 +1,4 @@
.vs-blog {
}
.vs-blog-title {
padding-bottom: 15px;
margin-bottom: 25px;

108
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.css
Unescape View File

@ -3,60 +3,26 @@
.hero-section .hero-articles {
position: relative;
overflow: hidden; }
.hero-section .hero-articles .hero-content {
position: absolute;
left: 12%;
right: 12%;
bottom: 80px;
z-index: 4;
text-align: center; }
.hero-section .hero-articles .hero-content h2 {
margin-top: 0;
font-size: 2.5em;
font-weight: bold; }
.hero-section .hero-articles .hero-content a {
color: white;
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); }
.hero-section .hero-articles .hero-content p {
color: white; }
.hero-section .hero-articles .hero-content h2 {
margin-top: .5rem;
font-size: 2em;
font-weight: bold; }
.hero-section .hero-articles .tags .tag {
background: rgba(208, 208, 208, 0.3);
color: #fff !important; }
.hero-section .hero-articles .tags .tag:hover {
background: white;
color: black !important; }
.hero-section .hero-articles .article-owner {
text-align: center;
position: relative;
z-index: 12; }
.hero-section .hero-articles .article-owner .article-infos {
color: black; }
.hero-section .hero-articles .article-owner .article-infos a {
color: black; }
.hero-section .hero-articles .article-owner .article-infos .seperator {
margin: 0 4px;
color: rgba(255, 255, 255, 0.2); }
.hero-section .hero-articles .article-owner .article-infos img.article-avatar {
width: 64px;
margin: -25px 10px 0px 0;
border: 3px solid #fff;
display: inline-block;
border-radius: 50%; }
.hero-section .hero-articles .img-container {
min-height: 320px; }
.hero-section .hero-articles .img-container img {
filter: grayscale(10%); }
.hero-section .hero-articles .img-container::after {
content: "";
display: block;
position: absolute;
z-index: 1;
bottom: 0px;
width: 100%;
top: 1% !important;
background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.75) 89%, rgba(0, 0, 0, 0.78) 93%) !important;
transition: .2s all ease-in-out;
opacity: .9; }
.hero-section .hero-articles .article-owner .article-infos {
color: black; }
.hero-section .hero-articles .article-owner .article-infos .seperator {
margin: 0 4px;
color: rgba(255, 255, 255, 0.2); }
.hero-section .hero-articles .article-owner .article-infos img.article-avatar {
display: inline-block;
border-radius: 50%; }
.hero-section .hero-articles .img-container img {
width: 100%; }
.hero-section .hero-articles:hover .img-container::after {
opacity: 1; }
@ -68,11 +34,16 @@
margin: 0 4px;
color: rgba(0, 0, 0, 0.2); }
.article-owner .article-infos img.article-avatar {
width: 30px;
width: 48px;
margin: -1px 4px 0 0;
display: inline-block;
border-radius: 50%; }
.user-card h5 span {
font-weight: 300;
opacity: .5;
padding: 0 5px; }
.card-articles .card-content {
padding: 10px 0px 10px; }
.card-articles .card-content h3 {
@ -111,19 +82,32 @@
.user-link-icons a:hover {
color: #fff; }
.tags .tag {
display: inline-block;
padding: 2px 8px;
background: rgba(208, 208, 208, 0.3);
border-radius: 30px;
margin: 0 1px 3px 0;
color: #b1b1b1 !important;
font-size: .7em;
line-height: 1.6em;
text-transform: uppercase; }
.tags .tag:hover {
background: black;
color: white !important; }
.tags {
margin: 2rem 0;
padding: 0 0 1.25rem 0; }
.tags .tag {
display: inline-block;
padding: 4px 12px;
background: rgba(208, 208, 208, 0.3);
border-radius: 4px;
margin: 0 2px 3px 0;
color: #b1b1b1 !important;
font-size: .85em;
line-height: 1.6em;
text-transform: uppercase;
transition: .25s;
text-decoration: none; }
.tags .tag:hover {
background: black;
color: white !important; }
.hero-section .tags {
margin: 1rem 0;
padding: 0 0 .5rem 0; }
.list-group-item .tags {
margin: 1rem 0 0;
padding: 0 0; }
.popular-tags a {
display: block;

2
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.min.css vendored
Unescape View File

@ -1 +1 @@
.hero-section{padding:0;}.hero-section .hero-articles{position:relative;overflow:hidden;}.hero-section .hero-articles .hero-content{position:absolute;left:12%;right:12%;bottom:80px;z-index:4;text-align:center;}.hero-section .hero-articles .hero-content h2{margin-top:0;font-size:2.5em;font-weight:bold;}.hero-section .hero-articles .hero-content a{color:#fff;text-shadow:0 0 20px rgba(0,0,0,.5);}.hero-section .hero-articles .hero-content p{color:#fff;}.hero-section .hero-articles .tags .tag{background:rgba(208,208,208,.3);color:#fff !important;}.hero-section .hero-articles .tags .tag:hover{background:#fff;color:#000 !important;}.hero-section .hero-articles .article-owner{text-align:center;position:relative;z-index:12;}.hero-section .hero-articles .article-owner .article-infos{color:#000;}.hero-section .hero-articles .article-owner .article-infos a{color:#000;}.hero-section .hero-articles .article-owner .article-infos .seperator{margin:0 4px;color:rgba(255,255,255,.2);}.hero-section .hero-articles .article-owner .article-infos img.article-avatar{width:64px;margin:-25px 10px 0 0;border:3px solid #fff;display:inline-block;border-radius:50%;}.hero-section .hero-articles .img-container{min-height:320px;}.hero-section .hero-articles .img-container img{filter:grayscale(10%);}.hero-section .hero-articles .img-container::after{content:"";display:block;position:absolute;z-index:1;bottom:0;width:100%;top:1% !important;background:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.75) 89%,rgba(0,0,0,.78) 93%) !important;transition:.2s all ease-in-out;opacity:.9;}.hero-section .hero-articles:hover .img-container::after{opacity:1;}.article-owner .article-infos{color:#000;}.article-owner .article-infos a{color:rgba(0,0,0,.6);}.article-owner .article-infos .seperator{margin:0 4px;color:rgba(0,0,0,.2);}.article-owner .article-infos img.article-avatar{width:30px;margin:-1px 4px 0 0;display:inline-block;border-radius:50%;}.card-articles .card-content{padding:10px 0 10px;}.card-articles .card-content h3{margin:10px 0;}.card-articles .card-content h3 a{font-weight:700;}.card-articles .article-owner{text-align:left;}.card-articles .article-owner .article-infos{color:#000;}.card-articles .article-owner .article-infos a{color:rgba(0,0,0,.6);}.card-articles .article-owner .article-infos .seperator{margin:0 4px;color:rgba(0,0,0,.2);}.card-articles .article-owner .article-infos img.article-avatar{width:30px;margin:-1px 4px 0 0;display:inline-block;border-radius:50%;}.article-owner{font-size:.85em;}.user-link-icons{position:absolute;right:18px;top:15px;z-index:3;}.user-link-icons a{display:inline-block;color:#eee;margin-left:12px;font-size:1.25em;}.user-link-icons a:hover{color:#fff;}.tags .tag{display:inline-block;padding:2px 8px;background:rgba(208,208,208,.3);border-radius:30px;margin:0 1px 3px 0;color:#b1b1b1 !important;font-size:.7em;line-height:1.6em;text-transform:uppercase;}.tags .tag:hover{background:#000;color:#fff !important;}.popular-tags a{display:block;font-size:.9em;}.popular-tags a span{float:right;opacity:.3;font-size:.9em;}.img-container{position:relative;overflow:hidden;border-radius:4px;background:#dcdcdc;}
.hero-section{padding:0;}.hero-section .hero-articles{position:relative;overflow:hidden;}.hero-section .hero-articles .hero-content h2{margin-top:.5rem;font-size:2em;font-weight:bold;}.hero-section .hero-articles .tags .tag{background:rgba(208,208,208,.3);color:#fff !important;}.hero-section .hero-articles .tags .tag:hover{background:#fff;color:#000 !important;}.hero-section .hero-articles .article-owner .article-infos{color:#000;}.hero-section .hero-articles .article-owner .article-infos .seperator{margin:0 4px;color:rgba(255,255,255,.2);}.hero-section .hero-articles .article-owner .article-infos img.article-avatar{display:inline-block;border-radius:50%;}.hero-section .hero-articles .img-container img{width:100%;}.hero-section .hero-articles:hover .img-container::after{opacity:1;}.article-owner .article-infos{color:#000;}.article-owner .article-infos a{color:rgba(0,0,0,.6);}.article-owner .article-infos .seperator{margin:0 4px;color:rgba(0,0,0,.2);}.article-owner .article-infos img.article-avatar{width:48px;margin:-1px 4px 0 0;display:inline-block;border-radius:50%;}.user-card h5 span{font-weight:300;opacity:.5;padding:0 5px;}.card-articles .card-content{padding:10px 0 10px;}.card-articles .card-content h3{margin:10px 0;}.card-articles .card-content h3 a{font-weight:700;}.card-articles .article-owner{text-align:left;}.card-articles .article-owner .article-infos{color:#000;}.card-articles .article-owner .article-infos a{color:rgba(0,0,0,.6);}.card-articles .article-owner .article-infos .seperator{margin:0 4px;color:rgba(0,0,0,.2);}.card-articles .article-owner .article-infos img.article-avatar{width:30px;margin:-1px 4px 0 0;display:inline-block;border-radius:50%;}.article-owner{font-size:.85em;}.user-link-icons{position:absolute;right:18px;top:15px;z-index:3;}.user-link-icons a{display:inline-block;color:#eee;margin-left:12px;font-size:1.25em;}.user-link-icons a:hover{color:#fff;}.tags{margin:2rem 0;padding:0 0 1.25rem 0;}.tags .tag{display:inline-block;padding:4px 12px;background:rgba(208,208,208,.3);border-radius:4px;margin:0 2px 3px 0;color:#b1b1b1 !important;font-size:.85em;line-height:1.6em;text-transform:uppercase;transition:.25s;text-decoration:none;}.tags .tag:hover{background:#000;color:#fff !important;}.hero-section .tags{margin:1rem 0;padding:0 0 .5rem 0;}.list-group-item .tags{margin:1rem 0 0;padding:0 0;}.popular-tags a{display:block;font-size:.9em;}.popular-tags a span{float:right;opacity:.3;font-size:.9em;}.img-container{position:relative;overflow:hidden;border-radius:4px;background:#dcdcdc;}

142
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.scss
Unescape View File

@ -5,28 +5,12 @@
position: relative;
overflow: hidden;
.hero-content {
position: absolute;
left: 12%;
right: 12%;
bottom: 80px;
z-index: 4;
text-align: center;
.hero-content {
h2 {
margin-top: 0;
font-size: 2.5em;
margin-top: .5rem;
font-size: 2em;
font-weight: bold;
}
a {
color: white;
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}
p {
color: white;
}
}
.tags {
@ -41,52 +25,27 @@
}
}
.article-owner {
text-align: center;
position: relative;
z-index: 12;
.article-owner {
.article-infos {
color: black;
color: black;
a {
color: black;
}
.seperator {
margin: 0 4px;
color: rgba(255, 255, 255, 0.2);
}
img.article-avatar {
width: 64px;
margin: -25px 10px 0px 0;
border: 3px solid #fff;
img.article-avatar {
display: inline-block;
border-radius: 50%;
}
}
}
.img-container {
min-height: 320px;
.img-container {
img {
filter: grayscale(10%);
}
&::after {
content: "";
display: block;
position: absolute;
z-index: 1;
bottom: 0px;
width: 100%;
top: 1% !important;
background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.75) 89%, rgba(0, 0, 0, 0.78) 93%) !important;
transition: .2s all ease-in-out;
opacity: .9;
}
}
}
&:hover {
@ -97,61 +56,78 @@
}
}
}
}
}
.article-owner {
.article-owner {
.article-infos {
color: #000;
a {
color: rgba(0, 0, 0, 0.6);
}
.seperator {
margin: 0 4px;
color: rgba(0, 0, 0, 0.2);
}
img.article-avatar {
width: 30px;
img.article-avatar {
width: 48px;
margin: -1px 4px 0 0;
display: inline-block;
border-radius: 50%;
}
}
}
}
.card-articles {
.card-content
{
.user-card {
h5 {
span {
font-weight: 300;
opacity: .5;
padding: 0 5px;
}
}
}
.card-articles {
.card-content {
padding: 10px 0px 10px;
h3 {
margin: 10px 0;
a {
font-weight: 700;
font-weight: 700;
}
}
}
.article-owner {
text-align: left;
.article-owner {
text-align: left;
.article-infos {
color: #000;
a {
color: rgba(0, 0, 0, 0.6);
}
.seperator {
margin: 0 4px;
color: rgba(0, 0, 0, 0.2);
}
img.article-avatar {
img.article-avatar {
width: 30px;
margin: -1px 4px 0 0;
display: inline-block;
border-radius: 50%;
}
}
}
}
}
.article-owner {
.article-owner {
font-size: .85em;
}
@ -160,11 +136,13 @@
right: 18px;
top: 15px;
z-index: 3;
a {
a {
display: inline-block;
color: #eee;
margin-left: 12px;
font-size: 1.25em;
&:hover {
color: #fff;
}
@ -172,16 +150,21 @@
}
.tags {
margin: 2rem 0;
padding: 0 0 1.25rem 0;
.tag {
display: inline-block;
padding: 2px 8px;
padding: 4px 12px;
background: rgba(208, 208, 208, 0.3);
border-radius: 30px;
margin: 0 1px 3px 0;
border-radius: 4px;
margin: 0 2px 3px 0;
color: #b1b1b1 !important;
font-size: .7em;
font-size: .85em;
line-height: 1.6em;
text-transform: uppercase;
transition: .25s;
text-decoration: none;
&:hover {
background: black;
@ -189,6 +172,18 @@
}
}
}
.hero-section {
.tags {
margin: 1rem 0;
padding: 0 0 .5rem 0;
}
}
.list-group-item {
.tags {
margin: 1rem 0 0;
padding: 0 0;
}
}
.popular-tags {
a {
display: block;
@ -206,7 +201,6 @@
.img-container {
position: relative;
overflow: hidden;
border-radius: 4px;
background: gainsboro;
}
border-radius: 4px;
background: gainsboro;
}

42
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_post.scss
Unescape View File

@ -41,41 +41,48 @@
}
}
.comment-avatar {
max-width: 64px;
}
.answer-avatar {
max-width: 48px;
}
.media {
font-size: .95em;
.media {
font-size: .95em;
}
}
.comment-area {
background: #f5f5f5;
margin: 1.5rem 0;
padding: 10px;
.comment-owner {
margin-bottom: 2px;
margin-bottom: 4px;
margin-top: 8px;
span {
font-weight: 300;
color: #999;
font-size: .8em;
opacity: .5;
padding: 0 5px;
}
}
.media {
background: #fff;
margin: 1px;
border-radius: 4px;
}
> .media {
padding: 30px 0;
padding: 30px;
border-bottom: 1px solid #f1f1f1;
.media {
padding: 20px 0;
padding: 20px 0px 0px;
}
}
.comment-buttons {
padding: 4px 8px;
.comment-buttons {
padding: 4px 0;
font-size: .96em;
.seperator {
color: #ddd;
@ -94,10 +101,13 @@
background: #999;
}
}
a {
opacity: .5;
opacity: .65;
margin-right: 10px;
&:hover {
opacity: .75;
opacity: 1;
}
}
}
@ -111,6 +121,6 @@
}
.answer-avatar {
width: 48px;
width: 64px;
}
}

213
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.css
Unescape View File

@ -16,9 +16,9 @@
font-weight: 700; }
div.vs-blog h1 {
font-size: 2.25em;
margin: 1.5rem 0 .75rem; }
margin: 1rem 0 1.5rem; }
div.vs-blog h2, div.vs-blog .tab-title {
font-size: 1.75em;
font-size: 1.5em;
margin: 1.5rem 0 .75rem; }
div.vs-blog h3 {
font-size: 1.5em;
@ -90,60 +90,26 @@
div.vs-blog .hero-section .hero-articles {
position: relative;
overflow: hidden; }
div.vs-blog .hero-section .hero-articles .hero-content {
position: absolute;
left: 12%;
right: 12%;
bottom: 80px;
z-index: 4;
text-align: center; }
div.vs-blog .hero-section .hero-articles .hero-content h2 {
margin-top: 0;
font-size: 2.5em;
font-weight: bold; }
div.vs-blog .hero-section .hero-articles .hero-content a {
color: white;
text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); }
div.vs-blog .hero-section .hero-articles .hero-content p {
color: white; }
div.vs-blog .hero-section .hero-articles .hero-content h2 {
margin-top: .5rem;
font-size: 2em;
font-weight: bold; }
div.vs-blog .hero-section .hero-articles .tags .tag {
background: rgba(208, 208, 208, 0.3);
color: #fff !important; }
div.vs-blog .hero-section .hero-articles .tags .tag:hover {
background: white;
color: black !important; }
div.vs-blog .hero-section .hero-articles .article-owner {
text-align: center;
position: relative;
z-index: 12; }
div.vs-blog .hero-section .hero-articles .article-owner .article-infos {
color: black; }
div.vs-blog .hero-section .hero-articles .article-owner .article-infos a {
color: black; }
div.vs-blog .hero-section .hero-articles .article-owner .article-infos .seperator {
margin: 0 4px;
color: rgba(255, 255, 255, 0.2); }
div.vs-blog .hero-section .hero-articles .article-owner .article-infos img.article-avatar {
width: 64px;
margin: -25px 10px 0px 0;
border: 3px solid #fff;
display: inline-block;
border-radius: 50%; }
div.vs-blog .hero-section .hero-articles .img-container {
min-height: 320px; }
div.vs-blog .hero-section .hero-articles .img-container img {
filter: grayscale(10%); }
div.vs-blog .hero-section .hero-articles .img-container::after {
content: "";
display: block;
position: absolute;
z-index: 1;
bottom: 0px;
width: 100%;
top: 1% !important;
background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.75) 89%, rgba(0, 0, 0, 0.78) 93%) !important;
transition: .2s all ease-in-out;
opacity: .9; }
div.vs-blog .hero-section .hero-articles .article-owner .article-infos {
color: black; }
div.vs-blog .hero-section .hero-articles .article-owner .article-infos .seperator {
margin: 0 4px;
color: rgba(255, 255, 255, 0.2); }
div.vs-blog .hero-section .hero-articles .article-owner .article-infos img.article-avatar {
display: inline-block;
border-radius: 50%; }
div.vs-blog .hero-section .hero-articles .img-container img {
width: 100%; }
div.vs-blog .hero-section .hero-articles:hover .img-container::after {
opacity: 1; }
div.vs-blog .article-owner .article-infos {
@ -154,10 +120,14 @@
margin: 0 4px;
color: rgba(0, 0, 0, 0.2); }
div.vs-blog .article-owner .article-infos img.article-avatar {
width: 30px;
width: 48px;
margin: -1px 4px 0 0;
display: inline-block;
border-radius: 50%; }
div.vs-blog .user-card h5 span {
font-weight: 300;
opacity: .5;
padding: 0 5px; }
div.vs-blog .card-articles .card-content {
padding: 10px 0px 10px; }
div.vs-blog .card-articles .card-content h3 {
@ -192,19 +162,30 @@
font-size: 1.25em; }
div.vs-blog .user-link-icons a:hover {
color: #fff; }
div.vs-blog .tags .tag {
display: inline-block;
padding: 2px 8px;
background: rgba(208, 208, 208, 0.3);
border-radius: 30px;
margin: 0 1px 3px 0;
color: #b1b1b1 !important;
font-size: .7em;
line-height: 1.6em;
text-transform: uppercase; }
div.vs-blog .tags .tag:hover {
background: black;
color: white !important; }
div.vs-blog .tags {
margin: 2rem 0;
padding: 0 0 1.25rem 0; }
div.vs-blog .tags .tag {
display: inline-block;
padding: 4px 12px;
background: rgba(208, 208, 208, 0.3);
border-radius: 4px;
margin: 0 2px 3px 0;
color: #b1b1b1 !important;
font-size: .85em;
line-height: 1.6em;
text-transform: uppercase;
transition: .25s;
text-decoration: none; }
div.vs-blog .tags .tag:hover {
background: black;
color: white !important; }
div.vs-blog .hero-section .tags {
margin: 1rem 0;
padding: 0 0 .5rem 0; }
div.vs-blog .list-group-item .tags {
margin: 1rem 0 0;
padding: 0 0; }
div.vs-blog .popular-tags a {
display: block;
font-size: .9em; }
@ -248,63 +229,55 @@
div.vs-blog .post-detail .post-content .lead {
font-size: 1.125em;
color: #111; }
div.vs-blog .comment-avatar {
max-width: 64px; }
div.vs-blog .answer-avatar {
max-width: 48px; }
div.vs-blog .media {
font-size: .95em; }
div.vs-blog .media .media {
font-size: .95em; }
div.vs-blog .comment-area .comment-owner {
margin-bottom: 2px; }
div.vs-blog .comment-area .comment-owner span {
font-weight: 300;
color: #999;
font-size: .8em; }
div.vs-blog .comment-area > .media {
padding: 30px 0;
border-bottom: 1px solid #f1f1f1; }
div.vs-blog .comment-area > .media .media {
padding: 20px 0; }
div.vs-blog .comment-area .comment-buttons {
padding: 4px 8px; }
div.vs-blog .comment-area .comment-buttons .seperator {
color: #ddd;
margin: 0 8px; }
div.vs-blog .comment-area .comment-buttons .count {
color: #fff;
background: #ddd;
margin-left: 5px;
padding: 1px 3px;
font-size: 10px;
border-radius: 3px; }
div.vs-blog .comment-area .comment-buttons .count.count-up {
background: #999; }
div.vs-blog .comment-area .comment-buttons a {
opacity: .5; }
div.vs-blog .comment-area .comment-buttons a:hover {
opacity: .75; }
div.vs-blog .comment-area p {
margin-bottom: 6px; }
div.vs-blog .comment-area .comment-avatar {
width: 64px; }
div.vs-blog .comment-area .answer-avatar {
width: 48px; }
@media (min-width: 767px) {
div.vs-blog .box-articles .img-container {
position: relative;
overflow: hidden; }
div.vs-blog .box-articles .img-container img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: initial; }
div.vs-blog .box-articles .img-container img.portrait {
width: 100%;
height: auto; } }
div.vs-blog .comment-area {
background: #f5f5f5;
margin: 1.5rem 0;
padding: 10px; }
div.vs-blog .comment-area .comment-owner {
margin-bottom: 4px;
margin-top: 8px; }
div.vs-blog .comment-area .comment-owner span {
font-weight: 300;
opacity: .5;
padding: 0 5px; }
div.vs-blog .comment-area .media {
background: #fff;
margin: 1px;
border-radius: 4px; }
div.vs-blog .comment-area > .media {
padding: 30px;
border-bottom: 1px solid #f1f1f1; }
div.vs-blog .comment-area > .media .media {
padding: 20px 0px 0px; }
div.vs-blog .comment-area .comment-buttons {
padding: 4px 0;
font-size: .96em; }
div.vs-blog .comment-area .comment-buttons .seperator {
color: #ddd;
margin: 0 8px; }
div.vs-blog .comment-area .comment-buttons .count {
color: #fff;
background: #ddd;
margin-left: 5px;
padding: 1px 3px;
font-size: 10px;
border-radius: 3px; }
div.vs-blog .comment-area .comment-buttons .count.count-up {
background: #999; }
div.vs-blog .comment-area .comment-buttons a {
opacity: .65;
margin-right: 10px; }
div.vs-blog .comment-area .comment-buttons a:hover {
opacity: 1; }
div.vs-blog .comment-area p {
margin-bottom: 6px; }
div.vs-blog .comment-area .comment-avatar {
width: 64px; }
div.vs-blog .comment-area .answer-avatar {
width: 64px; }
div.vs-blog > .form-group {
margin: 0 !important; }

2
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.min.css vendored
View File

File diff suppressed because one or more lines are too long

5
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.scss
Unescape View File

@ -8,6 +8,9 @@ div.vs-blog {
@import "header.scss";
@import "home.scss";
@import "post.scss";
@import "custom.scss";
@import "custom.scss";
& >.form-group {
margin: 0 !important;
}
}

Write Preview
Loading…
Cancel
Save