wagtail-enap-designsystem 1.2.1.141__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 +8 -3
- 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 +236 -1
- 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 +123 -106
- 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.141.dist-info → wagtail_enap_designsystem-1.2.1.142.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.141.dist-info → wagtail_enap_designsystem-1.2.1.142.dist-info}/RECORD +15 -12
- {wagtail_enap_designsystem-1.2.1.141.dist-info → wagtail_enap_designsystem-1.2.1.142.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.141.dist-info → wagtail_enap_designsystem-1.2.1.142.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.141.dist-info → wagtail_enap_designsystem-1.2.1.142.dist-info}/top_level.txt +0 -0
|
@@ -0,0 +1,592 @@
|
|
|
1
|
+
<!-- enap_designsystem/pages/showcase_direct.html -->
|
|
2
|
+
{% load wagtailcore_tags %}
|
|
3
|
+
|
|
4
|
+
<!DOCTYPE html>
|
|
5
|
+
<html lang="pt-BR">
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="UTF-8">
|
|
8
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
9
|
+
<title>{{ page_title }} - ENAP</title>
|
|
10
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
11
|
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
12
|
+
<style>
|
|
13
|
+
body { font-family: 'Inter', sans-serif; }
|
|
14
|
+
|
|
15
|
+
.component-showcase {
|
|
16
|
+
border: 2px solid #e5e7eb;
|
|
17
|
+
border-radius: 12px;
|
|
18
|
+
background: white;
|
|
19
|
+
margin-bottom: 2rem;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
transition: all 0.3s ease;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.component-showcase:hover {
|
|
25
|
+
border-color: #3b82f6;
|
|
26
|
+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.component-header {
|
|
30
|
+
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
|
31
|
+
color: white;
|
|
32
|
+
padding: 1rem;
|
|
33
|
+
font-size: 0.875rem;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.component-content {
|
|
37
|
+
padding: 1.5rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.component-meta {
|
|
41
|
+
background: #f8fafc;
|
|
42
|
+
padding: 0.75rem 1rem;
|
|
43
|
+
border-top: 1px solid #e2e8f0;
|
|
44
|
+
font-size: 0.75rem;
|
|
45
|
+
color: #64748b;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.error-component {
|
|
49
|
+
border-color: #ef4444;
|
|
50
|
+
background: #fef2f2;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.error-component .component-header {
|
|
54
|
+
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.category-header {
|
|
58
|
+
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
|
59
|
+
border-radius: 12px;
|
|
60
|
+
padding: 1.5rem;
|
|
61
|
+
margin-bottom: 2rem;
|
|
62
|
+
border: 1px solid #cbd5e1;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.stats-grid {
|
|
66
|
+
background: linear-gradient(135deg, #1e40af 0%, #3730a3 100%);
|
|
67
|
+
border-radius: 16px;
|
|
68
|
+
color: white;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* Sidebar Styles */
|
|
72
|
+
.sidebar {
|
|
73
|
+
position: fixed;
|
|
74
|
+
top: 0;
|
|
75
|
+
left: 0;
|
|
76
|
+
height: 100vh;
|
|
77
|
+
width: 320px;
|
|
78
|
+
background: white;
|
|
79
|
+
border-right: 2px solid #e5e7eb;
|
|
80
|
+
overflow-y: auto;
|
|
81
|
+
z-index: 1000;
|
|
82
|
+
transition: transform 0.3s ease;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.sidebar.collapsed {
|
|
86
|
+
transform: translateX(-280px);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.sidebar-toggle {
|
|
90
|
+
position: absolute;
|
|
91
|
+
top: 50%;
|
|
92
|
+
right: -40px;
|
|
93
|
+
transform: translateY(-50%);
|
|
94
|
+
background: #3b82f6;
|
|
95
|
+
color: white;
|
|
96
|
+
border: none;
|
|
97
|
+
width: 40px;
|
|
98
|
+
height: 80px;
|
|
99
|
+
border-radius: 0 8px 8px 0;
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
transition: all 0.3s ease;
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
font-size: 16px;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.sidebar-toggle:hover {
|
|
109
|
+
background: #2563eb;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.main-content {
|
|
113
|
+
margin-left: 320px;
|
|
114
|
+
transition: margin-left 0.3s ease;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.main-content.expanded {
|
|
118
|
+
margin-left: 40px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.nav-item {
|
|
122
|
+
display: flex;
|
|
123
|
+
align-items: center;
|
|
124
|
+
padding: 0.75rem 1rem;
|
|
125
|
+
text-decoration: none;
|
|
126
|
+
color: #374151;
|
|
127
|
+
border-bottom: 1px solid #f3f4f6;
|
|
128
|
+
transition: all 0.3s ease;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.nav-item:hover {
|
|
132
|
+
background: #f8fafc;
|
|
133
|
+
color: #1d4ed8;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.nav-item.active {
|
|
137
|
+
background: #eff6ff;
|
|
138
|
+
color: #1d4ed8;
|
|
139
|
+
border-right: 3px solid #3b82f6;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.nav-item-icon {
|
|
143
|
+
width: 40px;
|
|
144
|
+
height: 40px;
|
|
145
|
+
background: #f1f5f9;
|
|
146
|
+
border-radius: 8px;
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
149
|
+
justify-content: center;
|
|
150
|
+
margin-right: 0.75rem;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.nav-item.active .nav-item-icon {
|
|
154
|
+
background: #dbeafe;
|
|
155
|
+
color: #1d4ed8;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Mobile Responsiveness */
|
|
159
|
+
@media (max-width: 1024px) {
|
|
160
|
+
.sidebar {
|
|
161
|
+
transform: translateX(-320px);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.sidebar.mobile-open {
|
|
165
|
+
transform: translateX(0);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.main-content {
|
|
169
|
+
margin-left: 0;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.sidebar-toggle {
|
|
173
|
+
right: 16px;
|
|
174
|
+
top: 16px;
|
|
175
|
+
position: fixed;
|
|
176
|
+
transform: none;
|
|
177
|
+
width: 48px;
|
|
178
|
+
height: 48px;
|
|
179
|
+
border-radius: 12px;
|
|
180
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.mobile-overlay {
|
|
184
|
+
position: fixed;
|
|
185
|
+
top: 0;
|
|
186
|
+
left: 0;
|
|
187
|
+
right: 0;
|
|
188
|
+
bottom: 0;
|
|
189
|
+
background: rgba(0, 0, 0, 0.5);
|
|
190
|
+
z-index: 999;
|
|
191
|
+
opacity: 0;
|
|
192
|
+
visibility: hidden;
|
|
193
|
+
transition: all 0.3s ease;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.mobile-overlay.active {
|
|
197
|
+
opacity: 1;
|
|
198
|
+
visibility: visible;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* Progress indicator */
|
|
203
|
+
.progress-bar {
|
|
204
|
+
position: fixed;
|
|
205
|
+
top: 0;
|
|
206
|
+
left: 0;
|
|
207
|
+
height: 3px;
|
|
208
|
+
background: #3b82f6;
|
|
209
|
+
z-index: 1001;
|
|
210
|
+
transition: width 0.3s ease;
|
|
211
|
+
}
|
|
212
|
+
</style>
|
|
213
|
+
</head>
|
|
214
|
+
<body class="bg-gray-50 min-h-screen">
|
|
215
|
+
|
|
216
|
+
<!-- Progress Bar -->
|
|
217
|
+
<div class="progress-bar" id="progressBar"></div>
|
|
218
|
+
|
|
219
|
+
<!-- Mobile Overlay -->
|
|
220
|
+
<div class="mobile-overlay" id="mobileOverlay"></div>
|
|
221
|
+
|
|
222
|
+
<!-- Sidebar -->
|
|
223
|
+
<nav class="sidebar" id="sidebar">
|
|
224
|
+
<!-- Sidebar Toggle Button -->
|
|
225
|
+
<button class="sidebar-toggle" id="sidebarToggle">
|
|
226
|
+
<i class="fas fa-chevron-left" id="toggleIcon"></i>
|
|
227
|
+
</button>
|
|
228
|
+
|
|
229
|
+
<!-- Sidebar Header -->
|
|
230
|
+
<div class="p-6 border-b border-gray-200">
|
|
231
|
+
<div class="flex items-center space-x-3">
|
|
232
|
+
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center">
|
|
233
|
+
<i class="fas fa-cubes text-white"></i>
|
|
234
|
+
</div>
|
|
235
|
+
<div>
|
|
236
|
+
<h2 class="font-bold text-gray-900">Componentes</h2>
|
|
237
|
+
<p class="text-sm text-gray-500">{{ total_components }} itens</p>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
<!-- Stats Summary -->
|
|
243
|
+
<div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 m-4 rounded-lg">
|
|
244
|
+
<div class="grid grid-cols-2 gap-4 text-center">
|
|
245
|
+
<div>
|
|
246
|
+
<div class="text-2xl font-bold text-blue-600">{{ total_components }}</div>
|
|
247
|
+
<div class="text-xs text-gray-600">Componentes</div>
|
|
248
|
+
</div>
|
|
249
|
+
<div>
|
|
250
|
+
<div class="text-2xl font-bold text-indigo-600">{{ total_categories }}</div>
|
|
251
|
+
<div class="text-xs text-gray-600">Categorias</div>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
<!-- Navigation Menu -->
|
|
257
|
+
<div class="flex-1 overflow-y-auto">
|
|
258
|
+
{% for category_name, category in categories_with_components.items %}
|
|
259
|
+
<a href="#{{ category_name }}" class="nav-item" data-category="{{ category_name }}">
|
|
260
|
+
<div class="nav-item-icon">
|
|
261
|
+
<i class="fas fa-{{ category.icon }}"></i>
|
|
262
|
+
</div>
|
|
263
|
+
<div class="flex-1">
|
|
264
|
+
<div class="font-medium">{{ category.display_name }}</div>
|
|
265
|
+
<div class="text-xs text-gray-500">{{ category.rendered_components|length }} componentes</div>
|
|
266
|
+
</div>
|
|
267
|
+
</a>
|
|
268
|
+
{% endfor %}
|
|
269
|
+
</div>
|
|
270
|
+
|
|
271
|
+
<!-- Sidebar Footer -->
|
|
272
|
+
<div class="p-4 border-t border-gray-200 bg-gray-50">
|
|
273
|
+
<div class="text-center">
|
|
274
|
+
<div class="text-xs text-gray-500 mb-1">ENAP Design System</div>
|
|
275
|
+
<button onclick="scrollToTop()" class="text-blue-600 text-sm font-medium hover:text-blue-700 transition-colors">
|
|
276
|
+
<i class="fas fa-arrow-up mr-1"></i>
|
|
277
|
+
Voltar ao topo
|
|
278
|
+
</button>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
</nav>
|
|
282
|
+
|
|
283
|
+
<!-- Main Content -->
|
|
284
|
+
<div class="main-content" id="mainContent">
|
|
285
|
+
|
|
286
|
+
<!-- Header -->
|
|
287
|
+
<header class="bg-white shadow-sm border-b">
|
|
288
|
+
<div class="max-w-6xl mx-auto px-4 py-6">
|
|
289
|
+
<div class="flex items-center space-x-4 mb-4">
|
|
290
|
+
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
|
|
291
|
+
<i class="fas fa-cubes text-white text-lg"></i>
|
|
292
|
+
</div>
|
|
293
|
+
<div>
|
|
294
|
+
<h1 class="text-3xl font-bold text-gray-900">{{ page.title }}</h1>
|
|
295
|
+
<p class="text-gray-600">{{ page_description }}</p>
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
|
|
299
|
+
<!-- Description -->
|
|
300
|
+
{% if page.description %}
|
|
301
|
+
<div class="prose text-gray-600">
|
|
302
|
+
{{ page.description|richtext }}
|
|
303
|
+
</div>
|
|
304
|
+
{% endif %}
|
|
305
|
+
|
|
306
|
+
<!-- Error Message -->
|
|
307
|
+
{% if error_message %}
|
|
308
|
+
<div class="mt-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
|
|
309
|
+
<i class="fas fa-exclamation-triangle mr-2"></i>
|
|
310
|
+
{{ error_message }}
|
|
311
|
+
</div>
|
|
312
|
+
{% endif %}
|
|
313
|
+
</div>
|
|
314
|
+
</header>
|
|
315
|
+
|
|
316
|
+
<div class="max-w-6xl mx-auto px-4 py-8">
|
|
317
|
+
|
|
318
|
+
<!-- Stats -->
|
|
319
|
+
<div class="stats-grid p-8 mb-8">
|
|
320
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
|
321
|
+
<div>
|
|
322
|
+
<div class="text-4xl font-bold mb-2">{{ total_components }}</div>
|
|
323
|
+
<div class="text-blue-100 text-lg">Componentes Renderizados</div>
|
|
324
|
+
</div>
|
|
325
|
+
<div>
|
|
326
|
+
<div class="text-4xl font-bold mb-2">{{ total_categories }}</div>
|
|
327
|
+
<div class="text-blue-100 text-lg">Categorias Disponíveis</div>
|
|
328
|
+
</div>
|
|
329
|
+
<div>
|
|
330
|
+
<div class="text-4xl font-bold mb-2">100%</div>
|
|
331
|
+
<div class="text-blue-100 text-lg">Renderização Direta</div>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
|
|
336
|
+
<!-- Components by Category -->
|
|
337
|
+
{% for category_name, category in categories_with_components.items %}
|
|
338
|
+
<section class="mb-16" id="{{ category_name }}">
|
|
339
|
+
|
|
340
|
+
<!-- Category Header -->
|
|
341
|
+
<div class="category-header">
|
|
342
|
+
<div class="flex items-center justify-between">
|
|
343
|
+
<div class="flex items-center space-x-4">
|
|
344
|
+
<div class="w-16 h-16 bg-white rounded-xl flex items-center justify-center shadow-md">
|
|
345
|
+
<i class="fas fa-{{ category.icon }} text-2xl text-blue-600"></i>
|
|
346
|
+
</div>
|
|
347
|
+
<div>
|
|
348
|
+
<h2 class="text-3xl font-bold text-gray-900 mb-2">
|
|
349
|
+
{{ category.display_name }}
|
|
350
|
+
</h2>
|
|
351
|
+
<p class="text-gray-600 text-lg">{{ category.description }}</p>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
<div class="text-right">
|
|
355
|
+
<div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-full font-semibold">
|
|
356
|
+
{{ category.rendered_components|length }} componentes
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
361
|
+
|
|
362
|
+
<!-- Components Grid -->
|
|
363
|
+
<div class="space-y-6">
|
|
364
|
+
{% for component in category.rendered_components %}
|
|
365
|
+
<div class="component-showcase {% if component.has_error %}error-component{% endif %}">
|
|
366
|
+
|
|
367
|
+
<!-- Component Header -->
|
|
368
|
+
<div class="component-header">
|
|
369
|
+
<div class="flex items-center justify-between">
|
|
370
|
+
<div>
|
|
371
|
+
<h3 class="font-semibold text-lg">{{ component.display_name }}</h3>
|
|
372
|
+
<div class="text-sm opacity-90 mt-1">
|
|
373
|
+
Classe: {{ component.class_name }}
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
<div class="flex items-center space-x-3 text-sm">
|
|
377
|
+
{% if component.field_count > 0 %}
|
|
378
|
+
<span class="bg-white/20 px-2 py-1 rounded">
|
|
379
|
+
{{ component.field_count }} campos
|
|
380
|
+
</span>
|
|
381
|
+
{% endif %}
|
|
382
|
+
<span class="bg-white/20 px-2 py-1 rounded">
|
|
383
|
+
{{ category_name }}
|
|
384
|
+
</span>
|
|
385
|
+
</div>
|
|
386
|
+
</div>
|
|
387
|
+
</div>
|
|
388
|
+
|
|
389
|
+
<!-- Component Rendered Content -->
|
|
390
|
+
<div class="component-content">
|
|
391
|
+
{{ component.rendered_html|safe }}
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
<!-- Component Meta -->
|
|
395
|
+
<div class="component-meta">
|
|
396
|
+
<div class="flex items-center justify-between">
|
|
397
|
+
<span>
|
|
398
|
+
Componente: <code>{{ component.name }}</code>
|
|
399
|
+
</span>
|
|
400
|
+
<span>
|
|
401
|
+
{% if component.has_error %}
|
|
402
|
+
<i class="fas fa-exclamation-triangle text-red-500 mr-1"></i>
|
|
403
|
+
Erro na renderização
|
|
404
|
+
{% else %}
|
|
405
|
+
<i class="fas fa-check-circle text-green-500 mr-1"></i>
|
|
406
|
+
Renderizado com sucesso
|
|
407
|
+
{% endif %}
|
|
408
|
+
</span>
|
|
409
|
+
</div>
|
|
410
|
+
</div>
|
|
411
|
+
</div>
|
|
412
|
+
{% endfor %}
|
|
413
|
+
</div>
|
|
414
|
+
|
|
415
|
+
</section>
|
|
416
|
+
{% empty %}
|
|
417
|
+
|
|
418
|
+
<!-- Empty State -->
|
|
419
|
+
<div class="text-center py-16">
|
|
420
|
+
<div class="w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
421
|
+
<i class="fas fa-cube text-4xl text-gray-400"></i>
|
|
422
|
+
</div>
|
|
423
|
+
<h3 class="text-2xl font-semibold text-gray-900 mb-4">Nenhuma categoria encontrada</h3>
|
|
424
|
+
<div class="max-w-md mx-auto text-gray-600 space-y-2">
|
|
425
|
+
<p>Possíveis motivos:</p>
|
|
426
|
+
<ul class="text-left space-y-1">
|
|
427
|
+
<li>• LAYOUT_STREAMBLOCKS não está configurado</li>
|
|
428
|
+
<li>• Erro nos imports dos blocos</li>
|
|
429
|
+
<li>• Componentes não têm valores padrão válidos</li>
|
|
430
|
+
</ul>
|
|
431
|
+
</div>
|
|
432
|
+
<div class="mt-6">
|
|
433
|
+
<button onclick="location.reload()" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
|
|
434
|
+
<i class="fas fa-refresh mr-2"></i>
|
|
435
|
+
Tentar Novamente
|
|
436
|
+
</button>
|
|
437
|
+
</div>
|
|
438
|
+
</div>
|
|
439
|
+
|
|
440
|
+
{% endfor %}
|
|
441
|
+
</div>
|
|
442
|
+
|
|
443
|
+
<!-- Footer -->
|
|
444
|
+
<footer class="bg-white border-t mt-16">
|
|
445
|
+
<div class="max-w-6xl mx-auto px-4 py-8">
|
|
446
|
+
<div class="flex items-center justify-between">
|
|
447
|
+
<div class="text-gray-600">
|
|
448
|
+
<p>Showcase de Componentes ENAP - Design System</p>
|
|
449
|
+
<p class="text-sm">Renderização direta usando valores padrão dos componentes</p>
|
|
450
|
+
</div>
|
|
451
|
+
<div class="text-gray-500 text-sm">
|
|
452
|
+
{{ total_components }} componentes • {{ total_categories }} categorias
|
|
453
|
+
</div>
|
|
454
|
+
</div>
|
|
455
|
+
</div>
|
|
456
|
+
</footer>
|
|
457
|
+
|
|
458
|
+
</div>
|
|
459
|
+
|
|
460
|
+
<!-- JavaScript -->
|
|
461
|
+
<script>
|
|
462
|
+
// Elements
|
|
463
|
+
const sidebar = document.getElementById('sidebar');
|
|
464
|
+
const mainContent = document.getElementById('mainContent');
|
|
465
|
+
const sidebarToggle = document.getElementById('sidebarToggle');
|
|
466
|
+
const toggleIcon = document.getElementById('toggleIcon');
|
|
467
|
+
const mobileOverlay = document.getElementById('mobileOverlay');
|
|
468
|
+
const progressBar = document.getElementById('progressBar');
|
|
469
|
+
const navItems = document.querySelectorAll('.nav-item');
|
|
470
|
+
|
|
471
|
+
// State
|
|
472
|
+
let sidebarCollapsed = false;
|
|
473
|
+
let isMobile = window.innerWidth <= 1024;
|
|
474
|
+
|
|
475
|
+
// Sidebar Toggle
|
|
476
|
+
sidebarToggle.addEventListener('click', function() {
|
|
477
|
+
if (isMobile) {
|
|
478
|
+
sidebar.classList.toggle('mobile-open');
|
|
479
|
+
mobileOverlay.classList.toggle('active');
|
|
480
|
+
} else {
|
|
481
|
+
sidebarCollapsed = !sidebarCollapsed;
|
|
482
|
+
sidebar.classList.toggle('collapsed');
|
|
483
|
+
mainContent.classList.toggle('expanded');
|
|
484
|
+
toggleIcon.className = sidebarCollapsed ? 'fas fa-chevron-right' : 'fas fa-chevron-left';
|
|
485
|
+
}
|
|
486
|
+
});
|
|
487
|
+
|
|
488
|
+
// Mobile overlay click
|
|
489
|
+
mobileOverlay.addEventListener('click', function() {
|
|
490
|
+
sidebar.classList.remove('mobile-open');
|
|
491
|
+
mobileOverlay.classList.remove('active');
|
|
492
|
+
});
|
|
493
|
+
|
|
494
|
+
// Window resize handler
|
|
495
|
+
window.addEventListener('resize', function() {
|
|
496
|
+
const wasMobile = isMobile;
|
|
497
|
+
isMobile = window.innerWidth <= 1024;
|
|
498
|
+
|
|
499
|
+
if (wasMobile !== isMobile) {
|
|
500
|
+
// Reset sidebar state when switching between mobile/desktop
|
|
501
|
+
sidebar.classList.remove('collapsed', 'mobile-open');
|
|
502
|
+
mainContent.classList.remove('expanded');
|
|
503
|
+
mobileOverlay.classList.remove('active');
|
|
504
|
+
sidebarCollapsed = false;
|
|
505
|
+
toggleIcon.className = 'fas fa-chevron-left';
|
|
506
|
+
}
|
|
507
|
+
});
|
|
508
|
+
|
|
509
|
+
// Smooth scrolling and active state management
|
|
510
|
+
navItems.forEach(item => {
|
|
511
|
+
item.addEventListener('click', function(e) {
|
|
512
|
+
e.preventDefault();
|
|
513
|
+
const targetId = this.getAttribute('href').substring(1);
|
|
514
|
+
const targetElement = document.getElementById(targetId);
|
|
515
|
+
|
|
516
|
+
if (targetElement) {
|
|
517
|
+
// Remove active class from all items
|
|
518
|
+
navItems.forEach(nav => nav.classList.remove('active'));
|
|
519
|
+
// Add active class to clicked item
|
|
520
|
+
this.classList.add('active');
|
|
521
|
+
|
|
522
|
+
// Smooth scroll to target
|
|
523
|
+
targetElement.scrollIntoView({
|
|
524
|
+
behavior: 'smooth',
|
|
525
|
+
block: 'start'
|
|
526
|
+
});
|
|
527
|
+
|
|
528
|
+
// Close mobile sidebar
|
|
529
|
+
if (isMobile) {
|
|
530
|
+
sidebar.classList.remove('mobile-open');
|
|
531
|
+
mobileOverlay.classList.remove('active');
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
});
|
|
535
|
+
});
|
|
536
|
+
|
|
537
|
+
// Scroll spy - update active nav item based on scroll position
|
|
538
|
+
function updateActiveNavItem() {
|
|
539
|
+
const sections = document.querySelectorAll('section[id]');
|
|
540
|
+
const scrollPosition = window.scrollY + 100;
|
|
541
|
+
|
|
542
|
+
sections.forEach(section => {
|
|
543
|
+
const sectionTop = section.offsetTop;
|
|
544
|
+
const sectionHeight = section.offsetHeight;
|
|
545
|
+
const sectionId = section.getAttribute('id');
|
|
546
|
+
|
|
547
|
+
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
|
|
548
|
+
navItems.forEach(nav => nav.classList.remove('active'));
|
|
549
|
+
const activeNav = document.querySelector(`a[data-category="${sectionId}"]`);
|
|
550
|
+
if (activeNav) {
|
|
551
|
+
activeNav.classList.add('active');
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
});
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
// Progress bar
|
|
558
|
+
function updateProgressBar() {
|
|
559
|
+
const scrollTop = window.pageYOffset;
|
|
560
|
+
const docHeight = document.body.offsetHeight - window.innerHeight;
|
|
561
|
+
const scrollPercent = (scrollTop / docHeight) * 100;
|
|
562
|
+
progressBar.style.width = scrollPercent + '%';
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
// Scroll event listeners
|
|
566
|
+
window.addEventListener('scroll', function() {
|
|
567
|
+
updateActiveNavItem();
|
|
568
|
+
updateProgressBar();
|
|
569
|
+
});
|
|
570
|
+
|
|
571
|
+
// Scroll to top function
|
|
572
|
+
function scrollToTop() {
|
|
573
|
+
window.scrollTo({
|
|
574
|
+
top: 0,
|
|
575
|
+
behavior: 'smooth'
|
|
576
|
+
});
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
// Initial setup
|
|
580
|
+
updateActiveNavItem();
|
|
581
|
+
updateProgressBar();
|
|
582
|
+
|
|
583
|
+
// Log de estatísticas no console
|
|
584
|
+
console.log('Showcase com Sidebar carregado:');
|
|
585
|
+
console.log('- Total de componentes:', {{ total_components }});
|
|
586
|
+
console.log('- Total de categorias:', {{ total_categories }});
|
|
587
|
+
console.log('- Renderização: Direta (sem AJAX)');
|
|
588
|
+
console.log('- Navegação: Sidebar fixa com scroll spy');
|
|
589
|
+
</script>
|
|
590
|
+
|
|
591
|
+
</body>
|
|
592
|
+
</html>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<!-- enap_designsystem/templates/enap_designsystem/blocks/menu_navigation.html -->
|
|
2
2
|
{% load wagtailimages_tags %}
|
|
3
3
|
|
|
4
|
-
<nav class="navbar_semana
|
|
4
|
+
<nav class="navbar_semana" style="background-color: {{ value.cor_fundo }};">
|
|
5
5
|
<div class="container-fluid_semana">
|
|
6
6
|
<!-- Logo -->
|
|
7
7
|
{% if value.logo %}
|
|
8
8
|
<a class="navbar-brand" href="/">
|
|
9
|
-
{% image value.logo
|
|
9
|
+
{% image value.logo original %}
|
|
10
10
|
</a>
|
|
11
11
|
{% endif %}
|
|
12
12
|
|