Skip to content

Commit 9b31bf8

Browse files
EliasMascheEliasMasche
committed
refact: modified to bootstrap 5 classes, deleted custom classes
1 parent 922318d commit 9b31bf8

File tree

4 files changed

+69
-117
lines changed

4 files changed

+69
-117
lines changed

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,16 @@
1313
style="width: 175px; height: 175px; background-image: url(@Introduction.Value.ProfilePictureUrl); background-repeat: no-repeat; background-position: center; background-size: cover;">
1414
</div>
1515
</div>
16-
1716
<!-- Profile Text -->
1817
<div class="col-md-8 mt-4">
1918
<div class="fs-5 lh-base text-center">
2019
@MarkdownConverter.ToMarkupString(Introduction.Value.Description)
2120
</div>
22-
2321
<!-- Social Links -->
2422
<div class="mt-3">
2523
<SocialAccounts Social="@Social.Value"></SocialAccounts>
2624
</div>
27-
28-
<!-- Donation Section (optional) -->
25+
<!-- Donation Section -->
2926
@if (SupportConfiguration.Value.ShowUnderIntroduction)
3027
{
3128
<div class="mt-3">
@@ -37,7 +34,6 @@
3734
</div>
3835
</div>
3936

40-
4137
@code {
4238
private string IntroductionClass => !string.IsNullOrEmpty(Introduction.Value.BackgroundUrl)
4339
? "introduction-background"

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

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,62 +8,77 @@
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;"
13-
src="@Configuration.Value.BlogBrandUrl.ToAbsoluteUrl(NavigationManager.BaseUri)"
14-
alt="brand" />
11+
<a class="navbar-brand ms-5" href="/">
12+
<img src="@Configuration.Value.BlogBrandUrl.ToAbsoluteUrl(NavigationManager.BaseUri)"
13+
alt="brand"
14+
class="img-fluid"
15+
style="max-height: 70px; width: 70px; height: 70px;" />
1516
</a>
1617
}
1718
else
1819
{
19-
<a class="nav-brand barcode ms-5" href="/">@Configuration.Value.BlogName</a>
20+
<a class="navbar-brand ms-5 text-decoration-none fw-normal fs-1" href="/">
21+
@Configuration.Value.BlogName
22+
</a>
2023
}
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">
24+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
25+
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
26+
aria-expanded="false" aria-label="Toggle navigation">
2227
<span class="navbar-toggler-icon"></span>
2328
</button>
2429
<div class="collapse navbar-collapse" id="navbarSupportedContent">
2530
<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)
31+
<li class="nav-item px-2">
32+
<a class="nav-link" href="/"><i class="home"></i> Home</a>
33+
</li>
34+
<li class="nav-item px-2">
35+
<a class="nav-link" href="/archive"><i class="books"></i> Archive</a>
36+
</li>
37+
<li class="nav-item px-2">
38+
<a class="nav-link" href="/bookmarks"><i class="bookmark"></i> Bookmarks</a>
39+
</li>
40+
@if (Configuration.Value.IsAboutMeEnabled)
3141
{
32-
<li class="nav-item">
33-
<a class="nav-link" href="AboutMe">
34-
<i class="profile"></i> About me
35-
</a>
42+
<li class="nav-item px-2">
43+
<a class="nav-link" href="AboutMe"><i class="profile"></i> About me</a>
3644
</li>
3745
}
38-
3946
@if (SupportConfiguration.Value.ShowSupportMePage)
4047
{
41-
<li class="nav-item">
42-
<a class="nav-link" href="SupportMe">
43-
<i class="coin-dollar"></i> Support me
44-
</a>
48+
<li class="nav-item px-2">
49+
<a class="nav-link" href="SupportMe"><i class="coin-dollar"></i> Support me</a>
4550
</li>
4651
}
47-
48-
<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">
52+
<li class="nav-item dropdown px-2">
53+
<a class="nav-link dropdown-toggle" href="#" id="rssDropdown" role="button"
54+
data-bs-toggle="dropdown" aria-expanded="false" aria-label="RSS Selector">
5055
<i class="rss2"></i> RSS
5156
</a>
5257
<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>
58+
<li>
59+
<a class="dropdown-item" href="/feed.rss" aria-label="RSS with All Posts">
60+
All Posts (Summary)
61+
</a>
62+
</li>
63+
<li>
64+
<a class="dropdown-item" href="/feed.rss?withContent=true" aria-label="RSS with Full Content">
65+
Most Recent Posts (Full Content)
66+
</a>
67+
</li>
5568
</ul>
5669
</li>
57-
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+
<li class="nav-item d-flex align-items-center px-2">
72+
<ThemeToggler Class="nav-link"></ThemeToggler>
73+
</li>
74+
<li class="nav-item d-flex align-items-center px-2">
6175
<SearchInput SearchEntered="NavigateToSearchPage"></SearchInput>
6276
</li>
6377
</ul>
6478
</div>
6579
</div>
6680
</nav>
81+
6782
@code {
6883
private string currentUri = string.Empty;
6984

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
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="d-flex align-items-center border border-2 rounded-pill overflow-hidden position-relative transition-width"
2+
style="height: 40px; width: 40px;" tabindex="0">
3+
<input type="text"
4+
class="form-control border-0 bg-transparent px-2 flex-grow-1 text-body position-absolute top-0 bottom-0 start-0 opacity-0"
5+
placeholder="search"
6+
aria-label="search"
7+
style="z-index: 2;"
8+
@bind-value="searchTerm"
9+
@onkeyup="@CheckForEnter"
10+
title="Search for blog post via title or tags" />
11+
12+
<button class="btn btn-sm rounded-pill ms-auto p-0 d-flex align-items-center justify-content-center"
13+
type="button"
14+
aria-label="search submit"
15+
@onclick="CallSearchEntered"
16+
style="width: 30px; height: 30px;">
17+
<i class="search" style="color: var(--bs-navbar-color);"></i>
18+
</button>
519
</div>
620

721
@code {

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

Lines changed: 7 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -174,72 +174,18 @@ code {
174174
top: 0.5rem;
175175
}
176176

177-
.barcode {
178-
text-decoration: none;
179-
font-weight: 400;
180-
font-size: 2.5rem;
181-
}
182-
183-
.navbar-nav li {
184-
padding-left: 1rem;
185-
white-space: nowrap;
186-
}
187-
188-
.search-bar {
189-
border: 2px solid;
190-
display: flex;
191-
border-radius: 100vh;
192-
overflow: hidden;
193-
height: 40px;
194-
padding: 3px;
195-
width: 40px;
196-
position: relative;
177+
.transition-width {
197178
transition: width 300ms ease-in-out;
198179
}
199180

200-
.search-bar-input {
201-
flex-grow: 1;
202-
padding: 0 .5em;
203-
border: 0;
204-
opacity: 0;
205-
background: transparent;
206-
position: absolute;
207-
top: 0;
208-
bottom: 0;
209-
left: 0;
210-
z-index: 2;
211-
cursor: pointer;
212-
font-weight: 400;
213-
color: var(--bs-navbar-color);
214-
}
215-
216-
.search-bar-input:focus {
217-
outline: 0;
218-
}
219-
.search-bar-button {
220-
border: 0;
221-
border-radius: 100vh;
222-
margin-left: auto;
223-
width: 30px;
224-
height: 30px;
225-
cursor: pointer;
226-
background: transparent;
227-
/*
228-
TODO: That is really ugly
229-
The problem is that every other button is behind nav-
230-
*/
231-
color: var(--bs-navbar-color);
232-
}
233-
234-
.search-bar:focus-within {
235-
width: 170px;
181+
/* Optional expanded width on focus */
182+
.transition-width:focus-within {
183+
width: 170px !important;
236184
}
237185

238-
.search-bar:focus-within .search-bar-input {
239-
cursor: initial;
240-
opacity: 1;
241-
z-index: initial;
242-
max-width: 130px;
186+
.transition-width:focus-within input {
187+
opacity: 1 !important;
188+
z-index: initial !important;
243189
}
244190
/*#endregion */
245191

@@ -364,25 +310,6 @@ i {
364310
/*#endregion */
365311

366312
/*#region Components */
367-
.actions {
368-
float:right;
369-
}
370-
371-
.actions * {
372-
margin-left: 5px;
373-
margin-top: 25px;
374-
width: 125px;
375-
}
376-
377-
.preview-img {
378-
position: absolute;
379-
top: 0;
380-
left: 0;
381-
object-fit: cover;
382-
height: 100%;
383-
width: 100%;
384-
}
385-
386313
.blog-card {
387314
display: flex;
388315
flex-direction: column;

0 commit comments

Comments
 (0)