feat(journal): карточка отчёта по ученику в модалке
- новая модалка #reportCardModal с фото, именем, текстом записи и бейджами - кнопка «Карточка отчёта» (иконка contact) в плитке и в карточке журнала - закрытие по клику по оверлею и по Escape - imgModal поднят над карточкой, чтобы просмотр фото открывался поверх неё
This commit is contained in:
@@ -263,6 +263,69 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay report-overlay" id="reportCardModal">
|
||||
<article class="student-card" aria-labelledby="reportCardName">
|
||||
<div class="student-card__media">
|
||||
<img class="student-card__photo" id="reportCardPhoto" alt="" decoding="async">
|
||||
<div class="student-card__nophoto" id="reportCardNoPhoto" hidden>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
|
||||
<rect x="3" y="4" width="18" height="16" rx="3"/>
|
||||
<path d="M3 15.5l4.5-4.2 3.5 3.2 3.2-2.8L21 15.5"/>
|
||||
<circle cx="9" cy="9.2" r="1.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="student-card__content">
|
||||
<svg class="student-card__sparks" viewBox="0 0 120 40" aria-hidden="true" focusable="false">
|
||||
<g fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
|
||||
<path d="M6 30c14-6 30-6 44 0"/>
|
||||
<path d="M74 16h16M82 8v16"/>
|
||||
<path d="M104 6l3 6M104 26l3-6"/>
|
||||
</g>
|
||||
</svg>
|
||||
<h2 class="student-card__name" id="reportCardName"></h2>
|
||||
<p class="student-card__text" id="reportCardText"></p>
|
||||
<svg class="student-card__smiley" viewBox="0 0 72 72"
|
||||
fill="none" stroke="#FFB71B" stroke-width="2.6"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true" focusable="false">
|
||||
<path d="M38 5.6v5.4M60.6 15l-3.8 3.8M68.4 38H63M60.6 61l-3.8-3.8M38 70.4V65M15.4 61l3.8-3.8M7.6 38H13M15.4 15l3.8 3.8"/>
|
||||
<path d="M57.6 30.8c1.9 4.4 2.7 9 2.2 13.5-.9 8-6 15-13.7 17.4-7.7 2.4-15.9.6-20.9-5-5-5.6-6.6-14-4-21.2 2.6-7.2 8.8-12.6 16.4-14.3 7.7-1.7 15.9 1.8 20 9.6Z"/>
|
||||
<path d="M30.6 33.2h.02M45.4 32.4h.02" stroke-width="3.6"/>
|
||||
<path d="M28.6 45c2.6 4 6.6 6.3 11 6.3 4.5 0 8.6-2.3 11.3-6.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<footer class="student-card__footer">
|
||||
<div class="student-card__footer-badges">
|
||||
<span class="student-card__badge student-card__badge--time">
|
||||
<svg class="student-card__icon student-card__icon--badge" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="1.9"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true" focusable="false">
|
||||
<path d="M16 19v-1.5a3.5 3.5 0 0 0-3.5-3.5h-5A3.5 3.5 0 0 0 4 17.5V19"/>
|
||||
<circle cx="10" cy="8" r="3.4"/>
|
||||
<path d="M20 19v-1.5a3.5 3.5 0 0 0-2.6-3.38"/>
|
||||
<path d="M15.4 4.6a3.4 3.4 0 0 1 0 6.4"/>
|
||||
</svg>
|
||||
<span id="reportCardTime"></span>
|
||||
</span>
|
||||
<span class="student-card__badge student-card__badge--tool">
|
||||
<svg class="student-card__icon student-card__icon--ps" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="1.9"
|
||||
stroke-linecap="round" stroke-linejoin="round"
|
||||
aria-hidden="true" focusable="false">
|
||||
<rect x="2.2" y="2.2" width="19.6" height="19.6" rx="5.8" fill="currentColor" fill-opacity=".16"/>
|
||||
<text x="12" y="16.9" text-anchor="middle" font-size="11.6" font-weight="800"
|
||||
letter-spacing="-.3" fill="currentColor" stroke="none"
|
||||
font-family="inherit">Ps</text>
|
||||
</svg>
|
||||
<span id="reportCardModule"></span>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="toast" id="toast"></div>
|
||||
<script src="vendor/lucide.min.js"></script>
|
||||
<script src="js/datetime.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user