- Added wp_enqueue_style for 'apus-component-navbar-css'
- Points to admin/assets/css/component-navbar.css
- Dependency: 'apus-admin-panel-css'
- Version: APUS_ADMIN_PANEL_VERSION
This was the critical missing piece causing navbar cards to display
with incorrect Bootstrap default styles instead of custom component styles.
Without this enqueue:
- Cards had padding: 11.2px 32px 16px (Bootstrap default)
- Cards had margin: 20px 0px 16px (Bootstrap default)
- card-body had padding: 24px (Bootstrap default)
With this enqueue applied:
- Cards have padding: 0px (custom)
- Cards have margin: 0px 0px 16px (custom)
- card-body has padding: 16px (custom)
- All styles match Top Bar exactly ✅Resolves#179 (Phase 3: Enable CSS loading)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added initColorPickers() method to handle color picker interactions
- Dynamically updates hex value displays when user changes colors
- Covers all 7 color pickers in navbar configuration
- Event listeners on 'input' event for real-time updates
- Initializes hex displays on component load with uppercase format
Enhances UX by showing live color values to user.
Resolves#179 (Phase 2: JavaScript enhancements)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created component-navbar.css based on component-top-bar.css structure
- Applied #navbarTab selector to match Top Bar design patterns
- Fixed card styles: padding: 0, margin: 0 0 16px, border-radius: 6px
- Fixed card-body padding: 1rem (16px)
- Fixed box-shadow to match Top Bar: rgba(0, 0, 0, 0.075) 0px 2px 4px 0px
- Includes responsive rules and form controls styling
Resolves#179 (Phase 1: Create CSS file)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
JavaScript module that manages navbar component data collection and rendering.
Exposes window.NavbarComponent object with three main methods.
Methods:
- init(): Initializes component (event listeners, etc.)
- collect(): Collects all 38 form fields into structured object
- render(config): Populates form fields from configuration object
Data Structure:
- Flat fields: enabled, position, responsive_breakpoint, etc.
- Nested objects: lets_talk_button, dropdown, custom_styles
Field Coverage:
- Boolean switches: 9 fields
- Color pickers: 7 fields
- Select dropdowns: 7 fields
- Number inputs: 9 fields
- Text inputs: 2 fields
Total: 38 configurable fields
Integration:
- Called by admin-app.js for save/load operations
- Works with Settings Manager for backend persistence
- Supports real-time form validation
File: admin-panel/admin/assets/js/component-navbar.js (160 lines)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fix critical bug where navbar configuration was not being saved.
The component-navbar.js file existed but was not being loaded by WordPress,
causing window.NavbarComponent to be undefined and preventing data collection.
Changes:
- Added wp_enqueue_script for component-navbar.js (lines 126-133)
- Updated admin-app.js dependencies to include navbar component (line 139)
Impact: Navbar settings now save correctly to database
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Agregado cierre de row después del card 1
- Agregado apertura de row para cards 2-4
- Corregida indentación de headers dentro de card-body
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Eliminado </div> duplicado en toggle Desktop
- Agregado cierre correcto para col-md-6 del primer card
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Row 1: Activación + Contenido (col-md-6 cada uno)
- Row 2: Estilos + Vista Previa (col-md-6 cada uno)
- Añadido h-100 para altura uniforme entre cards
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Eliminar row g-4 y col-md-4 que causaban layout horizontal
- Cambiar a divs con mb-4 para espaciado vertical consistente
- Último elemento con mb-0 para evitar espacio extra
- Los 3 toggles ahora se apilan verticalmente como cards
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Funcionalidades JavaScript agregadas:
- Actualización de progress bar junto con contador de caracteres
- Progress bar cambia de color según proximidad al límite:
* Naranja: 0-200 caracteres
* Amarillo: 201-230 caracteres
* Rojo: 231-250 caracteres
- Vista previa en tiempo real del Top Bar (setupLivePreview)
- Actualización automática al modificar cualquier campo:
* Icono y visibilidad
* Texto destacado
* Mensaje principal
* Enlace y visibilidad
* Colores (fondo, texto, destacado)
* Tamaño de fuente
- Renderizado HTML dinámico en tiempo real
- Listeners optimizados con event delegation
La vista previa refleja exactamente cómo se verá en el frontend
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Mejoras CSS implementadas:
- Variables CSS con paleta APUs completa (Navy + Orange + Neutrales)
- Clases de utilidad para colores de marca
- Tab header con gradiente sutil y borde lateral naranja
- Section titles con iconos en gradiente
- Cards con hover effects y transiciones suaves
- Toggle containers con fondos y bordes
- Form switches grandes (3rem) con colores personalizados
- Input groups sin bordes intermedios
- Color pickers con hover effects y transform
- Alert personalizado con gradiente naranja
- Animación fadeInUp para vista previa
- Botones de marca Navy y Orange con hover effects
- Progress bar con transiciones suaves
- Badges y typography utilities
- Responsive design para móviles
Todo con transiciones fluidas y sistema de spacing consistente
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Mejoras implementadas:
- Header del tab con gradiente y botón de restaurar defaults
- Cards con sombras y bordes sutiles para las secciones
- Section titles con iconos destacados en gradiente naranja
- Toggle containers con fondo gris claro y bordes
- Input groups sin bordes intermedios (merge)
- Color pickers mejorados con preview de código hex
- Progress bar visual para contador de caracteres del mensaje
- Alert personalizado con tip de diseño
- Vista previa interactiva del Top Bar en tiempo real
- Badges para indicadores (Opcional, Requerido)
- Iconografía consistente con Bootstrap Icons
- Espaciado mejorado con sistema g-4
Diseño coherente con paleta APUs (Navy + Orange + Neutrales)
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Implementar setupCharacterCounter() en AdminPanel
- Agregar listener de evento 'input' para actualizar contador en tiempo real
- Cambiar color del contador según proximidad al límite (230: danger, 200: warning)
- Trigger automático del contador al cargar/renderizar configuración
- Integrar llamada a setupCharacterCounter() en bindEvents()
Basado en: 07-IMPLEMENTACION-ADMIN-JS.md
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Actualizar main.php con diseño completo del Tab Top Bar
- Agregar switches en lugar de checkboxes básicos
- Implementar layout responsive con grid Bootstrap
- Agregar textarea con contador de caracteres para mensaje
- Implementar color pickers para estilos personalizados
- Mejorar accesibilidad con labels y roles ARIA
- Agregar vista previa informativa
Basado en: 05-IMPLEMENTACION-ADMIN-INTERFAZ-TOP-BAR.md
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Dos fixes críticos para el admin panel del tema:
1. **Fix error de nonce en AJAX**
- Cambiar de wp_verify_nonce() a check_ajax_referer()
- check_ajax_referer() es el método recomendado por WordPress para AJAX
- Aplicado en ajax_get_settings() y ajax_save_settings()
- El nonce ahora se valida correctamente
2. **Fix validación de URLs relativas**
- Aceptar URLs relativas que empiezan con / (ej: /catalogo)
- filter_var() con FILTER_VALIDATE_URL rechazaba URLs relativas
- Agregada validación adicional con regex para paths relativos
- Mantiene validación para URLs completas
Archivos modificados:
- admin-panel/includes/class-settings-manager.php
- admin-panel/includes/class-validator.php
Issue: #144🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implementación completa del componente Top Bar con 15 campos configurables desde el admin panel, siguiendo el algoritmo universal v2.0.
## Cambios Realizados
### Backend (PHP)
- Agregados defaults del Top Bar a class-settings-manager.php
- Implementada validación completa en class-validator.php (15 campos)
- Implementada sanitización con sanitize_text_field, esc_url_raw y sanitize_hex_color
- Modificado header.php con código 100% configurable usando wp_parse_args()
### Frontend (Admin Panel)
- Creado tab HTML completo con 3 secciones: Activación, Contenido y Estilos
- Implementado JavaScript para renderizado y recolección de datos
- 15 campos configurables: enabled, visibility, icon, content, link, custom styles
### Infraestructura
- Creado admin-panel/init.php para carga del módulo
- Creada class-admin-menu.php con enqueue de Bootstrap 5 y assets
- Creada estructura base CSS y JavaScript del admin
- Ya cargado en functions.php línea 276
## Características
- Responsive: Control independiente mobile/desktop
- Estilos personalizables: 4 colores + tamaño de fuente
- Validación robusta: Límites de caracteres, URLs, colores hex
- Defaults inteligentes: Valores seguros si no hay configuración
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
