wagtail-enap-designsystem 1.2.1.166__py3-none-any.whl → 1.2.1.168__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of wagtail-enap-designsystem might be problematic. Click here for more details.
- enap_designsystem/blocks/content_blocks.py +0 -40
- enap_designsystem/blocks/html_blocks.py +10 -1
- enap_designsystem/blocks/layout_blocks.py +4 -35
- enap_designsystem/migrations/0439_alter_areaaluno_body_alter_cursoeadpage_curso_and_more.py +70272 -0
- enap_designsystem/migrations/0440_capsulaindexpage_capsulapage_alter_areaaluno_body_and_more.py +56561 -0
- enap_designsystem/models.py +515 -1
- enap_designsystem/static/enap_designsystem/blocks/capsulas.css +708 -0
- enap_designsystem/static/enap_designsystem/blocks/cards.css +14 -0
- enap_designsystem/static/enap_designsystem/blocks/pages/page_search.css +13 -7
- enap_designsystem/static/enap_designsystem/blocks/suap/suap_courses_block.css +5 -0
- enap_designsystem/templates/enap_designsystem/base.html +1 -0
- enap_designsystem/templates/enap_designsystem/blocks/suap/apisuap_courses_block.html +1 -1
- enap_designsystem/templates/enap_designsystem/blocks/suap/suap_courses_block.html +3 -1
- enap_designsystem/templates/enap_designsystem/pages/capsula_index_page.html +654 -0
- enap_designsystem/templates/enap_designsystem/pages/capsula_page.html +1164 -0
- enap_designsystem/templates/enap_designsystem/pages/page_search.html +188 -119
- enap_designsystem/templatetags/capsula_tags.py +11 -0
- {wagtail_enap_designsystem-1.2.1.166.dist-info → wagtail_enap_designsystem-1.2.1.168.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.166.dist-info → wagtail_enap_designsystem-1.2.1.168.dist-info}/RECORD +22 -16
- {wagtail_enap_designsystem-1.2.1.166.dist-info → wagtail_enap_designsystem-1.2.1.168.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.166.dist-info → wagtail_enap_designsystem-1.2.1.168.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.166.dist-info → wagtail_enap_designsystem-1.2.1.168.dist-info}/top_level.txt +0 -0
|
@@ -0,0 +1,654 @@
|
|
|
1
|
+
{# templates/enap_designsystem/pages/capsula_index_page.html #}
|
|
2
|
+
{% load static wagtailcore_tags capsula_tags %}
|
|
3
|
+
|
|
4
|
+
{% block extra_css %}
|
|
5
|
+
<style>
|
|
6
|
+
/* ============================================ */
|
|
7
|
+
/* LAYOUT PRINCIPAL */
|
|
8
|
+
/* ============================================ */
|
|
9
|
+
|
|
10
|
+
.capsulas-busca-page {
|
|
11
|
+
background: #f8f9fa;
|
|
12
|
+
min-height: 100vh;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.capsulas-busca-container {
|
|
16
|
+
max-width: 1400px;
|
|
17
|
+
margin: 0 auto;
|
|
18
|
+
padding: 2rem 1rem;
|
|
19
|
+
display: grid;
|
|
20
|
+
grid-template-columns: 350px 1fr;
|
|
21
|
+
gap: 2rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@media (max-width: 968px) {
|
|
25
|
+
.capsulas-busca-container {
|
|
26
|
+
grid-template-columns: 1fr;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* ============================================ */
|
|
31
|
+
/* SIDEBAR DE BUSCA E FILTROS */
|
|
32
|
+
/* ============================================ */
|
|
33
|
+
|
|
34
|
+
.busca-sidebar {
|
|
35
|
+
position: sticky;
|
|
36
|
+
top: 2rem;
|
|
37
|
+
height: fit-content;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.busca-input-wrapper {
|
|
41
|
+
position: relative;
|
|
42
|
+
margin-bottom: 1.5rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.busca-icon {
|
|
46
|
+
position: absolute;
|
|
47
|
+
left: 1rem;
|
|
48
|
+
top: 50%;
|
|
49
|
+
transform: translateY(-50%);
|
|
50
|
+
color: #6b7280;
|
|
51
|
+
width: 20px;
|
|
52
|
+
height: 20px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.busca-input {
|
|
56
|
+
width: 100%;
|
|
57
|
+
padding: 0.875rem 1rem 0.875rem 3rem;
|
|
58
|
+
border: 1px solid #d1d5db;
|
|
59
|
+
border-radius: 8px;
|
|
60
|
+
font-size: 0.9375rem;
|
|
61
|
+
background: white;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.busca-input:focus {
|
|
65
|
+
outline: 2px solid #0c5a5a;
|
|
66
|
+
outline-offset: 0;
|
|
67
|
+
border-color: #0c5a5a;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.filtros-avancados {
|
|
71
|
+
background: white;
|
|
72
|
+
border: 1px solid #e5e7eb;
|
|
73
|
+
border-radius: 8px;
|
|
74
|
+
overflow: hidden;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.filtros-avancados-header {
|
|
78
|
+
padding: 1rem 1.25rem;
|
|
79
|
+
background: white;
|
|
80
|
+
border-bottom: 1px solid #e5e7eb;
|
|
81
|
+
display: flex;
|
|
82
|
+
justify-content: space-between;
|
|
83
|
+
align-items: center;
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
user-select: none;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.filtros-avancados-header:hover {
|
|
89
|
+
background: #f9fafb;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.filtros-avancados-titulo {
|
|
93
|
+
display: flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
gap: 0.5rem;
|
|
96
|
+
font-weight: 600;
|
|
97
|
+
color: #0c5a5a;
|
|
98
|
+
font-size: 1rem;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.filtros-icon {
|
|
102
|
+
width: 20px;
|
|
103
|
+
height: 20px;
|
|
104
|
+
color: #0c5a5a;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.toggle-icon {
|
|
108
|
+
width: 20px;
|
|
109
|
+
height: 20px;
|
|
110
|
+
transition: transform 0.2s;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.filtros-avancados-header[aria-expanded="false"] .toggle-icon {
|
|
114
|
+
transform: rotate(-90deg);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.filtros-content {
|
|
118
|
+
padding: 1.5rem 1.25rem;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.filtros-content[hidden] {
|
|
122
|
+
display: none;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* Grupo de filtros */
|
|
126
|
+
.filtro-grupo {
|
|
127
|
+
border: none;
|
|
128
|
+
padding: 0;
|
|
129
|
+
margin: 0 0 1.75rem;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.filtro-grupo:last-child {
|
|
133
|
+
margin-bottom: 0;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.filtro-grupo-titulo {
|
|
137
|
+
font-size: 0.9375rem;
|
|
138
|
+
font-weight: 600;
|
|
139
|
+
color: #1f2937;
|
|
140
|
+
margin-bottom: 0.75rem;
|
|
141
|
+
display: block;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.filtro-opcoes {
|
|
145
|
+
display: flex;
|
|
146
|
+
flex-direction: column;
|
|
147
|
+
gap: 0.5rem;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* Checkbox customizado */
|
|
151
|
+
.filtro-checkbox {
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
cursor: pointer;
|
|
155
|
+
padding: 0.375rem 0;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.filtro-checkbox input[type="checkbox"] {
|
|
159
|
+
width: 18px;
|
|
160
|
+
height: 18px;
|
|
161
|
+
cursor: pointer;
|
|
162
|
+
margin-right: 0.625rem;
|
|
163
|
+
flex-shrink: 0;
|
|
164
|
+
accent-color: #0c5a5a;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.checkbox-label {
|
|
168
|
+
font-size: 0.9375rem;
|
|
169
|
+
color: #374151;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.filtro-checkbox:hover .checkbox-label {
|
|
173
|
+
color: #0c5a5a;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* ============================================ */
|
|
177
|
+
/* ÁREA DE RESULTADOS */
|
|
178
|
+
/* ============================================ */
|
|
179
|
+
|
|
180
|
+
.resultados-area {
|
|
181
|
+
min-width: 0;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.resultados-header {
|
|
185
|
+
display: flex;
|
|
186
|
+
justify-content: space-between;
|
|
187
|
+
align-items: center;
|
|
188
|
+
margin-bottom: 1.5rem;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.resultados-count {
|
|
192
|
+
font-size: 1.125rem;
|
|
193
|
+
font-weight: 600;
|
|
194
|
+
color: #1f2937;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.resultados-sort {
|
|
198
|
+
display: flex;
|
|
199
|
+
align-items: center;
|
|
200
|
+
gap: 0.5rem;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.sort-label {
|
|
204
|
+
font-size: 0.875rem;
|
|
205
|
+
color: #6b7280;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.sort-select {
|
|
209
|
+
padding: 0.5rem 2rem 0.5rem 0.75rem;
|
|
210
|
+
border: 1px solid #d1d5db;
|
|
211
|
+
border-radius: 6px;
|
|
212
|
+
font-size: 0.9375rem;
|
|
213
|
+
background: white;
|
|
214
|
+
cursor: pointer;
|
|
215
|
+
appearance: none;
|
|
216
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
217
|
+
background-repeat: no-repeat;
|
|
218
|
+
background-position: right 0.75rem center;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.sort-select:focus {
|
|
222
|
+
outline: 2px solid #0c5a5a;
|
|
223
|
+
outline-offset: 0;
|
|
224
|
+
border-color: #0c5a5a;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
/* ============================================ */
|
|
228
|
+
/* GRID DE CÁPSULAS */
|
|
229
|
+
/* ============================================ */
|
|
230
|
+
|
|
231
|
+
.capsulas-grid {
|
|
232
|
+
display: grid;
|
|
233
|
+
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
234
|
+
gap: 1.5rem;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
@media (max-width: 768px) {
|
|
238
|
+
.capsulas-grid {
|
|
239
|
+
grid-template-columns: 1fr;
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.capsula-card {
|
|
244
|
+
background: white;
|
|
245
|
+
border: 1px solid #e5e7eb;
|
|
246
|
+
border-radius: 12px;
|
|
247
|
+
padding: 1.75rem;
|
|
248
|
+
transition: all 0.2s ease;
|
|
249
|
+
display: flex;
|
|
250
|
+
flex-direction: column;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.capsula-card:hover {
|
|
254
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
255
|
+
border-color: #0c5a5a;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.capsula-card-icon {
|
|
259
|
+
width: 48px;
|
|
260
|
+
height: 48px;
|
|
261
|
+
background: #0c5a5a;
|
|
262
|
+
border-radius: 8px;
|
|
263
|
+
display: flex;
|
|
264
|
+
align-items: center;
|
|
265
|
+
justify-content: center;
|
|
266
|
+
margin-bottom: 1rem;
|
|
267
|
+
flex-shrink: 0;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.capsula-card-icon svg {
|
|
271
|
+
width: 24px;
|
|
272
|
+
height: 24px;
|
|
273
|
+
color: white;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.capsula-card-titulo {
|
|
277
|
+
font-size: 1.125rem;
|
|
278
|
+
font-weight: 600;
|
|
279
|
+
color: #0c5a5a;
|
|
280
|
+
margin-bottom: 0.75rem;
|
|
281
|
+
line-height: 1.4;
|
|
282
|
+
min-height: 3rem;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.capsula-card-titulo a {
|
|
286
|
+
color: inherit;
|
|
287
|
+
text-decoration: none;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.capsula-card-titulo a:hover {
|
|
291
|
+
text-decoration: underline;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.capsula-card-descricao {
|
|
295
|
+
font-size: 0.9375rem;
|
|
296
|
+
color: #6b7280;
|
|
297
|
+
line-height: 1.6;
|
|
298
|
+
margin-bottom: 1.25rem;
|
|
299
|
+
flex-grow: 1;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
/* Tags de deficiência */
|
|
303
|
+
.capsula-tags-deficiencia {
|
|
304
|
+
display: flex;
|
|
305
|
+
flex-wrap: wrap;
|
|
306
|
+
gap: 0.5rem;
|
|
307
|
+
margin-bottom: 1rem;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.tag-deficiencia {
|
|
311
|
+
display: inline-flex;
|
|
312
|
+
align-items: center;
|
|
313
|
+
gap: 0.375rem;
|
|
314
|
+
padding: 0.25rem 0.625rem;
|
|
315
|
+
background: #f0f9ff;
|
|
316
|
+
border: 1px solid #bae6fd;
|
|
317
|
+
border-radius: 16px;
|
|
318
|
+
font-size: 0.8125rem;
|
|
319
|
+
color: #0c5a5a;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.tag-deficiencia-icon {
|
|
323
|
+
width: 14px;
|
|
324
|
+
height: 14px;
|
|
325
|
+
flex-shrink: 0;
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
/* Badge de prioridade */
|
|
329
|
+
.capsula-badge {
|
|
330
|
+
display: inline-flex;
|
|
331
|
+
align-items: center;
|
|
332
|
+
gap: 0.375rem;
|
|
333
|
+
padding: 0.25rem 0.75rem;
|
|
334
|
+
border-radius: 16px;
|
|
335
|
+
font-size: 0.8125rem;
|
|
336
|
+
font-weight: 600;
|
|
337
|
+
margin-bottom: 1rem;
|
|
338
|
+
width: fit-content;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.capsula-badge-obrigatorio {
|
|
342
|
+
background: #fef2f2;
|
|
343
|
+
color: #dc2626;
|
|
344
|
+
border: 1px solid #fecaca;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.capsula-badge-recomendado {
|
|
348
|
+
background: #eff6ff;
|
|
349
|
+
color: #2563eb;
|
|
350
|
+
border: 1px solid #bfdbfe;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.badge-icon {
|
|
354
|
+
width: 14px;
|
|
355
|
+
height: 14px;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
/* Tags de recurso */
|
|
359
|
+
.capsula-tags-recurso {
|
|
360
|
+
display: flex;
|
|
361
|
+
flex-wrap: wrap;
|
|
362
|
+
gap: 0.5rem;
|
|
363
|
+
margin-bottom: 1.25rem;
|
|
364
|
+
padding-top: 1rem;
|
|
365
|
+
border-top: 1px solid #f3f4f6;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.tag-recurso {
|
|
369
|
+
display: inline-flex;
|
|
370
|
+
align-items: center;
|
|
371
|
+
gap: 0.375rem;
|
|
372
|
+
padding: 0.25rem 0.625rem;
|
|
373
|
+
background: #f9fafb;
|
|
374
|
+
border-radius: 6px;
|
|
375
|
+
font-size: 0.8125rem;
|
|
376
|
+
color: #4b5563;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
.tag-recurso-icon {
|
|
380
|
+
width: 14px;
|
|
381
|
+
height: 14px;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
/* Botão de ação */
|
|
385
|
+
.capsula-card-btn {
|
|
386
|
+
width: 100%;
|
|
387
|
+
padding: 0.75rem 1.25rem;
|
|
388
|
+
background: #0c5a5a;
|
|
389
|
+
color: white;
|
|
390
|
+
border: none;
|
|
391
|
+
border-radius: 8px;
|
|
392
|
+
font-weight: 600;
|
|
393
|
+
font-size: 0.9375rem;
|
|
394
|
+
cursor: pointer;
|
|
395
|
+
transition: all 0.2s ease;
|
|
396
|
+
text-align: center;
|
|
397
|
+
text-decoration: none;
|
|
398
|
+
display: block;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.capsula-card-btn:hover {
|
|
402
|
+
background: #094444;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
.capsula-card-btn:focus {
|
|
406
|
+
outline: 2px solid #0c5a5a;
|
|
407
|
+
outline-offset: 2px;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
/* Estado vazio */
|
|
411
|
+
.resultados-vazio {
|
|
412
|
+
text-align: center;
|
|
413
|
+
padding: 4rem 2rem;
|
|
414
|
+
background: white;
|
|
415
|
+
border-radius: 12px;
|
|
416
|
+
border: 1px solid #e5e7eb;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.resultados-vazio-icon {
|
|
420
|
+
width: 64px;
|
|
421
|
+
height: 64px;
|
|
422
|
+
margin: 0 auto 1.5rem;
|
|
423
|
+
color: #d1d5db;
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.resultados-vazio h2 {
|
|
427
|
+
font-size: 1.5rem;
|
|
428
|
+
color: #374151;
|
|
429
|
+
margin-bottom: 0.5rem;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.resultados-vazio p {
|
|
433
|
+
color: #6b7280;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.resultados-vazio a {
|
|
437
|
+
color: #0c5a5a;
|
|
438
|
+
font-weight: 600;
|
|
439
|
+
text-decoration: none;
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.resultados-vazio a:hover {
|
|
443
|
+
text-decoration: underline;
|
|
444
|
+
}
|
|
445
|
+
</style>
|
|
446
|
+
{% endblock %}
|
|
447
|
+
|
|
448
|
+
{% block content %}
|
|
449
|
+
<div class="capsulas-busca-page">
|
|
450
|
+
<div class="capsulas-busca-container">
|
|
451
|
+
|
|
452
|
+
{# ============================================ #}
|
|
453
|
+
{# SIDEBAR DE BUSCA E FILTROS #}
|
|
454
|
+
{# ============================================ #}
|
|
455
|
+
<aside class="busca-sidebar" role="complementary" aria-label="Busca e filtros">
|
|
456
|
+
|
|
457
|
+
{# Campo de busca #}
|
|
458
|
+
<div class="busca-input-wrapper">
|
|
459
|
+
<svg class="busca-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
460
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
461
|
+
</svg>
|
|
462
|
+
<input
|
|
463
|
+
type="text"
|
|
464
|
+
class="busca-input"
|
|
465
|
+
placeholder="Digite palavras-chave (ex: contraste, legendas)"
|
|
466
|
+
aria-label="Buscar cápsulas">
|
|
467
|
+
</div>
|
|
468
|
+
|
|
469
|
+
{# Filtros avançados #}
|
|
470
|
+
<div class="filtros-avancados">
|
|
471
|
+
<button class="filtros-avancados-header"
|
|
472
|
+
aria-expanded="true"
|
|
473
|
+
aria-controls="filtros-content"
|
|
474
|
+
onclick="toggleFiltros()">
|
|
475
|
+
<div class="filtros-avancados-titulo">
|
|
476
|
+
<svg class="filtros-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
477
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
|
|
478
|
+
</svg>
|
|
479
|
+
Filtros Avançados
|
|
480
|
+
</div>
|
|
481
|
+
<svg class="toggle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
482
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
483
|
+
</svg>
|
|
484
|
+
</button>
|
|
485
|
+
|
|
486
|
+
<div id="filtros-content" class="filtros-content">
|
|
487
|
+
<form method="get" id="filtros-form">
|
|
488
|
+
|
|
489
|
+
{# TIPO DE DEFICIÊNCIA #}
|
|
490
|
+
<fieldset class="filtro-grupo">
|
|
491
|
+
<legend class="filtro-grupo-titulo">Tipo de Deficiência</legend>
|
|
492
|
+
<div class="filtro-opcoes">
|
|
493
|
+
{% for value, label in opcoes_filtros.tipos_deficiencia %}
|
|
494
|
+
<label class="filtro-checkbox">
|
|
495
|
+
<input type="checkbox"
|
|
496
|
+
name="tipo_deficiencia"
|
|
497
|
+
value="{{ value }}"
|
|
498
|
+
{% if value in filtros_ativos.tipo_deficiencia %}checked{% endif %}
|
|
499
|
+
onchange="this.form.submit()">
|
|
500
|
+
<span class="checkbox-label">{{ label }}</span>
|
|
501
|
+
</label>
|
|
502
|
+
{% endfor %}
|
|
503
|
+
</div>
|
|
504
|
+
</fieldset>
|
|
505
|
+
|
|
506
|
+
{# FORMATO DE AÇÃO #}
|
|
507
|
+
<fieldset class="filtro-grupo">
|
|
508
|
+
<legend class="filtro-grupo-titulo">Formato de Ação de Desenvolvimento</legend>
|
|
509
|
+
<div class="filtro-opcoes">
|
|
510
|
+
{% for value, label in opcoes_filtros.formatos_acao %}
|
|
511
|
+
<label class="filtro-checkbox">
|
|
512
|
+
<input type="checkbox"
|
|
513
|
+
name="formato_acao"
|
|
514
|
+
value="{{ value }}"
|
|
515
|
+
{% if value in filtros_ativos.formato_acao %}checked{% endif %}
|
|
516
|
+
onchange="this.form.submit()">
|
|
517
|
+
<span class="checkbox-label">{{ label }}</span>
|
|
518
|
+
</label>
|
|
519
|
+
{% endfor %}
|
|
520
|
+
</div>
|
|
521
|
+
</fieldset>
|
|
522
|
+
|
|
523
|
+
{# TIPO DE RECURSO #}
|
|
524
|
+
<fieldset class="filtro-grupo">
|
|
525
|
+
<legend class="filtro-grupo-titulo">Tipo de Recurso</legend>
|
|
526
|
+
<div class="filtro-opcoes">
|
|
527
|
+
{% for value, label in opcoes_filtros.tipos_recurso %}
|
|
528
|
+
<label class="filtro-checkbox">
|
|
529
|
+
<input type="checkbox"
|
|
530
|
+
name="tipo_recurso"
|
|
531
|
+
value="{{ value }}"
|
|
532
|
+
{% if value in filtros_ativos.tipo_recurso %}checked{% endif %}
|
|
533
|
+
onchange="this.form.submit()">
|
|
534
|
+
<span class="checkbox-label">{{ label }}</span>
|
|
535
|
+
</label>
|
|
536
|
+
{% endfor %}
|
|
537
|
+
</div>
|
|
538
|
+
</fieldset>
|
|
539
|
+
|
|
540
|
+
</form>
|
|
541
|
+
</div>
|
|
542
|
+
</div>
|
|
543
|
+
|
|
544
|
+
</aside>
|
|
545
|
+
|
|
546
|
+
{# ============================================ #}
|
|
547
|
+
{# ÁREA DE RESULTADOS #}
|
|
548
|
+
{# ============================================ #}
|
|
549
|
+
<main class="resultados-area" role="main">
|
|
550
|
+
|
|
551
|
+
<div class="resultados-header">
|
|
552
|
+
<div class="resultados-count">
|
|
553
|
+
{{ total_resultados }} cápsula{{ total_resultados|pluralize:",s" }} encontrada{{ total_resultados|pluralize:",s" }}
|
|
554
|
+
</div>
|
|
555
|
+
|
|
556
|
+
<div class="resultados-sort">
|
|
557
|
+
<label for="sort-select" class="sort-label">Relevância</label>
|
|
558
|
+
<select id="sort-select" class="sort-select">
|
|
559
|
+
<option value="relevancia">Relevância</option>
|
|
560
|
+
<option value="recente">Mais recentes</option>
|
|
561
|
+
<option value="titulo">A-Z</option>
|
|
562
|
+
</select>
|
|
563
|
+
</div>
|
|
564
|
+
</div>
|
|
565
|
+
|
|
566
|
+
{% if capsulas %}
|
|
567
|
+
<div class="capsulas-grid">
|
|
568
|
+
{% for capsula in capsulas %}
|
|
569
|
+
<article class="capsula-card">
|
|
570
|
+
<div class="capsula-card-icon">
|
|
571
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
572
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
|
573
|
+
</svg>
|
|
574
|
+
</div>
|
|
575
|
+
|
|
576
|
+
<h2 class="capsula-card-titulo">
|
|
577
|
+
<a href="{% pageurl capsula %}">{{ capsula.title }}</a>
|
|
578
|
+
</h2>
|
|
579
|
+
|
|
580
|
+
<p class="capsula-card-descricao">
|
|
581
|
+
{{ capsula.resumo_card|default:"Aprenda sobre este importante aspecto da acessibilidade digital." }}
|
|
582
|
+
</p>
|
|
583
|
+
|
|
584
|
+
{# Tags de deficiência #}
|
|
585
|
+
{% if capsula.tipos_deficiencia %}
|
|
586
|
+
<div class="capsula-tags-deficiencia">
|
|
587
|
+
{% for tipo in capsula.get_tipos_deficiencia_display|slice:":2" %}
|
|
588
|
+
<span class="tag-deficiencia">
|
|
589
|
+
<svg class="tag-deficiencia-icon" fill="currentColor" viewBox="0 0 20 20">
|
|
590
|
+
<circle cx="10" cy="10" r="4"></circle>
|
|
591
|
+
</svg>
|
|
592
|
+
{{ tipo }}
|
|
593
|
+
</span>
|
|
594
|
+
{% endfor %}
|
|
595
|
+
</div>
|
|
596
|
+
{% endif %}
|
|
597
|
+
|
|
598
|
+
{# Badge de prioridade #}
|
|
599
|
+
{% if capsula.prioridade %}
|
|
600
|
+
<div class="capsula-badge capsula-badge-{{ capsula.prioridade }}">
|
|
601
|
+
<svg class="badge-icon" fill="currentColor" viewBox="0 0 20 20">
|
|
602
|
+
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
|
|
603
|
+
</svg>
|
|
604
|
+
{{ capsula.get_prioridade_display }}
|
|
605
|
+
</div>
|
|
606
|
+
{% endif %}
|
|
607
|
+
|
|
608
|
+
{# Tags de recurso #}
|
|
609
|
+
{% if capsula.tipos_recurso %}
|
|
610
|
+
<div class="capsula-tags-recurso">
|
|
611
|
+
{% for recurso in capsula.get_tipos_recurso_display|slice:":3" %}
|
|
612
|
+
<span class="tag-recurso">
|
|
613
|
+
<svg class="tag-recurso-icon" fill="currentColor" viewBox="0 0 20 20">
|
|
614
|
+
<path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
|
|
615
|
+
</svg>
|
|
616
|
+
{{ recurso }}
|
|
617
|
+
</span>
|
|
618
|
+
{% endfor %}
|
|
619
|
+
</div>
|
|
620
|
+
{% endif %}
|
|
621
|
+
|
|
622
|
+
<a href="{% pageurl capsula %}" class="capsula-card-btn">
|
|
623
|
+
Acessar Cápsula
|
|
624
|
+
</a>
|
|
625
|
+
</article>
|
|
626
|
+
{% endfor %}
|
|
627
|
+
</div>
|
|
628
|
+
|
|
629
|
+
{% else %}
|
|
630
|
+
<div class="resultados-vazio">
|
|
631
|
+
<svg class="resultados-vazio-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
632
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
633
|
+
</svg>
|
|
634
|
+
<h2>Nenhuma cápsula encontrada</h2>
|
|
635
|
+
<p>Tente ajustar os filtros ou <a href="{{ page.url }}">limpe os filtros</a> para ver todas as cápsulas.</p>
|
|
636
|
+
</div>
|
|
637
|
+
{% endif %}
|
|
638
|
+
|
|
639
|
+
</main>
|
|
640
|
+
|
|
641
|
+
</div>
|
|
642
|
+
</div>
|
|
643
|
+
|
|
644
|
+
<script>
|
|
645
|
+
function toggleFiltros() {
|
|
646
|
+
const header = document.querySelector('.filtros-avancados-header');
|
|
647
|
+
const content = document.getElementById('filtros-content');
|
|
648
|
+
const expanded = header.getAttribute('aria-expanded') === 'true';
|
|
649
|
+
|
|
650
|
+
header.setAttribute('aria-expanded', !expanded);
|
|
651
|
+
content.hidden = expanded;
|
|
652
|
+
}
|
|
653
|
+
</script>
|
|
654
|
+
{% endblock %}
|