git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Top Bar v2.1 - Valores CSS + UI Compacta

Browse Source 
Remodulación del Top Bar siguiendo algoritmo v2.1 actualizado.

## 1. Valores de Estilos desde CSS

**Antes (v2.0):**
```php
'custom_styles' => array(
    'background_color' => '',  // Vacío
    'text_color' => '',        // Vacío
    'highlight_color' => '',   // Vacío
    'link_hover_color' => '',  // Vacío
)
```

**Ahora (v2.1):**
```php
'custom_styles' => array(
    'background_color' => '#0E2337',  // Extraído de componente-top-bar.css
    'text_color' => '#ffffff',
    'highlight_color' => '#FF8600',   // var(--color-orange-primary)
    'link_hover_color' => '#FF8600',
    'font_size' => 'normal'           // 0.9rem del CSS
)
```

**Mapping CSS → Defaults:**
- `.top-notification-bar { background-color: var(--color-navy-dark) }` → `#0E2337`
- `.top-notification-bar { color: #ffffff }` → `#ffffff`
- `.top-notification-bar strong { color: var(--color-orange-primary) }` → `#FF8600`
- `.top-notification-bar a:hover { color: var(--color-orange-primary) }` → `#FF8600`

## 2. UI Compacta

**Antes:** Checkboxes dispersos (cada uno fila completa)
**Ahora:**
- Checkboxes móvil/desktop → Fila de 2 columnas (col-md-6)
- Campos enlace (texto + URL + target) → Fila compacta (col-md-5 + 5 + 2)
- Colores ya estaban bien (row con col-md-3)

**Resultado:** Menos scroll, mejor aprovechamiento del espacio.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-09 15:25:47 -06:00
parent 465b879135
commit 0fd0ee8231
2 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
admin-panel/admin/pages/main.php
View File

@@ -42,17 +42,23 @@ if (!defined('ABSPATH')) {
</label>
<p class="form-text text-muted">Si está desactivado, el Top Bar no se mostrará en el sitio.</p>
</div>
<div class="form-group mb-3">
<label class="form-check-label">
<input type="checkbox" id="topBarShowOnMobile" class="form-check-input">
Mostrar en móvil
</label>
</div>
<div class="form-group mb-3">
<label class="form-check-label">
<input type="checkbox" id="topBarShowOnDesktop" class="form-check-input">
Mostrar en desktop
</label>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-3">
<label class="form-check-label">
<input type="checkbox" id="topBarShowOnMobile" class="form-check-input">
Mostrar en móvil
</label>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-3">
<label class="form-check-label">
<input type="checkbox" id="topBarShowOnDesktop" class="form-check-input">
Mostrar en desktop
</label>
</div>
</div>
</div>
</div>
@@ -91,13 +97,13 @@ if (!defined('ABSPATH')) {
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-5">
<div class="form-group mb-3">
<label for="topBarLinkText">Texto del enlace</label>
<input type="text" id="topBarLinkText" class="form-control" placeholder="Ver Catálogo" maxlength="50">
</div>
</div>
<div class="col-md-4">
<div class="col-md-5">
<div class="form-group mb-3">
<label for="topBarLinkUrl">URL del enlace</label>
<input type="url" id="topBarLinkUrl" class="form-control" placeholder="/catalogo">
@@ -112,14 +118,12 @@ if (!defined('ABSPATH')) {
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group mb-3">
<label class="form-check-label">
<input type="checkbox" id="topBarShowLink" class="form-check-input">
Mostrar enlace
</label>
</div>
</div>
</div>
<div class="form-group mb-3">
<label class="form-check-label">
<input type="checkbox" id="topBarShowLink" class="form-check-input">
Mostrar enlace
</label>
</div>
</div>

11
admin-panel/includes/class-settings-manager.php
View File

@@ -87,11 +87,12 @@ class APUS_Settings_Manager {
'link_target' => '_self',
'show_link' => true,
'custom_styles' => array(
'background_color' => '',
'text_color' => '',
'highlight_color' => '',
'link_hover_color' => '',
'font_size' => 'normal'
// Valores extraídos de componente-top-bar.css
'background_color' => '#0E2337', // var(--color-navy-dark)
'text_color' => '#ffffff',
'highlight_color' => '#FF8600', // var(--color-orange-primary)
'link_hover_color' => '#FF8600', // var(--color-orange-primary)
'font_size' => 'normal' // 0.9rem del CSS
)
)
// Navbar - Pendiente