alpinux.cedrica5l/alpinux-static
1
0
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

style: compacter le header — prénom + avatar initiale + icône logout

Browse source 
Réduit le padding nav (wrap évité sur "Tableau de bord"), remplace
"Nom complet + bouton Déconnexion" par un avatar cercle + prénom +
icône ⎋ avec tooltip, libérant ~120px horizontaux.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alpinux 2026-05-06 10:46:18 +02:00
parent d2683a02e0
commit 4442022982
2 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
app/static/app.css
View file

@ -25,8 +25,8 @@ header { background: var(--blue-dark); color: #fff; }
.brand-sub { opacity: .7; font-weight: 300; }
.brand img { border-radius: 5px; }
.header-nav { display: flex; gap: .2rem; flex: 1; }
.header-nav a { color: rgba(255,255,255,.8); padding: .4rem .8rem; border-radius: 6px; font-size: .9rem; transition: background .15s; }
.header-nav { display: flex; gap: .15rem; flex: 1; }
.header-nav a { color: rgba(255,255,255,.8); padding: .4rem .6rem; border-radius: 6px; font-size: .88rem; white-space: nowrap; transition: background .15s; }
.header-nav a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.header-nav a.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
.nav-trash { position: relative; }
@ -35,9 +35,17 @@ header { background: var(--blue-dark); color: #fff; }
font-weight: 700; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem;
margin-left: .3rem; vertical-align: middle; line-height: 1; }
.header-user { margin-left: auto; display: flex; align-items: center; gap: 1rem; color: rgba(255,255,255,.85); font-size: .9rem; white-space: nowrap; }
.btn-logout { color: rgba(255,255,255,.75); font-size: .85rem; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; padding: .3rem .7rem; }
.btn-logout:hover { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; }
.header-user { margin-left: auto; display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.user-chip { display: flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.9); font-size: .88rem; }
.user-avatar { display: inline-flex; align-items: center; justify-content: center;
width: 1.6rem; height: 1.6rem; border-radius: 50%;
background: rgba(255,255,255,.25); color: #fff;
font-size: .75rem; font-weight: 700; flex-shrink: 0; }
.btn-logout-icon { display: inline-flex; align-items: center; justify-content: center;
width: 1.8rem; height: 1.8rem; border-radius: 50%;
color: rgba(255,255,255,.7); font-size: 1rem;
border: 1px solid rgba(255,255,255,.3); transition: background .15s, color .15s; }
.btn-logout-icon:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }
/* ── Mise en page ─────────────────────────────────────────────── */
main { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; }

7
app/templates/base.html
View file

@ -32,8 +32,11 @@
</form>
<div class="header-user">
{% if user %}
<span>{{ user.name }}</span>
<a href="{{ url_for('logout') }}" class="btn-logout">Déconnexion</a>
<span class="user-chip" title="{{ user.name }}">
<span class="user-avatar">{{ user.name[0] }}</span>
{{ user.name.split()[0] }}
</span>
<a href="{{ url_for('logout') }}" class="btn-logout-icon" title="Se déconnecter">⎋</a>
{% endif %}
</div>
</div>