feat(journal): карточка отчёта по ученику в модалке

- новая модалка #reportCardModal с фото, именем, текстом записи и бейджами
- кнопка «Карточка отчёта» (иконка contact) в плитке и в карточке журнала
- закрытие по клику по оверлею и по Escape
- imgModal поднят над карточкой, чтобы просмотр фото открывался поверх неё
This commit is contained in:
dev
2026-10-04 21:53:05 +03:00
parent 19be1cc9ef
commit 8fc6ea804a
3 changed files with 217 additions and 0 deletions
+109
View File
@@ -223,6 +223,7 @@ body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;b
.modal-overlay.open{display:flex}
.modal-overlay > img{max-width:90%;max-height:90dvh;border-radius:var(--radius)}
#videoModal{background:rgba(0,0,0,.85)}
#imgModal{z-index:130}
.video-modal{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;width:min(1000px,94vw);max-height:94dvh;display:flex;flex-direction:column;gap:12px}
.video-head{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--text)}
.video-head > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -704,4 +705,112 @@ body[data-page=settings] .page-head{align-items:flex-end}
.lesson-dash-when{color:var(--muted);font-size:.74rem;margin-left:auto;white-space:nowrap}
.lesson-dash-text{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.45}
/* --- Карточка отчёта об ученике (модалка на journal.html) --- */
.report-overlay{background:rgba(0,0,0,.62);backdrop-filter:blur(10px) saturate(1.08);-webkit-backdrop-filter:blur(10px) saturate(1.08);padding:24px 16px;overflow:auto;overscroll-behavior:contain}
.student-card{
--sc-primary:#3478F6;
--sc-primary-dark:#173B78;
--sc-primary-soft:#E8F2FF;
--sc-text:#172033;
--sc-text-secondary:#68758A;
--sc-border:#E5EBF3;
--sc-yellow:#FFB71B;
--sc-radius-card:20px;
--sc-radius-photo:18px;
--sc-radius-pill:999px;
--sc-pad-x:22px;
--sc-media-inset:20px;
--sc-smiley-size:50px;
--sc-smiley-bottom:16px;
position:relative;
width:100%;
max-width:440px;
background:var(--card);
color:var(--sc-text);
border-radius:var(--sc-radius-card);
box-shadow:0 10px 30px rgba(39,91,160,.10),0 2px 8px rgba(39,91,160,.06),0 24px 60px rgba(0,0,0,.35);
overflow:hidden;
flex-shrink:0;
-webkit-tap-highlight-color:transparent;
}
.student-card__media{
position:relative;
margin:var(--sc-media-inset) var(--sc-media-inset) 0;
aspect-ratio:1.55/1;
border-radius:var(--sc-radius-photo);
overflow:hidden;
background:var(--sc-primary-soft);
rotate:-3deg;
transform-origin:50% 50%;
}
.student-card__photo{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.02) brightness(1.02);cursor:zoom-in}
.student-card__photo[hidden]{display:none}
.student-card__media::after{
content:"";
position:absolute;
inset:auto 0 0;
height:25%;
background:linear-gradient(to bottom,transparent,rgba(10,25,50,.08));
pointer-events:none;
}
.student-card__nophoto{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
color:#A9BEDC;
}
.student-card__nophoto[hidden]{display:none}
.student-card__nophoto svg{width:44%;height:44%}
.student-card__content{
position:relative;
padding:24px var(--sc-pad-x) calc(var(--sc-smiley-bottom) + var(--sc-smiley-size) + 18px);
}
.student-card__sparks{position:absolute;top:15px;right:16px;width:104px;color:#E1ECFB;pointer-events:none}
.student-card__name{margin:0 0 8px;font-size:20px;font-weight:750;line-height:1.25;letter-spacing:-.1px;color:var(--sc-text);overflow-wrap:break-word}
.student-card__text{margin:0;font-size:15px;line-height:1.6;color:var(--sc-text-secondary);white-space:pre-wrap;overflow-wrap:break-word}
.student-card__text:empty{display:none}
.student-card__smiley{position:absolute;right:24px;bottom:var(--sc-smiley-bottom);width:var(--sc-smiley-size);height:var(--sc-smiley-size);pointer-events:none}
.student-card__footer{
display:flex;
align-items:center;
padding:14px var(--sc-pad-x);
border-top:1px solid var(--sc-border);
background:linear-gradient(to bottom,#FBFDFF 0%,#FFFFFF 100%);
}
.student-card__footer-badges{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-width:0}
.student-card__badge{
display:inline-flex;
align-items:center;
gap:7px;
max-width:100%;
padding:8px 15px;
border-radius:var(--sc-radius-pill);
font-size:14px;
font-weight:700;
line-height:1;
letter-spacing:.1px;
color:#FFFFFF;
white-space:nowrap;
user-select:none;
}
.student-card__badge--time{background:rgba(23,59,120,.94)}
.student-card__badge--tool{background:var(--sc-primary);box-shadow:0 4px 12px rgba(52,120,246,.28)}
.student-card__badge--tool[hidden]{display:none}
.student-card__badge > span{overflow:hidden;text-overflow:ellipsis}
.student-card__icon{display:block;flex:none}
.student-card__icon--badge{width:17px;height:17px}
.student-card__icon--ps{width:19px;height:19px}
.student-card :focus-visible{outline:2px solid var(--sc-primary);outline-offset:2px;border-radius:6px}
.journal-card .foot .edit svg,.card .edit svg{width:16px;height:16px;display:block}
@media(max-width:420px){
.report-overlay{padding:16px 12px}
.student-card{
--sc-pad-x:15px;
--sc-media-inset:14px;
--sc-smiley-size:40px;
}
.student-card__badge{font-size:12px;padding:6px 11px}
}