notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend/components] Update Profile view styling and layout

Browse source
This commit is contained in:
Jeder 2024-10-18 03:15:01 +02:00 • committed by Lilian
parent 1f541b5072
commit b62e24b520
No known key found for this signature in database
7 changed files with 79 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
Iceshrimp.Frontend/Components/FollowButton.razor
View file

@ -6,27 +6,33 @@
@inject IStringLocalizer<Localization> Loc;
@inject ApiService Api;
<span class="follow-button">
<button @onclick="Action" class="btn">
@switch (_buttonType)
@switch (_buttonType)
{
case ButtonType.Follow:
<span class="text">@Loc["Follow"]</span>
<Icon Name="Icons.Plus" class="icon"/>
<button @onclick="Action" class="btn">
<span class="text">@Loc["Follow"]</span>
<Icon Name="Icons.Plus" class="icon"/>
</button>
break;
case ButtonType.Unfollow:
<span class="text">@Loc["Unfollow"]</span>
<Icon Name="Icons.Minus" class="icon"/>
<button @onclick="Action" class="btn inverted">
<span class="text">@Loc["Unfollow"]</span>
<Icon Name="Icons.Minus" class="icon"/>
</button>
break;
case ButtonType.FollowBack:
<span class="text">@Loc["Follow back"]</span>
<Icon Name="Icons.Plus" class="icon"/>
<button @onclick="Action" class="btn">
<span class="text">@Loc["Follow back"]</span>
<Icon Name="Icons.Plus" class="icon"/>
</button>
break;
case ButtonType.CancelRequest:
<span class="text">@Loc["Cancel request"]</span>
<Icon Name="Icons.X" class="icon"/>
<button @onclick="Action" class="btn inverted">
<span class="text">@Loc["Cancel request"]</span>
<Icon Name="Icons.X" class="icon"/>
</button>
break;
}
</button>
</span>
@code {

24
Iceshrimp.Frontend/Components/FollowButton.razor.css
View file

@ -1,9 +1,27 @@
.btn {
border-radius: 1rem;
font-weight: 600;
display: flex;
height: 2.5rem;
align-items: center;
justify-content: start;
border-radius: 1.25rem;
border: var(--notice-color) solid 0.1rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-inline: 1rem;
padding: 1rem;
margin-bottom: 0.5rem;
margin-inline: 1rem;
> i {
padding-left: 0.5rem;
}
}
.btn:hover {
background-color: var(--hover-color);
}
.btn.inverted {
background-color: var(--notice-color);
color: var(--background-color);
}
.text {
margin-right: 0.5rem;
}

12
Iceshrimp.Frontend/Components/ProfileInfo.razor
View file

@ -9,16 +9,16 @@
<div class="data">
@if (UserProfile.Location != null)
{
<div class="location">
<span class="location-field">@Loc["Location"]</span>
<span class="location-data">@UserProfile.Location</span>
<div class="location field">
<span class="field-name">@Loc["Location"]</span>
<span class="field-value">@UserProfile.Location</span>
</div>
}
@if (UserProfile.Birthday != null)
{
<div class="joined">
<span class="joined-field">@Loc["Joined on"]</span>
<span class="joined-data">@UserProfile.Birthday</span>
<div class="birthday field">
<span class="field-name">@Loc["Birthday"]</span>
<span class="field-value">@UserProfile.Birthday</span>
</div>
}
</div>

29
Iceshrimp.Frontend/Components/ProfileInfo.razor.css
View file

@ -1,14 +1,41 @@
.bio {
margin-bottom: 1rem;
margin-top: 0.5rem;
padding-bottom: 1rem;
border-bottom: 0.1rem solid var(--highlight-color);
white-space: pre-wrap;
word-break: break-word;
}
.data {
margin: 1rem 0;
}
.metadata {
display: flex;
justify-content: space-evenly;
padding-top: 1rem;
border-top: 0.1rem solid var(--highlight-color);
}
::deep {
.field {
display: flex;
margin: 0.2rem 0;
.field-name {
font-weight: 600;
width: 10rem;
}
}
}
.fields {
margin: 1rem 0;
}
.section {
text-align: center;
.field-data {
font-weight: 600;
}
}

2
Iceshrimp.Frontend/Components/ProfileInfoField.razor
View file

@ -1,5 +1,5 @@
@using Iceshrimp.Shared.Schemas.Web
<div class="section">
<div class="field">
<span class="field-name">@Field.Name</span>
<span class="field-value">
<MfmText Text="@Field.Value"></MfmText>

7
Iceshrimp.Frontend/Components/ProfileInfoField.razor.css
View file

@ -1,7 +0,0 @@
.section {
display: flex;
}
.field-name {
width: 10rem;
}

8
Iceshrimp.Frontend/Pages/ProfileView.razor.css
View file

@ -15,6 +15,7 @@
.name-section {
margin-left: 1rem;
word-break: break-word;
}
.name {
@ -27,7 +28,8 @@
.profile-card {
margin: auto;
padding: 1rem;
margin-top: 1rem;
padding: 1.5rem;
border-radius: 1rem;
background-color: var(--foreground-color);
max-width: 45rem;
@ -61,5 +63,7 @@
}
::deep .end {
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}