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
{
<p class="admin-modal-note">Compte Keycloak et profil site. Les roles restent geres dans Keycloak.</p>
@if (!string.IsNullOrWhiteSpace(SaveError))
{
<p class="profile-feedback error">@SaveError</p>
@@ -281,39 +279,29 @@
<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">
<DataAnnotationsValidator />
<div class="admin-toggle-grid admin-edit-toggle-grid">
<label class="admin-toggle-card">
<div class="admin-edit-summary-grid">
<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" />
<div>
<strong>Compte actif</strong>
<span>Autorise ou bloque la connexion.</span>
</div>
<span>Compte actif</span>
</label>
<label class="admin-toggle-card">
<label class="admin-edit-toggle-pill">
<InputCheckbox @bind-Value="EditFormModel.IsEmailVerified" />
<div>
<strong>Email verifie</strong>
<span>Adresse validee dans Keycloak.</span>
</div>
<span>Email verifie</span>
</label>
</div>
@@ -324,7 +312,7 @@
<ValidationMessage For="@(() => EditFormModel.Username)" />
</label>
<label class="field span-2">
<label class="field admin-edit-span-3">
<span>Email</span>
<InputText @bind-Value="EditFormModel.Email" />
<ValidationMessage For="@(() => EditFormModel.Email)" />
@@ -342,7 +330,7 @@
<ValidationMessage For="@(() => EditFormModel.LastName)" />
</label>
<label class="field">
<label class="field admin-edit-span-2">
<span>Nom affiche sur le site</span>
<InputText @bind-Value="EditFormModel.DisplayName" />
<ValidationMessage For="@(() => EditFormModel.DisplayName)" />
@@ -371,24 +359,24 @@
<ValidationMessage For="@(() => EditFormModel.PreferredFormat)" />
</label>
<label class="field span-3">
<label class="field admin-edit-span-2">
<span>Cube favori</span>
<InputText @bind-Value="EditFormModel.FavoriteCube" />
<ValidationMessage For="@(() => EditFormModel.FavoriteCube)" />
</label>
<label class="field span-3">
<label class="field admin-edit-span-full">
<span>Bio</span>
<InputTextArea @bind-Value="EditFormModel.Bio" rows="3" />
<InputTextArea @bind-Value="EditFormModel.Bio" rows="2" />
<ValidationMessage For="@(() => EditFormModel.Bio)" />
</label>
</div>
<div class="profile-actions">
<button class="button secondary" type="submit" disabled="@IsSaving">
@(IsSaving ? "Enregistrement..." : "Enregistrer les modifications")
<button class="button secondary small" type="submit" disabled="@IsSaving">
@(IsSaving ? "Enregistrement..." : "Enregistrer")
</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>
</EditForm>
}

125
styles.css
View File

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