christophe/chesscubing
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Resserre davantage la modal d'edition admin

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-15 22:21:52 +02:00
parent 06405fd6a1
commit 52d5bf4e98
2 changed files with 106 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
ChessCubing.App/Pages/AdminPage.razor
View File

@@ -269,8 +269,6 @@
} }
else else
{ {
<p class="admin-modal-note">Compte Keycloak et profil site. Les roles restent geres dans Keycloak.</p>
@if (!string.IsNullOrWhiteSpace(SaveError)) @if (!string.IsNullOrWhiteSpace(SaveError))
{ {
<p class="profile-feedback error">@SaveError</p> <p class="profile-feedback error">@SaveError</p>
@@ -281,39 +279,29 @@
<p class="profile-feedback success">@SaveMessage</p> <p class="profile-feedback success">@SaveMessage</p>
} }
<div class="admin-edit-meta-grid">
<article class="admin-edit-meta-card">
<span class="micro-label">Compte cree le</span>
<strong>@FormatDate(SelectedUser.AccountCreatedUtc)</strong>
</article>
<article class="admin-edit-meta-card">
<span class="micro-label">Profil site cree le</span>
<strong>@FormatDate(SelectedUser.SiteProfileCreatedUtc)</strong>
</article>
<article class="admin-edit-meta-card">
<span class="micro-label">Profil site mis a jour</span>
<strong>@FormatDate(SelectedUser.SiteProfileUpdatedUtc)</strong>
</article>
</div>
<EditForm Model="@EditFormModel" OnValidSubmit="SaveUserAsync"> <EditForm Model="@EditFormModel" OnValidSubmit="SaveUserAsync">
<DataAnnotationsValidator /> <DataAnnotationsValidator />
<div class="admin-toggle-grid admin-edit-toggle-grid"> <div class="admin-edit-summary-grid">
<label class="admin-toggle-card"> <article class="admin-edit-meta-card">
<span class="micro-label">Compte cree</span>
<strong>@FormatDate(SelectedUser.AccountCreatedUtc)</strong>
</article>
<article class="admin-edit-meta-card">
<span class="micro-label">Profil cree</span>
<strong>@FormatDate(SelectedUser.SiteProfileCreatedUtc)</strong>
</article>
<article class="admin-edit-meta-card">
<span class="micro-label">Maj profil</span>
<strong>@FormatDate(SelectedUser.SiteProfileUpdatedUtc)</strong>
</article>
<label class="admin-edit-toggle-pill">
<InputCheckbox @bind-Value="EditFormModel.IsEnabled" /> <InputCheckbox @bind-Value="EditFormModel.IsEnabled" />
<div> <span>Compte actif</span>
<strong>Compte actif</strong>
<span>Autorise ou bloque la connexion.</span>
</div>
</label> </label>
<label class="admin-edit-toggle-pill">
<label class="admin-toggle-card">
<InputCheckbox @bind-Value="EditFormModel.IsEmailVerified" /> <InputCheckbox @bind-Value="EditFormModel.IsEmailVerified" />
<div> <span>Email verifie</span>
<strong>Email verifie</strong>
<span>Adresse validee dans Keycloak.</span>
</div>
</label> </label>
</div> </div>
@@ -324,7 +312,7 @@
<ValidationMessage For="@(() => EditFormModel.Username)" /> <ValidationMessage For="@(() => EditFormModel.Username)" />
</label> </label>
<label class="field span-2"> <label class="field admin-edit-span-3">
<span>Email</span> <span>Email</span>
<InputText @bind-Value="EditFormModel.Email" /> <InputText @bind-Value="EditFormModel.Email" />
<ValidationMessage For="@(() => EditFormModel.Email)" /> <ValidationMessage For="@(() => EditFormModel.Email)" />
@@ -342,7 +330,7 @@
<ValidationMessage For="@(() => EditFormModel.LastName)" /> <ValidationMessage For="@(() => EditFormModel.LastName)" />
</label> </label>
<label class="field"> <label class="field admin-edit-span-2">
<span>Nom affiche sur le site</span> <span>Nom affiche sur le site</span>
<InputText @bind-Value="EditFormModel.DisplayName" /> <InputText @bind-Value="EditFormModel.DisplayName" />
<ValidationMessage For="@(() => EditFormModel.DisplayName)" /> <ValidationMessage For="@(() => EditFormModel.DisplayName)" />
@@ -371,24 +359,24 @@
<ValidationMessage For="@(() => EditFormModel.PreferredFormat)" /> <ValidationMessage For="@(() => EditFormModel.PreferredFormat)" />
</label> </label>
<label class="field span-3"> <label class="field admin-edit-span-2">
<span>Cube favori</span> <span>Cube favori</span>
<InputText @bind-Value="EditFormModel.FavoriteCube" /> <InputText @bind-Value="EditFormModel.FavoriteCube" />
<ValidationMessage For="@(() => EditFormModel.FavoriteCube)" /> <ValidationMessage For="@(() => EditFormModel.FavoriteCube)" />
</label> </label>
<label class="field span-3"> <label class="field admin-edit-span-full">
<span>Bio</span> <span>Bio</span>
<InputTextArea @bind-Value="EditFormModel.Bio" rows="3" /> <InputTextArea @bind-Value="EditFormModel.Bio" rows="2" />
<ValidationMessage For="@(() => EditFormModel.Bio)" /> <ValidationMessage For="@(() => EditFormModel.Bio)" />
</label> </label>
</div> </div>
<div class="profile-actions"> <div class="profile-actions">
<button class="button secondary" type="submit" disabled="@IsSaving"> <button class="button secondary small" type="submit" disabled="@IsSaving">
@(IsSaving ? "Enregistrement..." : "Enregistrer les modifications") @(IsSaving ? "Enregistrement..." : "Enregistrer")
</button> </button>
<button class="button ghost" type="button" @onclick="CloseEditModal" disabled="@IsSaving">Fermer</button> <button class="button ghost small" type="button" @onclick="CloseEditModal" disabled="@IsSaving">Fermer</button>
</div> </div>
</EditForm> </EditForm>
} }

125
styles.css
View File

@@ -1751,118 +1751,149 @@ body.site-menu-hidden .site-menu-shell {
} }
.admin-edit-modal-card { .admin-edit-modal-card {
width: min(1080px, 100%); width: min(1160px, 100%);
padding: 0.95rem 1rem 1rem; padding: 0.75rem 0.85rem 0.85rem;
} }
.admin-edit-modal-head { .admin-edit-modal-head {
align-items: flex-start; align-items: center;
margin-bottom: 0.55rem; margin-bottom: 0.45rem;
} }
.admin-edit-heading { .admin-edit-heading {
display: grid; display: grid;
gap: 0.45rem; gap: 0.25rem;
min-width: 0; min-width: 0;
} }
.admin-edit-heading h2 { .admin-edit-heading h2 {
margin: 0; margin: 0;
font-size: clamp(1.6rem, 2vw, 2.2rem); font-size: clamp(1.35rem, 1.8vw, 1.9rem);
line-height: 1; line-height: 0.98;
} }
.admin-edit-chips, .admin-edit-chips,
.admin-modal-head-actions { .admin-modal-head-actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.55rem; gap: 0.45rem;
} }
.admin-edit-chips .mini-chip { .admin-edit-chips .mini-chip {
max-width: 100%; max-width: 100%;
justify-content: flex-start; justify-content: flex-start;
padding: 0.3rem 0.6rem;
font-size: 0.88rem;
} }
.admin-modal-note { .admin-modal-note {
margin: 0 0 0.8rem; margin: 0 0 0.55rem;
color: var(--muted); color: var(--muted);
font-size: 0.95rem; font-size: 0.88rem;
line-height: 1.45; line-height: 1.35;
} }
.admin-edit-meta-grid { .admin-edit-summary-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.7rem; gap: 0.55rem;
margin-bottom: 0.8rem; margin-bottom: 0.55rem;
} }
.admin-edit-meta-card { .admin-edit-meta-card {
display: grid; display: grid;
gap: 0.2rem; gap: 0.12rem;
padding: 0.75rem 0.9rem; padding: 0.5rem 0.7rem;
border-radius: 18px; border-radius: 14px;
border: 1px solid var(--panel-border); border: 1px solid var(--panel-border);
background: rgba(255, 255, 255, 0.03); background: rgba(255, 255, 255, 0.03);
} }
.admin-edit-meta-card .micro-label {
font-size: 0.66rem;
letter-spacing: 0.16em;
}
.admin-edit-meta-card strong { .admin-edit-meta-card strong {
font-size: 0.98rem; font-size: 0.9rem;
line-height: 1.25;
} }
.admin-edit-toggle-grid { .admin-edit-toggle-pill {
gap: 0.75rem; display: flex;
margin-bottom: 0.8rem; align-items: center;
gap: 0.55rem;
padding: 0.5rem 0.7rem;
border-radius: 14px;
border: 1px solid var(--panel-border);
background: rgba(255, 255, 255, 0.03);
cursor: pointer;
} }
.admin-edit-toggle-grid .admin-toggle-card { .admin-edit-toggle-pill input[type="checkbox"] {
gap: 0.75rem; width: 1rem;
padding: 0.8rem 0.9rem; height: 1rem;
border-radius: 18px; margin: 0;
accent-color: var(--cool-strong);
} }
.admin-edit-toggle-grid .admin-toggle-card strong { .admin-edit-toggle-pill span {
font-size: 1rem; font-size: 0.9rem;
} font-weight: 700;
line-height: 1.2;
.admin-edit-toggle-grid .admin-toggle-card span {
font-size: 0.92rem;
line-height: 1.35;
} }
.admin-edit-form-grid { .admin-edit-form-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem; gap: 0.55rem 0.65rem;
} }
.admin-edit-form-grid .field { .admin-edit-form-grid .field {
gap: 0.35rem; gap: 0.28rem;
} }
.admin-edit-form-grid .field > span { .admin-edit-form-grid .field > span {
font-size: 0.95rem; font-size: 0.88rem;
} }
.admin-edit-modal-card input:not([type="radio"]):not([type="checkbox"]), .admin-edit-modal-card input:not([type="radio"]):not([type="checkbox"]),
.admin-edit-modal-card select, .admin-edit-modal-card select,
.admin-edit-modal-card textarea { .admin-edit-modal-card textarea {
padding: 0.8rem 0.9rem; padding: 0.68rem 0.8rem;
border-radius: 16px; border-radius: 14px;
font-size: 0.95rem;
} }
.admin-edit-modal-card textarea { .admin-edit-modal-card textarea {
min-height: 4.5rem; min-height: 3.3rem;
} }
.admin-edit-modal-card .profile-feedback { .admin-edit-modal-card .profile-feedback {
margin-bottom: 0.8rem; margin-bottom: 0.55rem;
padding: 0.65rem 0.8rem;
border-radius: 14px;
} }
.admin-edit-modal-card .profile-actions { .admin-edit-modal-card .profile-actions {
justify-content: flex-end; justify-content: flex-end;
gap: 0.75rem; gap: 0.55rem;
margin-top: 0.85rem; margin-top: 0.65rem;
}
.admin-edit-modal-card .profile-actions .button {
padding: 0.72rem 0.95rem;
}
.admin-edit-form-grid .admin-edit-span-2 {
grid-column: span 2;
}
.admin-edit-form-grid .admin-edit-span-3 {
grid-column: span 3;
}
.admin-edit-form-grid .admin-edit-span-full {
grid-column: 1 / -1;
} }
.admin-confirm-card { .admin-confirm-card {
@@ -1891,7 +1922,7 @@ body.site-menu-hidden .site-menu-shell {
grid-column: span 12; grid-column: span 12;
} }
.admin-edit-meta-grid, .admin-edit-summary-grid,
.profile-meta-grid, .profile-meta-grid,
.profile-form-grid, .profile-form-grid,
.admin-toggle-grid, .admin-toggle-grid,
@@ -1903,6 +1934,12 @@ body.site-menu-hidden .site-menu-shell {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.admin-edit-form-grid .admin-edit-span-2,
.admin-edit-form-grid .admin-edit-span-3,
.admin-edit-form-grid .admin-edit-span-full {
grid-column: 1 / -1;
}
.phase-header { .phase-header {
grid-template-columns: 1fr; grid-template-columns: 1fr;
text-align: center; text-align: center;