Skip to content

Refactor of Scoped CSS #413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 18 commits into
base: master
Choose a base branch
from
Open

Refactor of Scoped CSS #413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
4214d43
refact: removal of custom razor.css, update to bootstrap 5
EliasMasche Jun 17, 2025
8c0696d
refact: removal of razor.css and update of HTML bootstrap 5
EliasMasche Jun 17, 2025
31aff69
refact: removed razor.css and updated to bootstrap 5 utility classes
EliasMasche Jun 17, 2025
29aa5df
refact: removed razor.css files
EliasMasche Jun 17, 2025
4ee70f7
Merge branch 'master' of https://github.com/linkdotnet/Blog
EliasMasche Jul 12, 2025
e47a6d8
Merge branch 'linkdotnet:master' into master
EliasMasche Jul 12, 2025
61527ac
fix: added missing `id` and `class` that caused tests to fail
EliasMasche Jul 12, 2025
6597ccd
Merge branch 'master' of https://github.com/EliasMasche/Blog
EliasMasche Jul 12, 2025
a56ffe3
fixed: visual regressions in the UI and behavior of the app with HTML…
EliasMasche Jul 13, 2025
ad549d3
Merge branch 'master' of https://github.com/linkdotnet/Blog
EliasMasche Sep 4, 2025
42ce3de
Fix: Recreated old spacing using style, override default Bootstrap value
EliasMasche Sep 5, 2025
ee7fa4c
fix: added css code for one line on the keypoints
EliasMasche Sep 5, 2025
b362fba
fix: add css class for handling of padding at nav-link
EliasMasche Sep 9, 2025
389d4c2
fix: added px-3 in html class instead of custom
EliasMasche Sep 10, 2025
eabcaf8
fix: reverted to razor.css file
EliasMasche Sep 10, 2025
4b71e59
Merge branch 'master' of https://github.com/linkdotnet/Blog
EliasMasche Sep 13, 2025
e2f9c8d
refact: removal of inline style to match bootstrap class
EliasMasche Sep 16, 2025
6085c48
Merge branch 'linkdotnet:master' into master
EliasMasche Oct 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/AboutMePage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@page "/AboutMe"
@page "/AboutMe"
@using LinkDotNet.Blog.Web.Features.AboutMe.Components
@using LinkDotNet.Blog.Domain
@inject IOptions<ApplicationConfiguration> AppConfiguration
Expand All @@ -16,12 +16,14 @@
AbsolutePreviewImageUrl="@ImageUrl"></OgData>

<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4">
<Profile ShowAdminActions="@isAuthenticated" ProfileInformation="ProfileInformation.Value"/>
</div>
<TabbedNavigation IsAuthenticated="isAuthenticated"></TabbedNavigation>
</div>
<div class="row gy-4">
<div class="col-lg-3 col-md-4">
<Profile ShowAdminActions="@isAuthenticated" ProfileInformation="ProfileInformation.Value" />
</div>
<div class="col-lg-9 col-md-8">
<TabbedNavigation IsAuthenticated="isAuthenticated" />
</div>
</div>
</div>
}

Expand Down
15 changes: 8 additions & 7 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/AddProfileShortItem.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
<li><input type="text" @bind-value="@content" placeholder="supports markdown" class="w-100"/>
<button type="button" class="btn btn-default" aria-label="Add Item" @onclick="@AddItemAsync">
<i class="plus" aria-hidden="true"></i>
</button>
<li>
<input type="text" @bind-value="@content" placeholder="supports markdown" class="w-100"/>
<button type="button" class="btn btn-default" aria-label="Add Item" @onclick="@AddItemAsync">
<i class="plus" aria-hidden="true"></i>
</button>
</li>

@code {
[Parameter]
[Parameter]
public EventCallback<string> ValueAdded { get; set; }

private string content = string.Empty;

private async Task AddItemAsync()
Expand All @@ -20,4 +21,4 @@
await ValueAdded.InvokeAsync(content);
content = string.Empty;
}
}
}
72 changes: 36 additions & 36 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,46 @@
@inject IRepository<ProfileInformationEntry> Repository
@inject ISortOrderCalculator SortOrderCalculator
<div class="profile-card">
<div class="profile-name">
<span>@ProfileInformation.Name</span>
<br/>
<span>@ProfileInformation.Heading</span>
</div>
<div class="profile-image">
<img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture" />
</div>
<ul class="profile-keypoints"
ondragover="event.preventDefault();">
@foreach (var entry in profileInformationEntries)
{
@if (ShowAdminActions)
{
<li
class="item-draggable"
draggable="true"
@ondrag="@(() => currentDragItem = entry)"
@ondrop="@(() => HandleDrop(entry))">
<div class="profile-name">
<span>@ProfileInformation.Name</span>
<br/>
<span>@ProfileInformation.Heading</span>
</div>
<div class="profile-image">
<img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture" />
</div>
<ul class="profile-keypoints"
ondragover="event.preventDefault();">
@foreach (var entry in profileInformationEntries)
{
@if (ShowAdminActions)
{
<li
class="item-draggable"
draggable="true"
@ondrag="@(() => currentDragItem = entry)"
@ondrop="@(() => HandleDrop(entry))">

<button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() => ShowDeleteDialog(entry.Content)">
<i class="bin2" aria-hidden="true"></i>
</button>
@MarkdownConverter.ToMarkupString(entry.Content)
</li>
}
else
{
<li>@MarkdownConverter.ToMarkupString(entry.Content)</li>
}
}
@if (ShowAdminActions)
{
<AddProfileShortItem ValueAdded="@AddValue"></AddProfileShortItem>
}
</ul>
<button type="button" class="btn btn-default" aria-label="Delete Item" @onclick="() => ShowDeleteDialog(entry.Content)">
<i class="bin2" aria-hidden="true"></i>
</button>
@MarkdownConverter.ToMarkupString(entry.Content)
</li>
}
else
{
<li>@MarkdownConverter.ToMarkupString(entry.Content)</li>
}
}
@if (ShowAdminActions)
{
<AddProfileShortItem ValueAdded="@AddValue"></AddProfileShortItem>
}
</ul>
</div>

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

@code {
[Parameter]
Expand Down
51 changes: 0 additions & 51 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Profile.razor.css
View file
Open in desktop

This file was deleted.

32 changes: 17 additions & 15 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/AddSkillDialog.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,30 @@
<DataAnnotationsValidator />
<ValidationSummary />
<div class="mb-3">
<label for="title">Skill name</label>
<InputText class="form-control" id="title" @bind-Value="model.Skill" />
<label for="title" class="form-label">Skill name</label>
<InputText class="form-control" id="title" @bind-Value="model.Skill" />
</div>
<div class="mb-3">
<label for="image">Image Url</label>
<InputText class="form-control" id="image" @bind-Value="model.ImageUrl"/>
<small for="image" class="form-text text-body-secondary">If set is used before the skill (optional). 24x24 pixel
optimal size</small>
<label for="image" class="form-label">Image Url</label>
<InputText class="form-control" id="image" @bind-Value="model.ImageUrl" />
<small class="form-text text-secondary">
If set, it's used before the skill (optional). 24x24 pixel optimal size.
</small>
</div>
<div class="mb-3">
<label for="capability">Capability</label>
<InputText class="form-control" id="capability" @bind-Value="model.Capability" />
<label for="capability" class="form-label">Capability</label>
<InputText class="form-control" id="capability" @bind-Value="model.Capability" />
</div>
<div class="mb-3">
<label for="proficiency">Proficiency</label>
<select class="form-select" id="proficiency" @bind="model.Proficiency">
@foreach (var level in ProficiencyLevel.All.Select(l => l.Key))
{
<option value="@level">@level</option>
}
</select>
<label for="proficiency" class="form-label">Proficiency</label>
<select class="form-select" id="proficiency" @bind="model.Proficiency">
@foreach (var level in ProficiencyLevel.All.Select(l => l.Key))
{
<option value="@level">@level</option>
}
</select>
</div>

<button class="btn btn-primary" type="submit">Submit</button>
</EditForm>
</ModalDialog>
Expand Down
6 changes: 3 additions & 3 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@if (ShowAdminActions)
{
<button type="button" class="btn btn-primary" @onclick="() => AddSkillDialog.Open()">
<i class="plus"></i>Add skill</button>
<i class="plus"></i> Add skill</button>
<AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
}
</div>
Expand All @@ -29,8 +29,8 @@
{
@if (ShowAdminActions)
{
<div draggable="true" @ondrag="@(() => currentDragItem = skill)" style="cursor: grab"
class="skill-tag">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For example this is why some of the tests are failing.
There is a test looking for .skill-tag inside tests.
So we have two options:

  1. Add again .skill-tag here without the backing razor.css (kind of just as a marker)
  2. Or replace skill-tag with d-inline-block me-2 my-2 px-2 py-1 rounded bg-light`

I would go for the first approach - as it makes the tests more readable

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I prefer first approach too, gonna check the unit tests for others more.

<div draggable="true" @ondrag="@(() => currentDragItem = skill)"
class="skill-tag cursor-grab">
<SkillTag Skill="@skill"
ShowAdminActions="@true"
DeleteSkill="@(() => DeleteSkill(skill))"/>
Expand Down
26 changes: 0 additions & 26 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTable.razor.css
View file
Open in desktop

This file was deleted.

34 changes: 17 additions & 17 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
@using LinkDotNet.Blog.Domain
<span class="skill-tag">
@if (!string.IsNullOrEmpty(Skill.IconUrl))
{
<img src="@Skill.IconUrl" alt="icon" max-width="48px"/>
}
@Skill.Name
@if (!string.IsNullOrEmpty(Skill.IconUrl))
{
<img src="@Skill.IconUrl" alt="icon" max-width="48px"/>
}
@Skill.Name

@if (ShowAdminActions)
{
<button type="button" class="btn btn-default" aria-label="Delete Skill" @onclick="() => DeleteSkill.InvokeAsync()">
<i class="bin2" aria-hidden="true"></i>
</button>
}
@if (ShowAdminActions)
{
<button type="button" class="btn btn-default" aria-label="Delete Skill" @onclick="() => DeleteSkill.InvokeAsync()">
<i class="bin2" aria-hidden="true"></i>
</button>
}
</span>

@code {
[Parameter, EditorRequired]
public required Skill Skill { get; set; }
[Parameter, EditorRequired]
public required Skill Skill { get; set; }

[Parameter]
public bool ShowAdminActions { get; set; }
[Parameter]
public bool ShowAdminActions { get; set; }

[Parameter]
public EventCallback DeleteSkill { get; set; }
[Parameter]
public EventCallback DeleteSkill { get; set; }
}
22 changes: 11 additions & 11 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
.skill-tag {
padding: 8px;
border-radius: 5px;
background-color: var(--tag-background);
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.skill-tag {
padding: 8px;
border-radius: 5px;
background-color: var(--tag-background);
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.skill-tag img {
padding-right: 12px;
width: 36px;
}
padding-right: 12px;
width: 36px;
}
Loading