wagtail-enap-designsystem 1.2.1.140__py3-none-any.whl → 1.2.1.142__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.
- enap_designsystem/blocks/html_blocks.py +72 -6
- enap_designsystem/blocks/semana_blocks.py +10 -4
- enap_designsystem/migrations/0413_showcasecomponentespage_alter_areaaluno_body_and_more.py +54939 -0
- enap_designsystem/migrations/0414_showcasecomponentesdireto_and_more.py +52 -0
- enap_designsystem/models.py +238 -3
- enap_designsystem/static/enap_designsystem/blocks/cards.css +0 -1
- enap_designsystem/templates/enap_designsystem/base.html +14 -1
- enap_designsystem/templates/enap_designsystem/blocks/cards_titles.html +134 -114
- enap_designsystem/templates/enap_designsystem/blocks/logos_simple_block.html +9 -15
- enap_designsystem/templates/enap_designsystem/blocks/suap/apisuap_courses_block.html +1 -1
- enap_designsystem/templates/enap_designsystem/blocks/video_hero_banner.html +1 -1
- enap_designsystem/templates/enap_designsystem/pages/showcase_components.html +592 -0
- enap_designsystem/templates/enap_designsystem/semana_inovacao/blocks_menu_navigation.html +2 -2
- {wagtail_enap_designsystem-1.2.1.140.dist-info → wagtail_enap_designsystem-1.2.1.142.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.140.dist-info → wagtail_enap_designsystem-1.2.1.142.dist-info}/RECORD +18 -15
- {wagtail_enap_designsystem-1.2.1.140.dist-info → wagtail_enap_designsystem-1.2.1.142.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.140.dist-info → wagtail_enap_designsystem-1.2.1.142.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.140.dist-info → wagtail_enap_designsystem-1.2.1.142.dist-info}/top_level.txt +0 -0
|
@@ -1,100 +1,5 @@
|
|
|
1
1
|
<!-- enap_designsystem/blocks/cards_titles.html -->
|
|
2
2
|
{% load wagtailcore_tags wagtailimages_tags %}
|
|
3
|
-
<section class="secao-apresentacao-cards">
|
|
4
|
-
<!-- Background com imagem se fornecida -->
|
|
5
|
-
<div class="secao-background"
|
|
6
|
-
{% if value.background_image_fundo_bg %}
|
|
7
|
-
style="background-image: url('{{ value.background_image_fundo_bg.url }}'); background-size: cover; background-position: center; background-repeat: no-repeat;"
|
|
8
|
-
{% else %}
|
|
9
|
-
style="background: {{ value.cor_fundo }};"
|
|
10
|
-
{% endif %}>
|
|
11
|
-
|
|
12
|
-
<!-- Overlay para garantir legibilidade -->
|
|
13
|
-
<div class="secao-overlay">
|
|
14
|
-
|
|
15
|
-
<!-- Container principal -->
|
|
16
|
-
<div class="container titulo-cards mx-auto px-4 py-16 lg:py-24">
|
|
17
|
-
|
|
18
|
-
<!-- Título centralizado -->
|
|
19
|
-
{% if value.titulo %}
|
|
20
|
-
<div class="text-center mb-12 lg:mb-16">
|
|
21
|
-
<h2 class="titulo-secao"
|
|
22
|
-
style="color: {{ value.cor_titulo|default:'#FFFFFF' }};">
|
|
23
|
-
{{ value.titulo }}
|
|
24
|
-
</h2>
|
|
25
|
-
</div>
|
|
26
|
-
{% endif %}
|
|
27
|
-
|
|
28
|
-
<!-- Grid de Cards -->
|
|
29
|
-
{% if value.cards %}
|
|
30
|
-
<div class="cards-container {{ value.layout_cards|default:'cards-3-colunas' }}">
|
|
31
|
-
{% for card in value.cards %}
|
|
32
|
-
{% if card.block_type == 'card' %}
|
|
33
|
-
<div class="card-item">
|
|
34
|
-
<div class="card-apresentacao">
|
|
35
|
-
|
|
36
|
-
<!-- Imagem do card -->
|
|
37
|
-
{% if card.value.image %}
|
|
38
|
-
<div class="card-imagem">
|
|
39
|
-
{% image card.value.image width-400 as card_img %}
|
|
40
|
-
<img src="{{ card_img.url }}"
|
|
41
|
-
alt="{{ card.value.title|default:'Card' }}"
|
|
42
|
-
class="card-img">
|
|
43
|
-
</div>
|
|
44
|
-
{% endif %}
|
|
45
|
-
|
|
46
|
-
<!-- Conteúdo do card -->
|
|
47
|
-
<div class="card-conteudo">
|
|
48
|
-
|
|
49
|
-
<!-- Título -->
|
|
50
|
-
{% if card.value.title %}
|
|
51
|
-
<h3 class="card-titulo">
|
|
52
|
-
{{ card.value.title }}
|
|
53
|
-
</h3>
|
|
54
|
-
{% endif %}
|
|
55
|
-
|
|
56
|
-
<!-- Subtítulo/Cargo -->
|
|
57
|
-
{% if card.value.subtitle %}
|
|
58
|
-
<p class="card-subtitulo">
|
|
59
|
-
{{ card.value.subtitle }}
|
|
60
|
-
</p>
|
|
61
|
-
{% endif %}
|
|
62
|
-
|
|
63
|
-
<!-- Descrição -->
|
|
64
|
-
{% if card.value.description %}
|
|
65
|
-
<div class="card-descricao">
|
|
66
|
-
{{ card.value.description|richtext }}
|
|
67
|
-
</div>
|
|
68
|
-
{% endif %}
|
|
69
|
-
|
|
70
|
-
<!-- Link/Botão -->
|
|
71
|
-
{% if card.value.link_url %}
|
|
72
|
-
<div class="card-acao">
|
|
73
|
-
<a href="{{ card.value.link_url }}"
|
|
74
|
-
class="card-link"
|
|
75
|
-
{% if card.value.link_target %}target="{{ card.value.link_target }}"{% endif %}>
|
|
76
|
-
{{ card.value.link_text|default:'Saiba mais' }}
|
|
77
|
-
<svg class="link-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
78
|
-
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
79
|
-
</svg>
|
|
80
|
-
</a>
|
|
81
|
-
</div>
|
|
82
|
-
{% endif %}
|
|
83
|
-
|
|
84
|
-
</div>
|
|
85
|
-
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
{% endif %}
|
|
89
|
-
{% endfor %}
|
|
90
|
-
</div>
|
|
91
|
-
{% endif %}
|
|
92
|
-
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
|
-
</section>
|
|
97
|
-
|
|
98
3
|
<style>
|
|
99
4
|
.secao-apresentacao-cards {
|
|
100
5
|
position: relative;
|
|
@@ -105,31 +10,30 @@
|
|
|
105
10
|
position: relative;
|
|
106
11
|
width: 100%;
|
|
107
12
|
min-height: 500px;
|
|
13
|
+
padding: 80px 0;
|
|
108
14
|
}
|
|
109
15
|
|
|
110
16
|
.secao-overlay {
|
|
111
|
-
position:
|
|
17
|
+
position: relative;
|
|
112
18
|
top: 0;
|
|
113
19
|
left: 0;
|
|
114
20
|
right: 0;
|
|
115
21
|
bottom: 0;
|
|
116
|
-
background: rgba(106, 27, 154, 0.15);
|
|
117
22
|
backdrop-filter: blur(0.5px);
|
|
118
23
|
display: flex;
|
|
119
24
|
}
|
|
120
25
|
|
|
121
26
|
.card-item {
|
|
122
|
-
width:
|
|
27
|
+
width: 100%;
|
|
123
28
|
flex: 0 0 268px;
|
|
124
29
|
display: flex;
|
|
125
30
|
flex-direction: column;
|
|
126
31
|
align-items: center;
|
|
127
32
|
justify-content: center;
|
|
128
33
|
text-align: center;
|
|
129
|
-
height:
|
|
34
|
+
height: auto;
|
|
130
35
|
background-color: rgba(106, 27, 154, 0.15);
|
|
131
36
|
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
|
|
132
|
-
color: #1351b4;
|
|
133
37
|
font-weight: 500;
|
|
134
38
|
padding: 0px;
|
|
135
39
|
text-decoration: none;
|
|
@@ -142,15 +46,24 @@
|
|
|
142
46
|
margin-bottom: 0;
|
|
143
47
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
144
48
|
font-weight: 500;
|
|
145
|
-
font-style: Medium;
|
|
146
49
|
font-size: 48px;
|
|
147
50
|
letter-spacing: 0px;
|
|
148
51
|
}
|
|
149
52
|
|
|
53
|
+
.subtitulo-secao p {
|
|
54
|
+
text-align: center;
|
|
55
|
+
font-family: Georama;
|
|
56
|
+
font-weight: 400;
|
|
57
|
+
font-size: 21px;
|
|
58
|
+
line-height: 160%;
|
|
59
|
+
letter-spacing: 0px;
|
|
60
|
+
}
|
|
61
|
+
|
|
150
62
|
.cards-container {
|
|
151
63
|
display: grid;
|
|
152
64
|
gap: 2rem;
|
|
153
|
-
max-width:
|
|
65
|
+
max-width: 1142px;
|
|
66
|
+
width: 100%;
|
|
154
67
|
margin: 0 auto;
|
|
155
68
|
}
|
|
156
69
|
|
|
@@ -170,15 +83,14 @@
|
|
|
170
83
|
}
|
|
171
84
|
|
|
172
85
|
.cards-4-colunas {
|
|
173
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
86
|
+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
174
87
|
}
|
|
175
88
|
|
|
176
89
|
.cards-5-colunas {
|
|
177
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
90
|
+
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
|
|
178
91
|
}
|
|
179
92
|
|
|
180
93
|
.card-apresentacao {
|
|
181
|
-
background: rgba(0, 0, 0, 0.6);
|
|
182
94
|
border-radius: 12px;
|
|
183
95
|
overflow: hidden;
|
|
184
96
|
transition: all 0.3s ease;
|
|
@@ -191,20 +103,19 @@
|
|
|
191
103
|
|
|
192
104
|
.card-apresentacao:hover {
|
|
193
105
|
transform: translateY(-8px);
|
|
194
|
-
background: rgba(0, 0, 0, 0.7);
|
|
195
106
|
border-color: rgba(255, 255, 255, 0.2);
|
|
196
107
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
197
108
|
}
|
|
198
109
|
|
|
199
110
|
.card-imagem {
|
|
200
111
|
position: relative;
|
|
201
|
-
height:
|
|
112
|
+
height: auto;
|
|
202
113
|
overflow: hidden;
|
|
203
114
|
}
|
|
204
115
|
|
|
205
116
|
.card-img {
|
|
206
117
|
width: 100%;
|
|
207
|
-
height:
|
|
118
|
+
height: auto;
|
|
208
119
|
object-fit: cover;
|
|
209
120
|
transition: transform 0.3s ease;
|
|
210
121
|
}
|
|
@@ -226,14 +137,12 @@
|
|
|
226
137
|
font-weight: 600;
|
|
227
138
|
margin-bottom: 0.5rem;
|
|
228
139
|
line-height: 1.4;
|
|
229
|
-
color: #FFFFFF;
|
|
230
140
|
text-align: left;
|
|
231
141
|
}
|
|
232
142
|
|
|
233
143
|
.card-subtitulo {
|
|
234
144
|
font-size: 0.9rem;
|
|
235
145
|
font-weight: 400;
|
|
236
|
-
color: rgba(255, 255, 255, 0.8);
|
|
237
146
|
margin-bottom: 1rem;
|
|
238
147
|
font-style: italic;
|
|
239
148
|
}
|
|
@@ -243,7 +152,7 @@
|
|
|
243
152
|
font-size: 0.95rem;
|
|
244
153
|
line-height: 1.6;
|
|
245
154
|
margin-bottom: 1rem;
|
|
246
|
-
|
|
155
|
+
text-align: left;
|
|
247
156
|
}
|
|
248
157
|
|
|
249
158
|
.card-descricao * {
|
|
@@ -261,13 +170,11 @@
|
|
|
261
170
|
font-size: 0.95rem;
|
|
262
171
|
font-weight: 500;
|
|
263
172
|
text-decoration: none;
|
|
264
|
-
color: #FFFFFF;
|
|
265
173
|
transition: all 0.3s ease;
|
|
266
174
|
}
|
|
267
175
|
|
|
268
176
|
.card-link:hover {
|
|
269
177
|
transform: translateX(4px);
|
|
270
|
-
color: #FFFFFF;
|
|
271
178
|
}
|
|
272
179
|
|
|
273
180
|
.link-arrow {
|
|
@@ -335,5 +242,118 @@
|
|
|
335
242
|
justify-content: center;
|
|
336
243
|
gap: 48px;
|
|
337
244
|
}
|
|
338
|
-
</style
|
|
245
|
+
</style>
|
|
246
|
+
|
|
247
|
+
<section class="secao-apresentacao-cards">
|
|
248
|
+
<!-- Background com imagem se fornecida -->
|
|
249
|
+
<div class="secao-background"
|
|
250
|
+
{% if value.background_image_fundo_bg %}
|
|
251
|
+
style="background-image: url('{{ value.background_image_fundo_bg.url }}'); background-size: cover; background-position: center; background-repeat: no-repeat;"
|
|
252
|
+
{% else %}
|
|
253
|
+
style="background: {{ value.cor_fundo }};"
|
|
254
|
+
{% endif %}>
|
|
255
|
+
|
|
256
|
+
<!-- Overlay para garantir legibilidade -->
|
|
257
|
+
<div class="secao-overlay">
|
|
258
|
+
|
|
259
|
+
<!-- Container principal -->
|
|
260
|
+
<div class="container titulo-cards mx-auto px-4 py-16 lg:py-24">
|
|
261
|
+
|
|
262
|
+
<!-- Título centralizado -->
|
|
263
|
+
{% if value.titulo %}
|
|
264
|
+
<div class="text-center mb-12 lg:mb-16">
|
|
265
|
+
<h2 class="titulo-secao"
|
|
266
|
+
style="color: {{ value.cor_titulo|default:'#FFFFFF' }};">
|
|
267
|
+
{{ value.titulo }}
|
|
268
|
+
</h2>
|
|
269
|
+
</div>
|
|
270
|
+
{% endif %}
|
|
271
|
+
|
|
272
|
+
<!-- Subtítulo centralizado -->
|
|
273
|
+
{% if value.subtitulo %}
|
|
274
|
+
<div class="mb-12 lg:mb-16">
|
|
275
|
+
<span class="subtitulo-secao" style="color: {{ value.cor_titulo|default:'#FFFFFF' }};">{{ value.subtitulo|richtext }}</span>
|
|
276
|
+
</div>
|
|
277
|
+
{% endif %}
|
|
278
|
+
|
|
279
|
+
<!-- Grid de Cards -->
|
|
280
|
+
{% if value.cards %}
|
|
281
|
+
<div class="cards-container {{ value.layout_cards|default:'cards-3-colunas' }}">
|
|
282
|
+
{% for card in value.cards %}
|
|
283
|
+
{% if card.block_type == 'card' %}
|
|
284
|
+
<div class="card-item">
|
|
285
|
+
<div class="card-apresentacao" style="background: {{ value.cor_fundo_cards }}">
|
|
286
|
+
|
|
287
|
+
<!-- Imagem do card -->
|
|
288
|
+
{% if card.value.image %}
|
|
289
|
+
<div class="card-imagem">
|
|
290
|
+
{% image card.value.image width-400 as card_img %}
|
|
291
|
+
<img src="{{ card_img.url }}"
|
|
292
|
+
alt="{{ card.value.title|default:'Card' }}"
|
|
293
|
+
class="card-img">
|
|
294
|
+
</div>
|
|
295
|
+
{% endif %}
|
|
296
|
+
|
|
297
|
+
<!-- Conteúdo do card -->
|
|
298
|
+
<div class="card-conteudo">
|
|
299
|
+
|
|
300
|
+
<!-- Subtítulo/Cargo -->
|
|
301
|
+
{% if card.value.subtitle %}
|
|
302
|
+
<p class="card-subtitulo" style="color: {{ value.cor_texto_cards }};">
|
|
303
|
+
{{ card.value.subtitle }}
|
|
304
|
+
</p>
|
|
305
|
+
{% endif %}
|
|
306
|
+
|
|
307
|
+
<!-- Título -->
|
|
308
|
+
{% if card.value.title %}
|
|
309
|
+
<h3 class="card-titulo" style="color: {{ value.cor_titulo_cards }};">
|
|
310
|
+
{{ card.value.title }}
|
|
311
|
+
</h3>
|
|
312
|
+
{% endif %}
|
|
313
|
+
|
|
314
|
+
<!-- Descrição -->
|
|
315
|
+
{% if card.value.description %}
|
|
316
|
+
<div class="card-descricao" style="color: {{ value.cor_texto_cards }};">
|
|
317
|
+
{{ card.value.description|richtext }}
|
|
318
|
+
</div>
|
|
319
|
+
{% endif %}
|
|
320
|
+
|
|
321
|
+
<!-- Link/Botão -->
|
|
322
|
+
{% if card.value.link_url %}
|
|
323
|
+
<div class="card-acao">
|
|
324
|
+
<a href="{{ card.value.link_url }}"
|
|
325
|
+
class="card-link" style="color: {{ value.cor_titulo_cards }};"
|
|
326
|
+
{% if card.value.link_target %}target="{{ card.value.link_target }}"{% endif %}>
|
|
327
|
+
{{ card.value.link_text|default:'Saiba mais' }}
|
|
328
|
+
<svg class="link-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
329
|
+
<path d="M5 12h14M12 5l7 7-7 7"/>
|
|
330
|
+
</svg>
|
|
331
|
+
</a>
|
|
332
|
+
</div>
|
|
333
|
+
{% endif %}
|
|
334
|
+
|
|
335
|
+
</div>
|
|
336
|
+
|
|
337
|
+
</div>
|
|
338
|
+
</div>
|
|
339
|
+
{% endif %}
|
|
340
|
+
{% endfor %}
|
|
341
|
+
</div>
|
|
342
|
+
{% endif %}
|
|
343
|
+
|
|
344
|
+
{% if value.link_url %}
|
|
345
|
+
<div class="card-acao" style="text-align: center;">
|
|
346
|
+
<a href="{{ value.link_url }}"
|
|
347
|
+
class="card-link" style="color: {{ value.cor_botao_texto }}; background: {{ value.cor_botao }}; padding: 12px 42px; border-radius: 32px;"
|
|
348
|
+
{% if value.link_target %}target="{{ value.link_target }}"{% endif %}>
|
|
349
|
+
{{ value.link_text|default:'Saiba mais' }}
|
|
350
|
+
</a>
|
|
351
|
+
</div>
|
|
352
|
+
{% endif %}
|
|
353
|
+
</div>
|
|
354
|
+
</div>
|
|
355
|
+
</div>
|
|
356
|
+
</section>
|
|
357
|
+
|
|
358
|
+
</document_content>
|
|
339
359
|
</invoke>
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.logos-titulo {
|
|
44
|
-
font-size:
|
|
45
|
-
font-weight:
|
|
44
|
+
font-size: 48px;
|
|
45
|
+
font-weight: 500;
|
|
46
46
|
margin-bottom: 0;
|
|
47
47
|
line-height: 1.1;
|
|
48
48
|
text-align: center;
|
|
@@ -90,37 +90,32 @@
|
|
|
90
90
|
align-items: center;
|
|
91
91
|
justify-items: center;
|
|
92
92
|
width: 100%;
|
|
93
|
+
max-width: 100%;
|
|
93
94
|
}
|
|
94
95
|
|
|
95
96
|
/* Layouts do grid */
|
|
96
97
|
.logos-grid-1 {
|
|
97
98
|
grid-template-columns: 1fr;
|
|
98
|
-
max-width: 300px;
|
|
99
99
|
margin: 0 auto;
|
|
100
100
|
}
|
|
101
101
|
.logos-grid-2 {
|
|
102
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
103
|
-
max-width: 600px;
|
|
102
|
+
grid-template-columns: repeat(auto-fit, minmax(295px, 1fr));
|
|
104
103
|
margin: 0 auto;
|
|
105
104
|
}
|
|
106
105
|
.logos-grid-3 {
|
|
107
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
108
|
-
max-width: 700px;
|
|
106
|
+
grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
|
|
109
107
|
margin: 0 auto;
|
|
110
108
|
}
|
|
111
109
|
.logos-grid-4 {
|
|
112
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
113
|
-
max-width: 800px;
|
|
110
|
+
grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
|
|
114
111
|
margin: 0 auto;
|
|
115
112
|
}
|
|
116
113
|
.logos-grid-5 {
|
|
117
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
118
|
-
max-width: 900px;
|
|
114
|
+
grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
|
|
119
115
|
margin: 0 auto;
|
|
120
116
|
}
|
|
121
117
|
.logos-grid-6 {
|
|
122
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
123
|
-
max-width: 1000px;
|
|
118
|
+
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
|
|
124
119
|
margin: 0 auto;
|
|
125
120
|
}
|
|
126
121
|
|
|
@@ -139,8 +134,7 @@
|
|
|
139
134
|
max-width: 160px;
|
|
140
135
|
}
|
|
141
136
|
.logo-lg .logo-image {
|
|
142
|
-
max-
|
|
143
|
-
max-width: 200px;
|
|
137
|
+
max-width: 100%;
|
|
144
138
|
}
|
|
145
139
|
|
|
146
140
|
/* Estilo do card de logo */
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
</div>
|
|
59
59
|
<div class="suap-courses-carousel-content">
|
|
60
60
|
<div class="suap-course-tag">
|
|
61
|
-
|
|
61
|
+
Curso
|
|
62
62
|
</div>
|
|
63
63
|
{% if curso.descricao %}
|
|
64
64
|
<h3 class="suap-courses-title">{{ curso.descricao }}</h3>
|