wagtail-enap-designsystem 1.2.1.170__py3-none-any.whl → 1.2.1.172__py3-none-any.whl

enap_designsystem/templates/enap_designsystem/pages/capsula_index_page.html

@@ -1,5 +1,44 @@
-{# templates/enap_designsystem/pages/capsula_index_page.html #}
-{% load static wagtailcore_tags capsula_tags %}
+
+{% load static %}
+{% load wagtailcore_tags wagtailimages_tags %}
+
+
+{% block metadata %}
+    {% comment %} <meta name="viewport" content="width=device-width, initial-scale=1.0"> {% endcomment %}
+{% endblock %}
+
+
+{% block title %}
+	<title>{{ page.title }}</title>
+{% endblock %}
+
+{%block govnavbar %}
+    <div style="background-color: #071E41;">
+        <div class="menu">
+            <div class="logo">
+                <img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Passar pro lado esquerdo" alt="Logo GovBR" height="40">
+            </div>
+            <a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
+            <div class="separator"></div>
+            <a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
+            <div class="separator"></div>
+            <a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
+            <div class="separator"></div>
+            <a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
+            <div class="separator"></div>
+            <a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
+        </div>
+    </div>
+{% endblock %}
+
+
+{% block navbar %}
+    {% if page.navbar %}
+        {% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
+    {% else %}
+        <p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
+    {% endif %}
+{% endblock %}
 
 {% block extra_css %}
 <style>
@@ -124,11 +163,7 @@
     
     /* Container de filtros */
     .filtros-avancados {
-        background: white;
-        border: 2px solid var(--gray-200);
-        border-radius: var(--radius-lg);
         overflow: hidden;
-        box-shadow: var(--shadow-md);
     }
     
     .filtros-avancados-header {
@@ -175,7 +210,6 @@
     }
     
     .filtros-content {
-        padding: 1.75rem 1.5rem;
         max-height: 600px;
         overflow-y: auto;
         scrollbar-width: thin;
@@ -219,11 +253,12 @@
     }
     
     .filtro-dropdown {
-        border: 1px solid var(--gray-200);
-        border-radius: var(--radius-md);
+        border: 1px solid #C8D1E0;
+        border-radius: 1px solid #C8D1E0;
         overflow: hidden;
         transition: all 0.2s;
         background: var(--gray-50);
+        
     }
     
     .filtro-dropdown:hover {
@@ -231,8 +266,7 @@
     }
     
     .filtro-dropdown.active {
-        border-color: var(--primary);
-        box-shadow: 0 0 0 3px rgba(12, 90, 90, 0.08);
+        
     }
     
     .filtro-grupo-header {
@@ -442,32 +476,19 @@
     
     .capsula-card {
         background: white;
-        border: 2px solid var(--gray-200);
-        border-radius: var(--radius-xl);
+        border: 1px solid #C8D1E0;
+        border-radius: 20px;
         padding: 2rem;
-        transition: all 0.3s ease;
         display: flex;
         flex-direction: column;
         position: relative;
         overflow: hidden;
     }
     
-    .capsula-card::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 4px;
-        background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
-        transform: scaleX(0);
-        transition: transform 0.3s ease;
-    }
     
     .capsula-card:hover {
-        transform: translateY(-4px);
-        box-shadow: var(--shadow-xl);
-        border-color: var(--primary);
+        color: #006969;
+        background-color: #EBEFF5;
     }
     
     .capsula-card:hover::before {
@@ -494,12 +515,12 @@
     }
     
     .capsula-card-titulo {
-        font-size: 1.1875rem;
+        font-size: 18px;
         font-weight: 700;
-        color: var(--gray-900);
+        color: #434A54;
         margin-bottom: 0.875rem;
         line-height: 1.4;
-        min-height: 3.2rem;
+        margin: 0;
     }
     
     .capsula-card-titulo a {
@@ -513,8 +534,8 @@
     }
     
     .capsula-card-descricao {
-        font-size: 0.9375rem;
-        color: var(--gray-600);
+        font-size: 16px;
+        color: #434A54;
         line-height: 1.7;
         margin-bottom: 1.5rem;
         flex-grow: 1;
@@ -558,20 +579,19 @@
         font-weight: 700;
         margin-bottom: 1rem;
         width: fit-content;
-        text-transform: uppercase;
         letter-spacing: 0.5px;
     }
     
     .capsula-badge-obrigatorio {
-        background: linear-gradient(135deg, var(--red-50) 0%, #fee 100%);
-        color: var(--red-600);
-        border: 2px solid var(--red-100);
+        background: #FCF0F1;
+        color: #DF3E63;
+        border: 1px solid #DF3E63;
     }
     
     .capsula-badge-recomendado {
-        background: linear-gradient(135deg, var(--blue-50) 0%, #e0f2fe 100%);
-        color: var(--blue-600);
-        border: 2px solid var(--blue-200);
+        background: #E6EFFA;
+        color: #155BCB;
+        border: 1px solid #155BCB;
     }
     
     .badge-icon {
@@ -613,12 +633,11 @@
     
     /* Botão de ação modernizado */
     .capsula-card-btn {
-        width: 100%;
         padding: 0.875rem 1.5rem;
-        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+        background: #007D7A;
         color: white;
         border: none;
-        border-radius: var(--radius-lg);
+        border-radius: 32px;
         font-weight: 700;
         font-size: 0.9375rem;
         cursor: pointer;
@@ -643,17 +662,15 @@
     }
     
     .capsula-card-btn:hover {
-        transform: translateY(-2px);
+        background: #006969;
+        color: white;
         box-shadow: 0 6px 16px rgba(12, 90, 90, 0.3);
     }
     
     .capsula-card-btn:hover::before {
         left: 100%;
     }
-    
-    .capsula-card-btn:active {
-        transform: translateY(0);
-    }
+
     
     .capsula-card-btn:focus {
         outline: none;
@@ -725,21 +742,7 @@
             
             {# Filtros avançados #}
             <div class="filtros-avancados">
-                <button class="filtros-avancados-header" 
-                        aria-expanded="true"
-                        aria-controls="filtros-content"
-                        onclick="toggleFiltros()">
-                    <div class="filtros-avancados-titulo">
-                        <svg class="filtros-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
-                        </svg>
-                        Filtros Avançados
-                    </div>
-                    <svg class="toggle-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                    </svg>
-                </button>
-                
+             
                 <div id="filtros-content" class="filtros-content">
                     <form method="get" id="filtros-form">
                         
@@ -936,77 +939,83 @@
         
     </div>
 </div>
+{% endblock %}
+
+{% block footer %}
+    {% include "enap_designsystem/includes/footer.html" %}
+{% endblock %}
 
+{% block scriptinline %}
 <script>
-// Toggle do painel principal de filtros
-function toggleFiltros() {
-    const header = document.querySelector('.filtros-avancados-header');
-    const content = document.getElementById('filtros-content');
-    const expanded = header.getAttribute('aria-expanded') === 'true';
-    
-    header.setAttribute('aria-expanded', !expanded);
-    content.hidden = expanded;
-}
+    // Toggle do painel principal de filtros
+    function toggleFiltros() {
+        const header = document.querySelector('.filtros-avancados-header');
+        const content = document.getElementById('filtros-content');
+        const expanded = header.getAttribute('aria-expanded') === 'true';
+        
+        header.setAttribute('aria-expanded', !expanded);
+        content.hidden = expanded;
+    }
 
-// Toggle dos dropdowns individuais
-function toggleDropdown(tipo) {
-    const header = document.querySelector(`#dropdown-${tipo} .filtro-grupo-header`);
-    const opcoes = document.getElementById(`opcoes-${tipo}`);
-    const dropdown = document.getElementById(`dropdown-${tipo}`);
-    const expanded = header.getAttribute('aria-expanded') === 'true';
-    
-    // Fecha outros dropdowns
-    document.querySelectorAll('.filtro-dropdown').forEach(dd => {
-        if (dd.id !== `dropdown-${tipo}`) {
-            dd.classList.remove('active');
-            const h = dd.querySelector('.filtro-grupo-header');
-            const o = dd.querySelector('.filtro-opcoes');
-            h.setAttribute('aria-expanded', 'false');
-            o.classList.remove('open');
-        }
-    });
-    
-    // Toggle do dropdown atual
-    header.setAttribute('aria-expanded', !expanded);
-    opcoes.classList.toggle('open');
-    dropdown.classList.toggle('active');
-}
+    // Toggle dos dropdowns individuais
+    function toggleDropdown(tipo) {
+        const header = document.querySelector(`#dropdown-${tipo} .filtro-grupo-header`);
+        const opcoes = document.getElementById(`opcoes-${tipo}`);
+        const dropdown = document.getElementById(`dropdown-${tipo}`);
+        const expanded = header.getAttribute('aria-expanded') === 'true';
+        
+        // Fecha outros dropdowns
+        document.querySelectorAll('.filtro-dropdown').forEach(dd => {
+            if (dd.id !== `dropdown-${tipo}`) {
+                dd.classList.remove('active');
+                const h = dd.querySelector('.filtro-grupo-header');
+                const o = dd.querySelector('.filtro-opcoes');
+                h.setAttribute('aria-expanded', 'false');
+                o.classList.remove('open');
+            }
+        });
+        
+        // Toggle do dropdown atual
+        header.setAttribute('aria-expanded', !expanded);
+        opcoes.classList.toggle('open');
+        dropdown.classList.toggle('active');
+    }
 
-// Atualiza o contador de filtros selecionados
-function updateCount(tipo) {
-    const checkboxes = document.querySelectorAll(`#opcoes-${tipo} input[type="checkbox"]:checked`);
-    const badge = document.getElementById(`count-${tipo}`);
-    const count = checkboxes.length;
-    
-    badge.textContent = count;
-    badge.style.display = count > 0 ? 'inline-flex' : 'none';
-}
+    // Atualiza o contador de filtros selecionados
+    function updateCount(tipo) {
+        const checkboxes = document.querySelectorAll(`#opcoes-${tipo} input[type="checkbox"]:checked`);
+        const badge = document.getElementById(`count-${tipo}`);
+        const count = checkboxes.length;
+        
+        badge.textContent = count;
+        badge.style.display = count > 0 ? 'inline-flex' : 'none';
+    }
 
-// Inicializa os contadores ao carregar a página
-document.addEventListener('DOMContentLoaded', function() {
-    updateCount('deficiencia');
-    updateCount('formato');
-    updateCount('recurso');
-    
-    // Esconde badges com contador 0
-    document.querySelectorAll('.count-badge').forEach(badge => {
-        if (badge.textContent === '0') {
-            badge.style.display = 'none';
-        }
+    // Inicializa os contadores ao carregar a página
+    document.addEventListener('DOMContentLoaded', function() {
+        updateCount('deficiencia');
+        updateCount('formato');
+        updateCount('recurso');
+        
+        // Esconde badges com contador 0
+        document.querySelectorAll('.count-badge').forEach(badge => {
+            if (badge.textContent === '0') {
+                badge.style.display = 'none';
+            }
+        });
     });
-});
 
-// Fecha dropdowns ao clicar fora
-document.addEventListener('click', function(event) {
-    if (!event.target.closest('.filtro-dropdown')) {
-        document.querySelectorAll('.filtro-dropdown').forEach(dropdown => {
-            dropdown.classList.remove('active');
-            const header = dropdown.querySelector('.filtro-grupo-header');
-            const opcoes = dropdown.querySelector('.filtro-opcoes');
-            header.setAttribute('aria-expanded', 'false');
-            opcoes.classList.remove('open');
-        });
-    }
-});
+    // Fecha dropdowns ao clicar fora
+    document.addEventListener('click', function(event) {
+        if (!event.target.closest('.filtro-dropdown')) {
+            document.querySelectorAll('.filtro-dropdown').forEach(dropdown => {
+                dropdown.classList.remove('active');
+                const header = dropdown.querySelector('.filtro-grupo-header');
+                const opcoes = dropdown.querySelector('.filtro-opcoes');
+                header.setAttribute('aria-expanded', 'false');
+                opcoes.classList.remove('open');
+            });
+        }
+    });
 </script>
 {% endblock %}