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

Improve blog post UI and update tag and style components 

Refactored tag display in Default.cshtml to use divs and updated badge classes for better styling. Enhanced BlogPost.cshtml layout for author info, ratings, and reactions, improving structure and visual hierarchy. Added new CSS styles for blockquotes and code blocks in blogPost.css to enhance content readability.
pull/24302/head
Mansur Besleney 2 months ago
parent
d84672f39d
commit
92caae215c
3 changed files with 60 additions and 40 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. 12
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
  2. 70
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
  3. 18
      modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css

12
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/CmsKit/Shared/Components/Tags/Default.cshtml
View File

@ -6,26 +6,22 @@
<div class="cms-tags-area">
@if (Model.Tags != null)
{
<ul class="d-flex flex-wrap gap-1">
<div class="d-flex flex-wrap gap-2">
@foreach (var tag in Model.Tags)
{
if (Model.UrlFormat.IsNullOrWhiteSpace())
{
<li>
<span class="badge rounded-pill badge-secondary text-bg-secondary cmskit-tag font-weight-normal">
<span class="badge rounded-pill bg-secondary cmskit-tag fw-normal">
@tag.Name
</span>
</li>
}
else
{
var formattedUrl = Model.UrlFormat.Replace("{TagId}", tag.Id.ToString()).Replace("{TagName}", tag.Name);
<li>
<a href="@formattedUrl"><span class="badge rounded-pill badge-secondary text-bg-secondary cmskit-tag font-weight-normal">@tag.Name</span></a>
</li>
<a class="badge rounded-pill bg-secondary cmskit-tag fw-normal text-decoration-none" href="@formattedUrl">@tag.Name</a>
}
}
</ul>
</div>
}
</div>
</div>

70
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/BlogPost.cshtml
View File

@ -60,13 +60,13 @@
<input hidden id="BlogId" value="@Model.ViewModel.Id" />
<abp-card-body>
<abp-row>
<div class="col-lg-8 col-md-10 mx-auto pb-4">
<div class="col-lg-8 col-md-10 mx-auto">
<h1 class="mt-lg-4 mt-md-3">@Model.ViewModel.Title</h1>
<p class="mb-lg-5 mb-md-3">
<a href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug?authorId=@Model.ViewModel.Author.Id">
<span class="font-weight-bold">@@@Model.ViewModel.Author?.UserName</span>
<a class="text-decoration-none" href="/@CmsBlogsWebConsts.BlogsRoutePrefix/@Model.BlogSlug?authorId=@Model.ViewModel.Author.Id">
<span class="fw-bold text-dark">@@@Model.ViewModel.Author?.UserName</span>
</a>
<small style="opacity:.65;">@Model.ViewModel.CreationTime</small>
<small class="text-muted">@Model.ViewModel.CreationTime</small>
</p>
@(await Component.InvokeAsync(typeof(ContentFragmentViewComponent), new DefaultContentDto
{
@ -96,35 +96,41 @@
}
</div>
</abp-row>
<abp-row class="row">
<div class="col-lg-8 col-md-10 mx-auto pb-4">
<hr class="mt-0" />
<abp-row>
<abp-column size-lg="_6" size-md="_12">
@if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
{
if (Model.RatingsFeature?.IsEnabled == true)
{
@await Component.InvokeAsync(typeof(RatingViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.ViewModel.Id.ToString()
})
}
}
</abp-column>
<abp-column class="d-flex justify-content-end" size-lg="_6" size-md="_12">
@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
if (Model.ReactionsFeature?.IsEnabled == true)
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.ViewModel.Id.ToString()
})
}
}
</abp-column>
</abp-row>
</div>
<abp-row class="row">
<abp-column size-lg="_6" size-md="_12">
@if (GlobalFeatureManager.Instance.IsEnabled<ReactionsFeature>())
{
if (Model.ReactionsFeature?.IsEnabled == true)
{
@await Component.InvokeAsync(typeof(ReactionSelectionViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.ViewModel.Id.ToString()
})
}
}
</abp-column>
<abp-column size-lg="_6" size-md="_12">
@if (GlobalFeatureManager.Instance.IsEnabled<RatingsFeature>())
{
if (Model.RatingsFeature?.IsEnabled == true)
{
@await Component.InvokeAsync(typeof(RatingViewComponent), new
{
entityType = Volo.CmsKit.Blogs.BlogPostConsts.EntityType,
entityId = Model.ViewModel.Id.ToString()
})
}
}
</abp-column>
</abp-row>
</abp-row>
</abp-card-body>
</abp-card>
</div>

18
modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Blogs/blogPost.css
View File

@ -42,4 +42,22 @@ span.area-title {
color: #aaa;
text-decoration: none;
padding-left: 18px;
}
.blockquote, blockquote{
display: block;
padding: 1em 1.5em;
border-radius: 8px;
background: rgba(58, 130, 246, 0.1);
font-size: 1.125rem;
}
code.hljs{
border-radius: 8px;
background: rgba(247, 37, 133, 0.1);
}
pre code.hljs{
background: rgba(0, 0, 0, 0.1);
padding: 1em 1.5em;
}
Write Preview
Loading…
Cancel
Save