wagtail-enap-designsystem 1.2.1.201__py3-none-any.whl → 1.2.1.203__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 +1158 -28
- enap_designsystem/templates/enap_designsystem/pages/capsula_index.copy.html +351 -0
- enap_designsystem/templates/enap_designsystem/pages/capsula_index_page.html +470 -257
- 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.201.dist-info → wagtail_enap_designsystem-1.2.1.203.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.201.dist-info → wagtail_enap_designsystem-1.2.1.203.dist-info}/RECORD +11 -10
- {wagtail_enap_designsystem-1.2.1.201.dist-info → wagtail_enap_designsystem-1.2.1.203.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.201.dist-info → wagtail_enap_designsystem-1.2.1.203.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.201.dist-info → wagtail_enap_designsystem-1.2.1.203.dist-info}/top_level.txt +0 -0
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
{% extends "enap_designsystem/base.html" %}
|
|
2
|
+
{% load static %}
|
|
3
|
+
{% load wagtailcore_tags wagtailimages_tags %}
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
{% block metadata %}
|
|
7
|
+
{% comment %} <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endcomment %}
|
|
8
|
+
{% endblock %}
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
{% block title %}
|
|
12
|
+
<title>{{ page.title }}</title>
|
|
13
|
+
{% endblock %}
|
|
14
|
+
|
|
15
|
+
{%block govnavbar %}
|
|
16
|
+
<div style="background-color: #071E41;">
|
|
17
|
+
<div class="menu">
|
|
18
|
+
<div class="logo">
|
|
19
|
+
<img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Passar pro lado esquerdo" alt="Logo GovBR" height="40">
|
|
20
|
+
</div>
|
|
21
|
+
<a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
|
|
22
|
+
<div class="separator"></div>
|
|
23
|
+
<a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
|
|
24
|
+
<div class="separator"></div>
|
|
25
|
+
<a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
|
|
26
|
+
<div class="separator"></div>
|
|
27
|
+
<a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
|
|
28
|
+
<div class="separator"></div>
|
|
29
|
+
<a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
{% endblock %}
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
{% block navbar %}
|
|
36
|
+
{% if page.navbar %}
|
|
37
|
+
{% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
|
|
38
|
+
{% else %}
|
|
39
|
+
<p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
|
|
40
|
+
{% endif %}
|
|
41
|
+
{% endblock %}
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
{% block content %}
|
|
45
|
+
<div class="acessibilidade-container-page">
|
|
46
|
+
<div class="acessibilidade-container-white">
|
|
47
|
+
<div class="hearder-search">
|
|
48
|
+
<!-- Na sua página -->
|
|
49
|
+
{% include "enap_designsystem/blocks/auto_breadcrumb_block.html" with value=breadcrumb_config %}
|
|
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>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="acessibilidade-conteudo-container">
|
|
68
|
+
|
|
69
|
+
{# ============================================ #}
|
|
70
|
+
{# SIDEBAR DE BUSCA E FILTROS #}
|
|
71
|
+
{# ============================================ #}
|
|
72
|
+
<aside class="filtros-lateral" role="complementary" aria-label="Busca e filtros">
|
|
73
|
+
|
|
74
|
+
{# Campo de busca #}
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
{# Filtros avançados #}
|
|
78
|
+
<div class="opcoes-filtragem">
|
|
79
|
+
|
|
80
|
+
<div id="filtragem-conteudo" class="filtragem-conteudo">
|
|
81
|
+
<form method="get" id="filtros-form">
|
|
82
|
+
|
|
83
|
+
{# TIPO DE DEFICIÊNCIA - DROPDOWN #}
|
|
84
|
+
<fieldset class="categoria-filtro">
|
|
85
|
+
<div class="categoria-dropdown" id="dropdown-deficiencia">
|
|
86
|
+
<button type="button"
|
|
87
|
+
class="categoria-cabecalho"
|
|
88
|
+
aria-expanded="false"
|
|
89
|
+
onclick="toggleDropdown('deficiencia')">
|
|
90
|
+
<span class="categoria-titulo">
|
|
91
|
+
Tipo de Deficiência
|
|
92
|
+
<span class="contador-badge" id="count-deficiencia">0</span>
|
|
93
|
+
</span>
|
|
94
|
+
<svg class="seta-dropdown" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
95
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
96
|
+
</svg>
|
|
97
|
+
</button>
|
|
98
|
+
<div class="categoria-opcoes" id="opcoes-deficiencia">
|
|
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>
|
|
110
|
+
</div>
|
|
111
|
+
</fieldset>
|
|
112
|
+
|
|
113
|
+
{# FORMATO DE AÇÃO - DROPDOWN #}
|
|
114
|
+
<fieldset class="categoria-filtro">
|
|
115
|
+
<div class="categoria-dropdown" id="dropdown-formato">
|
|
116
|
+
<button type="button"
|
|
117
|
+
class="categoria-cabecalho"
|
|
118
|
+
aria-expanded="false"
|
|
119
|
+
onclick="toggleDropdown('formato')">
|
|
120
|
+
<span class="categoria-titulo">
|
|
121
|
+
Formato de Ação
|
|
122
|
+
<span class="contador-badge" id="count-formato">0</span>
|
|
123
|
+
</span>
|
|
124
|
+
<svg class="seta-dropdown" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
125
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
126
|
+
</svg>
|
|
127
|
+
</button>
|
|
128
|
+
<div class="categoria-opcoes" id="opcoes-formato">
|
|
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>
|
|
140
|
+
</div>
|
|
141
|
+
</fieldset>
|
|
142
|
+
|
|
143
|
+
{# TIPO DE RECURSO - DROPDOWN #}
|
|
144
|
+
<fieldset class="categoria-filtro">
|
|
145
|
+
<div class="categoria-dropdown" id="dropdown-recurso">
|
|
146
|
+
<button type="button"
|
|
147
|
+
class="categoria-cabecalho"
|
|
148
|
+
aria-expanded="false"
|
|
149
|
+
onclick="toggleDropdown('recurso')">
|
|
150
|
+
<span class="categoria-titulo">
|
|
151
|
+
Tipo de Recurso
|
|
152
|
+
<span class="contador-badge" id="count-recurso">0</span>
|
|
153
|
+
</span>
|
|
154
|
+
<svg class="seta-dropdown" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
155
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
156
|
+
</svg>
|
|
157
|
+
</button>
|
|
158
|
+
<div class="categoria-opcoes" id="opcoes-recurso">
|
|
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>
|
|
170
|
+
</div>
|
|
171
|
+
</fieldset>
|
|
172
|
+
|
|
173
|
+
</form>
|
|
174
|
+
</div>
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
</aside>
|
|
178
|
+
|
|
179
|
+
{# ============================================ #}
|
|
180
|
+
{# ÁREA DE RESULTADOS #}
|
|
181
|
+
{# ============================================ #}
|
|
182
|
+
<main class="conteudo-principal" role="main">
|
|
183
|
+
|
|
184
|
+
<div class="conteudo-cabecalho">
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
<div class="conteudo-ordenacao">
|
|
188
|
+
<label for="sort-select" class="ordenacao-texto">Ordenar por:</label>
|
|
189
|
+
<select id="sort-select" class="ordenacao-select">
|
|
190
|
+
<option value="relevancia">Relevância</option>
|
|
191
|
+
<option value="recente">Mais recentes</option>
|
|
192
|
+
<option value="titulo">A-Z</option>
|
|
193
|
+
</select>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
{% if capsulas %}
|
|
198
|
+
<div class="recursos-grid">
|
|
199
|
+
{% for capsula in capsulas %}
|
|
200
|
+
<article class="recurso-card">
|
|
201
|
+
<!-- Link principal que envolve todo o card -->
|
|
202
|
+
<a href="{% pageurl capsula %}" class="recurso-card-link" aria-labelledby="card-titulo-{{ forloop.counter }}">
|
|
203
|
+
<span class="sr-only">Acessar cápsula: {{ capsula.title }}</span>
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
<div class="recurso-card-icone">
|
|
207
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
|
208
|
+
<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>
|
|
209
|
+
</svg>
|
|
210
|
+
</div>
|
|
211
|
+
|
|
212
|
+
<h2 class="recurso-card-titulo" id="card-titulo-{{ forloop.counter }}">
|
|
213
|
+
{{ capsula.title }}
|
|
214
|
+
</h2>
|
|
215
|
+
|
|
216
|
+
<p class="recurso-card-descricao">
|
|
217
|
+
{{ capsula.resumo_card|default:"Aprenda sobre este importante aspecto da acessibilidade digital." }}
|
|
218
|
+
</p>
|
|
219
|
+
|
|
220
|
+
{# Tags de deficiência #}
|
|
221
|
+
{% if capsula.tipos_deficiencia %}
|
|
222
|
+
<div class="recurso-tags-categoria" aria-label="Tipos de deficiência abordados">
|
|
223
|
+
{% for tipo in capsula.get_tipos_deficiencia_display|slice:":2" %}
|
|
224
|
+
<span class="tag-categoria">
|
|
225
|
+
<svg class="tag-categoria-icone" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
|
226
|
+
<circle cx="10" cy="10" r="4"></circle>
|
|
227
|
+
</svg>
|
|
228
|
+
{{ tipo }}
|
|
229
|
+
</span>
|
|
230
|
+
{% endfor %}
|
|
231
|
+
</div>
|
|
232
|
+
{% endif %}
|
|
233
|
+
|
|
234
|
+
{# Badge de prioridade #}
|
|
235
|
+
{% if capsula.prioridade %}
|
|
236
|
+
<div class="recurso-badge recurso-badge-{{ capsula.prioridade }}" aria-label="Nível de prioridade">
|
|
237
|
+
<svg class="badge-icone" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
|
238
|
+
<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>
|
|
239
|
+
</svg>
|
|
240
|
+
{{ capsula.get_prioridade_display }}
|
|
241
|
+
</div>
|
|
242
|
+
{% endif %}
|
|
243
|
+
|
|
244
|
+
{# Tags de recurso #}
|
|
245
|
+
{% if capsula.tipos_recurso %}
|
|
246
|
+
<div class="recurso-tags-tipo" aria-label="Tipos de recurso">
|
|
247
|
+
{% for recurso in capsula.get_tipos_recurso_display|slice:":3" %}
|
|
248
|
+
<span class="tag-tipo">
|
|
249
|
+
<svg class="tag-tipo-icone" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
|
|
250
|
+
<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>
|
|
251
|
+
</svg>
|
|
252
|
+
{{ recurso }}
|
|
253
|
+
</span>
|
|
254
|
+
{% endfor %}
|
|
255
|
+
</div>
|
|
256
|
+
{% endif %}
|
|
257
|
+
|
|
258
|
+
<div class="recurso-card-botao-wrapper">
|
|
259
|
+
<span class="recurso-card-botao">
|
|
260
|
+
Acessar Cápsula
|
|
261
|
+
</span>
|
|
262
|
+
</div>
|
|
263
|
+
</a>
|
|
264
|
+
</article>
|
|
265
|
+
{% endfor %}
|
|
266
|
+
</div>
|
|
267
|
+
|
|
268
|
+
{% else %}
|
|
269
|
+
<div class="conteudo-vazio">
|
|
270
|
+
<svg class="conteudo-vazio-icone" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
271
|
+
<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>
|
|
272
|
+
</svg>
|
|
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 %}
|
|
277
|
+
|
|
278
|
+
</main>
|
|
279
|
+
|
|
280
|
+
</div>
|
|
281
|
+
</div>
|
|
282
|
+
{% endblock %}
|
|
283
|
+
|
|
284
|
+
{% block footer %}
|
|
285
|
+
{% include "enap_designsystem/includes/footer.html" %}
|
|
286
|
+
{% endblock %}
|
|
287
|
+
|
|
288
|
+
{% block scriptinline %}
|
|
289
|
+
<script>
|
|
290
|
+
// Toggle dos dropdowns individuais
|
|
291
|
+
function toggleDropdown(tipo) {
|
|
292
|
+
const header = document.querySelector(`#dropdown-${tipo} .categoria-cabecalho`);
|
|
293
|
+
const opcoes = document.getElementById(`opcoes-${tipo}`);
|
|
294
|
+
const dropdown = document.getElementById(`dropdown-${tipo}`);
|
|
295
|
+
const expanded = header.getAttribute('aria-expanded') === 'true';
|
|
296
|
+
|
|
297
|
+
// Fecha outros dropdowns
|
|
298
|
+
document.querySelectorAll('.categoria-dropdown').forEach(dd => {
|
|
299
|
+
if (dd.id !== `dropdown-${tipo}`) {
|
|
300
|
+
dd.classList.remove('active');
|
|
301
|
+
const h = dd.querySelector('.categoria-cabecalho');
|
|
302
|
+
const o = dd.querySelector('.categoria-opcoes');
|
|
303
|
+
h.setAttribute('aria-expanded', 'false');
|
|
304
|
+
o.classList.remove('open');
|
|
305
|
+
}
|
|
306
|
+
});
|
|
307
|
+
|
|
308
|
+
// Toggle do dropdown atual
|
|
309
|
+
header.setAttribute('aria-expanded', !expanded);
|
|
310
|
+
opcoes.classList.toggle('open');
|
|
311
|
+
dropdown.classList.toggle('active');
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
// Atualiza o contador de filtros selecionados
|
|
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;
|
|
319
|
+
|
|
320
|
+
badge.textContent = count;
|
|
321
|
+
badge.style.display = count > 0 ? 'inline-flex' : 'none';
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
// Inicializa os contadores ao carregar a página
|
|
325
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
326
|
+
updateCount('deficiencia');
|
|
327
|
+
updateCount('formato');
|
|
328
|
+
updateCount('recurso');
|
|
329
|
+
|
|
330
|
+
// Esconde badges com contador 0
|
|
331
|
+
document.querySelectorAll('.contador-badge').forEach(badge => {
|
|
332
|
+
if (badge.textContent === '0') {
|
|
333
|
+
badge.style.display = 'none';
|
|
334
|
+
}
|
|
335
|
+
});
|
|
336
|
+
});
|
|
337
|
+
|
|
338
|
+
// Fecha dropdowns ao clicar fora
|
|
339
|
+
document.addEventListener('click', function(event) {
|
|
340
|
+
if (!event.target.closest('.categoria-dropdown')) {
|
|
341
|
+
document.querySelectorAll('.categoria-dropdown').forEach(dropdown => {
|
|
342
|
+
dropdown.classList.remove('active');
|
|
343
|
+
const header = dropdown.querySelector('.categoria-cabecalho');
|
|
344
|
+
const opcoes = dropdown.querySelector('.categoria-opcoes');
|
|
345
|
+
header.setAttribute('aria-expanded', 'false');
|
|
346
|
+
opcoes.classList.remove('open');
|
|
347
|
+
});
|
|
348
|
+
}
|
|
349
|
+
});
|
|
350
|
+
</script>
|
|
351
|
+
{% endblock %}
|