wagtail-enap-designsystem 1.2.1.105__py3-none-any.whl → 1.2.1.107__py3-none-any.whl

enap_designsystem/templates/enap_designsystem/blocks/page/pagenoticias_block.html

@@ -9,7 +9,7 @@
         <h3 class="sub-title">Fique sabendo de tudo o que acontece na Enap</h3>
     </div>
 
-    <!-- Desktop: Layout Original (COM LEGENDA HOME) -->
+    <!-- Desktop: Layout Original -->
     <div class="news-grid-container desktop-only">
         {% for page in pages %}
             {% if forloop.first %}
@@ -35,7 +35,6 @@
                             <div class="news-main-overlay">
                                 <h3 class="news-main-title">{{ page.title }}</h3>
                                 
-                                {# NOVO: Usa legenda_home com fallbacks inteligentes #}
                                 {% if page.specific.legenda_home %}
                                     <p class="news-main-text">{{ page.specific.legenda_home|truncatewords:25 }}</p>
                                 {% elif page.specific.subtitulo %}
@@ -55,12 +54,10 @@
                     </a>
                 </div>
             {% else %}
-                <!-- Primeira iteração das notícias secundárias -->
                 {% if forloop.counter == 2 %}
                     <div class="news-grid-secondary">
                 {% endif %}
                 
-                <!-- Notícias Secundárias (pequenas) -->
                 <div class="news-secondary-item">
                     <div class="news-secondary-image">
                         {% if page.specific.imagem_externa %}
@@ -74,7 +71,7 @@
                                 <img class="img-fluid" src="{{ sec_img.url }}" alt="{{ sec_img.title }}">
                             </a>
                         {% elif page.cover_image %}
-                            {% image page.cover_image original format-webp format-webp preserve-svg as sec_img %}
+                            {% image page.cover_image original format-webp preserve-svg as sec_img %}
                             <a href="{% pageurl page %}" title="{{ page.title }}">
                                 <img class="img-fluid" src="{{ sec_img.url }}" alt="{{ sec_img.title }}">
                             </a>
@@ -88,11 +85,8 @@
                     </div>
                     <a href="{% pageurl page %}">
                         <div class="news-secondary-content">
-                            <h4 class="news-secondary-title">
-                                {{ page.title }}
-                            </h4>
+                            <h4 class="news-secondary-title">{{ page.title }}</h4>
                             
-                            {# NOVO: Usa legenda_home com fallbacks inteligentes #}
                             {% if page.specific.legenda_home %}
                                 <p class="news-secondary-text">{{ page.specific.legenda_home|truncatewords:15 }}</p>
                             {% elif page.specific.subtitulo %}
@@ -119,13 +113,12 @@
             </div>
         {% endfor %}
         
-        <!-- Fechar div das notícias secundárias se houver pelo menos 2 notícias -->
         {% if pages|length > 1 %}
             </div>
         {% endif %}
     </div>
 
-    <!-- Mobile: Carrossel COM LEGENDA HOME -->
+    <!-- Mobile: Carrossel -->
     <div class="news-carousel-container mobile-only">
         <div class="news-carousel" id="newsCarousel">
             <div class="news-carousel-track" id="carouselTrack">
@@ -155,7 +148,6 @@
                                     </div>
                                     <h3 class="news-carousel-title">{{ page.title }}</h3>
                                     
-                                    {# NOVO: Usa legenda_home com fallbacks inteligentes #}
                                     {% if page.specific.legenda_home %}
                                         <p class="news-carousel-text">{{ page.specific.legenda_home|truncatewords:20 }}</p>
                                     {% elif page.specific.subtitulo %}
@@ -179,16 +171,6 @@
             </div>
         </div>
         
-        <!-- Controles do Carrossel -->
-        <div class="carousel-controls" style="display: none;">
-            <button class="carousel-btn carousel-prev" id="prevBtn" aria-label="Notícia anterior">
-                <i class="fa fa-chevron-left"></i>
-            </button>
-            <button class="carousel-btn carousel-next" id="nextBtn" aria-label="Próxima notícia">
-                <i class="fa fa-chevron-right"></i>
-            </button>
-        </div>
-        
         <!-- Indicadores -->
         <div class="carousel-indicators" id="carouselIndicators">
             {% for page in pages %}
@@ -204,9 +186,8 @@
     </div>
 </section>
 
-
 <style>
-    /* === ESTILOS ORIGINAIS DO DESKTOP (INALTERADOS) === */
+    /* === ESTILOS BÁSICOS === */
     .btn-todos {
         display: flex;
         align-items: center;
@@ -221,24 +202,15 @@
         font-weight: 600;
         margin: 0 auto;
         width: fit-content;
+        transition: all 0.3s ease;
     }
 
-    .news-secondary-date{
-        font-size: 12px;
-        color: #525155;
-    }
-    
     .btn-todos:hover {
         color: white;
         background-color: #006969;
         border: 1px solid #006969;
     }
 
-    .btn-todos:active {
-        color: #025257;
-        border: 1px solid #025257;
-    }
-
     .sub-title {
         font-size: 20px;
         font-weight: 400;
@@ -263,6 +235,7 @@
         margin-bottom: 40px;
     }
 
+    /* === DESKTOP GRID === */
     .news-grid-container {
         display: grid;
         grid-template-columns: 1fr 1fr;
@@ -270,7 +243,6 @@
         margin-bottom: 40px;
     }
 
-    /* Notícia Principal */
     .news-grid-main {
         position: relative;
         border-radius: 12px;
@@ -294,7 +266,7 @@
 
     .news-main-image {
         width: 100%;
-        height: 100%;
+        height: 100%; /* Altura fixa para Safari */
         overflow: hidden;
         position: relative;
     }
@@ -304,7 +276,6 @@
         height: 100%;
         object-fit: cover;
         transition: transform 0.3s ease;
-        min-width: 100%;
     }
 
     .news-grid-main:hover .news-main-image img {
@@ -332,10 +303,15 @@
     .news-main-text {
         color: rgba(255, 255, 255, 0.9);
         line-height: 1.6;
-        margin: 0;
+        margin: 0 0 10px 0;
         font-size: 16px;
     }
 
+    .news-main-date {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.8);
+    }
+
     /* Notícias Secundárias */
     .news-grid-secondary {
         display: flex;
@@ -348,7 +324,7 @@
         gap: 15px;
         background: white;
         border-radius: 8px;
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        transition: transform 0.3s ease;
     }
 
     .news-secondary-item:hover {
@@ -361,8 +337,8 @@
     }
 
     .news-secondary-image {
-        width:150px;
-        height: 100%;
+        width: 150px;
+        height: 100%; /* Altura fixa */
         border-radius: 6px;
         overflow: hidden;
         flex-shrink: 0;
@@ -372,7 +348,7 @@
         width: 100%;
         height: 100%;
         object-fit: cover;
-        min-width: 100%;
+        transition: transform 0.3s ease;
     }
 
     .news-secondary-content {
@@ -391,20 +367,6 @@
         color: #007D7A;
     }
 
-    .news-secondary-title a {
-        color: #007D7A;
-        text-decoration: none;
-        transition: color 0.3s ease;
-    }
-
-    .news-secondary-title p :hover {
-        color: #006969;
-    }
-
-    .news-secondary-title a p h4 a:hover {
-        color: #006969;
-    }
-
     .news-secondary-text {
         font-size: 14px;
         color: #525155;
@@ -412,7 +374,13 @@
         margin: 0;
     }
 
-    /* Placeholders para imagens */
+    .news-secondary-date {
+        font-size: 12px;
+        color: #525155;
+        margin-top: 5px;
+    }
+
+    /* Placeholders */
     .no-image-placeholder {
         display: flex;
         flex-direction: column;
@@ -459,7 +427,7 @@
         font-size: 18px;
     }
 
-    /* === NOVOS ESTILOS PARA MOBILE CARROSSEL === */
+    /* === CARROSSEL MOBILE === */
     .news-carousel-container {
         position: relative;
         margin-bottom: 40px;
@@ -468,14 +436,14 @@
     .news-carousel {
         overflow: hidden;
         margin-bottom: 20px;
-        padding: 0 ;
-        height: 50vh; 
+        padding: 0;
+        height: 50vh;
+        min-height: 300px;
     }
 
     .news-carousel-track {
         display: flex;
         transition: transform 0.3s ease;
-        will-change: transform;
         height: 100%;
     }
 
@@ -483,6 +451,7 @@
         flex: 0 0 70vw;
         position: relative;
         margin-right: 15px;
+        height: 100%;
     }
 
     .news-carousel-link {
@@ -490,11 +459,12 @@
         position: relative;
         text-decoration: none;
         color: inherit;
+        height: 100%;
     }
 
     .news-carousel-image {
         width: 100%;
-        height: 250px;
+        height: 100%;
         overflow: hidden;
         position: relative;
         border-radius: 12px;
@@ -532,8 +502,14 @@
         font-size: 14px;
     }
 
+    .news-carousel-date {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.8);
+        margin-bottom: 10px;
+    }
+
     .carousel-placeholder {
-        height: 250px;
+        height: 100%;
         font-size: 32px;
         background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
     }
@@ -543,48 +519,6 @@
         margin-top: 8px;
     }
 
-    /* Controles do Carrossel */
-    .carousel-controls {
-        display: flex;
-        justify-content: space-between;
-        position: absolute;
-        top: 50%;
-        left: 0;
-        right: 0;
-        transform: translateY(-50%);
-        padding: 0 15px;
-        pointer-events: none;
-    }
-
-    .carousel-btn {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-        background: rgba(255, 255, 255, 0.9);
-        border: none;
-        color: #007D7A;
-        font-size: 16px;
-        cursor: pointer;
-        pointer-events: all;
-        transition: all 0.3s ease;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .carousel-btn:hover {
-        background: white;
-        transform: scale(1.1);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    }
-
-    .carousel-btn:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        transform: none;
-    }
-
     /* Indicadores */
     .carousel-indicators {
         display: flex;
@@ -610,36 +544,20 @@
 
     /* === RESPONSIVIDADE === */
     .mobile-only {
-        display: none !important;
+        display: none;
     }
 
     .desktop-only {
         display: grid;
     }
 
-    /* Força esconder carrossel no desktop */
-    .news-carousel-container {
-        display: none !important;
-    }
-
     @media (max-width: 768px) {
         .mobile-only {
-            display: block !important;
+            display: block;
         }
 
         .desktop-only {
-            display: none !important;
-        }
-
-        /* Força mostrar carrossel no mobile */
-        .news-carousel-container.mobile-only {
-            display: block !important;
-            height: 55vh;
-        }
-
-        /* Força esconder grid no mobile */
-        .news-grid-container.desktop-only {
-            display: none !important;
+            display: none;
         }
 
         .news-section {
@@ -661,10 +579,19 @@
             margin-top: 10px;
         }
 
-        .news-carousel-image {
+        .news-carousel-container {
+            height: 55vh;
+            min-height: 320px;
+        }
+
+        .news-carousel {
             height: 100%;
         }
 
+        .news-carousel-slide {
+            flex: 0 0 75vw;
+        }
+
         .news-carousel-title {
             font-size: 16px;
         }
@@ -672,12 +599,6 @@
         .news-carousel-text {
             font-size: 13px;
         }
-
-        .carousel-btn {
-            width: 35px;
-            height: 35px;
-            font-size: 14px;
-        }
     }
 
     @media (max-width: 480px) {
@@ -689,18 +610,58 @@
             font-size: 28px;
         }
 
-        .news-carousel-image {
-            height: 100%;
+        .news-carousel-slide {
+            flex: 0 0 85vw;
         }
 
-        .carousel-controls {
-            padding: 0 10px;
+        .news-carousel-container {
+            height: 45vh;
+            min-height: 280px;
         }
+    }
 
-        .carousel-btn {
-            width: 32px;
-            height: 32px;
-            font-size: 12px;
+    /* === CORREÇÕES ESPECÍFICAS PARA SAFARI === */
+
+    /* Safari iOS - altura do viewport */
+    @supports (-webkit-touch-callout: none) {
+        .news-carousel {
+            height: -webkit-fill-available;
+        }
+    }
+
+    /* Safari - prefixos essenciais */
+    .news-carousel-track {
+        -webkit-transform: translateX(0);
+        transform: translateX(0);
+    }
+
+    .btn-todos {
+        -webkit-appearance: none;
+    }
+
+    .carousel-indicator {
+        -webkit-appearance: none;
+    }
+
+    /* Safari - smooth scrolling */
+    .news-carousel {
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* Fallback para Safari sem object-fit */
+    @supports not (object-fit: cover) {
+        .news-main-image,
+        .news-secondary-image,
+        .news-carousel-image {
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+        }
+        
+        .news-main-image img,
+        .news-secondary-image img,
+        .news-carousel-image img {
+            opacity: 0;
         }
     }
 </style>
@@ -709,8 +670,6 @@
 document.addEventListener('DOMContentLoaded', function() {
     const carousel = document.getElementById('newsCarousel');
     const track = document.getElementById('carouselTrack');
-    const prevBtn = document.getElementById('prevBtn');
-    const nextBtn = document.getElementById('nextBtn');
     const indicators = document.getElementById('carouselIndicators');
     
     if (!carousel || !track) return;
@@ -728,9 +687,19 @@ document.addEventListener('DOMContentLoaded', function() {
         if (slideIndex >= totalSlides) slideIndex = totalSlides - 1;
         
         currentSlide = slideIndex;
-        const slideWidth = 70; // 70vw
-        const spacing = 4; // espaçamento aproximado em vw
+        
+        // Calcular largura do slide baseado no viewport
+        let slideWidth = 70; // padrão desktop
+        
+        if (window.innerWidth <= 480) {
+            slideWidth = 85;
+        } else if (window.innerWidth <= 768) {
+            slideWidth = 75;
+        }
+        
+        const spacing = 4; // espaçamento em vw
         const translateX = -(slideIndex * (slideWidth + spacing));
+        
         track.style.transform = `translateX(${translateX}vw)`;
         
         // Atualizar indicadores
@@ -740,19 +709,6 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
-    // Event listeners para botões
-    if (prevBtn) {
-        prevBtn.addEventListener('click', () => {
-            goToSlide(currentSlide - 1);
-        });
-    }
-
-    if (nextBtn) {
-        nextBtn.addEventListener('click', () => {
-            goToSlide(currentSlide + 1);
-        });
-    }
-
     // Event listeners para indicadores
     if (indicators) {
         indicators.addEventListener('click', (e) => {
@@ -763,7 +719,7 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
-    // Touch/swipe support
+    // Touch/swipe - SIMPLES E FUNCIONAL
     track.addEventListener('touchstart', (e) => {
         startX = e.touches[0].clientX;
         isDragging = true;
@@ -775,10 +731,18 @@ document.addEventListener('DOMContentLoaded', function() {
         
         currentX = e.touches[0].clientX;
         const diffX = currentX - startX;
-        const slideWidth = 70; // 70vw
-        const spacing = 4; // espaçamento aproximado em vw
+        
+        // Converter para vw
+        const diffXInVw = (diffX / window.innerWidth) * 100;
+        
+        // Calcular posição atual
+        let slideWidth = 70;
+        if (window.innerWidth <= 480) slideWidth = 85;
+        else if (window.innerWidth <= 768) slideWidth = 75;
+        
+        const spacing = 4;
         const currentTranslate = -(currentSlide * (slideWidth + spacing));
-        const newTranslate = currentTranslate + (diffX / window.innerWidth * 100);
+        const newTranslate = currentTranslate + diffXInVw;
         
         track.style.transform = `translateX(${newTranslate}vw)`;
     });
@@ -803,14 +767,6 @@ document.addEventListener('DOMContentLoaded', function() {
         }
     });
 
-    // Auto-play (desabilitado para melhor UX com swipe)
-    // Usuário controla totalmente com swipe
-
-    // Inicializar
-    goToSlide(0);
-    
-    // Remover autoplay - usuário controla com swipe
-
     // Keyboard navigation
     document.addEventListener('keydown', (e) => {
         if (e.key === 'ArrowLeft') {
@@ -819,6 +775,18 @@ document.addEventListener('DOMContentLoaded', function() {
             goToSlide(currentSlide + 1);
         }
     });
+
+    // Resize handler
+    let resizeTimeout;
+    window.addEventListener('resize', () => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
+            goToSlide(currentSlide);
+        }, 100);
+    });
+
+    // Inicializar
+    goToSlide(0);
 });
 </script>
 

enap_designsystem/templates/enap_designsystem/blocks/preview_courses.html

@@ -124,6 +124,50 @@
             // Reposiciona o carousel na posição atual
             showSlide(currentIndex);
         }
+
+        // SCROLL FLUIDO com trackpad/mouse wheel
+sliderContainer.addEventListener('wheel', function(e) {
+    if (Math.abs(e.deltaX) > 0) {
+        e.preventDefault();
+        
+        // Obter posição atual do transform
+        const currentTransform = sliderTrack.style.transform;
+        const match = currentTransform.match(/translateX\((-?\d*\.?\d*)px\)/);
+        let currentOffset = match ? parseFloat(match[1]) : 0;
+        
+        // Movimento proporcional
+        const scrollMultiplier = 1.5;
+        const newOffset = currentOffset - (e.deltaX * scrollMultiplier);
+        
+        // Limites
+        const maxOffset = 0;
+        const minOffset = -(maxIndex * (slideWidth + slideMargin));
+        
+        // Resistência nas bordas
+        let finalOffset = newOffset;
+        if (newOffset > maxOffset) {
+            finalOffset = maxOffset + ((newOffset - maxOffset) * 0.3);
+        } else if (newOffset < minOffset) {
+            finalOffset = minOffset + ((newOffset - minOffset) * 0.3);
+        }
+        
+        // Aplicar posição
+        sliderTrack.style.transition = 'none';
+        sliderTrack.style.transform = `translateX(${finalOffset}px)`;
+        
+        // Atualizar currentIndex baseado na posição
+        const newIndex = Math.round(Math.abs(finalOffset) / (slideWidth + slideMargin));
+        currentIndex = Math.max(0, Math.min(newIndex, maxIndex));
+        updateNavigationButtons();
+        
+        // Snap quando parar de rolar
+        clearTimeout(window.snapTimeout);
+        window.snapTimeout = setTimeout(() => {
+            sliderTrack.style.transition = 'transform 0.5s ease-in-out';
+            showSlide(currentIndex);
+        }, 150);
+    }
+}, { passive: false });
         
         // Função para atualizar a visibilidade dos botões de navegação
         function updateNavigationButtons() {
@@ -228,6 +272,9 @@
         // Inicialização
         updateSlideWidth();
     });
+
+
+    
 </script>
 {% endblock content %}
 {% endblock block_render %}