Skip to content

Commit a56ffe3

Browse files
EliasMascheEliasMasche
committed
fixed: visual regressions in the UI and behavior of the app with HTML/CSS classes
1 parent 6597ccd commit a56ffe3

File tree

7 files changed

+201
-103
lines changed

7 files changed

+201
-103
lines changed

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

Lines changed: 16 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,54 +4,47 @@
44

55
@inject IRepository<ProfileInformationEntry> Repository
66
@inject ISortOrderCalculator SortOrderCalculator
7-
<div class="card w-100 shadow-sm rounded overflow-hidden">
8-
<div class="p-4 fs-5 lh-base" style="background: var(--tag-background);">
9-
<span>@ProfileInformation.Name</span><br />
7+
<div class="profile-card">
8+
<div class="profile-name">
9+
<span>@ProfileInformation.Name</span>
10+
<br/>
1011
<span>@ProfileInformation.Heading</span>
1112
</div>
12-
13-
<div class="p-5 text-center" style="background: var(--tag-background);">
14-
<img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture"
15-
class="img-fluid rounded-circle mx-auto d-block" />
13+
<div class="profile-image">
14+
<img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture" />
1615
</div>
17-
18-
<ul class="profile-keypoints" ondragover="event.preventDefault();">
16+
<ul class="profile-keypoints"
17+
ondragover="event.preventDefault();">
1918
@foreach (var entry in profileInformationEntries)
2019
{
2120
@if (ShowAdminActions)
2221
{
23-
<li class="item-draggable"
24-
draggable="true"
25-
@ondrag="@(() => currentDragItem = entry)"
26-
@ondrop="@(() => HandleDrop(entry))">
22+
<li
23+
class="item-draggable"
24+
draggable="true"
25+
@ondrag="@(() => currentDragItem = entry)"
26+
@ondrop="@(() => HandleDrop(entry))">
2727

28-
<button type="button"
29-
class="btn btn-default" aria-label="Delete Item"
30-
@onclick="() => ShowDeleteDialog(entry.Content)">
28+
<button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() => ShowDeleteDialog(entry.Content)">
3129
<i class="bin2" aria-hidden="true"></i>
3230
</button>
33-
3431
@MarkdownConverter.ToMarkupString(entry.Content)
3532
</li>
3633
}
3734
else
3835
{
39-
<li class="pb-2" style="letter-spacing: 0.05em;">
40-
@MarkdownConverter.ToMarkupString(entry.Content)
41-
</li>
36+
<li>@MarkdownConverter.ToMarkupString(entry.Content)</li>
4237
}
4338
}
44-
4539
@if (ShowAdminActions)
4640
{
4741
<AddProfileShortItem ValueAdded="@AddValue"></AddProfileShortItem>
4842
}
4943
</ul>
5044
</div>
5145

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

5649
@code {
5750
[Parameter]

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

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,40 +9,36 @@
99
<AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
1010
}
1111
</div>
12-
<div class="table-responsive">
13-
<table class="table w-100 mt-3 align-top" id="skill-table">
14-
<thead>
15-
<tr>
16-
<th class="w-10">Capability</th>
17-
<th class="w-30">Familiar with</th>
18-
<th class="w-30">Proficient</th>
19-
<th class="w-30">Expert</th>
20-
</tr>
21-
</thead>
12+
<div class="table-container">
13+
<table class="skill-table" id="skill-table">
2214
<tbody>
15+
<tr>
16+
<th>Capability</th>
17+
<th>Familiar with</th>
18+
<th>Proficient</th>
19+
<th>Expert</th>
20+
</tr>
2321
@foreach (var skillCapabilityGroup in skills.GroupBy(s => s.Capability))
2422
{
2523
<tr ondragover="event.preventDefault();">
2624
<td>@skillCapabilityGroup.Key</td>
2725
@foreach (var skillLevel in ProficiencyLevel.All)
2826
{
29-
<td @ondrop="@(() => HandleDrop(skillLevel))" class="border-top align-top" style="min-width: 100px;">
27+
<td @ondrop="@(() => HandleDrop(skillLevel))" class="proficiency-level">
3028
@foreach (var skill in skillCapabilityGroup.Where(s => s.ProficiencyLevel == skillLevel))
3129
{
32-
if (ShowAdminActions)
30+
@if (ShowAdminActions)
3331
{
34-
<div draggable="true"
35-
@ondrag="@(() => currentDragItem = skill)"
36-
class="d-inline-block me-2 my-2 px-2 py-1 rounded bg-light"
37-
style="background-color: var(--tag-background); cursor: grab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
32+
<div draggable="true" @ondrag="@(() => currentDragItem = skill)" style="cursor: grab"
33+
class="skill-tag">
3834
<SkillTag Skill="@skill"
3935
ShowAdminActions="@true"
4036
DeleteSkill="@(() => DeleteSkill(skill))"/>
4137
</div>
4238
}
4339
else
4440
{
45-
<div class="d-inline-block me-2 my-2">
41+
<div>
4642
<SkillTag Skill="@skill"/>
4743
</div>
4844
}
@@ -55,7 +51,7 @@
5551
</table>
5652
@if (ShowAdminActions)
5753
{
58-
<small class="form-text text-muted">You can drag and drop your skills from one proficiency to another</small>
54+
<small for="skill-table">You can drag and drop your skills from one proficiency to another</small>
5955
}
6056
</div>
6157
@code {

‎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/Home/Components/Footer.razor‎

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

7-
<footer class="text-center mt-auto w-100 py-2">
8-
<span class="mb-0 text-body-secondary">© @DateTime.Now.Year @CopyrightName</span>
7+
<footer class="position-absolute bottom-0 w-100 text-center" style="height: 2.5rem;">
8+
<span class="py-2 mb-0 text-body-secondary">© @DateTime.Now.Year @CopyrightName</span>
99
@if (SupportConfiguration.Value.ShowInFooter)
1010
{
11-
<div class="d-flex justify-content-center pt-2">
11+
<div class="pb-2 d-flex justify-content-center">
1212
<DonationSection />
1313
</div>
1414
}

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

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,18 @@
44
@inject IOptions<Social> Social
55
@inject IOptions<SupportMeConfiguration> SupportConfiguration
66

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');">
7+
<div style="@IntroductionStyle" class="@IntroductionClass">
8+
<div class="introduction-container">
9+
<div class="profile-picture" style="background-image: url('@Introduction.Value.ProfilePictureUrl');">
1110
</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">
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+
{
2616
<DonationSection />
27-
</div>
28-
}
17+
}
18+
</div>
2919
</div>
3020
</div>
3121
@code {

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

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,7 @@
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>
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>
195
</div>
206

217

0 commit comments

Comments
 (0)