Skip to content

Commit da58751

Browse files
MaxymGornMaxymGorn
authored
Add about (#255)
## Target <!-- Why are you making this change? --> Add about #### Open Questions <!-- OPTIONAL - [ ] Use the GitHub checklists to spark discussion on issues that may arise from your approach. Please tick the box and explain your answer. --> ## Checklist <!-- It serves as a gentle reminder for common tasks. Confirm it's done and check everything that applies. --> - [x] Documentation updated - [x] Tests cover new or modified code - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] New dependencies added - [ ] Includes breaking changes - [ ] Version bumped ## Visuals <!-- OPTIONAL Show results both before and after this change. When the output changes, it can be a screenshot of a trace, metric, or log illustrating the change. -->
1 parent a813081 commit da58751

File tree

4 files changed

+142
-2
lines changed

4 files changed

+142
-2
lines changed

‎src/Cropper.Blazor/Client/Models/TeamMember.cs

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
namespace Cropper.Blazor.Client.Models
2+
{
3+
public class TeamMember
4+
{
5+
public string Name { get; set; }
6+
public string Role { get; set; }
7+
public string From { get; set; }
8+
public string Github { get; set; }
9+
public string Avatar { get; set; }
10+
public string LinkedIn { get; set; }
11+
public string Languages { get; set; }
12+
}
13+
}

‎src/Cropper.Blazor/Client/Pages/About.razor

+90-2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,94 @@
1010
})" />
1111

1212
<MudContainer Class="mt-5 px-4">
13-
<MudText Typo="Typo.h3" Class="text-gradient">Sorry</MudText>
14-
<MudText Typo="Typo.h4"><b>Not available now</b></MudText>
13+
<MudText Typo="Typo.h3" GutterBottom="true">About</MudText>
14+
<MudText Typo="Typo.subtitle1">
15+
<span style="color: var(--mud-palette-primary)"><b>Cropper.Blazor</b></span> is a community-driven initiative aimed at enhancing image cropping in Blazor applications. With a dedicated group of motivated contributors, it's an open invitation for all to join in and make this library even more impressive. Join us to make it even more awesome!
16+
</MudText>
17+
18+
<MudText Typo="Typo.h4" Class="mt-16" GutterBottom="true">
19+
Core Team
20+
</MudText>
21+
<MudText Class="mb-8">
22+
The Core Team takes the lead in guiding, developing, and steering the <span style="color: var(--mud-palette-primary)"><b>Cropper.Blazor</b></span> project's development.
23+
</MudText>
24+
<MudGrid>
25+
@foreach (var teamMember in TeamMembers)
26+
{
27+
<MudItem xs="12" md="6">
28+
<MudCard Elevation="4">
29+
<MudCardHeader>
30+
<CardHeaderAvatar>
31+
<MudAvatar Image="@teamMember.Avatar"
32+
Size="Size.Large"
33+
Class="mud-elevation-4" />
34+
</CardHeaderAvatar>
35+
<CardHeaderContent>
36+
<MudText Typo="Typo.h6">
37+
@teamMember.Name
38+
</MudText>
39+
<MudText Typo="Typo.body1"
40+
Color="Color.Primary"
41+
Style="font-weight:500;">
42+
@teamMember.Role
43+
</MudText>
44+
</CardHeaderContent>
45+
<CardHeaderActions>
46+
<MudHidden Breakpoint="Breakpoint.SmAndUp" Invert="true">
47+
@if (!string.IsNullOrWhiteSpace(teamMember.LinkedIn))
48+
{
49+
<MudTooltip Text="LinkedIn" Placement="Placement.Top">
50+
<MudIconButton Icon="@Icons.Custom.Brands.LinkedIn"
51+
Href="@teamMember.LinkedIn"
52+
Target="_blank"
53+
Color="Color.Primary"
54+
Edge="Edge.End" />
55+
</MudTooltip>
56+
}
57+
@if (!string.IsNullOrWhiteSpace(teamMember.Github))
58+
{
59+
<MudTooltip Text="GitHub" Placement="Placement.Top">
60+
<MudIconButton Icon="@Icons.Custom.Brands.GitHub"
61+
Href="@teamMember.Github"
62+
Color="Color.Surface"
63+
Target="_blank" />
64+
</MudTooltip>
65+
}
66+
</MudHidden>
67+
</CardHeaderActions>
68+
</MudCardHeader>
69+
<MudCardContent Class="pt-0 pb-1">
70+
<MudList Dense="true">
71+
<MudListItem Icon="@Icons.Material.Filled.Place" Text="@teamMember.From" />
72+
<MudListItem Icon="@Icons.Material.Filled.Translate" Text="@teamMember.Languages" />
73+
<MudHidden Breakpoint="Breakpoint.Xs" Invert="true">
74+
@if (!string.IsNullOrWhiteSpace(teamMember.Github))
75+
{
76+
<MudListItem Icon="@Icons.Custom.Brands.GitHub">
77+
<MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })"
78+
Target="_blank"
79+
Class="text-with-dots"
80+
Href="@teamMember.Github">
81+
@teamMember.Github
82+
</MudLink>
83+
</MudListItem>
84+
}
85+
@if (!string.IsNullOrWhiteSpace(teamMember.LinkedIn))
86+
{
87+
<MudListItem Icon="@Icons.Custom.Brands.LinkedIn">
88+
<MudLink UserAttributes="@(new Dictionary<string, object>(){ {"rel", "noopener"} })"
89+
Target="_blank"
90+
Class="text-with-dots"
91+
Href="@teamMember.LinkedIn">
92+
@teamMember.LinkedIn
93+
</MudLink>
94+
</MudListItem>
95+
}
96+
</MudHidden>
97+
</MudList>
98+
</MudCardContent>
99+
</MudCard>
100+
</MudItem>
101+
}
102+
</MudGrid>
15103
</MudContainer>

‎src/Cropper.Blazor/Client/Pages/About.razor.cs

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
using Cropper.Blazor.Client.Models;
2+
3+
namespace Cropper.Blazor.Client.Pages
4+
{
5+
public partial class About
6+
{
7+
public IEnumerable<TeamMember> TeamMembers => new TeamMember[]
8+
{
9+
new TeamMember
10+
{
11+
Avatar = "https://avatars.githubusercontent.com/u/50423072?v=4",
12+
From = "Kyiv, Ukraine",
13+
Github = "https://github.com/MaxymGorn",
14+
LinkedIn = "https://www.linkedin.com/in/maxym-gornytskiy/",
15+
Name = "Maksym Hornytskiy",
16+
Role = "Creator",
17+
Languages = "English, Ukrainian"
18+
},
19+
new TeamMember
20+
{
21+
Avatar = "https://avatars.githubusercontent.com/u/38187349?v=4",
22+
From = "Ukraine",
23+
Github = "https://github.com/ColdForeign",
24+
LinkedIn = string.Empty,
25+
Name = "George Radchuk",
26+
Role = "Creator",
27+
Languages = "English, Ukrainian"
28+
}
29+
};
30+
}
31+
}

‎src/Cropper.Blazor/Client/Styles/layout/_mainlayout.scss

+8
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,11 @@
9999
.docs-gray-bg {
100100
background-color: var(--mud-palette-background-grey);
101101
}
102+
103+
.text-with-dots {
104+
max-width: 100%;
105+
overflow: hidden;
106+
display: inline-block;
107+
text-overflow: ellipsis;
108+
white-space: nowrap;
109+
}

0 commit comments

Comments
 (0)