wagtail-enap-designsystem 1.2.1.145__py3-none-any.whl → 1.2.1.146__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/blocks/__init__.py +2 -0
- enap_designsystem/blocks/html_blocks.py +88 -0
- enap_designsystem/models.py +81 -13
- enap_designsystem/static/enap_designsystem/blocks/apresentacao_block.css +174 -0
- enap_designsystem/static/enap_designsystem/blocks/cards_section.css +112 -0
- enap_designsystem/static/enap_designsystem/blocks/cards_titles.css +229 -0
- enap_designsystem/static/enap_designsystem/blocks/carousel_images.css +323 -0
- enap_designsystem/static/enap_designsystem/blocks/carousel_responsive.css +522 -0
- enap_designsystem/static/enap_designsystem/blocks/carousel_responsivo_snippet.css +294 -0
- enap_designsystem/static/enap_designsystem/blocks/clientes_block.css +146 -0
- enap_designsystem/templates/enap_designsystem/base.html +8 -1
- enap_designsystem/templates/enap_designsystem/blocks/apresentacao_block.html +17 -13
- enap_designsystem/templates/enap_designsystem/blocks/apresentacao_simple_block.html +3 -3
- enap_designsystem/templates/enap_designsystem/blocks/banner.html +14 -1
- enap_designsystem/templates/enap_designsystem/blocks/banner_logo.html +15 -1
- enap_designsystem/templates/enap_designsystem/blocks/card_block.html +2 -2
- enap_designsystem/templates/enap_designsystem/blocks/cards_section.html +2 -109
- enap_designsystem/templates/enap_designsystem/blocks/cards_titles.html +10 -2
- enap_designsystem/templates/enap_designsystem/blocks/carousel.html +1 -187
- enap_designsystem/templates/enap_designsystem/blocks/carousel_images.html +17 -314
- enap_designsystem/templates/enap_designsystem/blocks/carousel_responsive.html +0 -328
- enap_designsystem/templates/enap_designsystem/blocks/carousel_responsivo_snippet.html +3 -197
- enap_designsystem/templates/enap_designsystem/blocks/clientes_block.html +9 -152
- enap_designsystem/templates/enap_designsystem/blocks/footer_block.html +122 -0
- enap_designsystem/templates/enap_designsystem/blocks/section_block.html +1 -1
- enap_designsystem/templates/enap_designsystem/blocks/video_hero_banner.html +1 -2
- enap_designsystem/templates/enap_designsystem/pages/showcase_components.html +501 -180
- {wagtail_enap_designsystem-1.2.1.145.dist-info → wagtail_enap_designsystem-1.2.1.146.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.145.dist-info → wagtail_enap_designsystem-1.2.1.146.dist-info}/RECORD +32 -24
- {wagtail_enap_designsystem-1.2.1.145.dist-info → wagtail_enap_designsystem-1.2.1.146.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.145.dist-info → wagtail_enap_designsystem-1.2.1.146.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.145.dist-info → wagtail_enap_designsystem-1.2.1.146.dist-info}/top_level.txt +0 -0
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
<!-- enap_designsystem/pages/showcase_components.html -->
|
|
2
1
|
<!DOCTYPE html>
|
|
3
2
|
<html lang="pt-BR">
|
|
4
3
|
<head>
|
|
@@ -20,6 +19,189 @@
|
|
|
20
19
|
color: #334155;
|
|
21
20
|
}
|
|
22
21
|
|
|
22
|
+
.layout-container {
|
|
23
|
+
display: flex;
|
|
24
|
+
min-height: 100vh;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Sidebar */
|
|
28
|
+
.sidebar {
|
|
29
|
+
width: 280px;
|
|
30
|
+
background: white;
|
|
31
|
+
border-right: 1px solid #e2e8f0;
|
|
32
|
+
position: fixed;
|
|
33
|
+
left: 0;
|
|
34
|
+
top: 0;
|
|
35
|
+
height: 100vh;
|
|
36
|
+
overflow-y: auto;
|
|
37
|
+
z-index: 1000;
|
|
38
|
+
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
|
|
39
|
+
transition: transform 0.3s ease;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.sidebar.collapsed {
|
|
43
|
+
transform: translateX(-100%);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.sidebar-header {
|
|
47
|
+
padding: 2rem 1.5rem;
|
|
48
|
+
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
|
|
49
|
+
color: white;
|
|
50
|
+
position: sticky;
|
|
51
|
+
top: 0;
|
|
52
|
+
z-index: 10;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.sidebar-header h3 {
|
|
56
|
+
font-size: 1.25rem;
|
|
57
|
+
font-weight: 700;
|
|
58
|
+
margin-bottom: 0.5rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.sidebar-header p {
|
|
62
|
+
font-size: 0.9rem;
|
|
63
|
+
opacity: 0.9;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.sidebar-content {
|
|
67
|
+
padding: 1.5rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.sidebar-stats {
|
|
71
|
+
background: #f8fafc;
|
|
72
|
+
border-radius: 12px;
|
|
73
|
+
padding: 1.5rem;
|
|
74
|
+
margin-bottom: 2rem;
|
|
75
|
+
border: 1px solid #e2e8f0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.sidebar-stats h4 {
|
|
79
|
+
font-size: 0.9rem;
|
|
80
|
+
color: #64748b;
|
|
81
|
+
text-transform: uppercase;
|
|
82
|
+
letter-spacing: 0.05em;
|
|
83
|
+
margin-bottom: 1rem;
|
|
84
|
+
font-weight: 600;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.stats-mini {
|
|
88
|
+
display: grid;
|
|
89
|
+
grid-template-columns: 1fr 1fr;
|
|
90
|
+
gap: 1rem;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.stat-mini {
|
|
94
|
+
text-align: center;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.stat-mini-number {
|
|
98
|
+
font-size: 1.5rem;
|
|
99
|
+
font-weight: 800;
|
|
100
|
+
color: #3b82f6;
|
|
101
|
+
margin-bottom: 0.25rem;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.stat-mini-label {
|
|
105
|
+
font-size: 0.7rem;
|
|
106
|
+
color: #64748b;
|
|
107
|
+
text-transform: uppercase;
|
|
108
|
+
letter-spacing: 0.05em;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.categories-nav {
|
|
112
|
+
margin-bottom: 2rem;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.categories-nav h4 {
|
|
116
|
+
font-size: 0.9rem;
|
|
117
|
+
color: #64748b;
|
|
118
|
+
text-transform: uppercase;
|
|
119
|
+
letter-spacing: 0.05em;
|
|
120
|
+
margin-bottom: 1rem;
|
|
121
|
+
font-weight: 600;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.category-nav-item {
|
|
125
|
+
display: flex;
|
|
126
|
+
align-items: center;
|
|
127
|
+
padding: 0.75rem 1rem;
|
|
128
|
+
margin-bottom: 0.5rem;
|
|
129
|
+
border-radius: 10px;
|
|
130
|
+
cursor: pointer;
|
|
131
|
+
transition: all 0.3s ease;
|
|
132
|
+
text-decoration: none;
|
|
133
|
+
color: #64748b;
|
|
134
|
+
border: 1px solid transparent;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.category-nav-item:hover {
|
|
138
|
+
background: #f1f5f9;
|
|
139
|
+
color: #3b82f6;
|
|
140
|
+
border-color: #e2e8f0;
|
|
141
|
+
transform: translateX(4px);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.category-nav-item.active {
|
|
145
|
+
background: linear-gradient(135deg, #dbeafe, #bfdbfe);
|
|
146
|
+
color: #1e40af;
|
|
147
|
+
border-color: #93c5fd;
|
|
148
|
+
font-weight: 600;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.category-nav-icon {
|
|
152
|
+
font-size: 1.1rem;
|
|
153
|
+
margin-right: 0.75rem;
|
|
154
|
+
min-width: 20px;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.category-nav-content {
|
|
158
|
+
flex: 1;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.category-nav-name {
|
|
162
|
+
font-size: 0.9rem;
|
|
163
|
+
font-weight: 500;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.category-nav-count {
|
|
167
|
+
font-size: 0.75rem;
|
|
168
|
+
opacity: 0.7;
|
|
169
|
+
margin-top: 0.25rem;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.sidebar-toggle {
|
|
173
|
+
position: fixed;
|
|
174
|
+
top: 1rem;
|
|
175
|
+
left: 1rem;
|
|
176
|
+
z-index: 1001;
|
|
177
|
+
background: #3b82f6;
|
|
178
|
+
color: white;
|
|
179
|
+
border: none;
|
|
180
|
+
padding: 0.75rem;
|
|
181
|
+
border-radius: 8px;
|
|
182
|
+
cursor: pointer;
|
|
183
|
+
font-size: 1rem;
|
|
184
|
+
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
|
185
|
+
transition: all 0.3s ease;
|
|
186
|
+
display: none;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.sidebar-toggle:hover {
|
|
190
|
+
background: #2563eb;
|
|
191
|
+
transform: translateY(-2px);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/* Main Content */
|
|
195
|
+
.main-content {
|
|
196
|
+
flex: 1;
|
|
197
|
+
margin-left: 280px;
|
|
198
|
+
transition: margin-left 0.3s ease;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.main-content.expanded {
|
|
202
|
+
margin-left: 0;
|
|
203
|
+
}
|
|
204
|
+
|
|
23
205
|
.showcase-container {
|
|
24
206
|
max-width: 1400px;
|
|
25
207
|
margin: 0 auto;
|
|
@@ -217,6 +399,7 @@
|
|
|
217
399
|
overflow: hidden;
|
|
218
400
|
transition: all 0.4s ease;
|
|
219
401
|
border: 1px solid #f1f5f9;
|
|
402
|
+
scroll-margin-top: 2rem;
|
|
220
403
|
}
|
|
221
404
|
|
|
222
405
|
.category-card:hover {
|
|
@@ -301,7 +484,6 @@
|
|
|
301
484
|
|
|
302
485
|
.components-showcase {
|
|
303
486
|
padding: 1.5rem;
|
|
304
|
-
max-height: 1000px;
|
|
305
487
|
overflow-y: auto;
|
|
306
488
|
}
|
|
307
489
|
|
|
@@ -332,12 +514,6 @@
|
|
|
332
514
|
transition: all 0.3s ease;
|
|
333
515
|
}
|
|
334
516
|
|
|
335
|
-
.component-showcase-item:hover {
|
|
336
|
-
border-color: #3b82f6;
|
|
337
|
-
transform: translateX(8px);
|
|
338
|
-
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.1);
|
|
339
|
-
}
|
|
340
|
-
|
|
341
517
|
.component-header {
|
|
342
518
|
padding: 1.25rem 1.5rem;
|
|
343
519
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
@@ -482,6 +658,24 @@
|
|
|
482
658
|
}
|
|
483
659
|
|
|
484
660
|
/* Responsividade */
|
|
661
|
+
@media (max-width: 1024px) {
|
|
662
|
+
.sidebar {
|
|
663
|
+
transform: translateX(-100%);
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.sidebar.open {
|
|
667
|
+
transform: translateX(0);
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
.sidebar-toggle {
|
|
671
|
+
display: block;
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
.main-content {
|
|
675
|
+
margin-left: 0;
|
|
676
|
+
}
|
|
677
|
+
}
|
|
678
|
+
|
|
485
679
|
@media (max-width: 768px) {
|
|
486
680
|
.showcase-container {
|
|
487
681
|
padding: 1rem;
|
|
@@ -516,6 +710,10 @@
|
|
|
516
710
|
flex-direction: column;
|
|
517
711
|
align-items: flex-start;
|
|
518
712
|
}
|
|
713
|
+
|
|
714
|
+
.sidebar {
|
|
715
|
+
width: 100%;
|
|
716
|
+
}
|
|
519
717
|
}
|
|
520
718
|
|
|
521
719
|
/* Animações */
|
|
@@ -661,197 +859,214 @@
|
|
|
661
859
|
</style>
|
|
662
860
|
</head>
|
|
663
861
|
<body>
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
<
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
<h3>Erro ao Carregar Componentes</h3>
|
|
676
|
-
<p>{{ error_message }}</p>
|
|
677
|
-
</div>
|
|
678
|
-
{% endif %}
|
|
679
|
-
|
|
680
|
-
<!-- Controles -->
|
|
681
|
-
<div class="controls-bar">
|
|
682
|
-
<div class="filter-group">
|
|
683
|
-
<label for="categoryFilter"><strong>Categoria:</strong></label>
|
|
684
|
-
<select id="categoryFilter" class="filter-select">
|
|
685
|
-
<option value="">Todas as categorias</option>
|
|
686
|
-
{% for category_name in available_categories %}
|
|
687
|
-
<option value="{{ category_name }}">{{ category_name|title }}</option>
|
|
688
|
-
{% endfor %}
|
|
689
|
-
</select>
|
|
690
|
-
</div>
|
|
691
|
-
|
|
692
|
-
<div class="search-box">
|
|
693
|
-
<i class="fas fa-search search-icon"></i>
|
|
694
|
-
<input type="text" id="searchInput" class="search-input" placeholder="Buscar componentes...">
|
|
862
|
+
<!-- Toggle Button for Mobile -->
|
|
863
|
+
<button class="sidebar-toggle" onclick="toggleSidebar()">
|
|
864
|
+
<i class="fas fa-bars"></i>
|
|
865
|
+
</button>
|
|
866
|
+
|
|
867
|
+
<div class="layout-container">
|
|
868
|
+
<!-- Sidebar -->
|
|
869
|
+
<div class="sidebar" id="sidebar">
|
|
870
|
+
<div class="sidebar-header">
|
|
871
|
+
<h3><i class="fas fa-cubes"></i> Design System</h3>
|
|
872
|
+
<p>Navegação por categorias</p>
|
|
695
873
|
</div>
|
|
696
874
|
|
|
697
|
-
<div class="
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
<div class="
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
875
|
+
<div class="sidebar-content">
|
|
876
|
+
<!-- Stats Mini -->
|
|
877
|
+
<div class="sidebar-stats">
|
|
878
|
+
<h4>Estatísticas</h4>
|
|
879
|
+
<div class="stats-mini">
|
|
880
|
+
<div class="stat-mini">
|
|
881
|
+
<div class="stat-mini-number">{{ total_categories }}</div>
|
|
882
|
+
<div class="stat-mini-label">Categorias</div>
|
|
883
|
+
</div>
|
|
884
|
+
<div class="stat-mini">
|
|
885
|
+
<div class="stat-mini-number">{{ total_components }}</div>
|
|
886
|
+
<div class="stat-mini-label">Componentes</div>
|
|
887
|
+
</div>
|
|
888
|
+
<div class="stat-mini">
|
|
889
|
+
<div class="stat-mini-number">{{ components_ok }}</div>
|
|
890
|
+
<div class="stat-mini-label">OK</div>
|
|
891
|
+
</div>
|
|
892
|
+
<div class="stat-mini">
|
|
893
|
+
<div class="stat-mini-number">{{ components_error }}</div>
|
|
894
|
+
<div class="stat-mini-label">Erros</div>
|
|
895
|
+
</div>
|
|
896
|
+
</div>
|
|
897
|
+
</div>
|
|
898
|
+
|
|
899
|
+
<!-- Categories Navigation -->
|
|
900
|
+
<div class="categories-nav">
|
|
901
|
+
<h4>Categorias</h4>
|
|
902
|
+
|
|
903
|
+
<!-- Todas as categorias -->
|
|
904
|
+
<a href="#" class="category-nav-item active" onclick="showAllCategories(event)">
|
|
905
|
+
<i class="fas fa-th-large category-nav-icon"></i>
|
|
906
|
+
<div class="category-nav-content">
|
|
907
|
+
<div class="category-nav-name">Todas as Categorias</div>
|
|
908
|
+
<div class="category-nav-count">{{ total_components }} componentes</div>
|
|
909
|
+
</div>
|
|
910
|
+
</a>
|
|
911
|
+
|
|
912
|
+
{% for category_name, category in categories_with_components.items %}
|
|
913
|
+
<a href="#category-{{ category_name }}" class="category-nav-item" onclick="scrollToCategory(event, '{{ category_name }}')">
|
|
914
|
+
<i class="fas fa-{{ category.icon }} category-nav-icon"></i>
|
|
915
|
+
<div class="category-nav-content">
|
|
916
|
+
<div class="category-nav-name">{{ category.display_name }}</div>
|
|
917
|
+
<div class="category-nav-count">{{ category.rendered_components|length }} componente{{ category.rendered_components|length|pluralize }}</div>
|
|
918
|
+
</div>
|
|
919
|
+
</a>
|
|
920
|
+
{% endfor %}
|
|
921
|
+
</div>
|
|
727
922
|
</div>
|
|
728
923
|
</div>
|
|
729
924
|
|
|
730
|
-
<!--
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
<
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
925
|
+
<!-- Main Content -->
|
|
926
|
+
<div class="main-content" id="mainContent">
|
|
927
|
+
<div class="showcase-container">
|
|
928
|
+
<!-- Header -->
|
|
929
|
+
<div class="showcase-header">
|
|
930
|
+
<h1>{{ page_title }}</h1>
|
|
931
|
+
<p>{{ page_description }}</p>
|
|
932
|
+
</div>
|
|
933
|
+
|
|
934
|
+
<!-- Mensagem de Erro -->
|
|
935
|
+
{% if error_message %}
|
|
936
|
+
<div class="error-message">
|
|
937
|
+
<i class="fas fa-exclamation-triangle" style="font-size: 2rem; margin-bottom: 1rem;"></i>
|
|
938
|
+
<h3>Erro ao Carregar Componentes</h3>
|
|
939
|
+
<p>{{ error_message }}</p>
|
|
940
|
+
</div>
|
|
941
|
+
{% endif %}
|
|
942
|
+
|
|
943
|
+
<!-- Debug Panel -->
|
|
944
|
+
{% if debug_mode and debug_log %}
|
|
945
|
+
<div class="debug-panel">
|
|
946
|
+
<button class="debug-toggle" onclick="toggleDebug()">
|
|
947
|
+
<i class="fas fa-bug"></i> Debug Log
|
|
948
|
+
</button>
|
|
949
|
+
<div id="debug-content" class="debug-content" style="display: none;">
|
|
950
|
+
{% for log_line in debug_log %}{{ log_line }}
|
|
738
951
|
{% endfor %}
|
|
739
|
-
</div>
|
|
740
|
-
</div>
|
|
741
|
-
{% endif %}
|
|
742
|
-
|
|
743
|
-
<!-- Grid de Categorias -->
|
|
744
|
-
{% if categories_with_components %}
|
|
745
|
-
<div class="categories-grid" id="categoriesGrid">
|
|
746
|
-
{% for category_name, category in categories_with_components.items %}
|
|
747
|
-
<div class="category-card fade-in" data-category="{{ category_name }}">
|
|
748
|
-
<div class="category-header">
|
|
749
|
-
<h2 class="category-title">
|
|
750
|
-
<i class="fas fa-{{ category.icon }} category-icon"></i>
|
|
751
|
-
{{ category.display_name }}
|
|
752
|
-
</h2>
|
|
753
|
-
<p class="category-description">{{ category.description }}</p>
|
|
754
|
-
|
|
755
|
-
<div class="category-badges">
|
|
756
|
-
<span class="badge badge-primary">
|
|
757
|
-
<i class="fas fa-cubes"></i>
|
|
758
|
-
{{ category.rendered_components|length }} componente{{ category.rendered_components|length|pluralize }}
|
|
759
|
-
</span>
|
|
760
|
-
{% with error_count=0 %}
|
|
761
|
-
{% for component in category.rendered_components %}
|
|
762
|
-
{% if component.has_error %}
|
|
763
|
-
{% if forloop.first %}
|
|
764
|
-
<span class="badge badge-error">
|
|
765
|
-
<i class="fas fa-exclamation-triangle"></i>
|
|
766
|
-
Com problemas
|
|
767
|
-
</span>
|
|
768
|
-
{% endif %}
|
|
769
|
-
{% endif %}
|
|
770
|
-
{% endfor %}
|
|
771
|
-
{% endwith %}
|
|
772
952
|
</div>
|
|
773
953
|
</div>
|
|
954
|
+
{% endif %}
|
|
774
955
|
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
956
|
+
<!-- Grid de Categorias -->
|
|
957
|
+
{% if categories_with_components %}
|
|
958
|
+
<div class="categories-grid" id="categoriesGrid">
|
|
959
|
+
{% for category_name, category in categories_with_components.items %}
|
|
960
|
+
<div class="category-card fade-in" data-category="{{ category_name }}" id="category-{{ category_name }}">
|
|
961
|
+
<div class="category-header">
|
|
962
|
+
<h2 class="category-title">
|
|
963
|
+
<i class="fas fa-{{ category.icon }} category-icon"></i>
|
|
964
|
+
{{ category.display_name }}
|
|
965
|
+
</h2>
|
|
966
|
+
<p class="category-description">{{ category.description }}</p>
|
|
967
|
+
|
|
968
|
+
<div class="category-badges">
|
|
969
|
+
<span class="badge badge-primary">
|
|
970
|
+
<i class="fas fa-cubes"></i>
|
|
971
|
+
{{ category.rendered_components|length }} componente{{ category.rendered_components|length|pluralize }}
|
|
972
|
+
</span>
|
|
973
|
+
{% with error_count=0 %}
|
|
974
|
+
{% for component in category.rendered_components %}
|
|
975
|
+
{% if component.has_error %}
|
|
976
|
+
{% if forloop.first %}
|
|
977
|
+
<span class="badge badge-error">
|
|
978
|
+
<i class="fas fa-exclamation-triangle"></i>
|
|
979
|
+
Com problemas
|
|
980
|
+
</span>
|
|
981
|
+
{% endif %}
|
|
982
|
+
{% endif %}
|
|
983
|
+
{% endfor %}
|
|
984
|
+
{% endwith %}
|
|
791
985
|
</div>
|
|
792
986
|
</div>
|
|
793
987
|
|
|
794
|
-
<div class="
|
|
795
|
-
{
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
988
|
+
<div class="components-showcase">
|
|
989
|
+
{% for component in category.rendered_components %}
|
|
990
|
+
<div class="component-showcase-item" data-component="{{ component.name }}" data-has-error="{{ component.has_error|yesno:'true,false' }}">
|
|
991
|
+
<div class="component-header">
|
|
992
|
+
<div class="component-name">{{ component.display_name }}</div>
|
|
993
|
+
<div class="component-meta">
|
|
994
|
+
{% if component.has_error %}
|
|
995
|
+
<span class="badge badge-error">
|
|
996
|
+
<i class="fas fa-times-circle"></i> Erro
|
|
997
|
+
</span>
|
|
998
|
+
{% else %}
|
|
999
|
+
<span class="badge badge-success">
|
|
1000
|
+
<i class="fas fa-check-circle"></i> OK
|
|
1001
|
+
</span>
|
|
1002
|
+
{% endif %}
|
|
1003
|
+
<span class="badge badge-primary">{{ component.class_name }}</span>
|
|
1004
|
+
</div>
|
|
1005
|
+
</div>
|
|
1006
|
+
|
|
1007
|
+
<div class="component-preview {% if component.has_error %}has-error{% endif %}">
|
|
1008
|
+
{{ component.rendered_html|safe }}
|
|
1009
|
+
</div>
|
|
1010
|
+
|
|
1011
|
+
{% if debug_mode and component.data_used %}
|
|
1012
|
+
<details style="margin: 1rem 1.5rem; font-size: 0.9rem;">
|
|
1013
|
+
<summary style="cursor: pointer; padding: 0.75rem; background: #f8fafc; border-radius: 8px; color: #64748b;">
|
|
1014
|
+
<i class="fas fa-code"></i> Ver dados utilizados ({{ component.data_used|length }} campos)
|
|
1015
|
+
</summary>
|
|
1016
|
+
<div style="margin-top: 0.75rem; padding: 1rem; background: #f1f5f9; border-radius: 8px; border-left: 3px solid #3b82f6;">
|
|
1017
|
+
{% for key, value in component.data_used.items %}
|
|
1018
|
+
<div style="margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid #e2e8f0;">
|
|
1019
|
+
<strong style="color: #1e40af; font-family: monospace;">{{ key }}:</strong>
|
|
1020
|
+
<div style="color: #374151; margin-top: 0.25rem; word-break: break-word;">{{ value|truncatechars:200 }}</div>
|
|
1021
|
+
</div>
|
|
1022
|
+
{% endfor %}
|
|
808
1023
|
</div>
|
|
809
|
-
|
|
1024
|
+
</details>
|
|
1025
|
+
{% endif %}
|
|
1026
|
+
|
|
1027
|
+
{% if component.error_message %}
|
|
1028
|
+
<details style="margin: 1rem 1.5rem; font-size: 0.9rem;">
|
|
1029
|
+
<summary style="cursor: pointer; padding: 0.75rem; background: #fee2e2; border-radius: 8px; color: #dc2626;">
|
|
1030
|
+
<i class="fas fa-exclamation-triangle"></i> Ver detalhes do erro
|
|
1031
|
+
</summary>
|
|
1032
|
+
<div style="margin-top: 0.75rem; padding: 1rem; background: #fef2f2; border-radius: 8px; border-left: 3px solid #dc2626; color: #dc2626; font-family: monospace; font-size: 0.8rem;">
|
|
1033
|
+
{{ component.error_message }}
|
|
1034
|
+
</div>
|
|
1035
|
+
</details>
|
|
1036
|
+
{% endif %}
|
|
810
1037
|
</div>
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
<summary style="cursor: pointer; padding: 0.75rem; background: #fee2e2; border-radius: 8px; color: #dc2626;">
|
|
817
|
-
<i class="fas fa-exclamation-triangle"></i> Ver detalhes do erro
|
|
818
|
-
</summary>
|
|
819
|
-
<div style="margin-top: 0.75rem; padding: 1rem; background: #fef2f2; border-radius: 8px; border-left: 3px solid #dc2626; color: #dc2626; font-family: monospace; font-size: 0.8rem;">
|
|
820
|
-
{{ component.error_message }}
|
|
1038
|
+
{% empty %}
|
|
1039
|
+
<div class="no-components">
|
|
1040
|
+
<i class="fas fa-search" style="font-size: 3rem; margin-bottom: 1rem; color: #cbd5e1;"></i>
|
|
1041
|
+
<h4>Nenhum componente renderizado</h4>
|
|
1042
|
+
<p>Esta categoria não possui componentes que puderam ser renderizados.</p>
|
|
821
1043
|
</div>
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
</div>
|
|
825
|
-
{% empty %}
|
|
826
|
-
<div class="no-components">
|
|
827
|
-
<i class="fas fa-search" style="font-size: 3rem; margin-bottom: 1rem; color: #cbd5e1;"></i>
|
|
828
|
-
<h4>Nenhum componente renderizado</h4>
|
|
829
|
-
<p>Esta categoria não possui componentes que puderam ser renderizados.</p>
|
|
1044
|
+
{% endfor %}
|
|
1045
|
+
</div>
|
|
830
1046
|
</div>
|
|
831
1047
|
{% endfor %}
|
|
832
1048
|
</div>
|
|
1049
|
+
{% else %}
|
|
1050
|
+
<div class="no-components">
|
|
1051
|
+
<i class="fas fa-search" style="font-size: 4rem; margin-bottom: 1.5rem; color: #cbd5e1;"></i>
|
|
1052
|
+
<h3>Nenhum componente encontrado</h3>
|
|
1053
|
+
<p>Verifique se os <code>LAYOUT_STREAMBLOCKS</code> estão configurados corretamente.</p>
|
|
1054
|
+
</div>
|
|
1055
|
+
{% endif %}
|
|
1056
|
+
|
|
1057
|
+
<!-- Informações -->
|
|
1058
|
+
<div class="info-section">
|
|
1059
|
+
<h4><i class="fas fa-info-circle"></i> Sobre este Showcase</h4>
|
|
1060
|
+
<p>
|
|
1061
|
+
Este showcase apresenta visualmente todos os componentes do Design System ENAP.
|
|
1062
|
+
Cada componente é renderizado com dados realistas para demonstrar sua aparência e funcionalidade.
|
|
1063
|
+
</p>
|
|
1064
|
+
<p>
|
|
1065
|
+
Use os filtros acima para navegar pelas categorias ou buscar componentes específicos.
|
|
1066
|
+
Componentes que não puderam ser renderizados são marcados com placeholders informativos.
|
|
1067
|
+
</p>
|
|
1068
|
+
</div>
|
|
833
1069
|
</div>
|
|
834
|
-
{% endfor %}
|
|
835
|
-
</div>
|
|
836
|
-
{% else %}
|
|
837
|
-
<div class="no-components">
|
|
838
|
-
<i class="fas fa-search" style="font-size: 4rem; margin-bottom: 1.5rem; color: #cbd5e1;"></i>
|
|
839
|
-
<h3>Nenhum componente encontrado</h3>
|
|
840
|
-
<p>Verifique se os <code>LAYOUT_STREAMBLOCKS</code> estão configurados corretamente.</p>
|
|
841
|
-
</div>
|
|
842
|
-
{% endif %}
|
|
843
|
-
|
|
844
|
-
<!-- Informações -->
|
|
845
|
-
<div class="info-section">
|
|
846
|
-
<h4><i class="fas fa-info-circle"></i> Sobre este Showcase</h4>
|
|
847
|
-
<p>
|
|
848
|
-
Este showcase apresenta visualmente todos os componentes do Design System ENAP.
|
|
849
|
-
Cada componente é renderizado com dados realistas para demonstrar sua aparência e funcionalidade.
|
|
850
|
-
</p>
|
|
851
|
-
<p>
|
|
852
|
-
Use os filtros acima para navegar pelas categorias ou buscar componentes específicos.
|
|
853
|
-
Componentes que não puderam ser renderizados são marcados com placeholders informativos.
|
|
854
|
-
</p>
|
|
855
1070
|
</div>
|
|
856
1071
|
</div>
|
|
857
1072
|
|
|
@@ -977,6 +1192,70 @@
|
|
|
977
1192
|
});
|
|
978
1193
|
});
|
|
979
1194
|
|
|
1195
|
+
// Navegação da sidebar
|
|
1196
|
+
function scrollToCategory(event, categoryName) {
|
|
1197
|
+
event.preventDefault();
|
|
1198
|
+
|
|
1199
|
+
// Remove active de todos os links
|
|
1200
|
+
document.querySelectorAll('.category-nav-item').forEach(item => {
|
|
1201
|
+
item.classList.remove('active');
|
|
1202
|
+
});
|
|
1203
|
+
|
|
1204
|
+
// Adiciona active ao link clicado
|
|
1205
|
+
event.currentTarget.classList.add('active');
|
|
1206
|
+
|
|
1207
|
+
// Scroll suave para a categoria
|
|
1208
|
+
const categoryElement = document.getElementById('category-' + categoryName);
|
|
1209
|
+
if (categoryElement) {
|
|
1210
|
+
categoryElement.scrollIntoView({
|
|
1211
|
+
behavior: 'smooth',
|
|
1212
|
+
block: 'start'
|
|
1213
|
+
});
|
|
1214
|
+
}
|
|
1215
|
+
|
|
1216
|
+
// Fecha sidebar no mobile
|
|
1217
|
+
if (window.innerWidth <= 1024) {
|
|
1218
|
+
toggleSidebar();
|
|
1219
|
+
}
|
|
1220
|
+
}
|
|
1221
|
+
|
|
1222
|
+
function showAllCategories(event) {
|
|
1223
|
+
event.preventDefault();
|
|
1224
|
+
|
|
1225
|
+
// Remove active de todos os links
|
|
1226
|
+
document.querySelectorAll('.category-nav-item').forEach(item => {
|
|
1227
|
+
item.classList.remove('active');
|
|
1228
|
+
});
|
|
1229
|
+
|
|
1230
|
+
// Adiciona active ao link "Todas as categorias"
|
|
1231
|
+
event.currentTarget.classList.add('active');
|
|
1232
|
+
|
|
1233
|
+
// Scroll para o topo
|
|
1234
|
+
window.scrollTo({
|
|
1235
|
+
top: 0,
|
|
1236
|
+
behavior: 'smooth'
|
|
1237
|
+
});
|
|
1238
|
+
|
|
1239
|
+
// Fecha sidebar no mobile
|
|
1240
|
+
if (window.innerWidth <= 1024) {
|
|
1241
|
+
toggleSidebar();
|
|
1242
|
+
}
|
|
1243
|
+
}
|
|
1244
|
+
|
|
1245
|
+
// Toggle sidebar
|
|
1246
|
+
function toggleSidebar() {
|
|
1247
|
+
const sidebar = document.getElementById('sidebar');
|
|
1248
|
+
const mainContent = document.getElementById('mainContent');
|
|
1249
|
+
|
|
1250
|
+
sidebar.classList.toggle('open');
|
|
1251
|
+
|
|
1252
|
+
if (sidebar.classList.contains('open')) {
|
|
1253
|
+
mainContent.classList.add('expanded');
|
|
1254
|
+
} else {
|
|
1255
|
+
mainContent.classList.remove('expanded');
|
|
1256
|
+
}
|
|
1257
|
+
}
|
|
1258
|
+
|
|
980
1259
|
// Toggle debug
|
|
981
1260
|
function toggleDebug() {
|
|
982
1261
|
const debugContent = document.getElementById('debug-content');
|
|
@@ -990,6 +1269,48 @@
|
|
|
990
1269
|
toggleButton.innerHTML = '<i class="fas fa-bug"></i> Debug Log';
|
|
991
1270
|
}
|
|
992
1271
|
}
|
|
1272
|
+
|
|
1273
|
+
// Destacar categoria ativa durante scroll
|
|
1274
|
+
window.addEventListener('scroll', function() {
|
|
1275
|
+
const categories = document.querySelectorAll('.category-card');
|
|
1276
|
+
const navItems = document.querySelectorAll('.category-nav-item:not(:first-child)');
|
|
1277
|
+
|
|
1278
|
+
let currentCategory = null;
|
|
1279
|
+
|
|
1280
|
+
categories.forEach(category => {
|
|
1281
|
+
const rect = category.getBoundingClientRect();
|
|
1282
|
+
if (rect.top <= 100 && rect.bottom >= 100) {
|
|
1283
|
+
currentCategory = category.dataset.category;
|
|
1284
|
+
}
|
|
1285
|
+
});
|
|
1286
|
+
|
|
1287
|
+
if (currentCategory) {
|
|
1288
|
+
// Remove active de todos
|
|
1289
|
+
document.querySelectorAll('.category-nav-item').forEach(item => {
|
|
1290
|
+
item.classList.remove('active');
|
|
1291
|
+
});
|
|
1292
|
+
|
|
1293
|
+
// Adiciona active à categoria atual
|
|
1294
|
+
navItems.forEach(item => {
|
|
1295
|
+
if (item.getAttribute('href') === '#category-' + currentCategory) {
|
|
1296
|
+
item.classList.add('active');
|
|
1297
|
+
}
|
|
1298
|
+
});
|
|
1299
|
+
}
|
|
1300
|
+
});
|
|
1301
|
+
|
|
1302
|
+
// Fechar sidebar ao clicar fora (mobile)
|
|
1303
|
+
document.addEventListener('click', function(event) {
|
|
1304
|
+
const sidebar = document.getElementById('sidebar');
|
|
1305
|
+
const toggleBtn = document.querySelector('.sidebar-toggle');
|
|
1306
|
+
|
|
1307
|
+
if (window.innerWidth <= 1024 &&
|
|
1308
|
+
sidebar.classList.contains('open') &&
|
|
1309
|
+
!sidebar.contains(event.target) &&
|
|
1310
|
+
!toggleBtn.contains(event.target)) {
|
|
1311
|
+
toggleSidebar();
|
|
1312
|
+
}
|
|
1313
|
+
});
|
|
993
1314
|
</script>
|
|
994
1315
|
</body>
|
|
995
1316
|
</html>
|