Skip to content

Commit 31aff69

Browse files
EliasMascheEliasMasche
committed
refact: removed razor.css and updated to bootstrap 5 utility classes
1 parent 8c0696d commit 31aff69

File tree

9 files changed

+148
-163
lines changed

9 files changed

+148
-163
lines changed

‎src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@
44
@inject IOptions<ProfileInformation> ProfileInformation
55
@inject IOptions<SupportMeConfiguration> SupportConfiguration
66

7-
<footer id="footer" class="text-center">
8-
<span class="py-2 mb-0 text-body-secondary">© @DateTime.Now.Year @CopyrightName</span>
9-
@if (SupportConfiguration.Value.ShowInFooter)
10-
{
11-
<div class="pb-2" style="display:flex;justify-content:center">
12-
<DonationSection />
13-
</div>
14-
}
7+
<footer class="text-center mt-auto w-100 py-2">
8+
<span class="mb-0 text-body-secondary">© @DateTime.Now.Year @CopyrightName</span>
9+
@if (SupportConfiguration.Value.ShowInFooter)
10+
{
11+
<div class="d-flex justify-content-center pt-2">
12+
<DonationSection />
13+
</div>
14+
}
1515
</footer>
16+
1617
@code {
1718
private string CopyrightName => AppConfiguration.Value.IsAboutMeEnabled
1819
? ProfileInformation.Value.Name

‎src/LinkDotNet.Blog.Web/Features/Home/Components/Footer.razor.css‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,36 @@
44
@inject IOptions<Social> Social
55
@inject IOptions<SupportMeConfiguration> SupportConfiguration
66

7-
<div style="@IntroductionStyle" class="@IntroductionClass">
8-
<div class="introduction-container">
9-
<div class="profile-picture" style="--profile-image: url(@Introduction.Value.ProfilePictureUrl)">
10-
</div>
11-
<div class="profile-text d-flex flex-column">
12-
<div>@MarkdownConverter.ToMarkupString(Introduction.Value.Description)</div>
13-
<SocialAccounts Social="@Social.Value"></SocialAccounts>
14-
@if (SupportConfiguration.Value.ShowUnderIntroduction)
15-
{
16-
<DonationSection />
17-
}
18-
</div>
19-
</div>
7+
<div class="@IntroductionClass bg-dark bg-opacity-50 text-white py-5" style="@IntroductionStyle">
8+
<div class="container d-flex flex-column align-items-center text-center">
9+
<div class="profile-picture"
10+
style="background-image: url('@Introduction.Value.ProfilePictureUrl');">
11+
</div>
12+
13+
<div class="mt-4"
14+
style="font-size: clamp(1.0rem, 0.6479rem + 1vw, 1.4rem);
15+
line-height: clamp(1.5em, 0.6479rem + 1.1268vw, 2.25em);">
16+
@MarkdownConverter.ToMarkupString(Introduction.Value.Description)
17+
</div>
18+
19+
<div class="mt-3">
20+
<SocialAccounts Social="@Social.Value" />
21+
</div>
22+
23+
@if (SupportConfiguration.Value.ShowUnderIntroduction)
24+
{
25+
<div class="mt-3">
26+
<DonationSection />
27+
</div>
28+
}
29+
</div>
2030
</div>
2131
@code {
2232
private string IntroductionClass => !string.IsNullOrEmpty(Introduction.Value.BackgroundUrl)
2333
? "introduction-background"
2434
: string.Empty;
2535

2636
private string IntroductionStyle => !string.IsNullOrEmpty(Introduction.Value.BackgroundUrl)
27-
? $"--profile-background: url({Introduction.Value.BackgroundUrl})"
28-
: string.Empty;
37+
? $"background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url({Introduction.Value.BackgroundUrl})"
38+
: string.Empty;
2939
}

‎src/LinkDotNet.Blog.Web/Features/Home/Components/IntroductionCard.razor.css‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor‎

Lines changed: 39 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,62 +8,79 @@
88
<div class="container-fluid">
99
@if (!string.IsNullOrEmpty(Configuration.Value.BlogBrandUrl))
1010
{
11-
<a class="nav-brand ms-5" href="/">
12-
<img style="max-height: 70px; width: 70px; height: 70px;"
11+
<a class="navbar-brand ms-5 d-flex align-items-center" href="/">
12+
<img class="img-fluid rounded-circle" style="max-height: 70px;"
1313
src="@Configuration.Value.BlogBrandUrl.ToAbsoluteUrl(NavigationManager.BaseUri)"
14-
alt="brand" />
14+
alt="brand" height="70" width="70" />
1515
</a>
1616
}
1717
else
1818
{
19-
<a class="nav-brand barcode ms-5" href="/">@Configuration.Value.BlogName</a>
19+
<a class="navbar-brand ms-5 fs-2 fw-normal text-decoration-none" href="/">
20+
@Configuration.Value.BlogName
21+
</a>
2022
}
21-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
23+
24+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
25+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
2226
<span class="navbar-toggler-icon"></span>
2327
</button>
28+
2429
<div class="collapse navbar-collapse" id="navbarSupportedContent">
25-
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-5">
26-
<li><a class="nav-link" href="/"><i class="home"></i> Home</a></li>
27-
<li><a class="nav-link" href="/archive"><i class="books"></i> Archive</a></li>
28-
<li><a class="nav-link" href="/bookmarks"><i class="bookmark"></i> Bookmarks</a>
29-
</li>
30-
@if (Configuration.Value.IsAboutMeEnabled)
30+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-5 gap-3">
31+
<li class="nav-item">
32+
<a class="nav-link" href="/"><i class="home"></i> Home</a>
33+
</li>
34+
<li class="nav-item">
35+
<a class="nav-link" href="/archive"><i class="books"></i> Archive</a>
36+
</li>
37+
<li class="nav-item">
38+
<a class="nav-link" href="/bookmarks"><i class="bookmark"></i> Bookmarks</a>
39+
</li>
40+
41+
@if (Configuration.Value.IsAboutMeEnabled)
3142
{
3243
<li class="nav-item">
33-
<a class="nav-link" href="AboutMe">
34-
<i class="profile"></i> About me
35-
</a>
44+
<a class="nav-link" href="/AboutMe"><i class="profile"></i> About me</a>
3645
</li>
3746
}
3847

3948
@if (SupportConfiguration.Value.ShowSupportMePage)
4049
{
4150
<li class="nav-item">
42-
<a class="nav-link" href="SupportMe">
43-
<i class="coin-dollar"></i> Support me
44-
</a>
51+
<a class="nav-link" href="/SupportMe"><i class="coin-dollar"></i> Support me</a>
4552
</li>
4653
}
4754

4855
<li class="nav-item dropdown">
49-
<a class="nav-link dropdown-toggle" href="#" id="rssDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="RSS Selector">
56+
<a class="nav-link dropdown-toggle" href="#" id="rssDropdown" role="button"
57+
data-bs-toggle="dropdown" aria-expanded="false" aria-label="RSS Selector">
5058
<i class="rss2"></i> RSS
5159
</a>
5260
<ul class="dropdown-menu" aria-labelledby="rssDropdown">
53-
<li><a class="dropdown-item" href="/feed.rss" aria-label="RSS with All Posts">All Posts (Summary)</a></li>
54-
<li><a class="dropdown-item" href="/feed.rss?withContent=true" aria-label="RSS with Full Content">Most Recent Posts (Full Content)</a></li>
61+
<li>
62+
<a class="dropdown-item" href="/feed.rss" aria-label="RSS with All Posts">All Posts (Summary)</a>
63+
</li>
64+
<li>
65+
<a class="dropdown-item" href="/feed.rss?withContent=true" aria-label="RSS with Full Content">Most Recent Posts (Full Content)</a>
66+
</li>
5567
</ul>
5668
</li>
5769

5870
<AccessControl CurrentUri="@currentUri"></AccessControl>
59-
<li class="nav-item d-flex align-items-center"><ThemeToggler Class="nav-link"></ThemeToggler></li>
60-
<li class="d-flex">
71+
72+
<li class="nav-item d-flex align-items-center">
73+
<ThemeToggler Class="nav-link"></ThemeToggler>
74+
</li>
75+
76+
<li class="nav-item d-flex align-items-center">
6177
<SearchInput SearchEntered="NavigateToSearchPage"></SearchInput>
6278
</li>
6379
</ul>
6480
</div>
6581
</div>
6682
</nav>
83+
6784
@code {
6885
private string currentUri = string.Empty;
6986

‎src/LinkDotNet.Blog.Web/Features/Home/Components/NavMenu.razor.css‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,24 @@
1-
<div class="search-bar">
2-
<input type="text" class="search-bar-input" placeholder="search" aria-label="search" @bind-value="searchTerm"
3-
@onkeyup="@CheckForEnter" title="Search for blog post via title or tags"/>
4-
<button class="search-bar-button" aria-label="search submit" @onclick="CallSearchEntered"><i class="search"></i></button>
1+
<div class="search-bar d-flex border border-2 rounded-pill overflow-hidden p-1 position-relative transition-width">
2+
<input
3+
type="text"
4+
class="search-bar-input flex-grow-1 px-2 border-0 bg-transparent position-absolute top-0 bottom-0 start-0 text-body fw-normal"
5+
placeholder="search"
6+
aria-label="search"
7+
@bind-value="searchTerm"
8+
@onkeyup="@CheckForEnter"
9+
title="Search for blog post via title or tags"
10+
/>
11+
12+
<button
13+
class="search-bar-button border-0 rounded-pill ms-auto d-flex align-items-center justify-content-center bg-transparent text-body"
14+
aria-label="search submit"
15+
@onclick="CallSearchEntered">
16+
17+
<i class="search"></i>
18+
</button>
519
</div>
620

21+
722
@code {
823
private string searchTerm = string.Empty;
924

‎src/LinkDotNet.Blog.Web/Features/Home/Components/SearchInput.razor.css‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

0 commit comments

Comments
 (0)