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
Split 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-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
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
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
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
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
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
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
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;
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
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
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
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 "home.scss";
@import "post.scss";
@import "custom.scss";
@import "custom.scss";
& >.form-group {
margin: 0 !important;
}
}

Write Preview
Loading…
Cancel
Save