Forge-Store/Forge-Engine
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Rend la page de profil compacte et sur 2 colonnes

Browse Source 
Les 5 sections (email, informations, mot de passe, codes de récupération,
suppression du compte) tenaient les unes sous les autres dans une seule
colonne étroite (560px) avec le padding/espacement par défaut de Bulma —
imposait de scroller pour tout voir. Réorganisé en grille CSS 2 colonnes
(container élargi à 980px, static/style.css : .profileGrid/.profileCol/
.profileBox) : compte/infos/suppression à gauche, sécurité (mot de passe,
codes de récupération) à droite. Champs resserrés (labels remplacés par
des placeholders, is-small partout, marges réduites), jauge de force du
mot de passe sur une ligne (.passwordChecklist-compact). Repasse en une
seule colonne sous 720px de large.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
william
2026-08-29 06:46:19 +02:00
co-authored by Claude Sonnet 5
parent c8c949c430
commit dedbda422c
2 changed files with 85 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/style.css
+19
View File
@@ -584,6 +584,25 @@ code{ background:var(--panel2); border:1px solid var(--border); border-radius:4p
.passwordChecklist li::before{ content:"○"; position:absolute; left:0; }
.passwordChecklist li.ok{ color:#4caf50; }
.passwordChecklist li.ok::before{ content:"✓"; }
.passwordChecklist-compact{ flex-direction:row; flex-wrap:wrap; column-gap:10px; row-gap:2px; }
.passwordChecklist-compact li{ font-size:11px; }
/* ---------- Page de profil : compacte, sur 2 colonnes ---------- */
.profileSection{ padding-top:1.5rem; padding-bottom:1.5rem; }
.profileContainer{ max-width:980px; }
.profileNotif{ padding:0.6rem 0.9rem; margin-bottom:0.75rem; }
.profileGrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.profileCol{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.profileBox{ padding:0.85rem 1rem; }
.profileBox-danger{ border:1px solid #b33; }
.profileForm .field{ margin-bottom:8px; }
.profileForm .field:last-child{ margin-bottom:0; }
.profileForm-row{ display:flex; flex-wrap:wrap; gap:8px; }
.profileForm-row .field{ flex:1 1 120px; margin-bottom:0; }
.profileForm-row .field.profileForm-full{ flex-basis:100%; }
@media (max-width:720px){
.profileGrid{ grid-template-columns:1fr; }
}
/* ---------- Inscription : QR code de la double authentification ---------- */
.totpQrWrap{ background:#fff; padding:16px; border-radius:8px; display:inline-block; max-width:220px; }