Skip to content

Commit 7812d30

Browse files
linkdotnetlinkdotnet
committed
More responsiveness of tags plus smaller refactorings
1 parent 3381867 commit 7812d30

File tree

6 files changed

+92
-51
lines changed

6 files changed

+92
-51
lines changed

‎LinkDotNet.Blog.Web/Pages/AboutMe.razor

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
<div class="col-lg-9 col-md-8 tab-container">
1616
<div class="row">
1717
<div class="col-md12 tab-content">
18-
<SkillTable IsAuthenticated="@isAuthenticated"></SkillTable>
18+
<Card Header="Skills">
19+
<SkillTable IsAuthenticated="@isAuthenticated"></SkillTable>
20+
</Card>
1921
</div>
2022
</div>
2123
</div>

‎LinkDotNet.Blog.Web/Shared/Skills/Card.razor

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<div class="card-container">
2+
<div class="header">
3+
<h1>@Header</h1>
4+
</div>
5+
<div class="content">
6+
@ChildContent
7+
</div>
8+
</div>
9+
@code {
10+
[Parameter]
11+
public string Header { get; set; }
12+
[Parameter]
13+
public RenderFragment ChildContent { get; set; }
14+
}

‎LinkDotNet.Blog.Web/Shared/Skills/Card.razor.css

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
.card-container {
2+
display: inline-block;
3+
box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
4+
width: 100%;
5+
background: var(--background-gradient-start);
6+
border-radius: 8px;
7+
padding: 20px;
8+
}
9+
10+
.header {
11+
padding: 20px;
12+
}
13+
14+
.header h1 {
15+
position: relative;
16+
margin-right: 20px;
17+
margin-bottom: 20px;
18+
}
19+
20+
.header h1::after {
21+
position: absolute;
22+
content: "";
23+
background-color: var(--header1);
24+
width: 35px;
25+
left: 0;
26+
bottom: -0.5rem;
27+
height: 8px;
28+
border-radius: 3px;
29+
}
30+
31+
.content {
32+
padding: 20px;
33+
}

‎LinkDotNet.Blog.Web/Shared/Skills/SkillTable.razor

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
@using LinkDotNet.Domain
22
@using LinkDotNet.Infrastructure.Persistence
33
@inject IRepository<Skill> repository
4-
<div class="skill-table-container">
5-
<div>
4+
<div>
65
@if (IsAuthenticated)
76
{
87
<button type="button" class="btn btn-primary" @onclick="() => AddSkillDialog.Open()"><i class="fas
@@ -11,45 +10,44 @@
1110
<AddSkillDialog @ref="AddSkillDialog" SkillAdded="@AddSkill"></AddSkillDialog>
1211
}
1312
</div>
14-
<div>
15-
<table class="skill-table">
16-
<tbody>
17-
<tr>
18-
<th>Capability</th>
19-
<th>Familiar with</th>
20-
<th>Proficient</th>
21-
<th>Expert</th>
22-
</tr>
23-
@foreach (var skillCapabilityGroup in skills.GroupBy(s => s.Capability))
24-
{
25-
<tr ondragover="event.preventDefault();">
26-
<td>@skillCapabilityGroup.Key</td>
27-
@foreach (var skillLevel in ProficiencyLevel.All)
28-
{
29-
<td @ondrop="@(() => HandleDrop(skillLevel))">
30-
@foreach (var skill in skillCapabilityGroup.Where(s => s.ProficiencyLevel == skillLevel))
13+
<div>
14+
<table class="skill-table">
15+
<tbody>
16+
<tr>
17+
<th>Capability</th>
18+
<th>Familiar with</th>
19+
<th>Proficient</th>
20+
<th>Expert</th>
21+
</tr>
22+
@foreach (var skillCapabilityGroup in skills.GroupBy(s => s.Capability))
23+
{
24+
<tr ondragover="event.preventDefault();">
25+
<td>@skillCapabilityGroup.Key</td>
26+
@foreach (var skillLevel in ProficiencyLevel.All)
27+
{
28+
<td @ondrop="@(() => HandleDrop(skillLevel))">
29+
@foreach (var skill in skillCapabilityGroup.Where(s => s.ProficiencyLevel == skillLevel))
30+
{
31+
@if (IsAuthenticated)
3132
{
32-
@if (IsAuthenticated)
33-
{
34-
<div draggable="true" @ondrag="@(() => currentDragItem = skill)" style="cursor: grab">
35-
<SkillTag Skill="@skill" IsAuthenticated="@true" DeleteSkill="@(() =>
36-
DeleteSkill(skill))"/>
37-
</div>
38-
}
39-
else
40-
{
41-
<div>
42-
<SkillTag Skill="@skill"/>
43-
</div>
44-
}
33+
<div draggable="true" @ondrag="@(() => currentDragItem = skill)" style="cursor: grab">
34+
<SkillTag Skill="@skill" IsAuthenticated="@true" DeleteSkill="@(() =>
35+
DeleteSkill(skill))"/>
36+
</div>
4537
}
46-
</td>
47-
}
48-
</tr>
49-
}
50-
</tbody>
51-
</table>
52-
</div>
38+
else
39+
{
40+
<div>
41+
<SkillTag Skill="@skill"/>
42+
</div>
43+
}
44+
}
45+
</td>
46+
}
47+
</tr>
48+
}
49+
</tbody>
50+
</table>
5351
</div>
5452
@code {
5553
[Parameter]

‎LinkDotNet.Blog.Web/Shared/Skills/SkillTable.razor.css

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,3 @@
1-
.skill-table-container {
2-
display: inline-block;
3-
box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
4-
width: 100%;
5-
background: var(--background-gradient-start);
6-
border-radius: 8px;
7-
padding: 20px;
8-
}
9-
101
.skill-table {
112
margin-top: 20px;
123
width: 100%;

‎LinkDotNet.Blog.Web/Shared/Skills/SkillTag.razor.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
.skill-tag {
2-
padding: 10px;
2+
padding: 8px;
33
border-radius: 5px;
44
background-color: var(--header1);
55
color: var(--white);
6-
6+
display: inline-block;
7+
white-space: nowrap;
8+
overflow: hidden;
9+
text-overflow: ellipsis;
710
}
811

912
.skill-tag img {

0 commit comments

Comments
 (0)