Skip to content

Commit 96ab626

Browse files
christianbeeznestchristianbeeznest
committed
Session: Improve summary UI/UX
1 parent 06c7004 commit 96ab626

File tree

1 file changed

+204
-133
lines changed

1 file changed

+204
-133
lines changed

‎public/main/template/default/session/resume_session.html.twig‎

Lines changed: 204 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -2,139 +2,210 @@
22

33
{% block content %}
44

5-
{% autoescape false %}
6-
{{ session_header }}
7-
{{ title }}
8-
9-
<table id="session-properties" class="table table-bordered">
10-
<tr>
11-
<td>{{ 'Created by'|trans }}</td>
12-
<td>
13-
{% for session_admin in session.sessionAdmins %}
14-
{{ session_admin | user_complete_name_with_link }}<br>
15-
{% endfor %}
16-
</td>
17-
</tr>
18-
<tr>
19-
<td>{{ 'General coach' | trans}} :</td>
20-
<td>
21-
{% for coach in session.generalCoaches %}
22-
{{ coach | user_complete_name_with_link }}<br>
23-
{% endfor %}
24-
</td>
25-
</tr>
26-
{% if session.category %}
27-
<tr>
28-
<td>{{ 'Session category' | trans}} </td>
29-
<td>{{ session.category.title }}</td>
30-
</tr>
31-
{% endif %}
32-
33-
{% if session.duration > 0 %}
34-
<tr>
35-
<td>{{ 'Duration' | trans}} </td>
36-
<td>
37-
{{ session.duration }} {{ 'Days' | trans }}
38-
</td>
39-
</tr>
40-
{% else %}
41-
<tr>
42-
<td>{{ 'Dates shown' | trans}} </td>
43-
<td>{{ session_dates.display }}</td>
44-
</tr>
45-
<tr>
46-
<td>{{ 'Access dates for students' | trans}} </td>
47-
<td>{{ session_dates.access }}</td>
48-
</tr>
49-
<tr>
50-
<td>{{ 'Access dates for coaches' | trans}} </td>
51-
<td>{{ session_dates.coach }}</td>
52-
</tr>
53-
{% endif %}
54-
55-
<tr>
56-
<td>{{ 'Description' | trans}} </td>
57-
<td>
58-
{{ session.description }}
59-
</td>
60-
</tr>
61-
<tr>
62-
<td>{{ 'Show description' | trans}} </td>
63-
<td>
64-
{% if session.showDescription == 1 %}
65-
{{ 'Yes' | trans}}
66-
{% else %}
67-
{{ 'No' | trans}}
5+
<div class="w-full">
6+
7+
{% autoescape false %}
8+
<div class="pt-1 mb-5 md:mb-8 space-y-2">
9+
{{ session_header }}
10+
{{ title }}
11+
</div>
12+
{% endautoescape %}
13+
14+
{# Session overview card #}
15+
<div class="bg-white border border-gray-25 rounded-2xl shadow-sm p-6 md:p-7 mb-6 md:mb-8">
16+
<div class="flex items-center gap-2 mb-4">
17+
<i class="mdi mdi-information-outline text-info text-xl" aria-hidden="true"></i>
18+
<h3 class="text-gray-90 text-body-1 font-semibold">{{ 'Session overview'|trans }}</h3>
19+
</div>
20+
21+
<dl class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5">
22+
23+
{# Created by #}
24+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25">
25+
<dt class="text-gray-50 text-tiny uppercase tracking-wide">{{ 'Created by'|trans }}</dt>
26+
<dd class="prose prose-sm max-w-none text-gray-90 mt-1">
27+
{% autoescape false %}
28+
{% for session_admin in session.sessionAdmins %}
29+
{{ session_admin | user_complete_name_with_link }}<br>
30+
{% else %}
31+
<span class="text-gray-50">{{ 'None'|trans }}</span>
32+
{% endfor %}
33+
{% endautoescape %}
34+
</dd>
35+
</div>
36+
37+
{# General coach #}
38+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25">
39+
<dt class="text-gray-50 text-tiny uppercase tracking-wide">{{ 'General coach'|trans }}</dt>
40+
<dd class="prose prose-sm max-w-none text-gray-90 mt-1">
41+
{% autoescape false %}
42+
{% for coach in session.generalCoaches %}
43+
{{ coach | user_complete_name_with_link }}<br>
44+
{% else %}
45+
<span class="text-gray-50">{{ 'None'|trans }}</span>
46+
{% endfor %}
47+
{% endautoescape %}
48+
</dd>
49+
</div>
50+
51+
{# Session category #}
52+
{% if session.category %}
53+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25">
54+
<dt class="text-gray-50 text-tiny uppercase tracking-wide">{{ 'Session category'|trans }}</dt>
55+
<dd class="text-gray-90 text-body-2 mt-1">{{ session.category.title }}</dd>
56+
</div>
57+
{% endif %}
58+
59+
{# Duration / Dates #}
60+
{% if session.duration > 0 %}
61+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25">
62+
<dt class="text-gray-50 text-tiny uppercase tracking-wide">{{ 'Duration'|trans }}</dt>
63+
<dd class="text-gray-90 text-body-2 mt-1">{{ session.duration }} {{ 'Days'|trans }}</dd>
64+
</div>
65+
{% else %}
66+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25">
67+
<dt class="text-gray-50 text-tiny uppercase tracking-wide">{{ 'Dates shown'|trans }}</dt>
68+
<dd class="text-gray-90 text-body-2 mt-1">{{ session_dates.display }}</dd>
69+
</div>
70+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25">
71+
<dt class="text-gray-50 text-tiny uppercase tracking-wide">{{ 'Access dates for students'|trans }}</dt>
72+
<dd class="text-gray-90 text-body-2 mt-1">{{ session_dates.access }}</dd>
73+
</div>
74+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25">
75+
<dt class="text-gray-50 text-tiny uppercase tracking-wide">{{ 'Access dates for coaches'|trans }}</dt>
76+
<dd class="text-gray-90 text-body-2 mt-1">{{ session_dates.coach }}</dd>
77+
</div>
78+
{% endif %}
79+
80+
{# Visibility #}
81+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25">
82+
<dt class="text-gray-50 text-tiny uppercase tracking-wide">{{ 'Visibility after end date'|trans }}</dt>
83+
<dd class="text-gray-90 text-body-2 mt-1">
84+
<span class="inline-flex items-center px-2.5 py-1 rounded-full border border-gray-25 bg-white">
85+
{{ session_visibility }}
86+
</span>
87+
</dd>
88+
</div>
89+
90+
{# Career / Promotion #}
91+
{% if session.promotion %}
92+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25">
93+
<dt class="text-gray-50 text-tiny uppercase tracking-wide">{{ 'Career'|trans }}</dt>
94+
<dd class="text-gray-90 text-body-2 mt-1">
95+
<a class="text-info hover:underline"
96+
href="{{ _p.web_main }}admin/career_dashboard.php?filter={{ session.promotion.career.id }}&submit=&_qf__filter_form=">
97+
{{ session.promotion.career.title }}
98+
</a>
99+
</dd>
100+
</div>
101+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25">
102+
<dt class="text-gray-50 text-tiny uppercase tracking-wide">{{ 'Promotion'|trans }}</dt>
103+
<dd class="text-gray-90 text-body-2 mt-1">
104+
<a class="text-info hover:underline"
105+
href="{{ _p.web_main }}admin/promotions.php?action=edit&id={{ session.promotion.id }}">
106+
{{ session.promotion.title }}
107+
</a>
108+
</dd>
109+
</div>
110+
{% endif %}
111+
112+
{# URLs #}
113+
{% if url_list %}
114+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25 md:col-span-2">
115+
<dt class="text-gray-50 text-tiny uppercase tracking-wide mb-2">URL</dt>
116+
<dd class="flex flex-wrap gap-2">
117+
{% for url in url_list %}
118+
<span class="inline-flex items-center px-2.5 py-1 rounded-full bg-white border border-gray-25 text-gray-90 text-caption">
119+
{{ url.url }}
120+
</span>
121+
{% endfor %}
122+
</dd>
123+
</div>
124+
{% endif %}
125+
126+
{# Extra fields #}
127+
{% if extra_fields is not empty %}
128+
<div class="p-4 rounded-xl bg-support-2 border border-gray-25 md:col-span-2">
129+
<dt class="text-gray-50 text-tiny uppercase tracking-wide mb-3">{{ 'Extra fields'|trans }}</dt>
130+
<dd class="grid grid-cols-1 md:grid-cols-2 gap-3">
131+
{% for extra_field in extra_fields %}
132+
<div class="border border-gray-25 rounded-xl p-3 bg-white">
133+
<div class="text-gray-50 text-tiny uppercase tracking-wide">{{ extra_field.text }}</div>
134+
<div class="prose prose-sm max-w-none text-gray-90 mt-1 break-words">
135+
{% if extra_field.value is iterable %}
136+
{{ extra_field.value.value|raw }}
137+
{% else %}
138+
{{ extra_field.value|raw }}
139+
{% endif %}
140+
</div>
141+
</div>
142+
{% endfor %}
143+
</dd>
144+
</div>
145+
{% endif %}
146+
</dl>
147+
148+
{# Description #}
149+
{% if session.description %}
150+
<div class="mt-6">
151+
<h4 class="text-gray-90 text-body-1 font-semibold mb-2">{{ 'Description'|trans }}</h4>
152+
<div class="prose prose-sm max-w-none text-gray-90 bg-white border border-gray-25 rounded-xl p-4">
153+
{{ session.description|raw }}
154+
</div>
155+
</div>
68156
{% endif %}
69-
</td>
70-
</tr>
71-
<tr>
72-
<td>{{ 'Visibility after end date' | trans}} </td>
73-
<td>
74-
{{ session_visibility }}
75-
</td>
76-
</tr>
77-
{% if session.promotion %}
78-
<tr>
79-
<td>{{ 'Career' | trans}}</td>
80-
<td>
81-
<a
82-
href="{{ _p.web_main }}admin/career_dashboard.php?filter={{ session.promotion.career.id }}&submit=&_qf__filter_form="
83-
>
84-
{{ session.promotion.career.title }}
85-
</a>
86-
</td>
87-
</tr>
88-
<tr>
89-
<td>{{ 'Promotion' | trans}}</td>
90-
<td>
91-
<a href="{{ _p.web_main }}admin/promotions.php?action=edit&id={{ session.promotion.id }}">
92-
{{ session.promotion.title }}
93-
</a>
94-
</td>
95-
</tr>
96-
{% endif %}
97-
98-
{% if url_list %}
99-
<tr>
100-
<td>URL</td>
101-
<td>
102-
{% for url in url_list %}
103-
{{ url.url }}
104-
{% endfor %}
105-
</td>
106-
</tr>
107-
{% endif %}
108-
109-
{% for extra_field in extra_fields %}
110-
<tr>
111-
<td>{{ extra_field.text }}</td>
112-
{% if extra_field.value is iterable %}
113-
<td>{{ extra_field.value.value }}</td>
114-
{% else %}
115-
<td>{{ extra_field.value }}</td>
157+
158+
{# Scheduled announcements #}
159+
{% if programmed_announcement %}
160+
<div class="mt-6">
161+
<a class="inline-flex items-center gap-2 px-3 py-2 rounded-xl border border-gray-25 hover:shadow-sm hover:bg-gray-10 transition text-gray-90"
162+
href="{{ _p.web_main }}session/scheduled_announcement.php?session_id={{ session.id }}">
163+
<i class="mdi mdi-bullhorn text-info" aria-hidden="true"></i>
164+
<span class="text-body-2">{{ 'Scheduled announcements'|trans }}</span>
165+
</a>
166+
</div>
116167
{% endif %}
117-
</tr>
118-
{% endfor %}
119-
120-
{% if programmed_announcement %}
121-
<tr>
122-
<td>{{ 'Scheduled announcements' | trans }}</td>
123-
<td>
124-
<a class="btn btn--plain"
125-
href="{{ _p.web_main }}session/scheduled_announcement.php?session_id={{ session.id }}"
126-
>
127-
{{ 'Edit' | trans }}
128-
</a>
129-
</td>
130-
</tr>
131-
{% endif %}
132-
</table>
133-
134-
{{ course_list }}
135-
{{ user_list }}
136-
{{ requirements }}
137-
{{ dependencies }}
138-
139-
{% endautoescape %}
168+
</div>
169+
170+
{# Course list #}
171+
<div class="bg-white border border-gray-25 rounded-2xl shadow-sm p-6 md:p-7 mb-6 md:mb-8">
172+
<div class="flex items-center gap-2 mb-3">
173+
<i class="mdi mdi-book-open-page-variant text-info text-xl" aria-hidden="true"></i>
174+
<span class="text-gray-90 font-semibold">{{ 'Course list'|trans }}</span>
175+
</div>
176+
<div class="overflow-x-auto">
177+
<div class="min-w-[720px]">
178+
{% autoescape false %}{{ course_list }}{% endautoescape %}
179+
</div>
180+
</div>
181+
</div>
182+
183+
{# User list #}
184+
{% if user_list is not empty %}
185+
<div class="bg-white border border-gray-25 rounded-2xl shadow-sm p-6 md:p-7 mb-6 md:mb-8">
186+
<div class="flex items-center gap-2 mb-3">
187+
<i class="mdi mdi-account-multiple text-info text-xl" aria-hidden="true"></i>
188+
<span class="text-gray-90 font-semibold">{{ 'User list'|trans }}</span>
189+
</div>
190+
<div class="overflow-x-auto">
191+
<div class="min-w-[720px]">
192+
{% autoescape false %}{{ user_list }}{% endautoescape %}
193+
</div>
194+
</div>
195+
</div>
196+
{% endif %}
197+
198+
{# Requirements / Dependencies #}
199+
{% if requirements %}
200+
<div class="bg-white border border-gray-25 rounded-2xl shadow-sm p-6 md:p-7 mb-6">
201+
{% autoescape false %}{{ requirements }}{% endautoescape %}
202+
</div>
203+
{% endif %}
204+
{% if dependencies %}
205+
<div class="bg-white border border-gray-25 rounded-2xl shadow-sm p-6 md:p-7">
206+
{% autoescape false %}{{ dependencies }}{% endautoescape %}
207+
</div>
208+
{% endif %}
209+
210+
</div>
140211
{% endblock %}

0 commit comments

Comments
 (0)