sépare la vitrine de l'application : vraie coquille, barre par rôle, chat
Une fois connecté, plus aucun lien vitrine : nouvelle layouts/app (barre
du haut avec menu avatar, barre latérale par rôle, bulle de chat
Messenger, barre d'onglets mobile). Les 10 entrées de navigation
demandées sont construites en vrai plutôt qu'en renvoi "bientôt
disponible" : Ma classe, Emploi du temps, Mes devoirs, Mes cours, Mes
notes côté élève ; Mes classes, Emploi du temps, Séances en direct,
Bibliothèque, Résultats (avec Observations, la dernière fonction
fictive du tableau de bord démo) côté prof.
Chat élève <-> prof de sa classe, jamais entre élèves. Mon profil,
Paramètres (thème, taille du texte), Signaler un problème, Mes
raccourcis. /eleve vidée des faux contenus ("À faire", "Ma progression",
"Mes QCM") restés avant le chantier "vrai cockpit".
Bug trouvé en testant en réel sur le serveur (pas en local) : le
compteur de messages non lus du chat ne redescendait jamais à zéro
(FilConversation sans lu_par_prof_a/lu_par_eleve_a dans son fillable) —
corrigé avec un test de non-régression.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Adam Belkacemi
parent
a41951d4e6
commit
592cba9c4c
89 changed files with 2890 additions and 138 deletions
172
portail/public/css/app-shell.css
Normal file
172
portail/public/css/app-shell.css
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
/* Syllabus — coquille de l'application (séparation vitrine/application, 2026-10-13). */
|
||||
:root {
|
||||
--app-topbar-h: 56px;
|
||||
--app-sidebar-w: 248px;
|
||||
--app-tabbar-h: 58px;
|
||||
}
|
||||
|
||||
html[data-taille="grand"] { font-size: 18px; }
|
||||
|
||||
/* Thème sombre : explicite, ou "système" + préférence OS. */
|
||||
html[data-theme="sombre"] {
|
||||
--sy-bg: #0f172a; --sy-surface: #17223a; --sy-line: #2a3b57; --sy-ink: #e8ecf3; --sy-muted: #9aa7bd;
|
||||
--sy-blue: #5b8dff; --sy-blue-dark: #4876e0; --sy-navy: #c6d4f5;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html[data-theme="systeme"] {
|
||||
--sy-bg: #0f172a; --sy-surface: #17223a; --sy-line: #2a3b57; --sy-ink: #e8ecf3; --sy-muted: #9aa7bd;
|
||||
--sy-blue: #5b8dff; --sy-blue-dark: #4876e0; --sy-navy: #c6d4f5;
|
||||
}
|
||||
}
|
||||
html[data-theme="sombre"] body, html[data-theme="sombre"] .app-topbar, html[data-theme="sombre"] .app-sidebar,
|
||||
html[data-theme="sombre"] .app-tabbar, html[data-theme="sombre"] .app-chat-fenetre { color-scheme: dark; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html[data-theme="systeme"] body, html[data-theme="systeme"] .app-topbar, html[data-theme="systeme"] .app-sidebar,
|
||||
html[data-theme="systeme"] .app-tabbar, html[data-theme="systeme"] .app-chat-fenetre { color-scheme: dark; }
|
||||
}
|
||||
|
||||
body.app-corps { background: var(--sy-bg); }
|
||||
|
||||
.app-topbar {
|
||||
position: sticky; top: 0; z-index: 50; height: var(--app-topbar-h);
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
||||
padding: 0 16px; background: var(--sy-surface); border-bottom: 1px solid var(--sy-line);
|
||||
}
|
||||
.app-topbar__logo { display: flex; align-items: center; gap: 0; text-decoration: none; }
|
||||
.app-topbar__logo img { height: 28px; width: auto; display: block; }
|
||||
.app-topbar__logo span { font-family: Mulish, system-ui, sans-serif; font-weight: 800; font-size: 17px; color: var(--sy-ink); margin-left: -12px; }
|
||||
|
||||
.app-topbar__avatar { position: relative; }
|
||||
.app-topbar__avatar-btn {
|
||||
display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 4px; border: 0; border-radius: 999px;
|
||||
background: transparent; cursor: pointer; font-family: Mulish, system-ui, sans-serif; font-weight: 700; color: var(--sy-ink);
|
||||
}
|
||||
.app-topbar__avatar-btn:hover { background: var(--sy-bg); }
|
||||
.app-topbar__avatar-cercle {
|
||||
width: 32px; height: 32px; border-radius: 999px; background: var(--sy-blue); color: #fff;
|
||||
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: none;
|
||||
}
|
||||
.app-topbar__menu {
|
||||
position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; background: var(--sy-surface);
|
||||
border: 1px solid var(--sy-line); border-radius: 14px; box-shadow: 0 16px 32px -12px rgba(15,23,42,.28);
|
||||
padding: 6px; display: grid; gap: 2px;
|
||||
}
|
||||
.app-topbar__menu a, .app-topbar__menu button {
|
||||
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none;
|
||||
padding: 9px 10px; border-radius: 9px; font-family: Mulish, system-ui, sans-serif; font-weight: 600; font-size: 14px;
|
||||
color: var(--sy-ink); cursor: pointer; text-decoration: none;
|
||||
}
|
||||
.app-topbar__menu a:hover, .app-topbar__menu button:hover { background: var(--sy-bg); }
|
||||
.app-topbar__menu hr { margin: 4px 2px; border: 0; border-top: 1px solid var(--sy-line); }
|
||||
|
||||
.app-shell { display: flex; min-height: calc(100vh - var(--app-topbar-h)); }
|
||||
|
||||
.app-sidebar {
|
||||
width: var(--app-sidebar-w); flex: none; border-right: 1px solid var(--sy-line); background: var(--sy-surface);
|
||||
padding: 16px 10px; position: sticky; top: var(--app-topbar-h); height: calc(100vh - var(--app-topbar-h)); overflow-y: auto;
|
||||
}
|
||||
.app-sidebar__nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
|
||||
.app-sidebar__nav a {
|
||||
display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none;
|
||||
font-family: Mulish, system-ui, sans-serif; font-weight: 700; font-size: 15px; color: var(--sy-ink); position: relative;
|
||||
}
|
||||
.app-sidebar__nav a:hover { background: var(--sy-bg); }
|
||||
.app-sidebar__nav a[aria-current="page"] { background: #eef0fd; color: var(--sy-blue-dark); }
|
||||
html[data-theme="sombre"] .app-sidebar__nav a[aria-current="page"],
|
||||
html[data-theme="systeme"] .app-sidebar__nav a[aria-current="page"] { background: rgba(91,141,255,.16); }
|
||||
.app-sidebar__nav svg { flex: none; width: 22px; height: 22px; }
|
||||
.app-sidebar__badge {
|
||||
margin-left: auto; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #c5221f; color: #fff;
|
||||
font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.app-sidebar__titre {
|
||||
margin: 18px 0 6px; padding: 0 12px; font-family: Mulish, system-ui, sans-serif; font-size: 12px; font-weight: 800;
|
||||
letter-spacing: .02em; color: var(--sy-muted); text-transform: uppercase;
|
||||
}
|
||||
.app-sidebar__epingler {
|
||||
display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; width: 100%; border: 1px dashed var(--sy-line);
|
||||
background: none; font-family: Mulish, system-ui, sans-serif; font-weight: 700; font-size: 13px; color: var(--sy-muted); cursor: pointer;
|
||||
}
|
||||
.app-sidebar__epingler:hover { color: var(--sy-blue); border-color: var(--sy-blue); }
|
||||
.app-sidebar__raccourci { display: flex; align-items: center; gap: 8px; }
|
||||
.app-sidebar__raccourci form { margin-left: auto; }
|
||||
.app-sidebar__raccourci button[type="submit"] { border: 0; background: none; cursor: pointer; color: var(--sy-muted); font-size: 16px; line-height: 1; padding: 2px 6px; }
|
||||
.app-sidebar__raccourci button[type="submit"]:hover { color: #c5221f; }
|
||||
|
||||
.app-main { flex: 1; min-width: 0; }
|
||||
|
||||
/* Chat Messenger */
|
||||
.app-chat-bulle {
|
||||
position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 999px; border: 0;
|
||||
background: var(--sy-blue); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
|
||||
box-shadow: 0 10px 24px -8px rgba(15,23,42,.4);
|
||||
}
|
||||
.app-chat-bulle svg { width: 26px; height: 26px; }
|
||||
.app-chat-bulle__badge {
|
||||
position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
|
||||
background: #c5221f; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
|
||||
border: 2px solid var(--sy-bg);
|
||||
}
|
||||
.app-chat-fenetre {
|
||||
position: fixed; right: 20px; bottom: 88px; z-index: 60; width: 340px; height: 460px; border-radius: 16px;
|
||||
background: var(--sy-surface); border: 1px solid var(--sy-line); box-shadow: 0 20px 48px -16px rgba(15,23,42,.35);
|
||||
display: flex; flex-direction: column; overflow: hidden;
|
||||
}
|
||||
.app-chat-fenetre__entete {
|
||||
display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--sy-line);
|
||||
font-family: Mulish, system-ui, sans-serif; font-weight: 800; color: var(--sy-ink);
|
||||
}
|
||||
.app-chat-fenetre__entete button { border: 0; background: none; cursor: pointer; color: var(--sy-muted); padding: 4px; }
|
||||
.app-chat-fenetre__corps { flex: 1; overflow-y: auto; padding: 10px 12px; display: grid; gap: 8px; align-content: start; }
|
||||
.app-chat-fenetre__liste-fils { list-style: none; margin: 0; padding: 0; display: grid; }
|
||||
.app-chat-fenetre__liste-fils li button {
|
||||
width: 100%; text-align: left; display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer;
|
||||
padding: 10px 6px; border-radius: 10px; font-family: Mulish, system-ui, sans-serif; font-weight: 700; color: var(--sy-ink);
|
||||
}
|
||||
.app-chat-fenetre__liste-fils li button:hover { background: var(--sy-bg); }
|
||||
.app-bulle-message { max-width: 80%; padding: 8px 12px; border-radius: 14px; font-family: Mulish, system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.35; }
|
||||
.app-bulle-message--eleve { justify-self: start; background: var(--sy-bg); color: var(--sy-ink); border: 1px solid var(--sy-line); }
|
||||
.app-bulle-message--prof { justify-self: end; background: var(--sy-blue); color: #fff; }
|
||||
.app-chat-fenetre__pied { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--sy-line); }
|
||||
.app-chat-fenetre__pied input {
|
||||
flex: 1; border: 1px solid var(--sy-line); border-radius: 999px; padding: 8px 12px; font-family: inherit; background: var(--sy-bg); color: var(--sy-ink);
|
||||
}
|
||||
.app-chat-fenetre__pied button {
|
||||
border: 0; background: var(--sy-blue); color: #fff; border-radius: 999px; padding: 0 16px; font-weight: 800; cursor: pointer;
|
||||
}
|
||||
.app-chat-fenetre__desactive { padding: 14px; text-align: center; color: var(--sy-muted); font-family: Mulish, system-ui, sans-serif; font-weight: 700; font-size: 13px; }
|
||||
|
||||
/* Barre d'onglets mobile */
|
||||
.app-tabbar {
|
||||
display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 55; height: var(--app-tabbar-h);
|
||||
background: var(--sy-surface); border-top: 1px solid var(--sy-line);
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
.app-tabbar__liste { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
|
||||
.app-tabbar__liste a, .app-tabbar__liste button {
|
||||
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
|
||||
text-decoration: none; border: 0; background: none; cursor: pointer; font-family: Mulish, system-ui, sans-serif;
|
||||
font-size: 11px; font-weight: 700; color: var(--sy-muted); position: relative;
|
||||
}
|
||||
.app-tabbar__liste a[aria-current="page"] { color: var(--sy-blue); }
|
||||
.app-tabbar__liste svg { width: 22px; height: 22px; }
|
||||
.app-feuille {
|
||||
display: none; position: fixed; inset: 0; z-index: 65; background: var(--sy-surface);
|
||||
}
|
||||
.app-feuille__entete { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--sy-line); }
|
||||
.app-feuille__contenu { padding: 10px; overflow-y: auto; height: calc(100% - 56px); }
|
||||
.app-feuille__contenu a, .app-feuille__contenu button {
|
||||
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: none;
|
||||
padding: 14px 10px; font-family: Mulish, system-ui, sans-serif; font-weight: 700; font-size: 16px; color: var(--sy-ink);
|
||||
text-decoration: none; cursor: pointer;
|
||||
}
|
||||
.app-feuille__contenu svg { width: 22px; height: 22px; flex: none; }
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.app-sidebar { display: none; }
|
||||
.app-tabbar { display: block; }
|
||||
.app-shell { min-height: calc(100vh - var(--app-topbar-h) - var(--app-tabbar-h)); padding-bottom: var(--app-tabbar-h); }
|
||||
.app-chat-bulle { display: none; }
|
||||
.app-chat-fenetre.est-ouverte { right: 0; bottom: 0; left: 0; top: var(--app-topbar-h); width: auto; height: auto; border-radius: 0; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { .app-chat-fenetre, .app-feuille { transition: none; } }
|
||||
Loading…
Add table
Add a link
Reference in a new issue