wagtail-enap-designsystem 1.2.1.174__py3-none-any.whl → 1.2.1.176__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/html_blocks.py +142 -27
- enap_designsystem/migrations/0445_alter_areaaluno_body_alter_cursoeadpage_curso_and_more.py +70889 -0
- enap_designsystem/migrations/0446_alter_areaaluno_body_alter_enapcomponentes_body_and_more.py +55314 -0
- enap_designsystem/migrations/0447_alter_areaaluno_body_alter_enapcomponentes_body_and_more.py +55294 -0
- enap_designsystem/models.py +1 -0
- enap_designsystem/static/enap_designsystem/blocks/banner.css +1 -1
- enap_designsystem/static/enap_designsystem/blocks/btn.css +11 -5
- enap_designsystem/static/enap_designsystem/blocks/capsulas.css +662 -690
- enap_designsystem/static/enap_designsystem/blocks/carousel_images.css +0 -2
- enap_designsystem/static/enap_designsystem/blocks/suap/suap_courses_block.css +1 -0
- enap_designsystem/templates/enap_designsystem/blocks/card_block.html +4 -2
- enap_designsystem/templates/enap_designsystem/blocks/suap/apisuap_courses_block.html +224 -208
- enap_designsystem/templates/enap_designsystem/blocks/texto_imagem.html +1 -1
- enap_designsystem/templates/enap_designsystem/pages/capsula_index_page.html +67 -755
- enap_designsystem/templates/enap_designsystem/pages/quiz_rota_page.html +425 -389
- {wagtail_enap_designsystem-1.2.1.174.dist-info → wagtail_enap_designsystem-1.2.1.176.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.174.dist-info → wagtail_enap_designsystem-1.2.1.176.dist-info}/RECORD +20 -17
- {wagtail_enap_designsystem-1.2.1.174.dist-info → wagtail_enap_designsystem-1.2.1.176.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.174.dist-info → wagtail_enap_designsystem-1.2.1.176.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.174.dist-info → wagtail_enap_designsystem-1.2.1.176.dist-info}/top_level.txt +0 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
{% extends "enap_designsystem/base.html" %}
|
|
2
2
|
{% load static %}
|
|
3
3
|
{% load wagtailcore_tags wagtailimages_tags %}
|
|
4
4
|
|
|
@@ -40,736 +40,58 @@
|
|
|
40
40
|
{% endif %}
|
|
41
41
|
{% endblock %}
|
|
42
42
|
|
|
43
|
-
{% block extra_css %}
|
|
44
|
-
<style>
|
|
45
|
-
/* ============================================ */
|
|
46
|
-
/* VARIÁVEIS E CORES */
|
|
47
|
-
/* ============================================ */
|
|
48
|
-
|
|
49
|
-
:root {
|
|
50
|
-
--primary: #0c5a5a;
|
|
51
|
-
--primary-dark: #094444;
|
|
52
|
-
--primary-light: #0f7070;
|
|
53
|
-
--gray-50: #f9fafb;
|
|
54
|
-
--gray-100: #f3f4f6;
|
|
55
|
-
--gray-200: #e5e7eb;
|
|
56
|
-
--gray-300: #d1d5db;
|
|
57
|
-
--gray-400: #9ca3af;
|
|
58
|
-
--gray-500: #6b7280;
|
|
59
|
-
--gray-600: #4b5563;
|
|
60
|
-
--gray-700: #374151;
|
|
61
|
-
--gray-800: #1f2937;
|
|
62
|
-
--gray-900: #111827;
|
|
63
|
-
--blue-50: #eff6ff;
|
|
64
|
-
--blue-100: #dbeafe;
|
|
65
|
-
--blue-200: #bfdbfe;
|
|
66
|
-
--blue-600: #2563eb;
|
|
67
|
-
--red-50: #fef2f2;
|
|
68
|
-
--red-100: #fecaca;
|
|
69
|
-
--red-600: #dc2626;
|
|
70
|
-
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
71
|
-
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
72
|
-
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
73
|
-
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
|
74
|
-
--radius-sm: 6px;
|
|
75
|
-
--radius-md: 8px;
|
|
76
|
-
--radius-lg: 12px;
|
|
77
|
-
--radius-xl: 16px;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
/* ============================================ */
|
|
81
|
-
/* LAYOUT PRINCIPAL */
|
|
82
|
-
/* ============================================ */
|
|
83
|
-
|
|
84
|
-
.capsulas-busca-page {
|
|
85
|
-
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
86
|
-
min-height: 100vh;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.capsulas-busca-container {
|
|
90
|
-
max-width: 1400px;
|
|
91
|
-
margin: 0 auto;
|
|
92
|
-
padding: 2.5rem 1.5rem;
|
|
93
|
-
display: grid;
|
|
94
|
-
grid-template-columns: 360px 1fr;
|
|
95
|
-
gap: 2.5rem;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
@media (max-width: 968px) {
|
|
99
|
-
.capsulas-busca-container {
|
|
100
|
-
grid-template-columns: 1fr;
|
|
101
|
-
padding: 1.5rem 1rem;
|
|
102
|
-
gap: 1.5rem;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
/* ============================================ */
|
|
107
|
-
/* SIDEBAR DE BUSCA E FILTROS */
|
|
108
|
-
/* ============================================ */
|
|
109
|
-
|
|
110
|
-
.busca-sidebar {
|
|
111
|
-
position: sticky;
|
|
112
|
-
top: 2rem;
|
|
113
|
-
height: fit-content;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
@media (max-width: 968px) {
|
|
117
|
-
.busca-sidebar {
|
|
118
|
-
position: static;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
/* Campo de busca modernizado */
|
|
123
|
-
.busca-input-wrapper {
|
|
124
|
-
position: relative;
|
|
125
|
-
margin-bottom: 1.5rem;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.busca-icon {
|
|
129
|
-
position: absolute;
|
|
130
|
-
left: 1rem;
|
|
131
|
-
top: 50%;
|
|
132
|
-
transform: translateY(-50%);
|
|
133
|
-
color: var(--gray-400);
|
|
134
|
-
width: 20px;
|
|
135
|
-
height: 20px;
|
|
136
|
-
transition: color 0.2s;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.busca-input {
|
|
140
|
-
width: 100%;
|
|
141
|
-
padding: 1rem 1rem 1rem 3rem;
|
|
142
|
-
border: 2px solid var(--gray-200);
|
|
143
|
-
border-radius: var(--radius-lg);
|
|
144
|
-
font-size: 0.9375rem;
|
|
145
|
-
background: white;
|
|
146
|
-
transition: all 0.2s ease;
|
|
147
|
-
box-shadow: var(--shadow-sm);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
.busca-input:hover {
|
|
151
|
-
border-color: var(--gray-300);
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.busca-input:focus {
|
|
155
|
-
outline: none;
|
|
156
|
-
border-color: var(--primary);
|
|
157
|
-
box-shadow: 0 0 0 3px rgba(12, 90, 90, 0.1);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
.busca-input:focus + .busca-icon {
|
|
161
|
-
color: var(--primary);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
/* Container de filtros */
|
|
165
|
-
.filtros-avancados {
|
|
166
|
-
overflow: hidden;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
.filtros-avancados-header {
|
|
170
|
-
padding: 1.25rem 1.5rem;
|
|
171
|
-
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
172
|
-
border: none;
|
|
173
|
-
display: flex;
|
|
174
|
-
justify-content: space-between;
|
|
175
|
-
align-items: center;
|
|
176
|
-
cursor: pointer;
|
|
177
|
-
user-select: none;
|
|
178
|
-
transition: all 0.2s;
|
|
179
|
-
width: 100%;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
.filtros-avancados-header:hover {
|
|
183
|
-
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
.filtros-avancados-titulo {
|
|
187
|
-
display: flex;
|
|
188
|
-
align-items: center;
|
|
189
|
-
gap: 0.625rem;
|
|
190
|
-
font-weight: 600;
|
|
191
|
-
color: white;
|
|
192
|
-
font-size: 1.0625rem;
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
.filtros-icon {
|
|
196
|
-
width: 22px;
|
|
197
|
-
height: 22px;
|
|
198
|
-
color: white;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
.toggle-icon {
|
|
202
|
-
width: 20px;
|
|
203
|
-
height: 20px;
|
|
204
|
-
color: white;
|
|
205
|
-
transition: transform 0.3s ease;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.filtros-avancados-header[aria-expanded="false"] .toggle-icon {
|
|
209
|
-
transform: rotate(-90deg);
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
.filtros-content {
|
|
213
|
-
max-height: 600px;
|
|
214
|
-
overflow-y: auto;
|
|
215
|
-
scrollbar-width: thin;
|
|
216
|
-
scrollbar-color: var(--gray-300) var(--gray-100);
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.filtros-content::-webkit-scrollbar {
|
|
220
|
-
width: 6px;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.filtros-content::-webkit-scrollbar-track {
|
|
224
|
-
background: var(--gray-100);
|
|
225
|
-
border-radius: 3px;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.filtros-content::-webkit-scrollbar-thumb {
|
|
229
|
-
background: var(--gray-300);
|
|
230
|
-
border-radius: 3px;
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
.filtros-content::-webkit-scrollbar-thumb:hover {
|
|
234
|
-
background: var(--gray-400);
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
.filtros-content[hidden] {
|
|
238
|
-
display: none;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
/* ============================================ */
|
|
242
|
-
/* DROPDOWN MODERNIZADO */
|
|
243
|
-
/* ============================================ */
|
|
244
|
-
|
|
245
|
-
.filtro-grupo {
|
|
246
|
-
border: none;
|
|
247
|
-
padding: 0;
|
|
248
|
-
margin: 0 0 1.5rem;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
.filtro-grupo:last-child {
|
|
252
|
-
margin-bottom: 0;
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
.filtro-dropdown {
|
|
256
|
-
border: 1px solid #C8D1E0;
|
|
257
|
-
border-radius: 1px solid #C8D1E0;
|
|
258
|
-
overflow: hidden;
|
|
259
|
-
transition: all 0.2s;
|
|
260
|
-
background: var(--gray-50);
|
|
261
|
-
|
|
262
|
-
}
|
|
263
|
-
|
|
264
|
-
.filtro-dropdown:hover {
|
|
265
|
-
border-color: var(--gray-300);
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
.filtro-dropdown.active {
|
|
269
|
-
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
.filtro-grupo-header {
|
|
273
|
-
padding: 0.875rem 1rem;
|
|
274
|
-
background: white;
|
|
275
|
-
border: none;
|
|
276
|
-
display: flex;
|
|
277
|
-
justify-content: space-between;
|
|
278
|
-
align-items: center;
|
|
279
|
-
cursor: pointer;
|
|
280
|
-
user-select: none;
|
|
281
|
-
width: 100%;
|
|
282
|
-
transition: all 0.2s;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
.filtro-grupo-header:hover {
|
|
286
|
-
background: var(--gray-50);
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
.filtro-grupo-titulo {
|
|
290
|
-
font-size: 0.9375rem;
|
|
291
|
-
font-weight: 600;
|
|
292
|
-
color: var(--gray-800);
|
|
293
|
-
display: flex;
|
|
294
|
-
align-items: center;
|
|
295
|
-
gap: 0.5rem;
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
.dropdown-chevron {
|
|
299
|
-
width: 16px;
|
|
300
|
-
height: 16px;
|
|
301
|
-
color: var(--gray-500);
|
|
302
|
-
transition: transform 0.3s ease;
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
.filtro-grupo-header[aria-expanded="true"] .dropdown-chevron {
|
|
306
|
-
transform: rotate(180deg);
|
|
307
|
-
color: var(--primary);
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
.filtro-opcoes {
|
|
311
|
-
max-height: 0;
|
|
312
|
-
overflow: hidden;
|
|
313
|
-
transition: max-height 0.3s ease;
|
|
314
|
-
background: white;
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
.filtro-opcoes.open {
|
|
318
|
-
max-height: 400px;
|
|
319
|
-
border-top: 1px solid var(--gray-100);
|
|
320
|
-
padding: 0.75rem 0.5rem;
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
/* Checkbox customizado moderno */
|
|
324
|
-
.filtro-checkbox {
|
|
325
|
-
display: flex;
|
|
326
|
-
align-items: center;
|
|
327
|
-
cursor: pointer;
|
|
328
|
-
padding: 0.5rem 0.75rem;
|
|
329
|
-
border-radius: var(--radius-sm);
|
|
330
|
-
transition: all 0.2s;
|
|
331
|
-
margin: 0.125rem 0;
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
.filtro-checkbox:hover {
|
|
335
|
-
background: var(--gray-50);
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
.filtro-checkbox input[type="checkbox"] {
|
|
339
|
-
width: 18px;
|
|
340
|
-
height: 18px;
|
|
341
|
-
cursor: pointer;
|
|
342
|
-
margin-right: 0.75rem;
|
|
343
|
-
flex-shrink: 0;
|
|
344
|
-
accent-color: var(--primary);
|
|
345
|
-
border-radius: 4px;
|
|
346
|
-
}
|
|
347
|
-
|
|
348
|
-
.checkbox-label {
|
|
349
|
-
font-size: 0.9375rem;
|
|
350
|
-
color: var(--gray-700);
|
|
351
|
-
transition: color 0.2s;
|
|
352
|
-
}
|
|
353
|
-
|
|
354
|
-
.filtro-checkbox:hover .checkbox-label {
|
|
355
|
-
color: var(--primary);
|
|
356
|
-
}
|
|
357
|
-
|
|
358
|
-
.filtro-checkbox input[type="checkbox"]:checked + .checkbox-label {
|
|
359
|
-
font-weight: 500;
|
|
360
|
-
color: var(--primary);
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
/* Badge de contagem */
|
|
364
|
-
.count-badge {
|
|
365
|
-
display: inline-flex;
|
|
366
|
-
align-items: center;
|
|
367
|
-
justify-content: center;
|
|
368
|
-
min-width: 20px;
|
|
369
|
-
height: 20px;
|
|
370
|
-
padding: 0 0.375rem;
|
|
371
|
-
background: var(--primary);
|
|
372
|
-
color: white;
|
|
373
|
-
border-radius: 10px;
|
|
374
|
-
font-size: 0.6875rem;
|
|
375
|
-
font-weight: 600;
|
|
376
|
-
margin-left: auto;
|
|
377
|
-
}
|
|
378
|
-
|
|
379
|
-
/* ============================================ */
|
|
380
|
-
/* ÁREA DE RESULTADOS */
|
|
381
|
-
/* ============================================ */
|
|
382
|
-
|
|
383
|
-
.resultados-area {
|
|
384
|
-
min-width: 0;
|
|
385
|
-
}
|
|
386
|
-
|
|
387
|
-
.resultados-header {
|
|
388
|
-
display: flex;
|
|
389
|
-
justify-content: space-between;
|
|
390
|
-
align-items: center;
|
|
391
|
-
margin-bottom: 2rem;
|
|
392
|
-
padding: 1.25rem 1.5rem;
|
|
393
|
-
background: white;
|
|
394
|
-
border-radius: var(--radius-lg);
|
|
395
|
-
box-shadow: var(--shadow-sm);
|
|
396
|
-
border: 2px solid var(--gray-200);
|
|
397
|
-
}
|
|
398
|
-
|
|
399
|
-
@media (max-width: 640px) {
|
|
400
|
-
.resultados-header {
|
|
401
|
-
flex-direction: column;
|
|
402
|
-
gap: 1rem;
|
|
403
|
-
align-items: flex-start;
|
|
404
|
-
}
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
.resultados-count {
|
|
408
|
-
font-size: 1.25rem;
|
|
409
|
-
font-weight: 700;
|
|
410
|
-
color: var(--gray-800);
|
|
411
|
-
display: flex;
|
|
412
|
-
align-items: center;
|
|
413
|
-
gap: 0.5rem;
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
.resultados-count::before {
|
|
417
|
-
content: '';
|
|
418
|
-
width: 4px;
|
|
419
|
-
height: 24px;
|
|
420
|
-
background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
421
|
-
border-radius: 2px;
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
.resultados-sort {
|
|
425
|
-
display: flex;
|
|
426
|
-
align-items: center;
|
|
427
|
-
gap: 0.625rem;
|
|
428
|
-
}
|
|
429
|
-
|
|
430
|
-
.sort-label {
|
|
431
|
-
font-size: 0.875rem;
|
|
432
|
-
color: var(--gray-600);
|
|
433
|
-
font-weight: 500;
|
|
434
|
-
}
|
|
435
|
-
|
|
436
|
-
.sort-select {
|
|
437
|
-
padding: 0.625rem 2.25rem 0.625rem 0.875rem;
|
|
438
|
-
border: 2px solid var(--gray-200);
|
|
439
|
-
border-radius: var(--radius-md);
|
|
440
|
-
font-size: 0.9375rem;
|
|
441
|
-
background: white;
|
|
442
|
-
cursor: pointer;
|
|
443
|
-
appearance: none;
|
|
444
|
-
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='%230c5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
445
|
-
background-repeat: no-repeat;
|
|
446
|
-
background-position: right 0.75rem center;
|
|
447
|
-
transition: all 0.2s;
|
|
448
|
-
font-weight: 500;
|
|
449
|
-
}
|
|
450
|
-
|
|
451
|
-
.sort-select:hover {
|
|
452
|
-
border-color: var(--gray-300);
|
|
453
|
-
}
|
|
454
|
-
|
|
455
|
-
.sort-select:focus {
|
|
456
|
-
outline: none;
|
|
457
|
-
border-color: var(--primary);
|
|
458
|
-
box-shadow: 0 0 0 3px rgba(12, 90, 90, 0.1);
|
|
459
|
-
}
|
|
460
|
-
|
|
461
|
-
/* ============================================ */
|
|
462
|
-
/* GRID DE CÁPSULAS MODERNIZADO */
|
|
463
|
-
/* ============================================ */
|
|
464
|
-
|
|
465
|
-
.capsulas-grid {
|
|
466
|
-
display: grid;
|
|
467
|
-
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
468
|
-
gap: 1.75rem;
|
|
469
|
-
}
|
|
470
|
-
|
|
471
|
-
@media (max-width: 768px) {
|
|
472
|
-
.capsulas-grid {
|
|
473
|
-
grid-template-columns: 1fr;
|
|
474
|
-
}
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
.capsula-card {
|
|
478
|
-
background: white;
|
|
479
|
-
border: 1px solid #C8D1E0;
|
|
480
|
-
border-radius: 20px;
|
|
481
|
-
padding: 2rem;
|
|
482
|
-
display: flex;
|
|
483
|
-
flex-direction: column;
|
|
484
|
-
position: relative;
|
|
485
|
-
overflow: hidden;
|
|
486
|
-
}
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
.capsula-card:hover {
|
|
490
|
-
color: #006969;
|
|
491
|
-
background-color: #EBEFF5;
|
|
492
|
-
}
|
|
493
|
-
|
|
494
|
-
.capsula-card:hover::before {
|
|
495
|
-
transform: scaleX(1);
|
|
496
|
-
}
|
|
497
|
-
|
|
498
|
-
.capsula-card-icon {
|
|
499
|
-
width: 56px;
|
|
500
|
-
height: 56px;
|
|
501
|
-
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
502
|
-
border-radius: var(--radius-lg);
|
|
503
|
-
display: flex;
|
|
504
|
-
align-items: center;
|
|
505
|
-
justify-content: center;
|
|
506
|
-
margin-bottom: 1.25rem;
|
|
507
|
-
flex-shrink: 0;
|
|
508
|
-
box-shadow: 0 4px 12px rgba(12, 90, 90, 0.2);
|
|
509
|
-
}
|
|
510
|
-
|
|
511
|
-
.capsula-card-icon svg {
|
|
512
|
-
width: 28px;
|
|
513
|
-
height: 28px;
|
|
514
|
-
color: white;
|
|
515
|
-
}
|
|
516
|
-
|
|
517
|
-
.capsula-card-titulo {
|
|
518
|
-
font-size: 18px;
|
|
519
|
-
font-weight: 700;
|
|
520
|
-
color: #434A54;
|
|
521
|
-
margin-bottom: 0.875rem;
|
|
522
|
-
line-height: 1.4;
|
|
523
|
-
margin: 0;
|
|
524
|
-
}
|
|
525
|
-
|
|
526
|
-
.capsula-card-titulo a {
|
|
527
|
-
color: inherit;
|
|
528
|
-
text-decoration: none;
|
|
529
|
-
transition: color 0.2s;
|
|
530
|
-
}
|
|
531
|
-
|
|
532
|
-
.capsula-card-titulo a:hover {
|
|
533
|
-
color: var(--primary);
|
|
534
|
-
}
|
|
535
|
-
|
|
536
|
-
.capsula-card-descricao {
|
|
537
|
-
font-size: 16px;
|
|
538
|
-
color: #434A54;
|
|
539
|
-
line-height: 1.7;
|
|
540
|
-
margin-bottom: 1.5rem;
|
|
541
|
-
flex-grow: 1;
|
|
542
|
-
}
|
|
543
|
-
|
|
544
|
-
/* Tags de deficiência */
|
|
545
|
-
.capsula-tags-deficiencia {
|
|
546
|
-
display: flex;
|
|
547
|
-
flex-wrap: wrap;
|
|
548
|
-
gap: 0.5rem;
|
|
549
|
-
margin-bottom: 1rem;
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
-
.tag-deficiencia {
|
|
553
|
-
display: inline-flex;
|
|
554
|
-
align-items: center;
|
|
555
|
-
gap: 0.375rem;
|
|
556
|
-
padding: 0.375rem 0.75rem;
|
|
557
|
-
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
|
558
|
-
border: 1px solid #bae6fd;
|
|
559
|
-
border-radius: var(--radius-xl);
|
|
560
|
-
font-size: 0.8125rem;
|
|
561
|
-
color: var(--primary);
|
|
562
|
-
font-weight: 500;
|
|
563
|
-
}
|
|
564
|
-
|
|
565
|
-
.tag-deficiencia-icon {
|
|
566
|
-
width: 14px;
|
|
567
|
-
height: 14px;
|
|
568
|
-
flex-shrink: 0;
|
|
569
|
-
}
|
|
570
|
-
|
|
571
|
-
/* Badge de prioridade */
|
|
572
|
-
.capsula-badge {
|
|
573
|
-
display: inline-flex;
|
|
574
|
-
align-items: center;
|
|
575
|
-
gap: 0.375rem;
|
|
576
|
-
padding: 0.375rem 0.875rem;
|
|
577
|
-
border-radius: var(--radius-xl);
|
|
578
|
-
font-size: 0.8125rem;
|
|
579
|
-
font-weight: 700;
|
|
580
|
-
margin-bottom: 1rem;
|
|
581
|
-
width: fit-content;
|
|
582
|
-
letter-spacing: 0.5px;
|
|
583
|
-
}
|
|
584
|
-
|
|
585
|
-
.capsula-badge-obrigatorio {
|
|
586
|
-
background: #FCF0F1;
|
|
587
|
-
color: #DF3E63;
|
|
588
|
-
border: 1px solid #DF3E63;
|
|
589
|
-
}
|
|
590
|
-
|
|
591
|
-
.capsula-badge-recomendado {
|
|
592
|
-
background: #E6EFFA;
|
|
593
|
-
color: #155BCB;
|
|
594
|
-
border: 1px solid #155BCB;
|
|
595
|
-
}
|
|
596
|
-
|
|
597
|
-
.badge-icon {
|
|
598
|
-
width: 14px;
|
|
599
|
-
height: 14px;
|
|
600
|
-
}
|
|
601
|
-
|
|
602
|
-
/* Tags de recurso */
|
|
603
|
-
.capsula-tags-recurso {
|
|
604
|
-
display: flex;
|
|
605
|
-
flex-wrap: wrap;
|
|
606
|
-
gap: 0.5rem;
|
|
607
|
-
margin-bottom: 1.5rem;
|
|
608
|
-
padding-top: 1.25rem;
|
|
609
|
-
border-top: 2px solid var(--gray-100);
|
|
610
|
-
}
|
|
611
|
-
|
|
612
|
-
.tag-recurso {
|
|
613
|
-
display: inline-flex;
|
|
614
|
-
align-items: center;
|
|
615
|
-
gap: 0.375rem;
|
|
616
|
-
padding: 0.375rem 0.75rem;
|
|
617
|
-
background: var(--gray-100);
|
|
618
|
-
border-radius: var(--radius-sm);
|
|
619
|
-
font-size: 0.8125rem;
|
|
620
|
-
color: var(--gray-700);
|
|
621
|
-
font-weight: 500;
|
|
622
|
-
transition: all 0.2s;
|
|
623
|
-
}
|
|
624
|
-
|
|
625
|
-
.tag-recurso:hover {
|
|
626
|
-
background: var(--gray-200);
|
|
627
|
-
}
|
|
628
|
-
|
|
629
|
-
.tag-recurso-icon {
|
|
630
|
-
width: 14px;
|
|
631
|
-
height: 14px;
|
|
632
|
-
}
|
|
633
|
-
|
|
634
|
-
/* Botão de ação modernizado */
|
|
635
|
-
.capsula-card-btn {
|
|
636
|
-
padding: 0.875rem 1.5rem;
|
|
637
|
-
background: #007D7A;
|
|
638
|
-
color: white;
|
|
639
|
-
border: none;
|
|
640
|
-
border-radius: 32px;
|
|
641
|
-
font-weight: 700;
|
|
642
|
-
font-size: 0.9375rem;
|
|
643
|
-
cursor: pointer;
|
|
644
|
-
transition: all 0.3s ease;
|
|
645
|
-
text-align: center;
|
|
646
|
-
text-decoration: none;
|
|
647
|
-
display: block;
|
|
648
|
-
box-shadow: 0 4px 12px rgba(12, 90, 90, 0.2);
|
|
649
|
-
position: relative;
|
|
650
|
-
overflow: hidden;
|
|
651
|
-
}
|
|
652
|
-
|
|
653
|
-
.capsula-card-btn::before {
|
|
654
|
-
content: '';
|
|
655
|
-
position: absolute;
|
|
656
|
-
top: 0;
|
|
657
|
-
left: -100%;
|
|
658
|
-
width: 100%;
|
|
659
|
-
height: 100%;
|
|
660
|
-
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
|
661
|
-
transition: left 0.5s;
|
|
662
|
-
}
|
|
663
|
-
|
|
664
|
-
.capsula-card-btn:hover {
|
|
665
|
-
background: #006969;
|
|
666
|
-
color: white;
|
|
667
|
-
box-shadow: 0 6px 16px rgba(12, 90, 90, 0.3);
|
|
668
|
-
}
|
|
669
|
-
|
|
670
|
-
.capsula-card-btn:hover::before {
|
|
671
|
-
left: 100%;
|
|
672
|
-
}
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
.capsula-card-btn:focus {
|
|
676
|
-
outline: none;
|
|
677
|
-
box-shadow: 0 0 0 3px rgba(12, 90, 90, 0.2), 0 6px 16px rgba(12, 90, 90, 0.3);
|
|
678
|
-
}
|
|
679
|
-
|
|
680
|
-
/* Estado vazio */
|
|
681
|
-
.resultados-vazio {
|
|
682
|
-
text-align: center;
|
|
683
|
-
padding: 5rem 2rem;
|
|
684
|
-
background: white;
|
|
685
|
-
border-radius: var(--radius-xl);
|
|
686
|
-
border: 2px dashed var(--gray-300);
|
|
687
|
-
}
|
|
688
|
-
|
|
689
|
-
.resultados-vazio-icon {
|
|
690
|
-
width: 80px;
|
|
691
|
-
height: 80px;
|
|
692
|
-
margin: 0 auto 1.5rem;
|
|
693
|
-
color: var(--gray-300);
|
|
694
|
-
}
|
|
695
|
-
|
|
696
|
-
.resultados-vazio h2 {
|
|
697
|
-
font-size: 1.75rem;
|
|
698
|
-
color: var(--gray-800);
|
|
699
|
-
margin-bottom: 0.75rem;
|
|
700
|
-
font-weight: 700;
|
|
701
|
-
}
|
|
702
|
-
|
|
703
|
-
.resultados-vazio p {
|
|
704
|
-
color: var(--gray-600);
|
|
705
|
-
font-size: 1.0625rem;
|
|
706
|
-
}
|
|
707
|
-
|
|
708
|
-
.resultados-vazio a {
|
|
709
|
-
color: var(--primary);
|
|
710
|
-
font-weight: 700;
|
|
711
|
-
text-decoration: none;
|
|
712
|
-
transition: color 0.2s;
|
|
713
|
-
}
|
|
714
|
-
|
|
715
|
-
.resultados-vazio a:hover {
|
|
716
|
-
color: var(--primary-dark);
|
|
717
|
-
text-decoration: underline;
|
|
718
|
-
}
|
|
719
|
-
</style>
|
|
720
|
-
{% endblock %}
|
|
721
43
|
|
|
722
44
|
{% block content %}
|
|
723
|
-
<div class="
|
|
724
|
-
<div class="
|
|
45
|
+
<div class="acessibilidade-container-page">
|
|
46
|
+
<div class="acessibilidade-conteudo-container">
|
|
725
47
|
|
|
726
48
|
{# ============================================ #}
|
|
727
49
|
{# SIDEBAR DE BUSCA E FILTROS #}
|
|
728
50
|
{# ============================================ #}
|
|
729
|
-
<aside class="
|
|
51
|
+
<aside class="filtros-lateral" role="complementary" aria-label="Busca e filtros">
|
|
730
52
|
|
|
731
53
|
{# Campo de busca #}
|
|
732
|
-
<div class="
|
|
733
|
-
<svg class="
|
|
54
|
+
<div class="pesquisa-campo-wrapper">
|
|
55
|
+
<svg class="pesquisa-icone" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
734
56
|
<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>
|
|
735
57
|
</svg>
|
|
736
58
|
<input
|
|
737
59
|
type="text"
|
|
738
|
-
class="
|
|
60
|
+
class="pesquisa-campo"
|
|
739
61
|
placeholder="Digite palavras-chave (ex: contraste, legendas)"
|
|
740
62
|
aria-label="Buscar cápsulas">
|
|
741
63
|
</div>
|
|
742
64
|
|
|
743
65
|
{# Filtros avançados #}
|
|
744
|
-
<div class="
|
|
66
|
+
<div class="opcoes-filtragem">
|
|
745
67
|
|
|
746
|
-
<div id="
|
|
68
|
+
<div id="filtragem-conteudo" class="filtragem-conteudo">
|
|
747
69
|
<form method="get" id="filtros-form">
|
|
748
70
|
|
|
749
71
|
{# TIPO DE DEFICIÊNCIA - DROPDOWN #}
|
|
750
|
-
<fieldset class="filtro
|
|
751
|
-
<div class="
|
|
72
|
+
<fieldset class="categoria-filtro">
|
|
73
|
+
<div class="categoria-dropdown" id="dropdown-deficiencia">
|
|
752
74
|
<button type="button"
|
|
753
|
-
class="
|
|
75
|
+
class="categoria-cabecalho"
|
|
754
76
|
aria-expanded="false"
|
|
755
77
|
onclick="toggleDropdown('deficiencia')">
|
|
756
|
-
<span class="
|
|
78
|
+
<span class="categoria-titulo">
|
|
757
79
|
Tipo de Deficiência
|
|
758
|
-
<span class="
|
|
80
|
+
<span class="contador-badge" id="count-deficiencia">0</span>
|
|
759
81
|
</span>
|
|
760
|
-
<svg class="dropdown
|
|
82
|
+
<svg class="seta-dropdown" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
761
83
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
762
84
|
</svg>
|
|
763
85
|
</button>
|
|
764
|
-
<div class="
|
|
86
|
+
<div class="categoria-opcoes" id="opcoes-deficiencia">
|
|
765
87
|
{% for value, label in opcoes_filtros.tipos_deficiencia %}
|
|
766
|
-
<label class="
|
|
88
|
+
<label class="selecao-checkbox">
|
|
767
89
|
<input type="checkbox"
|
|
768
90
|
name="tipo_deficiencia"
|
|
769
91
|
value="{{ value }}"
|
|
770
92
|
{% if value in filtros_ativos.tipo_deficiencia %}checked{% endif %}
|
|
771
93
|
onchange="updateCount('deficiencia'); this.form.submit()">
|
|
772
|
-
<span class="checkbox
|
|
94
|
+
<span class="texto-checkbox">{{ label }}</span>
|
|
773
95
|
</label>
|
|
774
96
|
{% endfor %}
|
|
775
97
|
</div>
|
|
@@ -777,29 +99,29 @@
|
|
|
777
99
|
</fieldset>
|
|
778
100
|
|
|
779
101
|
{# FORMATO DE AÇÃO - DROPDOWN #}
|
|
780
|
-
<fieldset class="filtro
|
|
781
|
-
<div class="
|
|
102
|
+
<fieldset class="categoria-filtro">
|
|
103
|
+
<div class="categoria-dropdown" id="dropdown-formato">
|
|
782
104
|
<button type="button"
|
|
783
|
-
class="
|
|
105
|
+
class="categoria-cabecalho"
|
|
784
106
|
aria-expanded="false"
|
|
785
107
|
onclick="toggleDropdown('formato')">
|
|
786
|
-
<span class="
|
|
108
|
+
<span class="categoria-titulo">
|
|
787
109
|
Formato de Ação
|
|
788
|
-
<span class="
|
|
110
|
+
<span class="contador-badge" id="count-formato">0</span>
|
|
789
111
|
</span>
|
|
790
|
-
<svg class="dropdown
|
|
112
|
+
<svg class="seta-dropdown" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
791
113
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
792
114
|
</svg>
|
|
793
115
|
</button>
|
|
794
|
-
<div class="
|
|
116
|
+
<div class="categoria-opcoes" id="opcoes-formato">
|
|
795
117
|
{% for value, label in opcoes_filtros.formatos_acao %}
|
|
796
|
-
<label class="
|
|
118
|
+
<label class="selecao-checkbox">
|
|
797
119
|
<input type="checkbox"
|
|
798
120
|
name="formato_acao"
|
|
799
121
|
value="{{ value }}"
|
|
800
122
|
{% if value in filtros_ativos.formato_acao %}checked{% endif %}
|
|
801
123
|
onchange="updateCount('formato'); this.form.submit()">
|
|
802
|
-
<span class="checkbox
|
|
124
|
+
<span class="texto-checkbox">{{ label }}</span>
|
|
803
125
|
</label>
|
|
804
126
|
{% endfor %}
|
|
805
127
|
</div>
|
|
@@ -807,29 +129,29 @@
|
|
|
807
129
|
</fieldset>
|
|
808
130
|
|
|
809
131
|
{# TIPO DE RECURSO - DROPDOWN #}
|
|
810
|
-
<fieldset class="filtro
|
|
811
|
-
<div class="
|
|
132
|
+
<fieldset class="categoria-filtro">
|
|
133
|
+
<div class="categoria-dropdown" id="dropdown-recurso">
|
|
812
134
|
<button type="button"
|
|
813
|
-
class="
|
|
135
|
+
class="categoria-cabecalho"
|
|
814
136
|
aria-expanded="false"
|
|
815
137
|
onclick="toggleDropdown('recurso')">
|
|
816
|
-
<span class="
|
|
138
|
+
<span class="categoria-titulo">
|
|
817
139
|
Tipo de Recurso
|
|
818
|
-
<span class="
|
|
140
|
+
<span class="contador-badge" id="count-recurso">0</span>
|
|
819
141
|
</span>
|
|
820
|
-
<svg class="dropdown
|
|
142
|
+
<svg class="seta-dropdown" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
821
143
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
822
144
|
</svg>
|
|
823
145
|
</button>
|
|
824
|
-
<div class="
|
|
146
|
+
<div class="categoria-opcoes" id="opcoes-recurso">
|
|
825
147
|
{% for value, label in opcoes_filtros.tipos_recurso %}
|
|
826
|
-
<label class="
|
|
148
|
+
<label class="selecao-checkbox">
|
|
827
149
|
<input type="checkbox"
|
|
828
150
|
name="tipo_recurso"
|
|
829
151
|
value="{{ value }}"
|
|
830
152
|
{% if value in filtros_ativos.tipo_recurso %}checked{% endif %}
|
|
831
153
|
onchange="updateCount('recurso'); this.form.submit()">
|
|
832
|
-
<span class="checkbox
|
|
154
|
+
<span class="texto-checkbox">{{ label }}</span>
|
|
833
155
|
</label>
|
|
834
156
|
{% endfor %}
|
|
835
157
|
</div>
|
|
@@ -845,16 +167,16 @@
|
|
|
845
167
|
{# ============================================ #}
|
|
846
168
|
{# ÁREA DE RESULTADOS #}
|
|
847
169
|
{# ============================================ #}
|
|
848
|
-
<main class="
|
|
170
|
+
<main class="conteudo-principal" role="main">
|
|
849
171
|
|
|
850
|
-
<div class="
|
|
851
|
-
<div class="
|
|
172
|
+
<div class="conteudo-cabecalho">
|
|
173
|
+
<div class="conteudo-contador">
|
|
852
174
|
{{ total_resultados }} cápsula{{ total_resultados|pluralize:",s" }} encontrada{{ total_resultados|pluralize:",s" }}
|
|
853
175
|
</div>
|
|
854
176
|
|
|
855
|
-
<div class="
|
|
856
|
-
<label for="sort-select" class="
|
|
857
|
-
<select id="sort-select" class="
|
|
177
|
+
<div class="conteudo-ordenacao">
|
|
178
|
+
<label for="sort-select" class="ordenacao-texto">Ordenar por:</label>
|
|
179
|
+
<select id="sort-select" class="ordenacao-select">
|
|
858
180
|
<option value="relevancia">Relevância</option>
|
|
859
181
|
<option value="recente">Mais recentes</option>
|
|
860
182
|
<option value="titulo">A-Z</option>
|
|
@@ -863,29 +185,29 @@
|
|
|
863
185
|
</div>
|
|
864
186
|
|
|
865
187
|
{% if capsulas %}
|
|
866
|
-
<div class="
|
|
188
|
+
<div class="recursos-grid">
|
|
867
189
|
{% for capsula in capsulas %}
|
|
868
|
-
<article class="
|
|
869
|
-
<div class="
|
|
190
|
+
<article class="recurso-card">
|
|
191
|
+
<div class="recurso-card-icone">
|
|
870
192
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
871
193
|
<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>
|
|
872
194
|
</svg>
|
|
873
195
|
</div>
|
|
874
196
|
|
|
875
|
-
<h2 class="
|
|
197
|
+
<h2 class="recurso-card-titulo">
|
|
876
198
|
<a href="{% pageurl capsula %}">{{ capsula.title }}</a>
|
|
877
199
|
</h2>
|
|
878
200
|
|
|
879
|
-
<p class="
|
|
201
|
+
<p class="recurso-card-descricao">
|
|
880
202
|
{{ capsula.resumo_card|default:"Aprenda sobre este importante aspecto da acessibilidade digital." }}
|
|
881
203
|
</p>
|
|
882
204
|
|
|
883
205
|
{# Tags de deficiência #}
|
|
884
206
|
{% if capsula.tipos_deficiencia %}
|
|
885
|
-
<div class="
|
|
207
|
+
<div class="recurso-tags-categoria">
|
|
886
208
|
{% for tipo in capsula.get_tipos_deficiencia_display|slice:":2" %}
|
|
887
|
-
<span class="tag-
|
|
888
|
-
<svg class="tag-
|
|
209
|
+
<span class="tag-categoria">
|
|
210
|
+
<svg class="tag-categoria-icone" fill="currentColor" viewBox="0 0 20 20">
|
|
889
211
|
<circle cx="10" cy="10" r="4"></circle>
|
|
890
212
|
</svg>
|
|
891
213
|
{{ tipo }}
|
|
@@ -896,8 +218,8 @@
|
|
|
896
218
|
|
|
897
219
|
{# Badge de prioridade #}
|
|
898
220
|
{% if capsula.prioridade %}
|
|
899
|
-
<div class="
|
|
900
|
-
<svg class="badge-
|
|
221
|
+
<div class="recurso-badge recurso-badge-{{ capsula.prioridade }}">
|
|
222
|
+
<svg class="badge-icone" fill="currentColor" viewBox="0 0 20 20">
|
|
901
223
|
<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>
|
|
902
224
|
</svg>
|
|
903
225
|
{{ capsula.get_prioridade_display }}
|
|
@@ -906,10 +228,10 @@
|
|
|
906
228
|
|
|
907
229
|
{# Tags de recurso #}
|
|
908
230
|
{% if capsula.tipos_recurso %}
|
|
909
|
-
<div class="
|
|
231
|
+
<div class="recurso-tags-tipo">
|
|
910
232
|
{% for recurso in capsula.get_tipos_recurso_display|slice:":3" %}
|
|
911
|
-
<span class="tag-
|
|
912
|
-
<svg class="tag-
|
|
233
|
+
<span class="tag-tipo">
|
|
234
|
+
<svg class="tag-tipo-icone" fill="currentColor" viewBox="0 0 20 20">
|
|
913
235
|
<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>
|
|
914
236
|
</svg>
|
|
915
237
|
{{ recurso }}
|
|
@@ -918,7 +240,7 @@
|
|
|
918
240
|
</div>
|
|
919
241
|
{% endif %}
|
|
920
242
|
|
|
921
|
-
<a href="{% pageurl capsula %}" class="
|
|
243
|
+
<a href="{% pageurl capsula %}" class="recurso-card-botao">
|
|
922
244
|
Acessar Cápsula
|
|
923
245
|
</a>
|
|
924
246
|
</article>
|
|
@@ -926,8 +248,8 @@
|
|
|
926
248
|
</div>
|
|
927
249
|
|
|
928
250
|
{% else %}
|
|
929
|
-
<div class="
|
|
930
|
-
<svg class="
|
|
251
|
+
<div class="conteudo-vazio">
|
|
252
|
+
<svg class="conteudo-vazio-icone" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
931
253
|
<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>
|
|
932
254
|
</svg>
|
|
933
255
|
<h2>Nenhuma cápsula encontrada</h2>
|
|
@@ -947,29 +269,19 @@
|
|
|
947
269
|
|
|
948
270
|
{% block scriptinline %}
|
|
949
271
|
<script>
|
|
950
|
-
// Toggle do painel principal de filtros
|
|
951
|
-
function toggleFiltros() {
|
|
952
|
-
const header = document.querySelector('.filtros-avancados-header');
|
|
953
|
-
const content = document.getElementById('filtros-content');
|
|
954
|
-
const expanded = header.getAttribute('aria-expanded') === 'true';
|
|
955
|
-
|
|
956
|
-
header.setAttribute('aria-expanded', !expanded);
|
|
957
|
-
content.hidden = expanded;
|
|
958
|
-
}
|
|
959
|
-
|
|
960
272
|
// Toggle dos dropdowns individuais
|
|
961
273
|
function toggleDropdown(tipo) {
|
|
962
|
-
const header = document.querySelector(`#dropdown-${tipo} .
|
|
274
|
+
const header = document.querySelector(`#dropdown-${tipo} .categoria-cabecalho`);
|
|
963
275
|
const opcoes = document.getElementById(`opcoes-${tipo}`);
|
|
964
276
|
const dropdown = document.getElementById(`dropdown-${tipo}`);
|
|
965
277
|
const expanded = header.getAttribute('aria-expanded') === 'true';
|
|
966
278
|
|
|
967
279
|
// Fecha outros dropdowns
|
|
968
|
-
document.querySelectorAll('.
|
|
280
|
+
document.querySelectorAll('.categoria-dropdown').forEach(dd => {
|
|
969
281
|
if (dd.id !== `dropdown-${tipo}`) {
|
|
970
282
|
dd.classList.remove('active');
|
|
971
|
-
const h = dd.querySelector('.
|
|
972
|
-
const o = dd.querySelector('.
|
|
283
|
+
const h = dd.querySelector('.categoria-cabecalho');
|
|
284
|
+
const o = dd.querySelector('.categoria-opcoes');
|
|
973
285
|
h.setAttribute('aria-expanded', 'false');
|
|
974
286
|
o.classList.remove('open');
|
|
975
287
|
}
|
|
@@ -998,7 +310,7 @@
|
|
|
998
310
|
updateCount('recurso');
|
|
999
311
|
|
|
1000
312
|
// Esconde badges com contador 0
|
|
1001
|
-
document.querySelectorAll('.
|
|
313
|
+
document.querySelectorAll('.contador-badge').forEach(badge => {
|
|
1002
314
|
if (badge.textContent === '0') {
|
|
1003
315
|
badge.style.display = 'none';
|
|
1004
316
|
}
|
|
@@ -1007,11 +319,11 @@
|
|
|
1007
319
|
|
|
1008
320
|
// Fecha dropdowns ao clicar fora
|
|
1009
321
|
document.addEventListener('click', function(event) {
|
|
1010
|
-
if (!event.target.closest('.
|
|
1011
|
-
document.querySelectorAll('.
|
|
322
|
+
if (!event.target.closest('.categoria-dropdown')) {
|
|
323
|
+
document.querySelectorAll('.categoria-dropdown').forEach(dropdown => {
|
|
1012
324
|
dropdown.classList.remove('active');
|
|
1013
|
-
const header = dropdown.querySelector('.
|
|
1014
|
-
const opcoes = dropdown.querySelector('.
|
|
325
|
+
const header = dropdown.querySelector('.categoria-cabecalho');
|
|
326
|
+
const opcoes = dropdown.querySelector('.categoria-opcoes');
|
|
1015
327
|
header.setAttribute('aria-expanded', 'false');
|
|
1016
328
|
opcoes.classList.remove('open');
|
|
1017
329
|
});
|