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

Blog update

Browse Source 
Volo.Blog enhancements (frontend) #1328
pull/3079/head^2
Armağan Ünlü 6 years ago
parent ff723ebf84
commit 81bc9c15e6
11 changed files with 154 additions and 131 deletions
Show Stats Download Patch File Download Diff File

25
modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Detail.cshtml
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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 vendored
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
Unescape 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
Unescape 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