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

Condense la page utilisateur

Browse Source
This commit is contained in:
Christophe JEANNEROT
2026-04-15 22:44:22 +02:00
parent b2cbab7891
commit 9aae4cadc0
2 changed files with 151 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
ChessCubing.App/Pages/UserPage.razor
View File

@@ -103,81 +103,56 @@
} }
else if (Profile is not null) else if (Profile is not null)
{ {
<section class="panel panel-half"> <section class="panel panel-wide user-profile-panel">
<div class="section-heading"> <div class="section-heading user-profile-heading">
<div> <div>
<p class="eyebrow">Compte relie</p> <p class="eyebrow">Profil joueur</p>
<h2>@Profile.DisplayName</h2> <h2>@Profile.DisplayName</h2>
</div> </div>
<p class="section-copy">
Le compte connecte pilote l'identite, et cette page ajoute les donnees metier du site. <div class="user-profile-chips">
</p> <span class="mini-chip admin-chip-outline">@Profile.Username</span>
@if (!string.IsNullOrWhiteSpace(Profile.Email))
{
<span class="mini-chip admin-chip-neutral">@Profile.Email</span>
}
</div>
</div> </div>
<div class="profile-meta-grid"> <p class="user-profile-note">Compte Keycloak relie a une fiche site compacte stockee en MySQL.</p>
<article class="profile-meta-card">
<span class="micro-label">Username</span> <div class="user-profile-summary-grid">
<strong>@Profile.Username</strong> <article class="user-summary-card">
</article> <span class="micro-label">Cree</span>
<article class="profile-meta-card">
<span class="micro-label">Email</span>
<strong>@(Profile.Email ?? "Non renseigne")</strong>
</article>
<article class="profile-meta-card">
<span class="micro-label">Cree le</span>
<strong>@FormatDate(Profile.CreatedUtc)</strong> <strong>@FormatDate(Profile.CreatedUtc)</strong>
</article> </article>
<article class="profile-meta-card"> <article class="user-summary-card">
<span class="micro-label">Mis a jour</span> <span class="micro-label">Mis a jour</span>
<strong>@FormatDate(Profile.UpdatedUtc)</strong> <strong>@FormatDate(Profile.UpdatedUtc)</strong>
</article> </article>
</div> <article class="user-summary-card">
</section>
<section class="panel panel-half">
<div class="section-heading">
<div>
<p class="eyebrow">Resume du profil</p>
<h2>Informations visibles pour le site</h2>
</div>
</div>
<div class="home-mini-grid two-columns profile-highlights">
<article class="mini-panel">
<span class="micro-label">Club</span> <span class="micro-label">Club</span>
<strong>@(Profile.Club ?? "A definir")</strong> <strong>@(Profile.Club ?? "A definir")</strong>
</article> </article>
<article class="mini-panel"> <article class="user-summary-card">
<span class="micro-label">Ville</span> <span class="micro-label">Ville</span>
<strong>@(Profile.City ?? "A definir")</strong> <strong>@(Profile.City ?? "A definir")</strong>
</article> </article>
<article class="mini-panel"> <article class="user-summary-card">
<span class="micro-label">Format prefere</span> <span class="micro-label">Format</span>
<strong>@(Profile.PreferredFormat ?? "A definir")</strong> <strong>@(Profile.PreferredFormat ?? "A definir")</strong>
</article> </article>
<article class="mini-panel"> <article class="user-summary-card">
<span class="micro-label">Cube favori</span> <span class="micro-label">Cube favori</span>
<strong>@(Profile.FavoriteCube ?? "A definir")</strong> <strong>@(Profile.FavoriteCube ?? "A definir")</strong>
</article> </article>
</div> </div>
<div class="callout profile-callout"> <div class="callout user-profile-bio">
<span class="micro-label">Bio</span> <span class="micro-label">Bio</span>
<p>@(Profile.Bio ?? "Aucune bio enregistree pour le moment.")</p> <p>@(Profile.Bio ?? "Aucune bio enregistree pour le moment.")</p>
</div> </div>
</section>
<section class="panel panel-wide">
<div class="section-heading">
<div>
<p class="eyebrow">Edition</p>
<h2>Mettre a jour le profil du site</h2>
</div>
<p class="section-copy">
Les champs ci-dessous sont stockes dans MySQL et pourront ensuite
servir a enrichir les pages, les inscriptions ou les statistiques.
</p>
</div>
@if (!string.IsNullOrWhiteSpace(SaveError)) @if (!string.IsNullOrWhiteSpace(SaveError))
{ {
@@ -192,8 +167,8 @@
<EditForm Model="@Form" OnValidSubmit="SaveProfileAsync"> <EditForm Model="@Form" OnValidSubmit="SaveProfileAsync">
<DataAnnotationsValidator /> <DataAnnotationsValidator />
<div class="profile-form-grid"> <div class="profile-form-grid user-profile-form-grid">
<label class="field"> <label class="field user-span-2">
<span>Nom affiche</span> <span>Nom affiche</span>
<InputText @bind-Value="Form.DisplayName" /> <InputText @bind-Value="Form.DisplayName" />
<ValidationMessage For="@(() => Form.DisplayName)" /> <ValidationMessage For="@(() => Form.DisplayName)" />
@@ -222,24 +197,23 @@
<ValidationMessage For="@(() => Form.PreferredFormat)" /> <ValidationMessage For="@(() => Form.PreferredFormat)" />
</label> </label>
<label class="field span-2"> <label class="field user-span-2">
<span>Cube favori</span> <span>Cube favori</span>
<InputText @bind-Value="Form.FavoriteCube" /> <InputText @bind-Value="Form.FavoriteCube" />
<ValidationMessage For="@(() => Form.FavoriteCube)" /> <ValidationMessage For="@(() => Form.FavoriteCube)" />
</label> </label>
<label class="field span-2"> <label class="field user-span-full">
<span>Bio</span> <span>Bio</span>
<InputTextArea @bind-Value="Form.Bio" /> <InputTextArea @bind-Value="Form.Bio" rows="2" />
<ValidationMessage For="@(() => Form.Bio)" /> <ValidationMessage For="@(() => Form.Bio)" />
</label> </label>
</div> </div>
<div class="profile-actions"> <div class="profile-actions user-profile-actions">
<button class="button secondary" type="submit" disabled="@IsSaving"> <button class="button secondary small" type="submit" disabled="@IsSaving">
@(IsSaving ? "Enregistrement..." : "Enregistrer le profil") @(IsSaving ? "Enregistrement..." : "Enregistrer")
</button> </button>
<p class="section-copy">Les champs vides restent facultatifs et peuvent etre completes plus tard.</p>
</div> </div>
</EditForm> </EditForm>
</section> </section>

119
styles.css
View File

@@ -1623,6 +1623,115 @@ body.site-menu-hidden .site-menu-shell {
color: #ffd8de; color: #ffd8de;
} }
.user-profile-panel {
display: grid;
gap: 0.7rem;
}
.user-profile-heading {
align-items: start;
gap: 0.6rem;
margin-bottom: 0;
}
.user-profile-chips {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
}
.user-profile-chips .mini-chip {
max-width: 100%;
justify-content: flex-start;
padding: 0.3rem 0.6rem;
font-size: 0.88rem;
}
.user-profile-note {
margin: 0;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.35;
}
.user-profile-summary-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0.55rem;
}
.user-summary-card {
display: grid;
gap: 0.12rem;
padding: 0.5rem 0.7rem;
border-radius: 14px;
border: 1px solid var(--panel-border);
background: rgba(255, 255, 255, 0.03);
}
.user-summary-card .micro-label {
font-size: 0.66rem;
letter-spacing: 0.16em;
}
.user-summary-card strong {
font-size: 0.9rem;
line-height: 1.25;
}
.user-profile-bio {
min-height: 0;
margin: 0;
padding: 0.8rem 0.95rem;
}
.user-profile-bio p {
margin: 0.2rem 0 0;
}
.user-profile-form-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.55rem 0.65rem;
}
.user-profile-form-grid .field {
gap: 0.28rem;
}
.user-profile-form-grid .field > span {
font-size: 0.88rem;
}
.user-profile-panel input:not([type="radio"]):not([type="checkbox"]),
.user-profile-panel select,
.user-profile-panel textarea {
padding: 0.68rem 0.8rem;
border-radius: 14px;
font-size: 0.95rem;
}
.user-profile-panel textarea {
min-height: 3.3rem;
}
.user-profile-actions {
justify-content: flex-end;
gap: 0.55rem;
margin-top: 0.65rem;
}
.user-profile-actions .button {
padding: 0.72rem 0.95rem;
}
.user-profile-form-grid .user-span-2 {
grid-column: span 2;
}
.user-profile-form-grid .user-span-full {
grid-column: 1 / -1;
}
.admin-hero-stats { .admin-hero-stats {
margin-top: 0.8rem; margin-top: 0.8rem;
} }
@@ -1956,6 +2065,7 @@ body.site-menu-hidden .site-menu-shell {
} }
.admin-edit-summary-grid, .admin-edit-summary-grid,
.user-profile-summary-grid,
.profile-meta-grid, .profile-meta-grid,
.profile-form-grid, .profile-form-grid,
.admin-toggle-grid, .admin-toggle-grid,
@@ -1967,12 +2077,21 @@ body.site-menu-hidden .site-menu-shell {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.user-profile-form-grid {
grid-template-columns: 1fr;
}
.admin-edit-form-grid .admin-edit-span-2, .admin-edit-form-grid .admin-edit-span-2,
.admin-edit-form-grid .admin-edit-span-3, .admin-edit-form-grid .admin-edit-span-3,
.admin-edit-form-grid .admin-edit-span-full { .admin-edit-form-grid .admin-edit-span-full {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.user-profile-form-grid .user-span-2,
.user-profile-form-grid .user-span-full {
grid-column: 1 / -1;
}
.phase-header { .phase-header {
grid-template-columns: 1fr; grid-template-columns: 1fr;
text-align: center; text-align: center;