complete style and add skeleton
All checks were successful
Game Ideas build for PR / build_blazor_app (pull_request) Successful in 35s
All checks were successful
Game Ideas build for PR / build_blazor_app (pull_request) Successful in 35s
This commit is contained in:
@@ -10,9 +10,9 @@
|
||||
@inherits ComponentBase
|
||||
|
||||
<div class="header-tab">
|
||||
<div class="icon-container" @onclick="HandleIconClicked">
|
||||
<a href="/Games" class="icon-container">
|
||||
<img src="icon.png" alt="Game Ideas">
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ChildContent
|
||||
|
||||
|
||||
@@ -32,11 +32,6 @@ public partial class GameHeader : ComponentBase
|
||||
base.OnInitialized();
|
||||
}
|
||||
|
||||
private void HandleIconClicked()
|
||||
{
|
||||
throw new NotImplementedException();
|
||||
}
|
||||
|
||||
private async Task HandleAddTypeClicked(IEnumerable<KeyValuePair<AddType, string>> values)
|
||||
{
|
||||
SelectListAdd?.Close();
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@using Blazored.FluentValidation
|
||||
|
||||
<EditForm EditContext="EditContext" OnSubmit="HandleLoginSubmit">
|
||||
<FluentValidationValidator />
|
||||
<FluentValidationValidator Validator="Validator" />
|
||||
<div class="login-form">
|
||||
<div class="login-field">
|
||||
<div class="input-title">@ResourcesKey.EnterUsername</div>
|
||||
|
||||
@@ -12,7 +12,7 @@ public partial class Login
|
||||
private EditContext? EditContext;
|
||||
private UserDto UserDto = new();
|
||||
private bool IsLoading = false;
|
||||
|
||||
private LoginValidator Validator = new();
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
EditContext = new EditContext(UserDto);
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
<div class="role">
|
||||
<Select TItem="RoleDto" THeader="object" DisableClicked=!CanEdit Type="SelectType.Single"
|
||||
Theme="SelectTheme.Creation" Values="Roles" ValuesChanged="HandleValuesChanged" Params="SelectRoleParams">
|
||||
Theme="SelectTheme.Single" Values="Roles" ValuesChanged="HandleValuesChanged" Params="SelectRoleParams">
|
||||
<span class="role-label @(!CanEdit ? "disabled" : "")">@(User.Role?.Name ?? ResourcesKey.Unknown)</span>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
@@ -16,10 +16,17 @@ public partial class UserRow
|
||||
|
||||
private SelectParams<RoleDto, object> SelectRoleParams = new();
|
||||
private EditContext? EditContext;
|
||||
private UserDto? OriginalUser;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
EditContext = new(User);
|
||||
OriginalUser = new()
|
||||
{
|
||||
Username = User.Username,
|
||||
Role = User.Role
|
||||
};
|
||||
|
||||
base.OnInitialized();
|
||||
}
|
||||
|
||||
@@ -48,11 +55,19 @@ public partial class UserRow
|
||||
|
||||
CanEdit = false;
|
||||
await OnSubmit.InvokeAsync(User);
|
||||
User.Password = null;
|
||||
}
|
||||
|
||||
|
||||
private void HandleEditClicked()
|
||||
{
|
||||
if (CanEdit)
|
||||
{
|
||||
User.Username = OriginalUser?.Username;
|
||||
User.Role = OriginalUser?.Role;
|
||||
User.Password = null;
|
||||
}
|
||||
|
||||
CanEdit = !CanEdit;
|
||||
}
|
||||
|
||||
|
||||
@@ -13,6 +13,15 @@
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.icon ::deep svg {
|
||||
fill: var(--line);
|
||||
}
|
||||
|
||||
.role {
|
||||
min-width: 160px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
input[disabled], input, input::placeholder {
|
||||
color: var(--white);
|
||||
}
|
||||
@@ -37,7 +46,6 @@ input, .role-label {
|
||||
.role-label {
|
||||
display: block;
|
||||
align-content: center;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
@using GameIdeas.BlazorApp.Shared.Constants
|
||||
|
||||
<div class="row">
|
||||
<div class="icon">@Icons.Account</div>
|
||||
<div class="name pill"></div>
|
||||
<div class="password pill"></div>
|
||||
<div class="role pill"></div>
|
||||
<div class="buttons">
|
||||
<span class="remove">@Icons.Bin</span>
|
||||
<span class="edit">@Icons.Pen</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,69 @@
|
||||
.row {
|
||||
height: 64px;
|
||||
display: grid;
|
||||
grid-template-columns: 48px 1fr 1fr 1fr auto;
|
||||
grid-gap: 8px;
|
||||
padding: 0 8px;
|
||||
background: var(--input-secondary);
|
||||
box-shadow: var(--drop-shadow);
|
||||
border-radius: var(--big-radius);
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.icon ::deep svg {
|
||||
fill: var(--line);
|
||||
}
|
||||
|
||||
.pill {
|
||||
animation: loading 3s ease infinite;
|
||||
align-self: center;
|
||||
height: 28px;
|
||||
border-radius: var(--small-radius);
|
||||
box-sizing: border-box;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.buttons > * {
|
||||
margin: auto;
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
background: none;
|
||||
border-radius: var(--small-radius);
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.remove ::deep svg {
|
||||
fill: var(--red);
|
||||
}
|
||||
|
||||
.edit ::deep svg {
|
||||
fill: var(--yellow);
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
background: rgb(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
50% {
|
||||
background: rgb(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
background: rgb(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
@@ -33,7 +33,7 @@
|
||||
{
|
||||
@for (int i = 0; i < 20; i++)
|
||||
{
|
||||
|
||||
<UserRowSkeleton />
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -40,7 +40,7 @@ public partial class Users
|
||||
}
|
||||
finally
|
||||
{
|
||||
IsLoading = false;
|
||||
IsLoading = false;
|
||||
}
|
||||
}
|
||||
private Task HandleSubmitUser(UserDto args)
|
||||
|
||||
@@ -4,15 +4,21 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
::deep.header-content>* {
|
||||
::deep .search-container .select-container {
|
||||
box-sizing: border-box;
|
||||
width: 200px;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px 200px;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
.container {
|
||||
padding: 20px 20px;
|
||||
|
||||
@@ -42,4 +42,13 @@
|
||||
|
||||
.navigation .selected {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/***** Single Theme *****/
|
||||
.single {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.single .selected {
|
||||
display: none;
|
||||
}
|
||||
@@ -13,6 +13,7 @@ public static class SelectHelper
|
||||
SelectTheme.Filter => "filter",
|
||||
SelectTheme.AdvancedFilter => "advanced-filter",
|
||||
SelectTheme.Creation => "creation",
|
||||
SelectTheme.Single => "single",
|
||||
_ => string.Empty
|
||||
};
|
||||
}
|
||||
|
||||
@@ -6,5 +6,6 @@ public enum SelectTheme
|
||||
Sort,
|
||||
Filter,
|
||||
AdvancedFilter,
|
||||
Creation
|
||||
Creation,
|
||||
Single
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
z-index: var(--index-dropdown);
|
||||
border-radius: var(--small-radius);
|
||||
width: 100%;
|
||||
box-shadow: var(--drop-shadow);
|
||||
}
|
||||
|
||||
.content {
|
||||
@@ -23,7 +24,6 @@
|
||||
flex-direction: column;
|
||||
animation-name: fade-in;
|
||||
animation-duration: 0.2s;
|
||||
box-shadow: var(--drop-shadow);
|
||||
}
|
||||
|
||||
.line {
|
||||
@@ -87,7 +87,7 @@
|
||||
border-bottom: 2px solid var(--input-selected);
|
||||
}
|
||||
|
||||
/***** Sort Theme *****/
|
||||
/***** Creation Theme *****/
|
||||
.creation .content {
|
||||
border-radius: var(--small-radius);
|
||||
box-sizing: border-box;
|
||||
@@ -100,3 +100,7 @@
|
||||
border-bottom: 2px solid var(--input-selected);
|
||||
}
|
||||
|
||||
/***** Single Theme *****/
|
||||
.single {
|
||||
border: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user