[frontend/components] Update styling for profile page
This commit is contained in:
parent
438206dd45
commit
5d7c9a32ca
2 changed files with 20 additions and 26 deletions
|
@ -17,13 +17,13 @@
|
||||||
@if (State is State.Loaded)
|
@if (State is State.Loaded)
|
||||||
{
|
{
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<span class="title">Profile Description</span><textarea class="input" @bind="@UserProfile.Description"></textarea>
|
<span class="title">@Loc["Profile Description"]</span><textarea class="input" @bind="@UserProfile.Description"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<span class="title">Birthday</span><input class="input" @bind="@UserProfile.Birthday"/>
|
<span class="title">@Loc["Birthday"]</span><input class="input" @bind="@UserProfile.Birthday"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<span class="title">Location</span><input class="input" @bind="@UserProfile.Location"/>
|
<span class="title">@Loc["Location"]</span><input class="input" @bind="@UserProfile.Location"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="user-fields">
|
<div class="user-fields">
|
||||||
<span class="title">@Loc["Fields"]</span>
|
<span class="title">@Loc["Fields"]</span>
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<input class="input" @bind="@entry.Name"/>
|
<input class="input" @bind="@entry.Name"/>
|
||||||
<input class="input" @bind="@entry.Value"/>
|
<input class="input" @bind="@entry.Value"/>
|
||||||
<button @onclick="() => DeleteField(entry)">
|
<button class="button" title="@Loc["Delete Field"]" @onclick="() => DeleteField(entry)">
|
||||||
<Icon Name="Icons.Trash"/>
|
<Icon Name="Icons.Trash"/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -44,11 +44,13 @@
|
||||||
<div class="new-field">
|
<div class="new-field">
|
||||||
<input class="input" @bind="@FieldName"/>
|
<input class="input" @bind="@FieldName"/>
|
||||||
<input class="input" @bind="@FieldValue"/>
|
<input class="input" @bind="@FieldValue"/>
|
||||||
<button @onclick="AddField">@Loc["Add Field"]</button>
|
<button class="button" title="@Loc["Add Field"]" @onclick="AddField">
|
||||||
|
<Icon Name="Icons.Plus"/>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<StateButton OnClick="SaveChanges" @ref="SaveButton">
|
<StateButton OnClick="SaveChanges" ExtraClasses="button" @ref="SaveButton">
|
||||||
<Initial>
|
<Initial>
|
||||||
<Icon Name="Icons.FloppyDisk"/>@Loc["Save"]
|
<Icon Name="Icons.FloppyDisk"/>@Loc["Save"]
|
||||||
</Initial>
|
</Initial>
|
||||||
|
|
|
@ -1,29 +1,21 @@
|
||||||
.input {
|
.field, .new-field {
|
||||||
display: block;
|
display: flex;
|
||||||
background-color: var(--foreground-color);
|
flex-direction: row;
|
||||||
border: none;
|
align-items: center;
|
||||||
outline: none;
|
|
||||||
width: 100%;
|
.button {
|
||||||
border-radius: 0.5rem;
|
padding: 0.75rem;
|
||||||
padding: 0.5rem;
|
margin: 0.2rem;
|
||||||
margin: 0.5rem
|
i {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
|
||||||
max-width: 50rem;
|
|
||||||
}
|
|
||||||
.new-field {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
.user-fields {
|
.user-fields {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.field {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
Loading…
Add table
Reference in a new issue