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

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Refactor of Scoped CSS #413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 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
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;
}
}
}
81 changes: 44 additions & 37 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 @@ -4,45 +4,52 @@

@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))">

<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 class="card w-100 shadow-sm rounded overflow-hidden">
<div class="p-4 fs-5 lh-base" style="background: var(--tag-background);">
<span>@ProfileInformation.Name</span><br />
<span>@ProfileInformation.Heading</span>
</div>

<div class="p-5 text-center" style="background: var(--tag-background);">
<img src="@ProfileInformation.ProfilePictureUrl" alt="Profile Picture"
class="img-fluid rounded-circle mx-auto d-block" />
</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 class="pb-2" style="letter-spacing: 0.05em;">
@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>

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
34 changes: 19 additions & 15 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,40 +5,44 @@
@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>
<div class="table-container">
<table class="skill-table" id="skill-table">
<div class="table-responsive">
<table class="table w-100 mt-3 align-top" id="skill-table">
<thead>
<tr>
<th class="w-10">Capability</th>
<th class="w-30">Familiar with</th>
<th class="w-30">Proficient</th>
<th class="w-30">Expert</th>
</tr>
</thead>
<tbody>
<tr>
<th>Capability</th>
<th>Familiar with</th>
<th>Proficient</th>
<th>Expert</th>
</tr>
@foreach (var skillCapabilityGroup in skills.GroupBy(s => s.Capability))
{
<tr ondragover="event.preventDefault();">
<td>@skillCapabilityGroup.Key</td>
@foreach (var skillLevel in ProficiencyLevel.All)
{
<td @ondrop="@(() => HandleDrop(skillLevel))" class="proficiency-level">
<td @ondrop="@(() => HandleDrop(skillLevel))" class="border-top align-top" style="min-width: 100px;">
@foreach (var skill in skillCapabilityGroup.Where(s => s.ProficiencyLevel == skillLevel))
{
@if (ShowAdminActions)
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="d-inline-block me-2 my-2 px-2 py-1 rounded bg-light"
style="background-color: var(--tag-background); cursor: grab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<SkillTag Skill="@skill"
ShowAdminActions="@true"
DeleteSkill="@(() => DeleteSkill(skill))"/>
</div>
}
else
{
<div>
<div class="d-inline-block me-2 my-2">
<SkillTag Skill="@skill"/>
</div>
}
Expand All @@ -51,7 +55,7 @@
</table>
@if (ShowAdminActions)
{
<small for="skill-table">You can drag and drop your skills from one proficiency to another</small>
<small class="form-text text-muted">You can drag and drop your skills from one proficiency to another</small>
}
</div>
@code {
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.

3 changes: 2 additions & 1 deletion 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,5 +1,6 @@
@using LinkDotNet.Blog.Domain
<span class="skill-tag">
<span class="d-inline-flex align-items-center rounded px-2 py-1 me-2 my-2"
style="background-color: var(--tag-background); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
@if (!string.IsNullOrEmpty(Skill.IconUrl))
{
<img src="@Skill.IconUrl" alt="icon" max-width="48px"/>
Expand Down
14 changes: 0 additions & 14 deletions src/LinkDotNet.Blog.Web/Features/AboutMe/Components/Skill/SkillTag.razor.css
View file
Open in desktop

This file was deleted.

Loading
Loading