Corregir Top Notification Bar según template fuente real

PROBLEMA:
- Implementación previa NO coincidía con template fuente apus-theme-template/index.html
- HTML tenía estructura compleja con spans responsive e i18n
- CSS cargaba archivo separado notification-bar.css (253 líneas) con animaciones innecesarias
- Faltaban variables de color APU en style.css

SOLUCIÓN:
1. header.php (líneas 23-32):
   - Reemplazado HTML complejo con estructura simple del template
   - Eliminado texto responsive innecesario
   - Cambiado de múltiples <span> a un solo <span><strong>Nuevo:</strong> texto</span>
   - Agregado clases text-white y text-decoration-underline al enlace

2. assets/css/style.css:
   - Agregadas variables de color APU (líneas 49-55):
     --color-navy-dark, --color-navy-primary, --color-orange-primary, etc.
   - Agregado CSS de Top Notification Bar (líneas 658-685)
   - Solo 28 líneas de CSS limpio sin animaciones ni JavaScript

3. inc/enqueue-scripts.php:
   - Comentada función apus_enqueue_notification_bar_assets()
   - CSS ahora en style.css principal, no en archivo separado
   - Componente no requiere JavaScript

FUENTE DE VERDAD:
- apus-theme-template/index.html (líneas 55-63)
- apus-theme-template/css/style.css (líneas 57-80)

ISSUE: #97

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-06 18:41:08 -06:00
parent 071d562f15
commit c1467b5c32
3 changed files with 47 additions and 10 deletions

View File

@@ -46,6 +46,14 @@
--color-text: #212529; /* Contrast ratio 15.52:1 against white */
--color-bg: #ffffff;
/* APU Template Colors (from apus-theme-template/css/style.css) */
--color-navy-dark: #0E2337;
--color-navy-primary: #1e3a5f;
--color-navy-light: #2c5282;
--color-orange-primary: #FF8600;
--color-orange-hover: #FF6B35;
--color-orange-light: #FFB800;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
@@ -646,3 +654,32 @@ img {
font-size: 2rem;
}
}
/* ==========================================================================
TOP NOTIFICATION BAR (from apus-theme-template/css/style.css lines 57-80)
========================================================================== */
.top-notification-bar {
background-color: var(--color-navy-dark);
color: #ffffff;
padding: 0.5rem 0;
font-size: 0.9rem;
text-align: center;
}
.top-notification-bar strong {
color: var(--color-orange-primary);
}
.top-notification-bar i {
color: var(--color-orange-primary);
}
.top-notification-bar a {
color: #ffffff;
transition: color 0.3s ease;
}
.top-notification-bar a:hover {
color: var(--color-orange-primary);
}

View File

@@ -20,19 +20,13 @@
<body <?php body_class(); ?> data-bs-spy="scroll" data-bs-target=".toc-container" data-bs-offset="100">
<?php wp_body_open(); ?>
<!-- Top Notification Bar (Template líneas 255-262) -->
<div id="topNotificationBar" class="top-notification-bar">
<!-- Top Notification Bar (Template líneas 55-63) -->
<div class="top-notification-bar">
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<i class="bi bi-megaphone-fill me-2"></i>
<span class="notification-text">
<span class="text-highlight"><?php esc_html_e('Nuevo:', 'apus-theme'); ?></span>
<span class="d-none d-md-inline"><?php esc_html_e('Accede a 200,000+ APUs actualizados para 2025', 'apus-theme'); ?></span>
<span class="d-md-none"><?php esc_html_e('200K+ APUs 2025', 'apus-theme'); ?></span>
</span>
<a href="<?php echo esc_url(home_url('/catalogo')); ?>" class="ms-2 notification-link">
<?php esc_html_e('Ver Catálogo', 'apus-theme'); ?>
</a>
<span><strong>Nuevo:</strong> Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.</span>
<a href="<?php echo esc_url(home_url('/catalogo')); ?>" class="ms-2 text-white text-decoration-underline">Ver Catálogo</a>
</div>
</div>
</div>

View File

@@ -475,7 +475,12 @@ add_action('wp_enqueue_scripts', 'apus_enqueue_cta_box_sidebar_assets', 17);
/**
* Enqueue Top Notification Bar styles and scripts (Issue #39)
*
* DESHABILITADO: CSS ahora está en assets/css/style.css (líneas 658-685)
* siguiendo el template fuente apus-theme-template/index.html
* El componente no requiere JavaScript, es solo HTML/CSS estático.
*/
/*
function apus_enqueue_notification_bar_assets() {
// Notification Bar CSS
wp_enqueue_style(
@@ -500,6 +505,7 @@ function apus_enqueue_notification_bar_assets() {
}
add_action('wp_enqueue_scripts', 'apus_enqueue_notification_bar_assets', 18);
*/
/**
* Enqueue Footer Contact Form styles and scripts (Issue #37)