templates/school/roomList.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/frontEndLayout.html.twig' %}
  3. {% block name %}Classrooms of Bethesda{% endblock %}
  5. {% block stylesheets %}
  6. {{ parent() }}
  7. <style>
  8. /* ── Hero Banner ──────────────────────────────────────── */
  9. .classrooms-hero {
  10. background:
  11. linear-gradient(135deg, rgba(10,22,40,0.92) 0%, rgba(17,34,68,0.78) 100%),
  12. url("{{ asset('assets/images/slider-02.jpg') }}") center / cover no-repeat;
  13. padding: 5rem 1rem 4rem;
  14. text-align: center;
  15. position: relative;
  16. overflow: hidden;
  17. }
  18. .classrooms-hero::after {
  19. content: '';
  20. position: absolute;
  21. bottom: 0; left: 0; right: 0;
  22. height: 3px;
  23. background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold));
  24. }
  25. .classrooms-hero .hero-tag {
  26. font-size: 0.7rem;
  27. font-weight: 600;
  28. letter-spacing: 0.35em;
  29. text-transform: uppercase;
  30. color: var(--gold);
  31. display: inline-block;
  32. margin-bottom: 1rem;
  33. padding: 0.3rem 0.9rem;
  34. border: 1px solid rgba(201,168,76,0.35);
  35. }
  36. .classrooms-hero h1 {
  37. font-family: var(--font-display);
  38. font-size: clamp(2rem, 5vw, 3.2rem);
  39. font-weight: 900;
  40. color: var(--white);
  41. margin: 0 0 1rem;
  42. line-height: 1.15;
  43. }
  44. .classrooms-hero h1 em { font-style: italic; color: var(--gold); }
  46. .hero-meta {
  47. display: inline-flex;
  48. align-items: center;
  49. gap: 1.5rem;
  50. flex-wrap: wrap;
  51. justify-content: center;
  52. }
  53. .hero-meta-item {
  54. display: flex;
  55. align-items: center;
  56. gap: 0.5rem;
  57. font-size: 0.78rem;
  58. letter-spacing: 0.1em;
  59. text-transform: uppercase;
  60. color: rgba(255,255,255,0.5);
  61. padding: 0.3rem 0.9rem;
  62. border: 1px solid rgba(255,255,255,0.1);
  63. }
  64. .hero-meta-item i { color: var(--gold); }
  66. /* ── Section wrapper ──────────────────────────────────── */
  67. .classrooms-section {
  68. background: var(--cream);
  69. padding: 4rem 0 5rem;
  70. }
  72. /* ── Classroom Card ───────────────────────────────────── */
  73. .classroom-card {
  74. background: var(--white);
  75. border: 1px solid rgba(0,0,0,0.06);
  76. overflow: hidden;
  77. position: relative;
  78. margin-bottom: 1.75rem;
  79. transition: transform 0.32s ease, box-shadow 0.32s ease;
  80. display: flex;
  81. flex-direction: column;
  82. }
  83. .classroom-card::before {
  84. content: '';
  85. position: absolute;
  86. top: 0; left: 0; right: 0;
  87. height: 3px;
  88. background: linear-gradient(90deg, var(--gold), var(--accent));
  89. transform: scaleX(0);
  90. transition: transform 0.32s ease;
  91. }
  92. .classroom-card:hover {
  93. transform: translateY(-6px);
  94. box-shadow: 0 20px 48px rgba(10,22,40,0.11);
  95. }
  96. .classroom-card:hover::before { transform: scaleX(1); }
  98. /* Teacher photo header */
  99. .classroom-img-wrap {
  100. position: relative;
  101. height: 160px;
  102. overflow: hidden;
  103. background: var(--navy);
  104. }
  105. .classroom-img-wrap img {
  106. width: 100%;
  107. height: 100%;
  108. object-fit: cover;
  109. object-position: top;
  110. transition: transform 0.42s ease, filter 0.42s ease;
  111. filter: brightness(0.85);
  112. }
  113. .classroom-card:hover .classroom-img-wrap img {
  114. transform: scale(1.05);
  115. filter: brightness(0.7);
  116. }
  118. /* Class name badge over image */
  119. .classroom-name-badge {
  120. position: absolute;
  121. bottom: 0; left: 0; right: 0;
  122. padding: 1.5rem 1rem 0.85rem;
  123. background: linear-gradient(to top, rgba(10,22,40,0.92), transparent);
  124. }
  125. .classroom-name-badge h2 {
  126. font-family: var(--font-display);
  127. font-size: 1.2rem;
  128. font-weight: 700;
  129. color: var(--white);
  130. margin: 0;
  131. line-height: 1.2;
  132. }
  133. .classroom-name-badge h2 a {
  134. color: inherit;
  135. text-decoration: none;
  136. transition: color 0.25s;
  137. }
  138. .classroom-name-badge h2 a:hover { color: var(--gold); }
  140. /* APC exam results block */
  141. .exam-block {
  142. padding: 0 1rem;
  143. flex: 1;
  144. }
  146. .exam-block-header {
  147. display: flex;
  148. align-items: center;
  149. justify-content: space-between;
  150. padding: 0.9rem 0 0.6rem;
  151. border-bottom: 1px solid rgba(0,0,0,0.06);
  152. margin-bottom: 0.6rem;
  153. }
  154. .exam-block-label {
  155. font-size: 0.68rem;
  156. font-weight: 600;
  157. letter-spacing: 0.18em;
  158. text-transform: uppercase;
  159. color: var(--text-muted);
  160. }
  161. .exam-success-rate {
  162. font-family: var(--font-display);
  163. font-size: 1.4rem;
  164. font-weight: 700;
  165. color: var(--gold);
  166. line-height: 1;
  167. }
  169. /* Student list */
  170. .student-list {
  171. list-style: none;
  172. padding: 0;
  173. margin: 0 0 0.75rem;
  174. max-height: 260px;
  175. overflow-y: auto;
  176. scrollbar-width: thin;
  177. scrollbar-color: var(--gold-light) transparent;
  178. }
  179. .student-list::-webkit-scrollbar { width: 4px; }
  180. .student-list::-webkit-scrollbar-thumb { background: var(--gold-light); }
  182. .student-row {
  183. display: grid;
  184. grid-template-columns: 36px 1fr auto;
  185. align-items: center;
  186. gap: 0.65rem;
  187. padding: 0.55rem 0;
  188. border-bottom: 1px solid rgba(0,0,0,0.04);
  189. }
  190. .student-row:last-child { border-bottom: none; }
  192. .student-avatar {
  193. width: 36px;
  194. height: 36px;
  195. border-radius: 50%;
  196. object-fit: cover;
  197. border: 1px solid rgba(201,168,76,0.25);
  198. }
  199. .student-name {
  200. font-size: 0.82rem;
  201. font-weight: 500;
  202. color: var(--navy);
  203. white-space: nowrap;
  204. overflow: hidden;
  205. text-overflow: ellipsis;
  206. }
  207. .student-result {
  208. font-size: 0.72rem;
  209. font-weight: 600;
  210. padding: 0.2rem 0.55rem;
  211. text-transform: capitalize;
  212. white-space: nowrap;
  213. }
  214. .student-result.success {
  215. background: rgba(29,138,110,0.1);
  216. color: #1D8A6E;
  217. }
  218. .student-result.fail {
  219. background: rgba(217,83,79,0.1);
  220. color: var(--danger);
  221. }
  222. .student-result.pending {
  223. background: rgba(201,168,76,0.1);
  224. color: #9A7A2A;
  225. }
  227. /* Card footer */
  228. .classroom-card-footer {
  229. display: flex;
  230. align-items: center;
  231. justify-content: space-between;
  232. padding: 0.85rem 1rem;
  233. background: rgba(10,22,40,0.03);
  234. border-top: 1px solid rgba(0,0,0,0.05);
  235. margin-top: auto;
  236. }
  237. .classroom-meta-item {
  238. display: flex;
  239. align-items: center;
  240. gap: 0.45rem;
  241. font-size: 0.75rem;
  242. color: var(--text-muted);
  243. font-weight: 500;
  244. }
  245. .classroom-meta-item i { color: var(--gold); font-size: 0.78rem; }
  247. /* ── Pagination ───────────────────────────────────────── */
  248. .pagination-wrap {
  249. display: flex;
  250. justify-content: center;
  251. padding: 2.5rem 0 0;
  252. }
  253. .pagination-wrap .pagination .page-item .page-link {
  254. border: 1px solid rgba(0,0,0,0.1);
  255. color: var(--navy);
  256. font-size: 0.85rem;
  257. padding: 0.55rem 0.95rem;
  258. border-radius: 0 !important;
  259. transition: all 0.25s;
  260. }
  261. .pagination-wrap .pagination .page-item.active .page-link,
  262. .pagination-wrap .pagination .page-item .page-link:hover {
  263. background: var(--gold);
  264. border-color: var(--gold);
  265. color: var(--navy);
  266. font-weight: 700;
  267. }
  269. /* ── Empty state ──────────────────────────────────────── */
  270. .empty-state {
  271. text-align: center;
  272. padding: 5rem 2rem;
  273. }
  274. .empty-icon {
  275. width: 72px;
  276. height: 72px;
  277. border: 2px solid rgba(201,168,76,0.3);
  278. display: inline-flex;
  279. align-items: center;
  280. justify-content: center;
  281. color: var(--gold);
  282. font-size: 1.8rem;
  283. margin-bottom: 1.5rem;
  284. }
  285. .empty-state h2 {
  286. font-family: var(--font-display);
  287. font-size: 1.6rem;
  288. color: var(--navy);
  289. margin-bottom: 0.75rem;
  290. }
  291. .empty-state p {
  292. color: var(--text-muted);
  293. font-size: 0.95rem;
  294. margin-bottom: 1.8rem;
  295. }
  296. </style>
  297. {% endblock %}
  299. {% block body %}
  301. {# ── Hero Banner ──────────────────────────────────────────── #}
  302. <div class="classrooms-hero">
  303. <span class="hero-tag">{{ french_school_name }}</span>
  304. <h1>
  305. Liste des <em>Classes</em><br>
  306. &amp; Résultats aux examens officiels
  307. </h1>
  308. <div class="hero-meta">
  309. <div class="hero-meta-item">
  310. <i class="fa fa-calendar"></i>
  311. Session {{ year.code ?? '2022-2023' }}
  312. </div>
  313. {% if rooms|length > 0 %}
  314. <div class="hero-meta-item">
  315. <i class="fa fa-door-open"></i>
  316. {{ rooms|length }} {{ rooms|length > 1 ? 'classes' : 'classe' }}
  317. </div>
  318. {% endif %}
  319. </div>
  320. </div>
  322. {# ── Classrooms Grid ──────────────────────────────────────── #}
  323. {% if rooms|length > 0 %}
  325. <section class="classrooms-section" id="overviews">
  326. <div class="container">
  328. {# Section header #}
  329. <div class="section-header" style="padding-top:0; padding-bottom:2.5rem;">
  330. <span class="section-tag">Résultats officiels</span>
  331. <h2 class="section-title">
  332. Nos classes &amp; <em>performances</em>
  333. </h2>
  334. <div class="section-divider"></div>
  335. <p class="section-sub">
  336. Résultats détaillés par classe pour la session officielle {{ year.code ?? '2022-2023' }}.
  337. </p>
  338. </div>
  340. {% for row in rooms|batch(3) %}
  341. <div class="row">
  342. {% for room in row %}
  344. {# ── Pre-compute stats ── #}
  345. {% set success = 0 %}
  346. {% set candidats = 0 %}
  347. {% if room.apc %}
  348. {% for sub in subscriptions %}
  349. {% if sub.classRoom.id == room.id %}
  350. {% set candidats = candidats + 1 %}
  351. {% if sub.officialExamResult != "0" %}
  352. {% set success = success + 1 %}
  353. {% endif %}
  354. {% endif %}
  355. {% endfor %}
  356. {% endif %}
  358. <div class="col-lg-4 col-md-6 col-12">
  359. <div class="classroom-card">
  361. {# ── Teacher photo + class name ── #}
  362. <div class="classroom-img-wrap">
  363. {% if room.id in mainTeachersMap|keys %}
  364. <img src="{{ mainTeachersMap[room.id].avatar(300) }}"
  365. alt="{{ room.name }}" loading="lazy">
  366. {% else %}
  367. <img src="{{ asset('assets/images/teacher_default.png') }}"
  368. alt="{{ room.name }}" loading="lazy">
  369. {% endif %}
  370. <div class="classroom-name-badge">
  371. <h2><a href="#">{{ room.name }}</a></h2>
  372. </div>
  373. </div>
  375. {# ── APC exam results ── #}
  376. {% if room.apc and candidats > 0 %}
  377. <div class="exam-block">
  378. <div class="exam-block-header">
  379. <span class="exam-block-label">Résultats examen officiel</span>
  380. <span class="exam-success-rate">
  381. {{ (100 * success / candidats)|round(1, 'floor') }}%
  382. </span>
  383. </div>
  385. <ul class="student-list">
  386. {% for sub in subscriptions %}
  387. {% if sub.classRoom.id == room.id %}
  388. {% set resultLower = sub.verbalOfficialExamResult|lower %}
  389. {% set resultClass = 'pending' %}
  390. {% if sub.officialExamResult != "0" %}
  391. {% set resultClass = 'success' %}
  392. {% elseif sub.officialExamResult == "0" and sub.verbalOfficialExamResult %}
  393. {% set resultClass = 'fail' %}
  394. {% endif %}
  396. <li class="student-row">
  397. <img class="student-avatar"
  398. src="{{ sub.student.imageName
  399. ? asset('assets/images/student/' ~ sub.student.imageName)
  400. : (sub.student.gender
  401. ? asset('assets/images/student/female-default-avatar.jpg')
  402. : asset('assets/images/student/male-default-avatar.jpg'))
  403. }}"
  404. alt="{{ sub.student.lastname }}"
  405. loading="lazy">
  406. <span class="student-name">
  407. {{ sub.student.lastname|title }}
  408. {{ sub.student.firstname|title }}
  409. </span>
  410. <span class="student-result {{ resultClass }}">
  411. {{ resultLower ?: '—' }}
  412. </span>
  413. </li>
  414. {% endif %}
  415. {% endfor %}
  416. </ul>
  417. </div>
  418. {% endif %}
  420. {# ── Card footer ── #}
  421. <div class="classroom-card-footer">
  422. <span class="classroom-meta-item">
  423. <i class="fa fa-book"></i>
  424. {{ room.modules|length }}
  425. {{ room.modules|length > 1 ? 'modules' : 'module' }}
  426. </span>
  427. {% if room.apc and candidats > 0 %}
  428. <span class="classroom-meta-item">
  429. <i class="fa fa-users"></i>
  430. {{ candidats }}
  431. {{ candidats > 1 ? 'candidats' : 'candidat' }}
  432. </span>
  433. <span class="classroom-meta-item">
  434. <i class="fa fa-check-circle"></i>
  435. {{ success }} reçu{{ success > 1 ? 's' : '' }}
  436. </span>
  437. {% endif %}
  438. </div>
  440. </div>{# end classroom-card #}
  441. </div>
  443. {% endfor %}
  444. </div>{# end row #}
  445. {% endfor %}
  447. {# ── Pagination ── #}
  448. <div class="pagination-wrap">
  449. {{ knp_pagination_render(rooms) }}
  450. </div>
  452. </div>{# end container #}
  453. </section>
  455. {% else %}
  457. {# ── Empty state ── #}
  458. <section class="classrooms-section">
  459. <div class="container">
  460. <div class="empty-state">
  461. <div class="empty-icon">
  462. <i class="fa fa-building"></i>
  463. </div>
  464. <h2>Aucune classe pour le moment</h2>
  465. <p>Les salles de classe n'ont pas encore été configurées.</p>
  466. {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
  467. <a href="{{ path('admin_classrooms_new') }}" class="btn-gold">
  468. <i class="fa fa-plus"></i>&nbsp; Créer la première classe
  469. </a>
  470. {% endif %}
  471. </div>
  472. </div>
  473. </section>
  475. {% endif %}
  477. {% endblock %}