fix(admin-panel): Refactor component-navbar.php to match Top Bar HTML patterns
GRUPO 2 - Colores Personalizados (complete refactor): - Changed row structure: <div class="row"> → <div class="row g-2 mb-2"> - Changed columns: col-md-6 → col-6 (7 instances) - Added Bootstrap icons to all labels: <i class="bi bi-*" style="color: #FF8600;"> - Updated label classes: class="form-label small mb-1 fw-semibold" - Added w-100 class to all color inputs - Added hex value displays: <small id="*Value">#HEXCODE</small> Other groups fixed (8 total): - GRUPO 1: Added g-2, changed col-md-6 → col-6 (2x) - GRUPO 3: Added g-2, changed col-md-6 → col-6 (2x) - GRUPO 4: Added g-2, changed col-md-6 → col-6 (2x) - GRUPO 5: Added g-2 (maintains col-md-4 for 3 columns) - GRUPO 6: Added g-2, changed col-md-6 → col-6 (2x) - GRUPO 7: Added g-2, changed col-md-6 → col-6 (4x) - GRUPO 8: Added g-2, changed col-md-6 → col-6 (2x) Resolves #179 (Phase 2: Refactor HTML) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
@@ -99,8 +99,8 @@ if (!defined('ABSPATH')) {
|
||||
</div>
|
||||
|
||||
<!-- Selects compactados en fila -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<div class="row g-2 mt-3">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarPosition" class="text-secondary fw-medium mb-1">
|
||||
Posición
|
||||
@@ -112,7 +112,7 @@ if (!defined('ABSPATH')) {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarBreakpoint" class="text-secondary fw-medium mb-1">
|
||||
Breakpoint
|
||||
@@ -140,92 +140,63 @@ if (!defined('ABSPATH')) {
|
||||
Colores Personalizados
|
||||
</h5>
|
||||
|
||||
<!-- Background y texto - 2 por fila -->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="navbarBgColor" class="text-secondary fw-medium mb-1">
|
||||
<!-- 7 colores en grid 2x2 (patrón Top Bar) -->
|
||||
<div class="row g-2 mb-2">
|
||||
<div class="col-6">
|
||||
<label for="navbarBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-paint-bucket me-1" style="color: #FF8600;"></i>
|
||||
Color de fondo
|
||||
</label>
|
||||
<input type="color"
|
||||
id="navbarBgColor"
|
||||
class="form-control form-control-color"
|
||||
value="#1e3a5f">
|
||||
<input type="color" id="navbarBgColor" class="form-control form-control-color w-100" value="#1e3a5f" title="Seleccionar color de fondo">
|
||||
<small class="text-muted d-block mt-1" id="navbarBgColorValue">#1e3a5f</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="navbarTextColor" class="text-secondary fw-medium mb-1">
|
||||
<div class="col-6">
|
||||
<label for="navbarTextColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-fonts me-1" style="color: #FF8600;"></i>
|
||||
Color de texto
|
||||
</label>
|
||||
<input type="color"
|
||||
id="navbarTextColor"
|
||||
class="form-control form-control-color"
|
||||
value="#ffffff">
|
||||
<input type="color" id="navbarTextColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color de texto">
|
||||
<small class="text-muted d-block mt-1" id="navbarTextColorValue">#ffffff</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hover states - 2 por fila -->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="navbarLinkHoverColor" class="text-secondary fw-medium mb-1">
|
||||
<div class="col-6">
|
||||
<label for="navbarLinkHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-cursor me-1" style="color: #FF8600;"></i>
|
||||
Color hover links
|
||||
</label>
|
||||
<input type="color"
|
||||
id="navbarLinkHoverColor"
|
||||
class="form-control form-control-color"
|
||||
value="#FF8600">
|
||||
<input type="color" id="navbarLinkHoverColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color hover enlaces">
|
||||
<small class="text-muted d-block mt-1" id="navbarLinkHoverColorValue">#FF8600</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="navbarLinkHoverBgColor" class="text-secondary fw-medium mb-1">
|
||||
<div class="col-6">
|
||||
<label for="navbarLinkHoverBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-square-fill me-1" style="color: #FF8600;"></i>
|
||||
Background hover
|
||||
</label>
|
||||
<input type="color"
|
||||
id="navbarLinkHoverBgColor"
|
||||
class="form-control form-control-color"
|
||||
value="#FF8600">
|
||||
<input type="color" id="navbarLinkHoverBgColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color fondo hover">
|
||||
<small class="text-muted d-block mt-1" id="navbarLinkHoverBgColorValue">#FF8600</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown colors - 3 por fila -->
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarDropdownBgColor" class="text-secondary fw-medium mb-1">
|
||||
<div class="col-6">
|
||||
<label for="navbarDropdownBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-card-text me-1" style="color: #FF8600;"></i>
|
||||
Dropdown BG
|
||||
</label>
|
||||
<input type="color"
|
||||
id="navbarDropdownBgColor"
|
||||
class="form-control form-control-color"
|
||||
value="#ffffff">
|
||||
<input type="color" id="navbarDropdownBgColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color fondo dropdown">
|
||||
<small class="text-muted d-block mt-1" id="navbarDropdownBgColorValue">#ffffff</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarDropdownItemColor" class="text-secondary fw-medium mb-1">
|
||||
<div class="col-6">
|
||||
<label for="navbarDropdownItemColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-text-left me-1" style="color: #FF8600;"></i>
|
||||
Item Color
|
||||
</label>
|
||||
<input type="color"
|
||||
id="navbarDropdownItemColor"
|
||||
class="form-control form-control-color"
|
||||
value="#495057">
|
||||
<input type="color" id="navbarDropdownItemColor" class="form-control form-control-color w-100" value="#495057" title="Seleccionar color items dropdown">
|
||||
<small class="text-muted d-block mt-1" id="navbarDropdownItemColorValue">#495057</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarDropdownItemHoverColor" class="text-secondary fw-medium mb-1">
|
||||
<div class="col-6">
|
||||
<label for="navbarDropdownItemHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
|
||||
<i class="bi bi-hand-index me-1" style="color: #FF8600;"></i>
|
||||
Item Hover
|
||||
</label>
|
||||
<input type="color"
|
||||
id="navbarDropdownItemHoverColor"
|
||||
class="form-control form-control-color"
|
||||
value="#FF8600">
|
||||
</div>
|
||||
<input type="color" id="navbarDropdownItemHoverColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color hover items dropdown">
|
||||
<small class="text-muted d-block mt-1" id="navbarDropdownItemHoverColorValue">#FF8600</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -241,8 +212,8 @@ if (!defined('ABSPATH')) {
|
||||
Tipografía
|
||||
</h5>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarFontSize" class="text-secondary fw-medium mb-1">
|
||||
Tamaño de fuente
|
||||
@@ -254,7 +225,7 @@ if (!defined('ABSPATH')) {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarFontWeight" class="text-secondary fw-medium mb-1">
|
||||
Peso de fuente
|
||||
@@ -313,8 +284,8 @@ if (!defined('ABSPATH')) {
|
||||
</div>
|
||||
|
||||
<!-- Selects y números compactados -->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarBoxShadowIntensity" class="text-secondary fw-medium mb-1">
|
||||
Intensidad sombra
|
||||
@@ -327,7 +298,7 @@ if (!defined('ABSPATH')) {
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarBorderRadius" class="text-secondary fw-medium mb-1">
|
||||
Border radius (px)
|
||||
@@ -361,7 +332,7 @@ if (!defined('ABSPATH')) {
|
||||
Espaciado
|
||||
</h5>
|
||||
|
||||
<div class="row">
|
||||
<div class="row g-2">
|
||||
<div class="col-md-4">
|
||||
<div class="form-group mb-3">
|
||||
<label for="navbarPaddingVertical" class="text-secondary fw-medium mb-1">
|
||||
@@ -440,8 +411,8 @@ if (!defined('ABSPATH')) {
|
||||
</div>
|
||||
|
||||
<!-- Texto e icono -->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="navbarLetsTalkText" class="text-secondary fw-medium mb-1">
|
||||
Texto del botón
|
||||
@@ -454,7 +425,7 @@ if (!defined('ABSPATH')) {
|
||||
placeholder="Let's Talk">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="navbarLetsTalkIconClass" class="text-secondary fw-medium mb-1">
|
||||
Clase del icono
|
||||
@@ -505,8 +476,8 @@ if (!defined('ABSPATH')) {
|
||||
</div>
|
||||
|
||||
<!-- Números y selects -->
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="navbarDropdownMaxHeight" class="text-secondary fw-medium mb-1">
|
||||
Altura máxima (vh)
|
||||
@@ -519,7 +490,7 @@ if (!defined('ABSPATH')) {
|
||||
max="90">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-3">
|
||||
<label for="navbarDropdownBorderRadius" class="text-secondary fw-medium mb-1">
|
||||
Border radius (px)
|
||||
@@ -534,8 +505,8 @@ if (!defined('ABSPATH')) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarDropdownItemPaddingVertical" class="text-secondary fw-medium mb-1">
|
||||
Padding items V (rem)
|
||||
@@ -549,7 +520,7 @@ if (!defined('ABSPATH')) {
|
||||
step="0.05">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarDropdownItemPaddingHorizontal" class="text-secondary fw-medium mb-1">
|
||||
Padding items H (rem)
|
||||
@@ -577,8 +548,8 @@ if (!defined('ABSPATH')) {
|
||||
Avanzado
|
||||
</h5>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarZIndex" class="text-secondary fw-medium mb-1">
|
||||
Z-index
|
||||
@@ -591,7 +562,7 @@ if (!defined('ABSPATH')) {
|
||||
max="9999">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-6">
|
||||
<div class="form-group mb-0">
|
||||
<label for="navbarTransitionSpeed" class="text-secondary fw-medium mb-1">
|
||||
Velocidad transiciones
|
||||
|
||||
Reference in New Issue
Block a user