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

Blog module revision

pull/1718/head
Armağan Ünlü 7 years ago
parent
373fd299c3
commit
f15be4fed5
13 changed files with 657 additions and 733 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 511
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/Detail.cshtml
  2. 317
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Posts/Index.cshtml
  3. 18
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Scripts/blog.js
  4. 6
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_bootstrap-overwrite.scss
  5. 21
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_custom.scss
  6. 3
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_header.scss
  7. 108
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.css
  8. 2
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.min.css
  9. 142
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.scss
  10. 42
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_post.scss
  11. 213
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.css
  12. 2
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.min.css
  13. 5
      modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.scss

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

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

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

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

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

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

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

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

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

@ -1,23 +1,4 @@
@media (min-width: 767px) { @media (min-width: 767px) {
.box-articles { .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;
}
} }
} }

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

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

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

@ -3,60 +3,26 @@
.hero-section .hero-articles { .hero-section .hero-articles {
position: relative; position: relative;
overflow: hidden; } overflow: hidden; }
.hero-section .hero-articles .hero-content { .hero-section .hero-articles .hero-content h2 {
position: absolute; margin-top: .5rem;
left: 12%; font-size: 2em;
right: 12%; font-weight: bold; }
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 .tags .tag { .hero-section .hero-articles .tags .tag {
background: rgba(208, 208, 208, 0.3); background: rgba(208, 208, 208, 0.3);
color: #fff !important; } color: #fff !important; }
.hero-section .hero-articles .tags .tag:hover { .hero-section .hero-articles .tags .tag:hover {
background: white; background: white;
color: black !important; } color: black !important; }
.hero-section .hero-articles .article-owner { .hero-section .hero-articles .article-owner .article-infos {
text-align: center; color: black; }
position: relative; .hero-section .hero-articles .article-owner .article-infos .seperator {
z-index: 12; } margin: 0 4px;
.hero-section .hero-articles .article-owner .article-infos { color: rgba(255, 255, 255, 0.2); }
color: black; } .hero-section .hero-articles .article-owner .article-infos img.article-avatar {
.hero-section .hero-articles .article-owner .article-infos a { display: inline-block;
color: black; } border-radius: 50%; }
.hero-section .hero-articles .article-owner .article-infos .seperator { .hero-section .hero-articles .img-container img {
margin: 0 4px; width: 100%; }
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:hover .img-container::after { .hero-section .hero-articles:hover .img-container::after {
opacity: 1; } opacity: 1; }
@ -68,11 +34,16 @@
margin: 0 4px; margin: 0 4px;
color: rgba(0, 0, 0, 0.2); } color: rgba(0, 0, 0, 0.2); }
.article-owner .article-infos img.article-avatar { .article-owner .article-infos img.article-avatar {
width: 30px; width: 48px;
margin: -1px 4px 0 0; margin: -1px 4px 0 0;
display: inline-block; display: inline-block;
border-radius: 50%; } border-radius: 50%; }
.user-card h5 span {
font-weight: 300;
opacity: .5;
padding: 0 5px; }
.card-articles .card-content { .card-articles .card-content {
padding: 10px 0px 10px; } padding: 10px 0px 10px; }
.card-articles .card-content h3 { .card-articles .card-content h3 {
@ -111,19 +82,32 @@
.user-link-icons a:hover { .user-link-icons a:hover {
color: #fff; } color: #fff; }
.tags .tag { .tags {
display: inline-block; margin: 2rem 0;
padding: 2px 8px; padding: 0 0 1.25rem 0; }
background: rgba(208, 208, 208, 0.3); .tags .tag {
border-radius: 30px; display: inline-block;
margin: 0 1px 3px 0; padding: 4px 12px;
color: #b1b1b1 !important; background: rgba(208, 208, 208, 0.3);
font-size: .7em; border-radius: 4px;
line-height: 1.6em; margin: 0 2px 3px 0;
text-transform: uppercase; } color: #b1b1b1 !important;
.tags .tag:hover { font-size: .85em;
background: black; line-height: 1.6em;
color: white !important; } 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 { .popular-tags a {
display: block; display: block;

2
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/_home.min.css
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
View File

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

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

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

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

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

2
modules/blogging/src/Volo.Blogging.Web/Pages/Blog/Shared/Styles/blog.min.css
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
View File

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

Write Preview
Loading…
Cancel
Save