Skip to content

Commit fe1781c

Browse files
EliasMascheEliasMasche
authored
Refactor of Scoped CSS (#413)
* refact: removal of custom razor.css, update to bootstrap 5 * refact: removal of razor.css and update of HTML bootstrap 5 * refact: removed razor.css and updated to bootstrap 5 utility classes * refact: removed razor.css files * fix: added missing `id` and `class` that caused tests to fail * fixed: visual regressions in the UI and behavior of the app with HTML/CSS classes * Fix: Recreated old spacing using style, override default Bootstrap value * fix: added css code for one line on the keypoints * fix: add css class for handling of padding at nav-link * fix: added px-3 in html class instead of custom * fix: reverted to razor.css file * refact: removal of inline style to match bootstrap class * fix: removed duplicate code * fix: removed nonexistent css class * fix: adjusted spacing * refact: relocated css to basics.css * fix: added missing colon * fix: Add gap-4 between navbar items
1 parent 3ae217a commit fe1781c

37 files changed

+728
-695
lines changed

‎src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/AboutMe"
1+
@page "/AboutMe"
22
@using LinkDotNet.Blog.Web.Features.AboutMe.Components
33
@using LinkDotNet.Blog.Domain
44
@inject IOptions<ApplicationConfiguration> AppConfiguration
@@ -16,12 +16,14 @@
1616
AbsolutePreviewImageUrl="@ImageUrl"></OgData>
1717

1818
<div class="container">
19-
<div class="row">
20-
<div class="col-lg-3 col-md-4">
21-
<Profile ShowAdminActions="@isAuthenticated" ProfileInformation="ProfileInformation.Value"/>
22-
</div>
23-
<TabbedNavigation IsAuthenticated="isAuthenticated"></TabbedNavigation>
24-
</div>
19+
<div class="row gy-4">
20+
<div class="col-lg-3 col-md-4">
21+
<Profile ShowAdminActions="@isAuthenticated" ProfileInformation="ProfileInformation.Value" />
22+
</div>
23+
<div class="col-lg-9 col-md-8">
24+
<TabbedNavigation IsAuthenticated="isAuthenticated" />
25+
</div>
26+
</div>
2527
</div>
2628
}
2729

‎src/LinkDotNet.Blog.Web/Features/AboutMe/Components/AddProfileShortItem.razor‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
<li><input type="text" @bind-value="@content" placeholder="supports markdown" class="w-100"/>
2-
<button type="button" class="btn btn-default" aria-label="Add Item" @onclick="@AddItemAsync">
3-
<i class="plus" aria-hidden="true"></i>
4-
</button>
1+
<li>
2+
<input type="text" @bind-value="@content" placeholder="supports markdown" class="w-100"/>
3+
<button type="button" class="btn btn-default" aria-label="Add Item" @onclick="@AddItemAsync">
4+
<i class="plus" aria-hidden="true"></i>
5+
</button>
56
</li>
67

78
@code {
8-
[Parameter]
9+
[Parameter]
910
public EventCallback<string> ValueAdded { get; set; }
10-
11+
1112
private string content = string.Empty;
1213

1314
private async Task AddItemAsync()
@@ -20,4 +21,4 @@
2021
await ValueAdded.InvokeAsync(content);
2122
content = string.Empty;
2223
}
23-
}
24+
}

‎src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,46 @@
55
@inject IRepository<ProfileInformationEntry> Repository
66
@inject ISortOrderCalculator SortOrderCalculator
77
<div class="profile-card">
8-
<div class="profile-name">
9-
<span>@ProfileInformation.Name</span>
10-
<br/>
11-
<span>@ProfileInformation.Heading</span>
12-
</div>
13-
<div class="profile-image">
14-
<img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture" />
15-
</div>
16-
<ul class="profile-keypoints"
17-
ondragover="event.preventDefault();">
18-
@foreach (var entry in profileInformationEntries)
19-
{
20-
@if (ShowAdminActions)
21-
{
22-
<li
23-
class="item-draggable"
24-
draggable="true"
25-
@ondrag="@(() => currentDragItem = entry)"
26-
@ondrop="@(() => HandleDrop(entry))">
8+
<div class="profile-name">
9+
<span>@ProfileInformation.Name</span>
10+
<br/>
11+
<span>@ProfileInformation.Heading</span>
12+
</div>
13+
<div class="profile-image">
14+
<img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture" />
15+
</div>
16+
<ul class="profile-keypoints"
17+
ondragover="event.preventDefault();">
18+
@foreach (var entry in profileInformationEntries)
19+
{
20+
@if (ShowAdminActions)
21+
{
22+
<li
23+
class="item-draggable"
24+
draggable="true"
25+
@ondrag="@(() => currentDragItem = entry)"
26+
@ondrop="@(() => HandleDrop(entry))">
2727

28-
<button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() => ShowDeleteDialog(entry.Content)">
29-
<i class="bin2" aria-hidden="true"></i>
30-
</button>
31-
@MarkdownConverter.ToMarkupString(entry.Content)
32-
</li>
33-
}
34-
else
35-
{
36-
<li>@MarkdownConverter.ToMarkupString(entry.Content)</li>
37-
}
38-
}
39-
@if (ShowAdminActions)
40-
{
41-
<AddProfileShortItem ValueAdded="@AddValue"></AddProfileShortItem>
42-
}
43-
</ul>
28+
<button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() => ShowDeleteDialog(entry.Content)">
29+
<i class="bin2" aria-hidden="true"></i>
30+
</button>
31+
@MarkdownConverter.ToMarkupString(entry.Content)
32+
</li>
33+
}
34+
else
35+
{
36+
<li>@MarkdownConverter.ToMarkupString(entry.Content)</li>
37+
}
38+
}
39+
@if (ShowAdminActions)
40+
{
41+
<AddProfileShortItem ValueAdded="@AddValue"></AddProfileShortItem>
42+
}
43+
</ul>
4444
</div>
4545

4646
<ConfirmDialog @ref="Dialog" Content="Do you really want to delete this entry?" Title="Delete"
47-
OnYesPressed="DeleteItem"></ConfirmDialog>
47+
OnYesPressed="DeleteItem"></ConfirmDialog>
4848

4949
@code {
5050
[Parameter]

‎src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css‎

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

‎src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,30 @@
55
<DataAnnotationsValidator />
66
<ValidationSummary />
77
<div class="mb-3">
8-
<label for="title">Skill name</label>
9-
<InputText class="form-control" id="title" @bind-Value="model.Skill" />
8+
<label for="title" class="form-label">Skill name</label>
9+
<InputText class="form-control" id="title" @bind-Value="model.Skill" />
1010
</div>
1111
<div class="mb-3">
12-
<label for="image">Image Url</label>
13-
<InputText class="form-control" id="image" @bind-Value="model.ImageUrl"/>
14-
<small for="image" class="form-text text-body-secondary">If set is used before the skill (optional). 24x24 pixel
15-
optimal size</small>
12+
<label for="image" class="form-label">Image Url</label>
13+
<InputText class="form-control" id="image" @bind-Value="model.ImageUrl" />
14+
<small class="form-text text-secondary">
15+
If set, it's used before the skill (optional). 24x24 pixel optimal size.
16+
</small>
1617
</div>
1718
<div class="mb-3">
18-
<label for="capability">Capability</label>
19-
<InputText class="form-control" id="capability" @bind-Value="model.Capability" />
19+
<label for="capability" class="form-label">Capability</label>
20+
<InputText class="form-control" id="capability" @bind-Value="model.Capability" />
2021
</div>
2122
<div class="mb-3">
22-
<label for="proficiency">Proficiency</label>
23-
<select class="form-select" id="proficiency" @bind="model.Proficiency">
24-
@foreach (var level in ProficiencyLevel.All.Select(l => l.Key))
25-
{
26-
<option value="@level">@level</option>
27-
}
28-
</select>
23+
<label for="proficiency" class="form-label">Proficiency</label>
24+
<select class="form-select" id="proficiency" @bind="model.Proficiency">
25+
@foreach (var level in ProficiencyLevel.All.Select(l => l.Key))
26+
{
27+
<option value="@level">@level</option>
28+
}
29+
</select>
2930
</div>
31+
3032
<button class="btn btn-primary" type="submit">Submit</button>
3133
</EditForm>
3234
</ModalDialog>

‎src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@if (ShowAdminActions)
66
{
77
<button type="button" class="btn btn-primary" @onclick="() => AddSkillDialog.Open()">
8-
<i class="plus"></i>Add skill</button>
8+
<i class="plus"></i> Add skill</button>
99
<AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
1010
}
1111
</div>
@@ -29,8 +29,8 @@
2929
{
3030
@if (ShowAdminActions)
3131
{
32-
<div draggable="true" @ondrag="@(() => currentDragItem = skill)" style="cursor: grab"
33-
class="skill-tag">
32+
<div draggable="true" @ondrag="@(() => currentDragItem = skill)"
33+
class="skill-tag cursor-grab">
3434
<SkillTag Skill="@skill"
3535
ShowAdminActions="@true"
3636
DeleteSkill="@(() => DeleteSkill(skill))"/>

‎src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css‎

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

‎src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
@using LinkDotNet.Blog.Domain
22
<span class="skill-tag">
3-
@if (!string.IsNullOrEmpty(Skill.IconUrl))
4-
{
5-
<img src="@Skill.IconUrl" alt="icon" max-width="48px"/>
6-
}
7-
@Skill.Name
3+
@if (!string.IsNullOrEmpty(Skill.IconUrl))
4+
{
5+
<img src="@Skill.IconUrl" alt="icon" max-width="48px"/>
6+
}
7+
@Skill.Name
88

9-
@if (ShowAdminActions)
10-
{
11-
<button type="button" class="btn btn-default" aria-label="Delete Skill" @onclick="() => DeleteSkill.InvokeAsync()">
12-
<i class="bin2" aria-hidden="true"></i>
13-
</button>
14-
}
9+
@if (ShowAdminActions)
10+
{
11+
<button type="button" class="btn btn-default" aria-label="Delete Skill" @onclick="() => DeleteSkill.InvokeAsync()">
12+
<i class="bin2" aria-hidden="true"></i>
13+
</button>
14+
}
1515
</span>
1616

1717
@code {
18-
[Parameter, EditorRequired]
19-
public required Skill Skill { get; set; }
18+
[Parameter, EditorRequired]
19+
public required Skill Skill { get; set; }
2020

21-
[Parameter]
22-
public bool ShowAdminActions { get; set; }
21+
[Parameter]
22+
public bool ShowAdminActions { get; set; }
2323

24-
[Parameter]
25-
public EventCallback DeleteSkill { get; set; }
24+
[Parameter]
25+
public EventCallback DeleteSkill { get; set; }
2626
}

‎src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
.skill-tag {
2-
padding: 8px;
3-
border-radius: 5px;
4-
background-color: var(--tag-background);
5-
display: inline-block;
6-
white-space: nowrap;
7-
overflow: hidden;
8-
text-overflow: ellipsis;
1+
.skill-tag {
2+
padding: 8px;
3+
border-radius: 5px;
4+
background-color: var(--tag-background);
5+
display: inline-block;
6+
white-space: nowrap;
7+
overflow: hidden;
8+
text-overflow: ellipsis;
99
}
1010

1111
.skill-tag img {
12-
padding-right: 12px;
13-
width: 36px;
14-
}
12+
padding-right: 12px;
13+
width: 36px;
14+
}

0 commit comments

Comments
 (0)