wagtail-enap-designsystem 1.2.1.136__py3-none-any.whl → 1.2.1.138__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.
Files changed (19) hide show
  1. enap_designsystem/blocks/__init__.py +2 -0
  2. enap_designsystem/blocks/form.py +160 -24
  3. enap_designsystem/blocks/html_blocks.py +39 -15
  4. enap_designsystem/blocks/semana_blocks.py +4 -0
  5. enap_designsystem/settings.py +2 -2
  6. enap_designsystem/templates/enap_designsystem/blocks/apresentacao_block.html +1 -2
  7. enap_designsystem/templates/enap_designsystem/blocks/cards_titles.html +35 -5
  8. enap_designsystem/templates/enap_designsystem/blocks/job_vacancy_filtered_block.html +7 -0
  9. enap_designsystem/templates/enap_designsystem/blocks/logos_simple_block.html +1 -1
  10. enap_designsystem/templates/enap_designsystem/blocks/numeros_block.html +58 -179
  11. enap_designsystem/templates/enap_designsystem/blocks/video_hero_banner.html +23 -9
  12. enap_designsystem/templates/enap_designsystem/form_templates/formulario_page.html +397 -1080
  13. enap_designsystem/templates/enap_designsystem/includes/form_field.html +935 -1
  14. enap_designsystem/templates/enap_designsystem/sistema_votacao_page.html +76 -18
  15. {wagtail_enap_designsystem-1.2.1.136.dist-info → wagtail_enap_designsystem-1.2.1.138.dist-info}/METADATA +1 -1
  16. {wagtail_enap_designsystem-1.2.1.136.dist-info → wagtail_enap_designsystem-1.2.1.138.dist-info}/RECORD +19 -19
  17. {wagtail_enap_designsystem-1.2.1.136.dist-info → wagtail_enap_designsystem-1.2.1.138.dist-info}/WHEEL +0 -0
  18. {wagtail_enap_designsystem-1.2.1.136.dist-info → wagtail_enap_designsystem-1.2.1.138.dist-info}/licenses/LICENSE +0 -0
  19. {wagtail_enap_designsystem-1.2.1.136.dist-info → wagtail_enap_designsystem-1.2.1.138.dist-info}/top_level.txt +0 -0
@@ -1,195 +1,74 @@
1
- <!-- Template: enap_designsystem/blocks/apresentacao_simple_block.html -->
1
+ {% load wagtailcore_tags %}
2
2
 
3
- <section class="apresentacao-simple-block" style="background-color: {{ value.cor_fundo }};">
3
+ <div class="estatisticas-section" style="background-color: {{ value.cor_fundo_conteudo }}; border-bottom: 16px solid {{ value.cor_line }}; padding: 60px 0; width: 100%;">
4
4
  <div class="container">
5
- <div class="row">
6
- <!-- Coluna do título -->
7
- <div class="col-12 col-lg-4 mb-4 mb-lg-0">
8
- <h2 class="apresentacao-titulo" style="color: {{ value.cor_titulo }};">
9
- {{ value.titulo }}
10
- </h2>
11
- </div>
12
-
13
- <!-- Coluna do conteúdo -->
14
- <div class="col-12 col-lg-8">
15
- <div class="apresentacao-conteudo" style="background-color: {{ value.cor_fundo_conteudo }};">
16
- <div class="texto-descritivo" style="color: {{ value.cor_texto_descritivo }};">
17
- {{ value.texto_descritivo|richtext }}
5
+ <h2 class="secao-cabecalho text-center font-bold mb-8"
6
+ style="color: {{ value.cor_titulo }};">
7
+ {{ value.titulo }}
8
+ </h2>
9
+
10
+ <div class="estatisticas-container {{ value.tipo_grid_numeros|default:'numeros-grid-4' }}">
11
+ {% for lista_numeros in value.lista_numeros %}
12
+ <div class="estatistica-item text-center" style="flex: 1; min-width: 150px; margin: 8px; background-color:{{ lista_numeros.cor_card }};">
13
+ <div class="numero" style="color: {{ lista_numeros.cor_numero }}; font-size: 40px; font-weight: 500; line-height: 1.2;">
14
+ {{ lista_numeros.numero }}
18
15
  </div>
19
-
20
- <!-- Grid de logos -->
21
- <div class="logos-container {{ value.espacamento_logos }}">
22
- <div class="logos-grid {{ value.tipo_grid_logos }} {{ value.tamanho_logos }}">
23
- {% for logo_card in value.lista_logos %}
24
- <div class="logo-card {% if value.centralizar_logos %}text-center{% endif %}">
25
- {% if logo_card.link %}
26
- <a href="{{ logo_card.link }}"
27
- class="logo-link"
28
- {% if logo_card.link_externo %}target="_blank" rel="noopener noreferrer"{% endif %}>
29
- {% endif %}
30
-
31
- <div class="logo-image-container">
32
- {% image logo_card.logo fill-200x200 class="logo-image" alt=logo_card.titulo|default:"Logo" %}
33
- </div>
34
-
35
- {% if value.mostrar_titulos_logos and logo_card.titulo %}
36
- <div class="logo-titulo">
37
- {{ logo_card.titulo }}
38
- </div>
39
- {% endif %}
40
-
41
- {% if logo_card.link %}
42
- </a>
43
- {% endif %}
44
- </div>
45
- {% endfor %}
46
- </div>
16
+ <div class="descricao" style="color: {{ lista_numeros.cor_descricao }}; font-size: 16px; font-weight: 600; margin-top: 30px;">
17
+ {{ lista_numeros.descricao }}
47
18
  </div>
48
19
  </div>
49
- </div>
20
+ {% endfor %}
50
21
  </div>
51
22
  </div>
52
- </section>
23
+ </div>
53
24
 
25
+ <!-- Adicionar estilos específicos para responsividade -->
54
26
  <style>
55
- /* Estilos do componente ApresentacaoSimpleBlock */
56
- .apresentacao-simple-block {
57
- padding: 60px 0;
58
- min-height: 400px;
59
- }
60
-
61
- .apresentacao-titulo {
62
- font-size: 2.5rem;
63
- font-weight: 700;
64
- margin-bottom: 0;
65
- line-height: 1.2;
66
- }
67
-
68
- .apresentacao-conteudo {
69
- padding: 40px;
70
- border-radius: 8px;
71
- min-height: 300px;
72
- display: flex;
73
- flex-direction: column;
74
- }
75
-
76
- .texto-descritivo {
77
- margin-bottom: 40px;
78
- line-height: 1.6;
79
- }
80
-
81
- .texto-descritivo h3,
82
- .texto-descritivo h4 {
83
- margin-top: 0;
84
- }
85
-
86
- /* Grid de logos */
87
- .logos-container {
88
- margin-top: auto;
89
- }
90
-
91
- .logos-grid {
92
- display: grid;
93
- gap: 20px;
94
- align-items: center;
95
- }
96
-
97
- /* Layouts do grid */
98
- .logos-grid-1 { grid-template-columns: 1fr; }
99
- .logos-grid-2 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
100
- .logos-grid-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
101
- .logos-grid-4 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
102
- .logos-grid-5 { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
103
- .logos-grid-6 { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
104
-
105
- /* Espaçamentos */
106
- .spacing-sm .logos-grid { gap: 15px; }
107
- .spacing-md .logos-grid { gap: 20px; }
108
- .spacing-lg .logos-grid { gap: 30px; }
109
-
110
- /* Tamanhos das logos */
111
- .logo-sm .logo-image { max-height: 60px; }
112
- .logo-md .logo-image { max-height: 80px; }
113
- .logo-lg .logo-image { max-height: 120px; }
114
-
115
- /* Estilo do card de logo */
116
- .logo-card {
117
- padding: 15px;
118
- border-radius: 4px;
119
- transition: transform 0.2s ease, opacity 0.2s ease;
120
- }
121
-
122
- .logo-link {
123
- text-decoration: none;
124
- color: inherit;
125
- display: block;
126
- }
127
-
128
- .logo-link:hover .logo-card {
129
- transform: translateY(-2px);
130
- }
131
-
132
- .logo-link:hover .logo-image {
133
- opacity: 0.8;
134
- }
135
-
136
- .logo-image-container {
137
- display: flex;
138
- align-items: center;
139
- justify-content: center;
140
- height: 100%;
141
- min-height: 60px;
142
- }
143
-
144
- .logo-image {
145
- max-width: 100%;
146
- height: auto;
147
- object-fit: contain;
148
- transition: opacity 0.2s ease;
149
- }
150
-
151
- .logo-titulo {
152
- margin-top: 10px;
153
- font-size: 0.875rem;
154
- font-weight: 500;
155
- color: inherit;
156
- }
157
-
158
- /* Responsividade */
159
- @media (max-width: 768px) {
160
- .apresentacao-simple-block {
161
- padding: 40px 0;
27
+ .estatisticas-container {
28
+ display: flex;
29
+ flex-direction: row;
30
+ align-items: stretch;
31
+ margin-top: 70px;
162
32
  }
163
-
164
- .apresentacao-titulo {
165
- font-size: 2rem;
166
- margin-bottom: 30px;
167
- }
168
-
169
- .apresentacao-conteudo {
170
- padding: 30px;
33
+
34
+ @media (max-width: 768px) {
35
+ .estatisticas-container {
36
+ display: flex;
37
+ flex-direction: column;
38
+ align-items: center;
39
+ }
40
+
41
+ .estatistica-item {
42
+ margin: 30px 0;
43
+ }
44
+
45
+ .estatistica-divisor {
46
+ display: none !important;
47
+ }
48
+
49
+ .numero {
50
+ font-size: 3.5rem !important;
51
+ }
52
+
53
+ .descricao {
54
+ font-size: 1.25rem !important;
55
+ }
171
56
  }
172
57
 
173
- .logos-grid-2,
174
- .logos-grid-3,
175
- .logos-grid-4,
176
- .logos-grid-5,
177
- .logos-grid-6 {
178
- grid-template-columns: repeat(2, 1fr);
179
- }
180
- }
181
-
182
- @media (max-width: 480px) {
183
- .logos-grid-2,
184
- .logos-grid-3,
185
- .logos-grid-4,
186
- .logos-grid-5,
187
- .logos-grid-6 {
188
- grid-template-columns: 1fr;
58
+ @media (min-width: 769px) and (max-width: 992px) {
59
+ .estatistica-item {
60
+ min-width: 200px;
61
+ margin: 15px;
62
+ }
63
+
64
+ .numero {
65
+ font-size: 3rem !important;
66
+ }
189
67
  }
190
68
 
191
- .logos-conteudo {
192
- padding: 20px;
69
+ .estatistica-item {
70
+ position: relative;
71
+ border-radius: 16px;
72
+ padding: 56px 32px;
193
73
  }
194
- }
195
74
  </style>
@@ -1,7 +1,17 @@
1
1
  <!-- templates/components/video_hero_banner.html -->
2
2
  {% load wagtailcore_tags %}
3
+ {% load wagtailimages_tags %}
3
4
  <section class="video-hero-banner"
4
- style="background-image: url('{{ value.background_image.get_rendition.url }}'); height: {{ value.altura_banner }};">
5
+ style="
6
+ {% if value.background_image %}
7
+ {% image value.background_image original as background_img %}
8
+ background: url('{{ background_img.url }}');
9
+ background-size: cover;
10
+ {% else %}
11
+ background: {{ value.cor_fundo }};
12
+ {% endif %}
13
+ height: {{ value.altura_banner }};"
14
+ >
5
15
 
6
16
  <!-- Overlay para melhor legibilidade do texto -->
7
17
  <div class="video-hero-overlay"></div>
@@ -11,10 +21,7 @@
11
21
  {% if value.video_file %}
12
22
  <div class="video-hero-media">
13
23
  <div class="video-frame">
14
- <video class="video-player"
15
- autoplay
16
- muted
17
- controls>
24
+ <video class="video-player" autoplay muted loop>
18
25
  <source src="{{ value.video_file.url }}" type="video/mp4">
19
26
  <p>Seu navegador não suporta o elemento de vídeo.</p>
20
27
  </video>
@@ -37,9 +44,11 @@
37
44
 
38
45
  <!-- Logo -->
39
46
  {% if value.logo %}
40
- <div class="video-hero-logo">
41
- <img src="{{ value.logo.get_rendition.url }}"
42
- alt="Logo" class="logo-image">
47
+ <div class="card-imagem">
48
+ {% image value.logo width-400 as logo_img %}
49
+ <img src="{{ logo_img.url }}"
50
+ alt="Logos"
51
+ class="logo-image">
43
52
  </div>
44
53
  {% endif %}
45
54
 
@@ -146,7 +155,7 @@
146
155
  right: 0;
147
156
  bottom: 0;
148
157
  display: flex;
149
- align-items: flex-start;
158
+ align-items: flex-end;
150
159
  padding: 2rem;
151
160
  background: linear-gradient(
152
161
  45deg,
@@ -180,6 +189,11 @@
180
189
  min-height: 400px;
181
190
  }
182
191
 
192
+ .video-hero-title{
193
+ font-weight: 400;
194
+ margin: 0px;
195
+ }
196
+
183
197
  /* Responsividade */
184
198
  @media (max-width: 1024px) {
185
199
  .video-hero-title {