wagtail-enap-designsystem 1.2.1.202__py3-none-any.whl → 1.2.1.204__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/models.py +112 -48
- enap_designsystem/static/enap_designsystem/blocks/capsulas.css +1604 -40
- enap_designsystem/static/enap_designsystem/blocks/hero_animada_block.css +18 -0
- enap_designsystem/templates/enap_designsystem/pages/capsula_index.copy.html +351 -0
- enap_designsystem/templates/enap_designsystem/pages/capsula_index_page.html +473 -258
- enap_designsystem/templates/enap_designsystem/pages/capsula_page.html +390 -627
- enap_designsystem/templates/enap_designsystem/pages/mini/cards.html +0 -15
- enap_designsystem/templates/enap_designsystem/pages/quiz_rota_page.html +532 -308
- {wagtail_enap_designsystem-1.2.1.202.dist-info → wagtail_enap_designsystem-1.2.1.204.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.202.dist-info → wagtail_enap_designsystem-1.2.1.204.dist-info}/RECORD +13 -12
- {wagtail_enap_designsystem-1.2.1.202.dist-info → wagtail_enap_designsystem-1.2.1.204.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.202.dist-info → wagtail_enap_designsystem-1.2.1.204.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.202.dist-info → wagtail_enap_designsystem-1.2.1.204.dist-info}/top_level.txt +0 -0
|
@@ -2,21 +2,21 @@
|
|
|
2
2
|
{% load static %}
|
|
3
3
|
{% load wagtailcore_tags wagtailimages_tags %}
|
|
4
4
|
|
|
5
|
-
|
|
6
5
|
{% block metadata %}
|
|
7
|
-
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<!-- Adicionar CSS estilo baseado na captura de tela -->
|
|
8
|
+
<link rel="stylesheet" href="{% static 'enap_designsystem/css/capsulas-design-v2.css' %}">
|
|
8
9
|
{% endblock %}
|
|
9
10
|
|
|
10
|
-
|
|
11
11
|
{% block title %}
|
|
12
|
-
|
|
12
|
+
<title>{{ page.title }}</title>
|
|
13
13
|
{% endblock %}
|
|
14
14
|
|
|
15
15
|
{%block govnavbar %}
|
|
16
16
|
<div style="background-color: #071E41;">
|
|
17
17
|
<div class="menu">
|
|
18
18
|
<div class="logo">
|
|
19
|
-
<img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="
|
|
19
|
+
<img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Logo GovBR">
|
|
20
20
|
</div>
|
|
21
21
|
<a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
|
|
22
22
|
<div class="separator"></div>
|
|
@@ -31,7 +31,6 @@
|
|
|
31
31
|
</div>
|
|
32
32
|
{% endblock %}
|
|
33
33
|
|
|
34
|
-
|
|
35
34
|
{% block navbar %}
|
|
36
35
|
{% if page.navbar %}
|
|
37
36
|
{% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
|
|
@@ -40,245 +39,282 @@
|
|
|
40
39
|
{% endif %}
|
|
41
40
|
{% endblock %}
|
|
42
41
|
|
|
43
|
-
|
|
44
42
|
{% block content %}
|
|
45
43
|
<div class="acessibilidade-container-page">
|
|
46
|
-
|
|
47
|
-
<div class="
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<div class="">
|
|
51
|
-
<div class="space-header">
|
|
52
|
-
<div>
|
|
53
|
-
<h1 class="title-large-green">
|
|
54
|
-
{% if query %}
|
|
55
|
-
"{{ query }}"
|
|
56
|
-
{% else %}
|
|
57
|
-
Todos os resultados disponíveis
|
|
58
|
-
{% endif %}
|
|
59
|
-
</h1>
|
|
60
|
-
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
</div>
|
|
44
|
+
<!-- Cabeçalho da página -->
|
|
45
|
+
<div class="page-title-container">
|
|
46
|
+
<h1 class="page-title-capsulas">Buscar Cápsulas de Acessibilidade</h1>
|
|
47
|
+
<p>Encontre o conteúdo específico que você precisa usando nossos filtros inteligentes</p>
|
|
66
48
|
</div>
|
|
49
|
+
<div class="page-containera-cessibilidade">
|
|
67
50
|
<div class="acessibilidade-conteudo-container">
|
|
68
|
-
|
|
69
51
|
{# ============================================ #}
|
|
70
52
|
{# SIDEBAR DE BUSCA E FILTROS #}
|
|
71
53
|
{# ============================================ #}
|
|
72
54
|
<aside class="filtros-lateral" role="complementary" aria-label="Busca e filtros">
|
|
73
|
-
|
|
74
|
-
{# Campo de busca #}
|
|
75
|
-
|
|
76
|
-
|
|
77
55
|
{# Filtros avançados #}
|
|
78
|
-
<div class="
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
56
|
+
<div class="filtros-avancados-container">
|
|
57
|
+
<div class="filtros-header">
|
|
58
|
+
<div class="filtros-titulo">
|
|
59
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
60
|
+
<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
|
|
61
|
+
</svg>
|
|
62
|
+
Filtros Avançados
|
|
63
|
+
</div>
|
|
64
|
+
<button type="button" aria-expanded="true" id="toggle-filtros">
|
|
65
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
66
|
+
<path d="M18 15l-6-6-6 6"></path>
|
|
67
|
+
</svg>
|
|
68
|
+
</button>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div id="filtros-container">
|
|
72
|
+
<form id="filtros-form">
|
|
73
|
+
{# TIPO DE DEFICIÊNCIA #}
|
|
84
74
|
<fieldset class="categoria-filtro">
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
{% for value, label in opcoes_filtros.tipos_deficiencia %}
|
|
100
|
-
<label class="selecao-checkbox">
|
|
101
|
-
<input type="checkbox"
|
|
102
|
-
name="tipo_deficiencia"
|
|
103
|
-
value="{{ value }}"
|
|
104
|
-
{% if value in filtros_ativos.tipo_deficiencia %}checked{% endif %}
|
|
105
|
-
onchange="updateCount('deficiencia'); this.form.submit()">
|
|
106
|
-
<span class="texto-checkbox">{{ label }}</span>
|
|
107
|
-
</label>
|
|
108
|
-
{% endfor %}
|
|
109
|
-
</div>
|
|
75
|
+
<h3 class="categoria-titulo">Tipo de Deficiência</h3>
|
|
76
|
+
<div class="opcoes-filtro">
|
|
77
|
+
{% for value, label in opcoes_filtros.tipos_deficiencia %}
|
|
78
|
+
<div class="checkbox-item">
|
|
79
|
+
<input type="checkbox"
|
|
80
|
+
name="tipo_deficiencia"
|
|
81
|
+
id="tipo_{{ value }}"
|
|
82
|
+
value="{{ value }}"
|
|
83
|
+
class="filtro-checkbox"
|
|
84
|
+
data-filtro-tipo="tipo_deficiencia"
|
|
85
|
+
{% if value in filtros_ativos.tipo_deficiencia %}checked{% endif %}>
|
|
86
|
+
<label for="tipo_{{ value }}" class="checkbox-label">{{ label }}</label>
|
|
87
|
+
</div>
|
|
88
|
+
{% endfor %}
|
|
110
89
|
</div>
|
|
111
90
|
</fieldset>
|
|
112
91
|
|
|
113
|
-
{# FORMATO DE AÇÃO
|
|
92
|
+
{# FORMATO DE AÇÃO #}
|
|
114
93
|
<fieldset class="categoria-filtro">
|
|
115
|
-
<
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
{% for value, label in opcoes_filtros.formatos_acao %}
|
|
130
|
-
<label class="selecao-checkbox">
|
|
131
|
-
<input type="checkbox"
|
|
132
|
-
name="formato_acao"
|
|
133
|
-
value="{{ value }}"
|
|
134
|
-
{% if value in filtros_ativos.formato_acao %}checked{% endif %}
|
|
135
|
-
onchange="updateCount('formato'); this.form.submit()">
|
|
136
|
-
<span class="texto-checkbox">{{ label }}</span>
|
|
137
|
-
</label>
|
|
138
|
-
{% endfor %}
|
|
139
|
-
</div>
|
|
94
|
+
<h3 class="categoria-titulo">Formato de Ação de Desenvolvimento</h3>
|
|
95
|
+
<div class="opcoes-filtro">
|
|
96
|
+
{% for value, label in opcoes_filtros.formatos_acao %}
|
|
97
|
+
<div class="checkbox-item">
|
|
98
|
+
<input type="checkbox"
|
|
99
|
+
name="formato_acao"
|
|
100
|
+
id="formato_{{ value }}"
|
|
101
|
+
value="{{ value }}"
|
|
102
|
+
class="filtro-checkbox"
|
|
103
|
+
data-filtro-tipo="formato_acao"
|
|
104
|
+
{% if value in filtros_ativos.formato_acao %}checked{% endif %}>
|
|
105
|
+
<label for="formato_{{ value }}" class="checkbox-label">{{ label }}</label>
|
|
106
|
+
</div>
|
|
107
|
+
{% endfor %}
|
|
140
108
|
</div>
|
|
141
109
|
</fieldset>
|
|
142
110
|
|
|
143
|
-
{# TIPO DE RECURSO
|
|
111
|
+
{# TIPO DE RECURSO #}
|
|
144
112
|
<fieldset class="categoria-filtro">
|
|
145
|
-
<
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
{% for value, label in opcoes_filtros.tipos_recurso %}
|
|
160
|
-
<label class="selecao-checkbox">
|
|
161
|
-
<input type="checkbox"
|
|
162
|
-
name="tipo_recurso"
|
|
163
|
-
value="{{ value }}"
|
|
164
|
-
{% if value in filtros_ativos.tipo_recurso %}checked{% endif %}
|
|
165
|
-
onchange="updateCount('recurso'); this.form.submit()">
|
|
166
|
-
<span class="texto-checkbox">{{ label }}</span>
|
|
167
|
-
</label>
|
|
168
|
-
{% endfor %}
|
|
169
|
-
</div>
|
|
113
|
+
<h3 class="categoria-titulo">Tipo de Recurso</h3>
|
|
114
|
+
<div class="opcoes-filtro">
|
|
115
|
+
{% for value, label in opcoes_filtros.tipos_recurso %}
|
|
116
|
+
<div class="checkbox-item">
|
|
117
|
+
<input type="checkbox"
|
|
118
|
+
name="tipo_recurso"
|
|
119
|
+
id="recurso_{{ value }}"
|
|
120
|
+
value="{{ value }}"
|
|
121
|
+
class="filtro-checkbox"
|
|
122
|
+
data-filtro-tipo="tipo_recurso"
|
|
123
|
+
{% if value in filtros_ativos.tipo_recurso %}checked{% endif %}>
|
|
124
|
+
<label for="recurso_{{ value }}" class="checkbox-label">{{ label }}</label>
|
|
125
|
+
</div>
|
|
126
|
+
{% endfor %}
|
|
170
127
|
</div>
|
|
171
128
|
</fieldset>
|
|
172
129
|
|
|
130
|
+
{# PERFIL PROFISSIONAL #}
|
|
131
|
+
<fieldset class="categoria-filtro">
|
|
132
|
+
<h3 class="categoria-titulo">Perfil Profissional</h3>
|
|
133
|
+
<div class="opcoes-filtro">
|
|
134
|
+
{% for value, label in opcoes_filtros.perfis_profissionais %}
|
|
135
|
+
<div class="checkbox-item">
|
|
136
|
+
<input type="checkbox"
|
|
137
|
+
name="perfil_profissional"
|
|
138
|
+
id="perfil_{{ value }}"
|
|
139
|
+
value="{{ value }}"
|
|
140
|
+
class="filtro-checkbox"
|
|
141
|
+
data-filtro-tipo="perfil_profissional"
|
|
142
|
+
{% if value in filtros_ativos.perfil_profissional %}checked{% endif %}>
|
|
143
|
+
<label for="perfil_{{ value }}" class="checkbox-label">{{ label }}</label>
|
|
144
|
+
</div>
|
|
145
|
+
{% endfor %}
|
|
146
|
+
</div>
|
|
147
|
+
</fieldset>
|
|
173
148
|
</form>
|
|
174
149
|
</div>
|
|
175
150
|
</div>
|
|
176
|
-
|
|
177
151
|
</aside>
|
|
178
152
|
|
|
179
153
|
{# ============================================ #}
|
|
180
|
-
{# ÁREA
|
|
154
|
+
{# ÁREA DOS RESULTADOS #}
|
|
181
155
|
{# ============================================ #}
|
|
182
|
-
<main class="
|
|
156
|
+
<main class="resultados-container" role="main">
|
|
157
|
+
<!-- Filtros ativos e opções de ordenação -->
|
|
158
|
+
<div class="filtros-ativos-wrapper">
|
|
159
|
+
<div class="filtros-ativos-container" id="filtros-ativos-container">
|
|
160
|
+
<!-- Aqui entram as tags de filtros ativos via JavaScript -->
|
|
161
|
+
</div>
|
|
162
|
+
|
|
163
|
+
<button type="button" class="limpar-todos" id="limpar-todos-btn" style="display: none;">
|
|
164
|
+
Limpar todos
|
|
165
|
+
</button>
|
|
166
|
+
</div>
|
|
183
167
|
|
|
184
|
-
<div class="
|
|
185
|
-
|
|
168
|
+
<div class="resultados-header">
|
|
169
|
+
<div class="contagem-resultados" id="contagem-resultados">
|
|
170
|
+
{{ total_resultados }} cápsulas encontradas
|
|
171
|
+
</div>
|
|
186
172
|
|
|
187
|
-
<div class="
|
|
188
|
-
<
|
|
189
|
-
|
|
190
|
-
<
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
</
|
|
173
|
+
<div class="ordenacao-dropdown">
|
|
174
|
+
<button type="button" class="ordenacao-button">
|
|
175
|
+
Relevância
|
|
176
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
177
|
+
<path d="M6 9l6 6 6-6"></path>
|
|
178
|
+
</svg>
|
|
179
|
+
</button>
|
|
194
180
|
</div>
|
|
195
181
|
</div>
|
|
196
182
|
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
183
|
+
<div class="grade-resultados" id="grade-resultados">
|
|
184
|
+
{% for capsula in capsulas %}
|
|
185
|
+
<a href="{% pageurl capsula %}">
|
|
186
|
+
<div class="capsula-card"
|
|
187
|
+
data-tipo-deficiencia="{{ capsula.tipos_deficiencia|join:' ' }}"
|
|
188
|
+
data-formato-acao="{{ capsula.formatos_acao|join:' ' }}"
|
|
189
|
+
data-tipo-recurso="{{ capsula.tipos_recurso|join:' ' }}"
|
|
190
|
+
data-perfil-profissional="{{ capsula.perfis_profissionais|join:' ' }}"
|
|
191
|
+
data-prioridade="{{ capsula.prioridade }}">
|
|
192
|
+
<div class="capsula-conteudo">
|
|
193
|
+
<div class="capsula-icone">
|
|
194
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
195
|
+
<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>
|
|
196
|
+
</svg>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<h2 class="capsula-titulo">
|
|
200
|
+
{{ capsula.title }}
|
|
201
|
+
</h2>
|
|
202
|
+
|
|
203
|
+
<p class="capsula-descricao">
|
|
204
|
+
{{ capsula.resumo_card|default:"Aprenda sobre este importante aspecto da acessibilidade digital." }}
|
|
205
|
+
</p>
|
|
206
|
+
|
|
207
|
+
{# Tipos de deficiência #}
|
|
208
|
+
{% if capsula.tipos_deficiencia %}
|
|
209
|
+
<div class="capsula-tipos" aria-label="Tipos de deficiência abordados">
|
|
210
|
+
<i class="fa-solid fa-tags"></i>
|
|
211
|
+
{% for tipo_value, tipo_label in opcoes_filtros.tipos_deficiencia %}
|
|
212
|
+
{% if tipo_value in capsula.tipos_deficiencia %}
|
|
213
|
+
<div class="capsula-tipo {{ tipo_value }}">
|
|
214
|
+
<div class="tipo-dot"></div>
|
|
215
|
+
<div class="tipo-text">{{ tipo_label }}</div>
|
|
216
|
+
</div>
|
|
217
|
+
{% endif %}
|
|
218
|
+
{% endfor %}
|
|
210
219
|
</div>
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
{{
|
|
253
|
-
</
|
|
254
|
-
{%
|
|
255
|
-
|
|
256
|
-
{% endif %}
|
|
257
|
-
|
|
258
|
-
<div class="recurso-card-botao-wrapper">
|
|
259
|
-
<span class="recurso-card-botao">
|
|
260
|
-
Acessar Cápsula
|
|
261
|
-
</span>
|
|
220
|
+
{% endif %}
|
|
221
|
+
|
|
222
|
+
|
|
223
|
+
|
|
224
|
+
{# Tags de recurso #}
|
|
225
|
+
{% if capsula.tipos_recurso %}
|
|
226
|
+
<div class="capsula-recursos" aria-label="Tipos de recurso">
|
|
227
|
+
{% for recurso_value, recurso_label in opcoes_filtros.tipos_recurso %}
|
|
228
|
+
{% if recurso_value in capsula.tipos_recurso %}
|
|
229
|
+
<div class="recurso-tag">
|
|
230
|
+
{% if recurso_value == 'imagem' %}
|
|
231
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
232
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
233
|
+
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
|
234
|
+
<polyline points="21 15 16 10 5 21"></polyline>
|
|
235
|
+
</svg>
|
|
236
|
+
{% elif recurso_value == 'video' %}
|
|
237
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
238
|
+
<polygon points="23 7 16 12 23 17 23 7"></polygon>
|
|
239
|
+
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
|
|
240
|
+
</svg>
|
|
241
|
+
{% elif recurso_value == 'grafico' %}
|
|
242
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
243
|
+
<line x1="18" y1="20" x2="18" y2="10"></line>
|
|
244
|
+
<line x1="12" y1="20" x2="12" y2="4"></line>
|
|
245
|
+
<line x1="6" y1="20" x2="6" y2="14"></line>
|
|
246
|
+
</svg>
|
|
247
|
+
{% elif recurso_value == 'tabela' %}
|
|
248
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
249
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
250
|
+
<line x1="3" y1="9" x2="21" y2="9"></line>
|
|
251
|
+
<line x1="3" y1="15" x2="21" y2="15"></line>
|
|
252
|
+
<line x1="9" y1="3" x2="9" y2="21"></line>
|
|
253
|
+
<line x1="15" y1="3" x2="15" y2="21"></line>
|
|
254
|
+
</svg>
|
|
255
|
+
{% else %}
|
|
256
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
257
|
+
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
|
|
258
|
+
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
|
|
259
|
+
</svg>
|
|
260
|
+
{% endif %}
|
|
261
|
+
{{ recurso_label }}
|
|
262
|
+
</div>
|
|
263
|
+
{% endif %}
|
|
264
|
+
{% endfor %}
|
|
262
265
|
</div>
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
<h2>Nenhuma cápsula encontrada</h2>
|
|
274
|
-
<p>Tente ajustar os filtros ou <a href="{{ page.url }}">limpe os filtros</a> para ver todas as cápsulas.</p>
|
|
275
|
-
</div>
|
|
276
|
-
{% endif %}
|
|
266
|
+
{% endif %}
|
|
267
|
+
|
|
268
|
+
<div class="btn large primary">
|
|
269
|
+
Acessar Cápsula
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
</a>
|
|
274
|
+
{% endfor %}
|
|
275
|
+
</div>
|
|
277
276
|
|
|
277
|
+
<!-- Mensagem para nenhum resultado -->
|
|
278
|
+
<div id="mensagem-vazia" class="conteudo-vazio" style="display: none;">
|
|
279
|
+
<svg class="conteudo-vazio-icone" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
280
|
+
<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>
|
|
281
|
+
</svg>
|
|
282
|
+
<h2>Nenhuma cápsula encontrada</h2>
|
|
283
|
+
<p>Tente ajustar os filtros ou <a href="javascript:void(0)" onclick="limparTodosFiltros()">limpe os filtros</a> para ver todas as cápsulas.</p>
|
|
284
|
+
</div>
|
|
278
285
|
</main>
|
|
279
|
-
|
|
286
|
+
</div>
|
|
280
287
|
</div>
|
|
281
288
|
</div>
|
|
289
|
+
|
|
290
|
+
<style>
|
|
291
|
+
/* Estilo do esqueleto para efeito de loading */
|
|
292
|
+
.skeleton-card {
|
|
293
|
+
background: #e0e0e0;
|
|
294
|
+
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
295
|
+
min-width: 268px;
|
|
296
|
+
min-height: 450px;
|
|
297
|
+
border-radius: 20px;
|
|
298
|
+
box-shadow: inset 0 0 0 1px #DEE3ED;
|
|
299
|
+
margin-top: 20px;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.skeleton-card:nth-child(odd) {
|
|
303
|
+
animation-delay: 0.5s;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
@keyframes skeleton-loading {
|
|
307
|
+
0% {
|
|
308
|
+
background-color: #e0e0e0;
|
|
309
|
+
}
|
|
310
|
+
50% {
|
|
311
|
+
background-color: #f0f0f0;
|
|
312
|
+
}
|
|
313
|
+
100% {
|
|
314
|
+
background-color: #e0e0e0;
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
</style>
|
|
282
318
|
{% endblock %}
|
|
283
319
|
|
|
284
320
|
{% block footer %}
|
|
@@ -287,65 +323,244 @@
|
|
|
287
323
|
|
|
288
324
|
{% block scriptinline %}
|
|
289
325
|
<script>
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
const
|
|
293
|
-
const
|
|
294
|
-
const
|
|
295
|
-
const
|
|
326
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
327
|
+
// Cache dos elementos DOM
|
|
328
|
+
const checkboxes = document.querySelectorAll('.filtro-checkbox');
|
|
329
|
+
const capsulaCards = document.querySelectorAll('.capsula-card');
|
|
330
|
+
const contagemResultados = document.getElementById('contagem-resultados');
|
|
331
|
+
const mensagemVazia = document.getElementById('mensagem-vazia');
|
|
332
|
+
const filtrosAtivosContainer = document.getElementById('filtros-ativos-container');
|
|
333
|
+
const limparTodosBtn = document.getElementById('limpar-todos-btn');
|
|
296
334
|
|
|
297
|
-
//
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
}
|
|
335
|
+
// Mapeamento de rótulos para cada opção de filtro
|
|
336
|
+
const filtroLabels = {
|
|
337
|
+
{% for tipo, opcoes in opcoes_filtros.items %}
|
|
338
|
+
'{{ tipo }}': {
|
|
339
|
+
{% for value, label in opcoes %}
|
|
340
|
+
'{{ value }}': '{{ label }}',
|
|
341
|
+
{% endfor %}
|
|
342
|
+
},
|
|
343
|
+
{% endfor %}
|
|
344
|
+
};
|
|
345
|
+
|
|
346
|
+
// Inicializar: aplicar filtros já marcados na URL
|
|
347
|
+
aplicarFiltros();
|
|
348
|
+
atualizarFiltrosAtivos();
|
|
349
|
+
|
|
350
|
+
// Adicionar eventos de mudança para todos os checkboxes
|
|
351
|
+
checkboxes.forEach(checkbox => {
|
|
352
|
+
checkbox.addEventListener('change', function() {
|
|
353
|
+
aplicarFiltros();
|
|
354
|
+
atualizarFiltrosAtivos();
|
|
355
|
+
atualizarURL();
|
|
356
|
+
});
|
|
306
357
|
});
|
|
307
358
|
|
|
308
|
-
//
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
function updateCount(tipo) {
|
|
316
|
-
const checkboxes = document.querySelectorAll(`#opcoes-${tipo} input[type="checkbox"]:checked`);
|
|
317
|
-
const badge = document.getElementById(`count-${tipo}`);
|
|
318
|
-
const count = checkboxes.length;
|
|
359
|
+
// Evento para o botão "Limpar todos"
|
|
360
|
+
if (limparTodosBtn) {
|
|
361
|
+
limparTodosBtn.addEventListener('click', function(e) {
|
|
362
|
+
e.preventDefault();
|
|
363
|
+
limparTodosFiltros();
|
|
364
|
+
});
|
|
365
|
+
}
|
|
319
366
|
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
367
|
+
// Toggle dos filtros avançados
|
|
368
|
+
const toggleBtn = document.getElementById('toggle-filtros');
|
|
369
|
+
if (toggleBtn) {
|
|
370
|
+
toggleBtn.addEventListener('click', function() {
|
|
371
|
+
const container = document.getElementById('filtros-container');
|
|
372
|
+
const button = this;
|
|
373
|
+
|
|
374
|
+
if (button.getAttribute('aria-expanded') === 'true') {
|
|
375
|
+
button.setAttribute('aria-expanded', 'false');
|
|
376
|
+
button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg>';
|
|
377
|
+
container.style.display = 'none';
|
|
378
|
+
} else {
|
|
379
|
+
button.setAttribute('aria-expanded', 'true');
|
|
380
|
+
button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"></path></svg>';
|
|
381
|
+
container.style.display = 'block';
|
|
382
|
+
}
|
|
383
|
+
});
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
// Função para aplicar filtros
|
|
387
|
+
function aplicarFiltros() {
|
|
388
|
+
// Coletar filtros ativos
|
|
389
|
+
const filtrosAtivos = {
|
|
390
|
+
tipo_deficiencia: [],
|
|
391
|
+
formato_acao: [],
|
|
392
|
+
tipo_recurso: [],
|
|
393
|
+
perfil_profissional: [],
|
|
394
|
+
prioridade: null
|
|
395
|
+
};
|
|
396
|
+
|
|
397
|
+
// Preencher arrays de filtros ativos baseado nos checkboxes marcados
|
|
398
|
+
checkboxes.forEach(checkbox => {
|
|
399
|
+
if (checkbox.checked) {
|
|
400
|
+
const tipoFiltro = checkbox.getAttribute('data-filtro-tipo');
|
|
401
|
+
if (filtrosAtivos[tipoFiltro] !== undefined) {
|
|
402
|
+
filtrosAtivos[tipoFiltro].push(checkbox.value);
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
});
|
|
406
|
+
|
|
407
|
+
// Contar cápsulas visíveis para atualizar o contador
|
|
408
|
+
let capsulasFiltradas = 0;
|
|
409
|
+
|
|
410
|
+
// Aplicar filtros em cada card
|
|
411
|
+
capsulaCards.forEach(card => {
|
|
412
|
+
let mostrar = true;
|
|
413
|
+
|
|
414
|
+
// Verificar cada tipo de filtro
|
|
415
|
+
if (filtrosAtivos.tipo_deficiencia.length > 0) {
|
|
416
|
+
const tiposDeficiencia = (card.getAttribute('data-tipo-deficiencia') || '').split(' ').filter(t => t);
|
|
417
|
+
if (!filtrosAtivos.tipo_deficiencia.some(tipo => tiposDeficiencia.includes(tipo))) {
|
|
418
|
+
mostrar = false;
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
if (mostrar && filtrosAtivos.formato_acao.length > 0) {
|
|
423
|
+
const formatosAcao = (card.getAttribute('data-formato-acao') || '').split(' ').filter(t => t);
|
|
424
|
+
if (!filtrosAtivos.formato_acao.some(formato => formatosAcao.includes(formato))) {
|
|
425
|
+
mostrar = false;
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
if (mostrar && filtrosAtivos.tipo_recurso.length > 0) {
|
|
430
|
+
const tiposRecurso = (card.getAttribute('data-tipo-recurso') || '').split(' ').filter(t => t);
|
|
431
|
+
if (!filtrosAtivos.tipo_recurso.some(recurso => tiposRecurso.includes(recurso))) {
|
|
432
|
+
mostrar = false;
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
if (mostrar && filtrosAtivos.perfil_profissional.length > 0) {
|
|
437
|
+
const perfis = (card.getAttribute('data-perfil-profissional') || '').split(' ').filter(t => t);
|
|
438
|
+
if (!filtrosAtivos.perfil_profissional.some(perfil => perfis.includes(perfil))) {
|
|
439
|
+
mostrar = false;
|
|
440
|
+
}
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
if (mostrar && filtrosAtivos.prioridade) {
|
|
444
|
+
const prioridade = card.getAttribute('data-prioridade');
|
|
445
|
+
if (prioridade !== filtrosAtivos.prioridade) {
|
|
446
|
+
mostrar = false;
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
// Aplicar resultado
|
|
451
|
+
if (mostrar) {
|
|
452
|
+
card.style.display = 'block';
|
|
453
|
+
capsulasFiltradas++;
|
|
454
|
+
} else {
|
|
455
|
+
card.style.display = 'none';
|
|
456
|
+
}
|
|
457
|
+
});
|
|
458
|
+
|
|
459
|
+
// Atualizar contador de resultados
|
|
460
|
+
if (contagemResultados) {
|
|
461
|
+
contagemResultados.textContent = capsulasFiltradas + ' cápsulas encontradas';
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
// Mostrar mensagem de "nenhum resultado" se necessário
|
|
465
|
+
if (mensagemVazia) {
|
|
466
|
+
mensagemVazia.style.display = capsulasFiltradas === 0 ? 'block' : 'none';
|
|
467
|
+
}
|
|
468
|
+
}
|
|
329
469
|
|
|
330
|
-
//
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
470
|
+
// Função para atualizar a exibição de filtros ativos
|
|
471
|
+
function atualizarFiltrosAtivos() {
|
|
472
|
+
// Limpar container completamente
|
|
473
|
+
filtrosAtivosContainer.innerHTML = '';
|
|
474
|
+
|
|
475
|
+
let temFiltrosAtivos = false;
|
|
476
|
+
|
|
477
|
+
// Para cada tipo de filtro, adicionar tags para os valores ativos
|
|
478
|
+
['tipo_deficiencia', 'formato_acao', 'tipo_recurso', 'perfil_profissional'].forEach(tipoFiltro => {
|
|
479
|
+
const checkboxesTipo = document.querySelectorAll(`.filtro-checkbox[data-filtro-tipo="${tipoFiltro}"]:checked`);
|
|
480
|
+
|
|
481
|
+
checkboxesTipo.forEach(checkbox => {
|
|
482
|
+
temFiltrosAtivos = true;
|
|
483
|
+
|
|
484
|
+
// Verificar se o label existe
|
|
485
|
+
const labelTexto = filtroLabels[tipoFiltro] && filtroLabels[tipoFiltro][checkbox.value]
|
|
486
|
+
? filtroLabels[tipoFiltro][checkbox.value]
|
|
487
|
+
: checkbox.value;
|
|
488
|
+
|
|
489
|
+
// Criar tag de filtro
|
|
490
|
+
const tagFiltro = document.createElement('div');
|
|
491
|
+
tagFiltro.className = 'tag-filtro';
|
|
492
|
+
tagFiltro.innerHTML = `
|
|
493
|
+
${labelTexto}
|
|
494
|
+
<button type="button" class="remover-filtro-btn" data-tipo="${tipoFiltro}" data-valor="${checkbox.value}">
|
|
495
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
496
|
+
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
497
|
+
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
498
|
+
</svg>
|
|
499
|
+
</button>
|
|
500
|
+
`;
|
|
501
|
+
|
|
502
|
+
// Adicionar ao container
|
|
503
|
+
filtrosAtivosContainer.appendChild(tagFiltro);
|
|
504
|
+
});
|
|
505
|
+
});
|
|
506
|
+
|
|
507
|
+
// Adicionar eventos aos botões de remover filtro
|
|
508
|
+
document.querySelectorAll('.remover-filtro-btn').forEach(btn => {
|
|
509
|
+
btn.addEventListener('click', function(e) {
|
|
510
|
+
e.preventDefault();
|
|
511
|
+
const tipo = this.getAttribute('data-tipo');
|
|
512
|
+
const valor = this.getAttribute('data-valor');
|
|
513
|
+
removerFiltro(tipo, valor);
|
|
514
|
+
});
|
|
515
|
+
});
|
|
516
|
+
|
|
517
|
+
// Mostrar ou ocultar botão "Limpar todos"
|
|
518
|
+
if (limparTodosBtn) {
|
|
519
|
+
limparTodosBtn.style.display = temFiltrosAtivos ? 'inline-block' : 'none';
|
|
334
520
|
}
|
|
335
|
-
}
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
// Função para atualizar a URL com os filtros selecionados
|
|
524
|
+
function atualizarURL() {
|
|
525
|
+
const urlParams = new URLSearchParams();
|
|
526
|
+
|
|
527
|
+
// Coletar todos os filtros ativos
|
|
528
|
+
checkboxes.forEach(checkbox => {
|
|
529
|
+
if (checkbox.checked) {
|
|
530
|
+
urlParams.append(checkbox.getAttribute('data-filtro-tipo'), checkbox.value);
|
|
531
|
+
}
|
|
532
|
+
});
|
|
533
|
+
|
|
534
|
+
// Atualizar URL sem recarregar a página
|
|
535
|
+
const newUrl = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
|
|
536
|
+
history.pushState(null, '', newUrl);
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
// Função para remover um filtro específico
|
|
540
|
+
function removerFiltro(tipo, valor) {
|
|
541
|
+
const checkbox = document.querySelector(`input[data-filtro-tipo="${tipo}"][value="${valor}"]`);
|
|
542
|
+
if (checkbox) {
|
|
543
|
+
checkbox.checked = false;
|
|
544
|
+
aplicarFiltros();
|
|
545
|
+
atualizarFiltrosAtivos();
|
|
546
|
+
atualizarURL();
|
|
547
|
+
}
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
// Função para limpar todos os filtros
|
|
551
|
+
function limparTodosFiltros() {
|
|
552
|
+
checkboxes.forEach(checkbox => {
|
|
553
|
+
checkbox.checked = false;
|
|
347
554
|
});
|
|
555
|
+
|
|
556
|
+
aplicarFiltros();
|
|
557
|
+
atualizarFiltrosAtivos();
|
|
558
|
+
atualizarURL();
|
|
348
559
|
}
|
|
560
|
+
|
|
561
|
+
// Tornar funções acessíveis globalmente (fallback)
|
|
562
|
+
window.removerFiltro = removerFiltro;
|
|
563
|
+
window.limparTodosFiltros = limparTodosFiltros;
|
|
349
564
|
});
|
|
350
|
-
</script>
|
|
565
|
+
</script>
|
|
351
566
|
{% endblock %}
|