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

Blog update 

Volo.Blog enhancements (frontend) #1328
pull/3173/head
Armağan Ünlü 6 years ago
parent
ff723ebf84
commit
81bc9c15e6
11 changed files with 154 additions and 131 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. 25
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Detail.cshtml
  2. 88
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Edit.cshtml
  3. 2
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Index.cshtml
  4. 3
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Index.scss
  5. 92
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/New.cshtml
  6. 23
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/_bootstrap-overwrite.scss
  7. 17
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/_home.scss
  8. 27
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/blog.css
  9. 2
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/blog.min.css
  10. 2
      modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/blog.scss
  11. 4
      modules/blogging/src/Volo.Blogging.Web/compilerconfig.json

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

@ -27,7 +27,7 @@
<abp-input asp-for="FocusCommentId" class="m-0" />
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 mx-auto">
<div class="col-10 col-md-8 col-lg-7 mx-auto">
<section class="hero-section">
<div class="hero-articles">
<div class="hero-content">
@ -86,7 +86,7 @@
</div>
<div class="row">
<div class="col-md-8 col-lg-8 mx-auto">
<div class="col-10 col-md-8 col-lg-7 mx-auto">
<section class="post-content">
<p>
@Html.Raw(RenderMarkdownToHtml(Model.Post.Content))
@ -96,8 +96,8 @@
</div>
<div class="row">
<div class="col-md-8 col-lg-8 mx-auto">
<hr />
<div class="col-10 col-md-8 col-lg-7 mx-auto">
<hr />
<div class="mb-2 mt-1">
@(L["ShareOn"].Value + " :")
<a href="#" target="_blank" class="mr-2" id="TwitterShareLink" title="Twitter">
@ -121,7 +121,6 @@
</div>
}
@if (Model.CommentsWithReplies.Count > 0)
{
<abp-row v-align="Start">
@ -191,7 +190,7 @@
<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>
<textarea class="form-control" 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" />
@ -208,7 +207,7 @@
<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>
<textarea class="form-control" 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" />
@ -258,7 +257,7 @@
@if (hasCommentingPermission)
{
<div class="comment-form mt-4 replyForm">
<div class="clearfix bg-light p-4">
<div class="clearfix bg-light py-4">
<h3 class="mt-0">
@L["ReplyTo", commentWithRepliesDto.Comment.Writer == null ? "" : commentWithRepliesDto.Comment.Writer.UserName]
</h3>
@ -267,7 +266,7 @@
<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>
<textarea class="form-control" 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" />
@ -279,12 +278,12 @@
@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 class="clearfix bg-light py-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>
<textarea class="form-control" 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" />
@ -308,13 +307,13 @@
<div class="vs-blog-title mb-0">
<h3>@L["LeaveComment"]</h3>
</div>
<div class="clearfix bg-light p-4">
<div class="clearfix bg-light py-4">
<div>
<form method="post">
<input name="postId" value="@Model.Post.Id" hidden />
<input name="repliedCommentId" id="repliedCommentId" hidden />
<div class="form-group">
<textarea class="form-control no-border" name="text" id="textBoxId" rows="4"></textarea>
<textarea class="form-control" 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>

88
modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Edit.cshtml
View File

@ -17,55 +17,63 @@
<abp-script type="@typeof(TuiEditorScriptContributor)" />
<abp-script src="/Pages/Blogs/Posts/edit.js" />
</abp-script-bundle>
}
}
<div id="edit-post-container">
<form method="post" id="edit-post-form">
<abp-input asp-for="Post.Title" auto-focus="true" />
<abp-input asp-for="Post.Url" />
<abp-input asp-for="Post.CoverImage" />
<div class="container py-5">
<div class="row">
<div class="col-10 col-md-8 col-lg-7 mx-auto">
<div class="card">
<div class="card-body">
<form method="post" id="edit-post-form">
<abp-input asp-for="Post.Title" auto-focus="true" />
<abp-input asp-for="Post.Url" />
<abp-input asp-for="Post.CoverImage" />
<abp-row>
<abp-column size-sm="_9">
<div class="form-group">
<label for="CoverImageFile">@L["CoverImage"]</label>
<input class="form-control" type="file" id="CoverImageFile" />
</div>
</abp-column>
<abp-column size-sm="_3">
<img id="CoverImage" src="@Model.Post.CoverImage" height="80" width="160" />
</abp-column>
</abp-row>
<abp-row>
<abp-column size-sm="_9">
<div class="form-group">
<label for="CoverImageFile">@L["CoverImage"]</label>
<input class="form-control" type="file" id="CoverImageFile" />
</div>
</abp-column>
<abp-column size-sm="_3">
<img id="CoverImage" src="@Model.Post.CoverImage" height="80" width="160" />
</abp-column>
</abp-row>
<abp-input asp-for="Post.Tags" />
<abp-input asp-for="Post.BlogId" />
<abp-input asp-for="Post.Id" />
<abp-input asp-for="Post.Content" />
<abp-input asp-for="Post.Tags" />
<abp-input asp-for="Post.BlogId" />
<abp-input asp-for="Post.Id" />
<abp-input asp-for="Post.Content" />
<div class="form-group">
<div class="edit-post-editor">
<div class="gradient-background-animation loading-cover"></div>
</div>
</div>
<div class="form-group">
<div class="edit-post-editor">
<div class="gradient-background-animation loading-cover"></div>
</div>
</div>
<div class="actions d-flex">
<div class="text-muted editor-info d-none d-lg-block mr-auto">
<div class="actions d-flex">
<div class="text-muted editor-info d-none d-lg-block mr-auto">
<div>
<svg class="markdown-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path>
</svg> <small>@L["MarkdownSupported"] </small>
</div>
<div>
<svg class="markdown-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path>
</svg> <small>@L["MarkdownSupported"] </small>
</div>
<div><small><i class="fa fa-copy"></i> @L["FileUploadInfo"].Value</small></div>
<div><small><i class="fa fa-copy"></i> @L["FileUploadInfo"].Value</small></div>
</div>
<div class="mt-3 d-flex flex-row-reverse">
<abp-button button-type="Primary" type="submit" form="edit-post-form" text="@L["Submit"].Value" icon="check" />
</div>
<div class="mt-3 d-flex flex-row-reverse">
<abp-button button-type="Primary" type="submit" form="edit-post-form" text="@L["Submit"].Value" icon="check" />
<a asp-page="/Blog/Posts/Detail" asp-route-postUrl="@Model.Post.Url" asp-route-blogShortName="@Model.BlogShortName" class="btn btn-default mr-2"><span>@L["Cancel"]</span></a>
<a asp-page="/Blog/Posts/Detail" asp-route-postUrl="@Model.Post.Url" asp-route-blogShortName="@Model.BlogShortName" class="btn btn-default mr-2"><span>@L["Cancel"]</span></a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</form>
</div>
</div>

2
modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Index.cshtml
View File

@ -43,6 +43,7 @@
</h2>
<p class="article-sum">
@Html.Raw(GetShortContent(post.Content))
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">Continue Reading</a>
</p>
</div>
@if (post.Writer != null)
@ -156,6 +157,7 @@
</h3>
<p>
@Html.Raw(GetShortContent(post.Content))
<a asp-page="./Detail" asp-route-postUrl="@post.Url" asp-route-blogShortName="@Model.BlogShortName">Continue Reading</a>
</p>
<div class="article-owner">
<div class="article-infos">

3
modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Index.scss
View File

@ -4,7 +4,6 @@
min-height: 480px;
background: center center no-repeat;
background-size: cover;
}
}
}
}

92
modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/New.cshtml
View File

@ -18,59 +18,63 @@
<abp-script src="/Pages/Blogs/Posts/new.js" />
</abp-script-bundle>
}
<main>
<section>
<div class="container">
<div id="qa-new-post-container">
<form method="post" id="new-post-form">
<abp-input asp-for="Post.BlogId" />
<abp-input asp-for="Post.Title" auto-focus="true" />
<abp-input asp-for="Post.Url" />
<abp-input asp-for="Post.CoverImage" />
<div id="qa-new-post-container">
<div class="container py-5">
<div class="row">
<div class="col-10 col-md-8 col-lg-7 mx-auto">
<div class="card">
<div class="card-body">
<form method="post" id="new-post-form">
<abp-input asp-for="Post.BlogId" />
<abp-input asp-for="Post.Title" auto-focus="true" />
<abp-input asp-for="Post.Url" />
<abp-input asp-for="Post.CoverImage" />
<abp-row>
<abp-column size-sm="_9">
<div class="form-group">
<label for="CoverImageFile">@L["CoverImage"]</label>
<input class="form-control" type="file" id="CoverImageFile" />
</div>
</abp-column>
<abp-column size-sm="_3">
<img id="CoverImage" src="@Model.Post.CoverImage" height="80" width="160" style="display:none" />
</abp-column>
</abp-row>
<abp-row>
<abp-column size-sm="_9">
<div class="form-group">
<label for="CoverImageFile">@L["CoverImage"]</label>
<input class="form-control" type="file" id="CoverImageFile" />
</div>
</abp-column>
<abp-column size-sm="_3">
<img id="CoverImage" src="@Model.Post.CoverImage" height="80" width="160" style="display:none" />
</abp-column>
</abp-row>
<abp-input asp-for="Post.Content" />
<abp-input asp-for="Post.Tags" />
<abp-input asp-for="Post.Content" />
<abp-input asp-for="Post.Tags" />
<div class="form-group">
<div class="new-post-editor">
<div class="gradient-background-animation loading-cover"></div>
</div>
</div>
<div class="form-group">
<div class="new-post-editor">
<div class="gradient-background-animation loading-cover"></div>
</div>
</div>
<div class="actions d-flex">
<div class="text-muted editor-info d-none d-lg-block mr-auto">
<div class="actions d-flex">
<div class="text-muted editor-info d-none d-lg-block mr-auto">
<div>
<svg class="markdown-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path>
</svg> <small>@L["MarkdownSupported"] </small>
</div>
<div>
<svg class="markdown-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd" d="M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15v-7.7C16 3.52 15.48 3 14.85 3zM9 11H7V8L5.5 9.92 4 8v3H2V5h2l1.5 2L7 5h2v6zm2.99.5L9.5 8H11V5h2v3h1.5l-2.51 3.5z"></path>
</svg> <small>@L["MarkdownSupported"] </small>
</div>
<div><small><i class="fa fa-copy"></i> @L["FileUploadInfo"].Value</small></div>
<div><small><i class="fa fa-copy"></i> @L["FileUploadInfo"].Value</small></div>
</div>
<div class="mt-3 d-flex flex-row-reverse">
<abp-button button-type="Primary" type="submit" form="new-post-form" text="@L["Submit"].Value" icon="check" />
</div>
<div class="mt-3 d-flex flex-row-reverse">
<abp-button button-type="Primary" type="submit" form="new-post-form" text="@L["Submit"].Value" icon="check" />
<a asp-page="./Index" class="btn btn-default mr-2"><span>@L["Cancel"]</span></a>
</div>
<a asp-page="./Index" class="btn btn-default mr-2"><span>@L["Cancel"]</span></a>
</div>
</div>
</form>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
</div>
</div>

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

@ -13,19 +13,20 @@ h1, h2, h3, h4, h5, h6, .tab-title {
font-weight: 700;
}
h1 {
font-size: 2.25em;
font-size: 2em;
margin: 1rem 0 1.5rem;
line-height: 1.25;
}
h2, .tab-title {
font-size: 1.5em;
margin: 1.5rem 0 .75rem;
}
h3 {
font-size: 1.5em;
font-size: 1.25em;
margin: 1.5rem 0 .75rem;
}
h4 {
font-size: 1.25em;
font-size: 1.125em;
margin: 1.5rem 0 .75rem;
}
h5 {
@ -40,9 +41,10 @@ h6 {
}
img {
max-width: 100%;
}
input, select, textarea, .form-control , .btn {
}
input, select, textarea, .form-control, .btn {
border-radius: 0;
border-width: 1px 1px 2px 1px;
}
.navbar-toggler {
background: aqua;
@ -58,7 +60,7 @@ input, select, textarea, .form-control , .btn {
.list-group-item {
position: relative;
display: block;
padding: 0 0 20px 0;
padding: 30px 0 30px;
background: none;
border-radius: 0;
border: 0;
@ -69,7 +71,7 @@ input, select, textarea, .form-control , .btn {
& + .list-group-item {
border-top: 1px solid #f5f5f5;
padding: 20px 0;
padding: 45px 0 30px;
}
h3 {
@ -79,8 +81,9 @@ input, select, textarea, .form-control , .btn {
&.small-list {
.list-group-item {
padding: 10px 0;
& + .list-group-item {
padding: 10px 0;
& + .list-group-item {
padding: 10px 0;
}
}
@ -100,6 +103,6 @@ input, select, textarea, .form-control , .btn {
font-size: 1em;
}
.font-125 {
font-size: 1.25em;
font-size: 1.125em;
}

17
modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/_home.scss
View File

@ -5,11 +5,12 @@
position: relative;
overflow: hidden;
.hero-content {
.hero-content {
h2 {
margin-top: .5rem;
font-size: 2em;
font-size: 1.75em;
font-weight: bold;
line-height: 1.25;
}
}
@ -25,9 +26,9 @@
}
}
.article-owner {
.article-owner {
.article-infos {
color: black;
color: black;
.seperator {
@ -35,17 +36,17 @@
color: rgba(255, 255, 255, 0.2);
}
img.article-avatar {
img.article-avatar {
display: inline-block;
border-radius: 50%;
}
}
}
.img-container {
.img-container {
img {
width: 100%;
}
}
}
&:hover {
@ -128,7 +129,7 @@
}
.article-owner {
font-size: .85em;
font-size: .72em;
}
.user-link-icons {

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

@ -3,7 +3,7 @@
background: white;
padding: 30px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 14px; }
font-size: 16px; }
div.vs-blog a, div.vs-blog a:hover {
text-decoration: none;
color: #000000; }
@ -15,16 +15,17 @@
font-family: Helvetica, Arial, sans-serif;
font-weight: 700; }
div.vs-blog h1 {
font-size: 2.25em;
margin: 1rem 0 1.5rem; }
font-size: 2em;
margin: 1rem 0 1.5rem;
line-height: 1.25; }
div.vs-blog h2, div.vs-blog .tab-title {
font-size: 1.5em;
margin: 1.5rem 0 .75rem; }
div.vs-blog h3 {
font-size: 1.5em;
font-size: 1.25em;
margin: 1.5rem 0 .75rem; }
div.vs-blog h4 {
font-size: 1.25em;
font-size: 1.125em;
margin: 1.5rem 0 .75rem; }
div.vs-blog h5 {
font-size: 1em; }
@ -36,7 +37,8 @@
div.vs-blog img {
max-width: 100%; }
div.vs-blog input, div.vs-blog select, div.vs-blog textarea, div.vs-blog .form-control, div.vs-blog .btn {
border-radius: 0; }
border-radius: 0;
border-width: 1px 1px 2px 1px; }
div.vs-blog .navbar-toggler {
background: aqua; }
div.vs-blog .no-border {
@ -46,7 +48,7 @@
div.vs-blog .list-group .list-group-item {
position: relative;
display: block;
padding: 0 0 20px 0;
padding: 30px 0 30px;
background: none;
border-radius: 0;
border: 0; }
@ -54,7 +56,7 @@
background: none; }
div.vs-blog .list-group .list-group-item + .list-group-item {
border-top: 1px solid #f5f5f5;
padding: 20px 0; }
padding: 45px 0 30px; }
div.vs-blog .list-group .list-group-item h3 {
margin-top: 0; }
div.vs-blog .list-group.small-list .list-group-item {
@ -70,7 +72,7 @@
div.vs-blog .font-100 {
font-size: 1em; }
div.vs-blog .font-125 {
font-size: 1.25em; }
font-size: 1.125em; }
div.vs-blog .vs-blog-title {
padding-bottom: 15px;
margin-bottom: 25px;
@ -92,8 +94,9 @@
overflow: hidden; }
div.vs-blog .hero-section .hero-articles .hero-content h2 {
margin-top: .5rem;
font-size: 2em;
font-weight: bold; }
font-size: 1.75em;
font-weight: bold;
line-height: 1.25; }
div.vs-blog .hero-section .hero-articles .tags .tag {
background: rgba(208, 208, 208, 0.3);
color: #fff !important; }
@ -149,7 +152,7 @@
display: inline-block;
border-radius: 50%; }
div.vs-blog .article-owner {
font-size: .85em; }
font-size: .72em; }
div.vs-blog .user-link-icons {
position: absolute;
right: 18px;

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

File diff suppressed because one or more lines are too long

2
modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Shared/Styles/blog.scss
View File

@ -3,7 +3,7 @@ div.vs-blog {
background: white;
padding: 30px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 14px;
font-size: 16px;
@import "bootstrap-overwrite.scss";
@import "header.scss";
@import "home.scss";

4
modules/blogging/src/Volo.Blogging.Web/compilerconfig.json
View File

@ -10,5 +10,9 @@
{
"outputFile": "Pages/Blog/Posts/Index.css",
"inputFile": "Pages/Blog/Posts/Index.scss"
},
{
"outputFile": "Pages/Blogs/Shared/Styles/blog.css",
"inputFile": "Pages/Blogs/Shared/Styles/blog.scss"
}
]
Write Preview
Loading…
Cancel
Save