Skip to content

Commit a27c8d8

Browse files
EliasMascheEliasMasche
committed
refact: added bootstrap 5 classes and removed custom css ones
1 parent 9b31bf8 commit a27c8d8

File tree

3 files changed

+36
-84
lines changed

3 files changed

+36
-84
lines changed

‎src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
@inject IJSRuntime JSRuntime
22

3-
<div class="progress-container" @ref="progressContainer">
3+
<div class="position-fixed bottom-0 end-0 mb-3 me-3 z-3 opacity-0 transition-opacity" @ref="progressContainer">
44
<svg class="progress-circle" viewBox="0 0 36 36">
55
<circle class="progress-bg" cx="18" cy="18" r="15.91549431" />
66
<circle class="progress-bar" id="progressBar" cx="18" cy="18" r="15.91549431" />
77
</svg>
88
</div>
99

10+
1011
@code {
1112
[Parameter, EditorRequired]
1213
public required string ContainerCssSelector { get; set; }

‎src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -41,60 +41,63 @@ else if (BlogPost is not null)
4141
Author="@ProfileInformation.Value.Name"/>
4242
</OgData>
4343

44-
<div class="d-flex justify-content-center pt-2 blog-outer-box">
45-
<div class="blog-container">
46-
<div class="blog-inner-content">
44+
<div class="d-flex justify-content-center pt-2">
45+
<div class="bg-body w-100 px-3 px-md-4 px-lg-5 py-4 shadow rounded"
46+
style="max-width: 90%;">
47+
<div>
4748
<header class="text-center">
48-
<h1 class="fw-bold">@BlogPost.Title</h1></header>
49-
<div class="text-dark-emphasis d-flex flex-wrap gap-2">
50-
<div class="me-2">
51-
<span class="date"></span>
52-
<span class="ms-1">@BlogPost.UpdatedDate.ToShortDateString()</span>
49+
<h1 class="fw-bold">@BlogPost.Title</h1>
50+
</header>
51+
<div class="text-body-secondary d-flex flex-wrap gap-2">
52+
<div class="me-2 d-flex align-items-center">
53+
<span class="me-1">
54+
<i class="date"></i> @BlogPost.UpdatedDate.ToShortDateString()
55+
</span>
56+
</div>
57+
<div class="me-2 d-flex align-items-center">
58+
<i class="read-time me-1"></i>
59+
<span>@BlogPost.ReadingTimeInMinutes minute read</span>
5360
</div>
54-
<span class="read-time"></span>
55-
<span class="me-2">@BlogPost.ReadingTimeInMinutes minute read</span>
5661
<div class="d-flex align-items-center">
5762
<BookmarkButton IsBookmarked="isBookmarked" Bookmarked="BlogPostBookmarked"></BookmarkButton>
5863
</div>
5964
@if (BlogPost.Tags is not null && BlogPost.Tags.Any())
6065
{
6166
<div class="d-flex align-items-center">
62-
<span class="blogpost-tag me-2"></span>
67+
<i class="bi bi-tag me-2"></i> <!-- bi = bootstrap icons / fas = font awesome -->
6368
<div class="d-flex flex-wrap gap-2">
6469
@foreach (var tag in BlogPost.Tags)
6570
{
66-
<a class="goto-tag badge bg-primary rounded-pill text-decoration-none" href="/searchByTag/@(Uri.EscapeDataString(tag))">@tag</a>
71+
<a class="badge bg-primary rounded-pill text-decoration-none"
72+
href="/searchByTag/@(Uri.EscapeDataString(tag))">@tag</a>
6773
}
6874
</div>
6975
</div>
7076
}
7177
</div>
72-
7378
<div class="pt-2">
74-
<BlogPostAdminActions BlogPostId="@BlogPostId"></BlogPostAdminActions>
79+
<BlogPostAdminActions BlogPostId="@BlogPostId" />
7580
</div>
76-
7781
<div class="pt-2">
78-
<TableOfContents Content="@BlogPost.Content" CurrentUri="@NavigationManager.Uri"></TableOfContents>
82+
<TableOfContents Content="@BlogPost.Content" CurrentUri="@NavigationManager.Uri" />
7983
</div>
80-
81-
<div class="blogpost-content">
84+
<div class="pt-3 overflow-hidden">
8285
@(EnrichWithShortCodes(BlogPost.Content))
8386
</div>
8487
</div>
8588
<div class="d-flex justify-content-between py-2 border-top border-bottom align-items-center">
86-
<Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes"></Like>
87-
<ShareBlogPost></ShareBlogPost>
89+
<Like BlogPost="@BlogPost" OnBlogPostLiked="@UpdateLikes" />
90+
<ShareBlogPost />
8891
</div>
89-
@if (SupportConfiguration.Value.ShowUnderBlogPost)
90-
{
91-
<DonationSection />
92-
}
93-
@if (AppConfiguration.Value.ShowSimilarPosts)
92+
@if (SupportConfiguration.Value.ShowUnderBlogPost)
93+
{
94+
<DonationSection />
95+
}
96+
@if (AppConfiguration.Value.ShowSimilarPosts)
9497
{
9598
<SimilarBlogPostSection BlogPost="@BlogPost" />
9699
}
97-
<CommentSection></CommentSection>
100+
<CommentSection />
98101
</div>
99102
</div>
100103

‎src/LinkDotNet.Blog.Web/wwwroot/css/basic.css

Lines changed: 5 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -518,63 +518,7 @@ i {
518518
}
519519
/*#endregion */
520520

521-
/*#region Blog */
522-
.blog-container {
523-
background: var(--background);
524-
width: clamp(60%, 2vw, 90%);
525-
box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
526-
border-radius: 5px;
527-
padding: 20px;
528-
}
529-
530-
.blogpost-tag:before {
531-
font-family: 'icons';
532-
font-weight: 900;
533-
content: "\e936";
534-
}
535-
536-
.blogpost-content {
537-
padding-top: 20px;
538-
overflow-x: hidden;
539-
}
540-
541-
.blogpost-content img {
542-
width: 100%;
543-
height: 100%;
544-
object-fit: cover;
545-
}
546-
547-
@media only screen and (max-width: 700px) {
548-
.blog-outer-box .blog-container {
549-
width: 90%;
550-
}
551-
}
552-
553-
@media only screen and (min-width: 700px) and (max-width: 1024px) {
554-
.blog-outer-box .blog-container {
555-
width: 80%;
556-
}
557-
}
558-
559-
.progress-container {
560-
position: fixed;
561-
bottom: 20px;
562-
right: 20px;
563-
z-index: 1000;
564-
opacity: 0;
565-
transition: opacity 1.5s;
566-
}
567-
568-
.progress-container.visible {
569-
opacity: 1;
570-
}
571-
572-
@keyframes fadeOut {
573-
to {
574-
opacity: 0;
575-
}
576-
}
577-
521+
/*#region ReadingIndicator */
578522
.progress-circle {
579523
width: 50px;
580524
height: 50px;
@@ -600,4 +544,8 @@ i {
600544
[data-bs-theme='light'] .progress-bg {
601545
stroke: #444444;
602546
}
547+
548+
.visible {
549+
opacity: 1 !important;
550+
}
603551
/*#endregion */

0 commit comments

Comments
 (0)