wagtail-enap-designsystem 1.2.1.174__py3-none-any.whl → 1.2.1.176__py3-none-any.whl

enap_designsystem/static/enap_designsystem/blocks/carousel_images.css

@@ -3,7 +3,6 @@
     width: 100%;
     height: var(--altura-desktop);
     overflow: hidden;
-    margin-bottom: 60px;
 }
 
 .carousel-container {
@@ -164,7 +163,6 @@
     transition: all 0.3s ease;
     cursor: pointer;
     font-size: 1rem;
-    text-transform: uppercase;
     letter-spacing: 0.5px;
 }
 

enap_designsystem/static/enap_designsystem/blocks/suap/suap_courses_block.css

@@ -48,6 +48,7 @@
     text-align: center;
     margin: auto;
     padding: 60px 15px;
+    width: 100%;
 }
 .tag{
     width: 68px;

enap_designsystem/templates/enap_designsystem/blocks/card_block.html

@@ -281,13 +281,15 @@
 </div>
 
 <style>
+.card-info-white {
+    border-left: 2px solid #024248;
+}
 /* Cards Informativos */
 .card-info-white .card-info-container {
     display: flex;
     align-items: flex-start;
     gap: 20px;
-    padding: 24px;
-    border-left: 4px solid #024248;
+    padding: 0 24px;
     background-color: #FFFFFF;
     position: relative;
     flex-direction: column;

enap_designsystem/templates/enap_designsystem/blocks/suap/apisuap_courses_block.html

@@ -1,8 +1,8 @@
 <!-- enap_designsystem/blocks/suap/suap_courses_block.html -->
 {% load wagtailcore_tags wagtailimages_tags %}
 {% load static %}
-
-<section class="container suap-courses-section">
+<div style="width:100%;display: flex;justify-content: center;">
+<section class="section-curso-cards-suap">
     <div class="suap-wrapper-texts">
         {% if bloco_suap.title %}
             <h2 style="color: {{value.cor_title}}" class="suap-h2-title">{{ bloco_suap.title }}</h2>
@@ -14,7 +14,8 @@
     </div>
     
     {% if cursos_suap %}
-        <div class="suap-wrapper">
+        {% if value.estilo_cards == "eventos" %}
+        <div class="container suap-courses-section">
             <div class="suap-courses-carousel-container" id="suap-courses-carousel-container">
                 <div class="suap-courses-carousel-items" id="suap-courses-carousel-items">
                     {% for curso in cursos_suap %}
@@ -77,14 +78,18 @@
                                     {% endif %}
                                 </div>
                                 <div class="suap-courses-carousel-content">
-                                    <div class="suap-course-tag">
-                                        Curso
+                                    <div class="suap-course-tag suap-course-tag-{{ curso.tipo_conteudo }}">
+                                        {% if curso.tipo_conteudo == 'evento' %}
+                                            Evento
+                                        {% else %}
+                                            Curso
+                                        {% endif %}
                                     </div>
                                     {% if curso.descricao %}
                                         <h3 class="suap-courses-title">{{ curso.descricao }}</h3>
                                     {% endif %}
                                     {% if curso.breve_descricao %}
-                                        <p class="card-text">{{ curso.breve_descricao|truncatewords:10 }}</p>
+                                        <p class="suap-card-text">{{ curso.breve_descricao|truncatewords:10 }}</p>
                                     {% endif %}
                                     
                                     <!-- Status de inscrições -->
@@ -113,14 +118,60 @@
                     </div>
                     {% endfor %}
                 </div>
-                <button class="suap-courses-carousel-control suap-courses-carousel-control-prev">
-                    <img style="width: 40px; height: 40px;" src="{% static 'enap_designsystem/icons/iconleft.svg' %}" alt="Passar pro lado esquerdo">
+                <button class="carousel-control-curso-suap carousel-control-curso-suap-prev" style="left: 0px;">
+                    <span class="visually-hidden">Rolar para esquerda</span>
+                    <span class="material-symbols-outlined setas seta-esquerda">chevron_left</span>
+                </button>
+                <button class="carousel-control-curso-suap carousel-control-curso-suap-next" style="right: 0px;">
+                    <span class="visually-hidden">Rolar para direita</span>
+                    <span class="material-symbols-outlined setas seta-direita">chevron_right</span>
+                </button>
+            </div>
+        </div>
+        {% elif value.estilo_cards == "cursos" %}
+        <div class="wrapper-carousel-container01">
+            <div class="carousel-container01">
+                <div class="carousel-items01" id="cursos-suap-carousel">
+                    {% for curso in cursos_suap %}
+                    <a href="{{curso.url}}" class="btn1">
+                    <div class="carousel-item-wrapper-suap">
+                        <div class="carousel-item-curso-suap">
+                            <div class="image-curso">
+                                    <h3 title="{{ curso.titulo }}">
+                                            <img class="img-fluid" src="{% static 'enap_designsystem/blocks/suap/default_2.png' %}" alt="Imagem padrão com logo da Enap e fundo verde" width="236" height="140" loading="lazy">
+                                    </h3>
+                            </div>
+                            <div class="content-curso">    
+                                <div class="card-body">
+                                    <div class="tag tag-{{ curso.tipo_conteudo }}">
+                                        {% if curso.tipo_conteudo == 'evento' %}
+                                            Evento
+                                        {% else %}
+                                            Curso
+                                        {% endif %}
+                                    </div>
+                                <h3 class="h3-card" style=" display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; ">{{ curso.descricao }}</h3>
+                                <p class="card-text-text" style=" display: -webkit-box; color: #434A54; font-size: 16px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; ">{{ curso.breve_descricao }}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    </a>
+                    {% endfor %}
+                </div>
+                
+                <button class="carousel-control-curso-suap carousel-control-curso-suap-prev">
+                    <span class="visually-hidden">Rolar para esquerda</span>
+                    <span class="material-symbols-outlined setas seta-esquerda">chevron_left</span>
                 </button>
-                <button class="suap-courses-carousel-control suap-courses-carousel-control-next">
-                    <img style="width: 40px; height: 40px;" src="{% static 'enap_designsystem/icons/iconrig.svg' %}" alt="Passar pro lado direito">
+                <button class="carousel-control-curso-suap carousel-control-curso-suap-next">
+                    <span class="visually-hidden">Rolar para direita</span>
+                    <span class="material-symbols-outlined setas seta-direita">chevron_right</span>
                 </button>
+                
             </div>
         </div>
+        {% endif %}
         {% if bloco_suap.url_button %}
         <a class="suap-btn-todos" href="{{ bloco_suap.url_button }}">{{ bloco_suap.button }}</a>
         {% endif %}
@@ -133,8 +184,12 @@
         {% endif %}
     {% endif %}
 </section>
-
+</div>
 <style>
+
+    .carousel-item-curso-suap{
+        background-color: #FFFFFF;
+    }
     .suap-course-inscricoes {
         margin: 8px 0;
         font-size: 14px;
@@ -178,7 +233,7 @@
         flex-direction: column;
         gap: 40px;
         overflow: hidden;
-        padding: 45px 0;
+        padding: 0;
     }
     
     .suap-wrapper-texts {
@@ -212,6 +267,7 @@
         position: relative;
         max-width: 1142px;
         margin: auto;
+        width: 100%;
     }
     
     .suap-courses-carousel-items {
@@ -378,6 +434,10 @@
         font-style: italic;
     }
     
+    .carousel-control-curso-suap {
+        display: block;
+    }
+    
     /* Estilos responsivos */
     @media (max-width: 992px) {
         .suap-courses-section {
@@ -468,215 +528,171 @@
 
 <script>
     document.addEventListener('DOMContentLoaded', function() {
-        // Selecionar elementos do DOM
-        const container = document.getElementById('suap-courses-carousel-container');
-        const carouselItems = document.getElementById('suap-courses-carousel-items');
-        const prevBtn = document.querySelector('.suap-courses-carousel-control-prev');
-        const nextBtn = document.querySelector('.suap-courses-carousel-control-next');
-        const items = carouselItems.querySelectorAll('.suap-courses-carousel-item');
-        
-        // Variáveis de controle
-        let currentIndex = 0;
-        let startX, moveX, initialPosition;
-        let isDragging = false;
-        
-        // Dimensões fixas dos itens - IMPORTANTE para alinhamento correto
-        const itemWidth = 364; // Largura do item
-        const itemGap = 25;    // Espaçamento entre itens
-        const itemTotalWidth = itemWidth + itemGap; // Largura total de cada item + gap
-        
-        // Adicionar padding ao contêiner para garantir alinhamento correto dos cards
-        container.style.paddingLeft = '0px';
-        container.style.paddingRight = '0px';
-        
-        // Verifica se é dispositivo móvel
-        function isMobile() {
-            return window.innerWidth <= 768;
-        }
-        
-        // Determina quantos itens são visíveis na viewport atual
-        function getVisibleItems() {
-            const containerWidth = container.offsetWidth;
-            return Math.max(1, Math.floor(containerWidth / itemTotalWidth));
-        }
-        
-        // Calcula o índice máximo possível
-        function getMaxIndex() {
-            return Math.max(0, items.length - getVisibleItems());
-        }
-        
-        // Define quantos itens devem ser rolados de cada vez
-        function getScrollAmount() {
-            return isMobile() ? 1 : 3; // 1 no mobile, 3 no desktop
-        }
-        
-        // Exibe o slide no índice especificado com alinhamento perfeito
-        function showSlide(index) {
-            // Garante que o índice esteja dentro dos limites válidos
-            const maxIndex = getMaxIndex();
-            currentIndex = Math.max(0, Math.min(index, maxIndex));
-            
-            // Calcula o offset preciso baseado no índice atual
-            const offset = Math.round(currentIndex * itemTotalWidth);
-            
-            // Aplica a transformação com valor inteiro para evitar problemas de subpixel
-            carouselItems.style.transform = `translateX(-${offset}px)`;
-            
-            // Atualiza a visibilidade dos botões de navegação
-            updateButtons(maxIndex);
-        }
-        
-        // Atualiza a visibilidade dos botões de navegação
-        function updateButtons(maxIndex) {
-            // Primeiro slide: esconde botão anterior
-            if (currentIndex <= 0) {
-                prevBtn.style.display = 'none';
-                nextBtn.style.display = items.length > getVisibleItems() ? 'block' : 'none';
-            } 
-            // Último slide: esconde botão próximo
-            else if (currentIndex >= maxIndex) {
-                prevBtn.style.display = 'block';
-                nextBtn.style.display = 'none';
-            } 
-            // Slides intermediários: mostra ambos os botões
-            else {
-                prevBtn.style.display = 'block';
-                nextBtn.style.display = 'block';
+        // Função genérica para inicializar um carrossel
+        function initCarousel({
+            containerSelector,
+            itemsSelector,
+            prevBtnSelector,
+            nextBtnSelector,
+            itemWidth,
+            itemGap,
+            useItemsAsContainer = false // NOVO: permite usar o próprio items como container
+        }) {
+            const container = document.querySelector(containerSelector);
+            const carouselItems = container ? container.querySelector(itemsSelector) : null;
+            const prevBtn = container ? container.querySelector(prevBtnSelector) : null;
+            const nextBtn = container ? container.querySelector(nextBtnSelector) : null;
+            if (!container || !carouselItems || !prevBtn || !nextBtn) return;
+            const items = carouselItems.querySelectorAll(':scope > *');
+            let currentIndex = 0;
+            let startX, moveX, initialPosition;
+            let isDragging = false;
+            const itemTotalWidth = itemWidth + itemGap;
+
+            function isMobile() {
+                return window.innerWidth <= 768;
             }
-        }
-        
-        // Configurar eventos de botões de navegação
-        prevBtn.addEventListener('click', () => {
-            // Número de itens a retroceder depende do dispositivo
-            const amount = getScrollAmount();
-            const step = Math.min(amount, currentIndex);
-            showSlide(currentIndex - step);
-        });
-        
-        nextBtn.addEventListener('click', () => {
-            // Número de itens a avançar depende do dispositivo
-            const amount = getScrollAmount();
-            const maxIndex = getMaxIndex();
-            const step = Math.min(amount, maxIndex - currentIndex);
-            showSlide(currentIndex + step);
-        });
-        
-        // Eventos de toque para mobile
-        carouselItems.addEventListener('touchstart', handleStart, { passive: true });
-        carouselItems.addEventListener('touchmove', handleMove, { passive: false });
-        carouselItems.addEventListener('touchend', handleEnd, { passive: true });
-        
-        // Eventos de mouse para desktop
-        carouselItems.addEventListener('mousedown', handleStart);
-        carouselItems.addEventListener('mousemove', handleMove);
-        carouselItems.addEventListener('mouseup', handleEnd);
-        carouselItems.addEventListener('mouseleave', handleEnd);
-        
-        // Inicia o arrasto do carousel
-        function handleStart(e) {
-            isDragging = true;
-            startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
-            initialPosition = currentIndex * itemTotalWidth;
-            
-            // Remove transição para resposta imediata
-            carouselItems.style.transition = 'none';
-        }
-        
-        // Processa o movimento durante o arrasto
-        function handleMove(e) {
-            if (!isDragging) return;
-            
-            moveX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
-            const diff = moveX - startX;
-            
-            // Aplica o movimento com efeito elástico nos limites
-            const maxIndex = getMaxIndex();
-            
-            if (currentIndex === 0 && diff > 50) {
-                // Limite inicial com efeito elástico
-                carouselItems.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
-            } else if (currentIndex >= maxIndex && diff < -50) {
-                // Limite final com efeito elástico
-                carouselItems.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
-            } else {
-                // Movimento normal
-                carouselItems.style.transform = `translateX(${diff - initialPosition}px)`;
+            function getVisibleItems() {
+                // Use o próprio items como container se necessário
+                const base = useItemsAsContainer ? carouselItems : container;
+                const containerWidth = base.offsetWidth;
+                return Math.max(1, Math.floor(containerWidth / itemTotalWidth));
             }
-            
-            // Previne o scroll da página durante o arrasto horizontal
-            if (Math.abs(diff) > 10 && e.type === 'touchmove') {
-                e.preventDefault();
+            function getMaxIndex() {
+                return Math.max(0, items.length - getVisibleItems());
             }
-        }
-        
-        // Finaliza o arrasto do carousel
-        function handleEnd() {
-            if (!isDragging) return;
-            isDragging = false;
-            
-            // Restaura a transição suave
-            carouselItems.style.transition = 'transform 0.3s ease-in-out';
-            
-            // Determina se o movimento foi significativo para mudar o slide
-            const diff = moveX - startX;
-            const threshold = itemWidth / 4; // 25% da largura do item
-            
-            if (diff > threshold) {
-                // Swipe para direita (voltar)
+            function getScrollAmount() {
+                return isMobile() ? 1 : 3;
+            }
+            function showSlide(index) {
+                const maxIndex = getMaxIndex();
+                currentIndex = Math.max(0, Math.min(index, maxIndex));
+                const offset = Math.round(currentIndex * itemTotalWidth);
+                carouselItems.style.transform = `translateX(-${offset}px)`;
+                updateButtons(maxIndex);
+            }
+            function updateButtons(maxIndex) {
+                if (currentIndex <= 0) {
+                    prevBtn.style.display = 'none';
+                    nextBtn.style.display = items.length > getVisibleItems() ? 'block' : 'none';
+                } else if (currentIndex >= maxIndex) {
+                    prevBtn.style.display = 'block';
+                    nextBtn.style.display = 'none';
+                } else {
+                    prevBtn.style.display = 'block';
+                    nextBtn.style.display = 'block';
+                }
+            }
+            prevBtn.addEventListener('click', () => {
                 const amount = getScrollAmount();
                 const step = Math.min(amount, currentIndex);
                 showSlide(currentIndex - step);
-            } else if (diff < -threshold) {
-                // Swipe para esquerda (avançar)
+            });
+            nextBtn.addEventListener('click', () => {
                 const amount = getScrollAmount();
                 const maxIndex = getMaxIndex();
                 const step = Math.min(amount, maxIndex - currentIndex);
                 showSlide(currentIndex + step);
-            } else {
-                // Movimento pequeno, volta à posição atual
-                showSlide(currentIndex);
-            }
-        }
-        
-        // Previne cliques em links durante arrasto
-        const links = carouselItems.querySelectorAll('a');
-        links.forEach(link => {
-            link.addEventListener('click', function(e) {
-                if (isDragging || (moveX && Math.abs(moveX - startX) > 10)) {
-                    e.preventDefault();
-                }
             });
-        });
-        
-        // Adapta o carousel quando a janela é redimensionada
-        window.addEventListener('resize', function() {
-            // Força uma pausa antes de recalcular para garantir medidas corretas
-            setTimeout(function() {
-                // Recalcula índices e posição
+            carouselItems.addEventListener('touchstart', handleStart, { passive: true });
+            carouselItems.addEventListener('touchmove', handleMove, { passive: false });
+            carouselItems.addEventListener('touchend', handleEnd, { passive: true });
+            carouselItems.addEventListener('mousedown', handleStart);
+            carouselItems.addEventListener('mousemove', handleMove);
+            carouselItems.addEventListener('mouseup', handleEnd);
+            carouselItems.addEventListener('mouseleave', handleEnd);
+
+            function handleStart(e) {
+                isDragging = true;
+                startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
+                initialPosition = currentIndex * itemTotalWidth;
+                carouselItems.style.transition = 'none';
+            }
+            function handleMove(e) {
+                if (!isDragging) return;
+                moveX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
+                const diff = moveX - startX;
                 const maxIndex = getMaxIndex();
-                if (currentIndex > maxIndex) {
-                    currentIndex = maxIndex;
+                if (currentIndex === 0 && diff > 50) {
+                    carouselItems.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
+                } else if (currentIndex >= maxIndex && diff < -50) {
+                    carouselItems.style.transform = `translateX(${diff / 3 - initialPosition}px)`;
+                } else {
+                    carouselItems.style.transform = `translateX(${diff - initialPosition}px)`;
                 }
-                
-                // Restaura transição para animação suave
-                carouselItems.style.transition = 'transform 0.3s ease-in-out';
-                
-                // Atualiza a exibição
-                showSlide(currentIndex);
-            }, 100);
-        });
-        
-        // Aguardar que todas as imagens carreguem para inicializar corretamente
-        window.addEventListener('load', function() {
-            // Inicializa com um pequeno delay para garantir medidas corretas
-            setTimeout(function() {
-                // Certificar que os estilos estão aplicados antes de inicializar
+                if (Math.abs(diff) > 10 && e.type === 'touchmove') {
+                    e.preventDefault();
+                }
+            }
+            function handleEnd() {
+                if (!isDragging) return;
+                isDragging = false;
                 carouselItems.style.transition = 'transform 0.3s ease-in-out';
-                showSlide(0);
-            }, 100);
-        });
-        
-        // Inicializa o carousel (também será inicializado no evento load)
-        showSlide(0);
+                const diff = moveX - startX;
+                const threshold = itemWidth / 4;
+                if (diff > threshold) {
+                    const amount = getScrollAmount();
+                    const step = Math.min(amount, currentIndex);
+                    showSlide(currentIndex - step);
+                } else if (diff < -threshold) {
+                    const amount = getScrollAmount();
+                    const maxIndex = getMaxIndex();
+                    const step = Math.min(amount, maxIndex - currentIndex);
+                    showSlide(currentIndex + step);
+                } else {
+                    showSlide(currentIndex);
+                }
+            }
+            const links = carouselItems.querySelectorAll('a');
+            links.forEach(link => {
+                link.addEventListener('click', function(e) {
+                    if (isDragging || (moveX && Math.abs(moveX - startX) > 10)) {
+                        e.preventDefault();
+                    }
+                });
+            });
+            window.addEventListener('resize', function() {
+                setTimeout(function() {
+                    const maxIndex = getMaxIndex();
+                    if (currentIndex > maxIndex) {
+                        currentIndex = maxIndex;
+                    }
+                    carouselItems.style.transition = 'transform 0.3s ease-in-out';
+                    showSlide(currentIndex);
+                }, 100);
+            });
+            window.addEventListener('load', function() {
+                setTimeout(function() {
+                    carouselItems.style.transition = 'transform 0.3s ease-in-out';
+                    showSlide(0);
+                }, 100);
+            });
+            showSlide(0);
+        }
+
+        // Inicializa carrossel de eventos (cards grandes)
+        if (document.getElementById('suap-courses-carousel-container')) {
+            initCarousel({
+                containerSelector: '#suap-courses-carousel-container',
+                itemsSelector: '#suap-courses-carousel-items',
+                prevBtnSelector: '.carousel-control-curso-suap-prev',
+                nextBtnSelector: '.carousel-control-curso-suap-next',
+                itemWidth: 364,
+                itemGap: 25
+            });
+        }
+
+        // Inicializa carrossel de cursos (cards pequenos) - usa items como container base
+        if (document.querySelector('.carousel-container01')) {
+            initCarousel({
+                containerSelector: '.carousel-container01',
+                itemsSelector: '.carousel-items01',
+                prevBtnSelector: '.carousel-control-curso-suap-prev',
+                nextBtnSelector: '.carousel-control-curso-suap-next',
+                itemWidth: 268,
+                itemGap: 25,
+                useItemsAsContainer: true // NOVO: corrige cálculo de largura
+            });
+        }
     });
 </script>

enap_designsystem/templates/enap_designsystem/blocks/texto_imagem.html

@@ -13,7 +13,7 @@
             {% if value.incluir_botao and value.texto_botao %}
                 <div class="texto-imagem-block__botao-container">
                     <a href="{{ value.link_botao|default:'#' }}" 
-                       class="btn {% if value.estilo_botao == 'primary' %} primary {% elif value.estilo_botao == 'secondary' %}secondary {% elif value.estilo_botao == 'terciary' %}terciary {% endif %}"
+                       class="btn {{ value.estilo_botao }} {{ value.tamanho_botao }}"
                        {% if value.link_botao and value.link_botao|slice:':4' == 'http' %}
                            target="_blank" rel="noopener noreferrer"
                        {% endif %}>