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

fix(admin-panel): Refactor component-navbar.php to match Top Bar HTML patterns

Browse Source 
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
2025-11-12 16:01:48 -06:00
parent 3c4bb8ba5a
commit 57b8d01dcb
1 changed files with 73 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
admin-panel/admin/components/component-navbar.php
View File

@@ -99,8 +99,8 @@ if (!defined('ABSPATH')) {
</div> </div>
<!-- Selects compactados en fila --> <!-- Selects compactados en fila -->
<div class="row mt-3"> <div class="row g-2 mt-3">
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label for="navbarPosition" class="text-secondary fw-medium mb-1"> <label for="navbarPosition" class="text-secondary fw-medium mb-1">
Posición Posición
@@ -112,7 +112,7 @@ if (!defined('ABSPATH')) {
</select> </select>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label for="navbarBreakpoint" class="text-secondary fw-medium mb-1"> <label for="navbarBreakpoint" class="text-secondary fw-medium mb-1">
Breakpoint Breakpoint
@@ -140,92 +140,63 @@ if (!defined('ABSPATH')) {
Colores Personalizados Colores Personalizados
</h5> </h5>
<!-- Background y texto - 2 por fila --> <!-- 7 colores en grid 2x2 (patrón Top Bar) -->
<div class="row"> <div class="row g-2 mb-2">
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-3"> <label for="navbarBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<label for="navbarBgColor" class="text-secondary fw-medium mb-1"> <i class="bi bi-paint-bucket me-1" style="color: #FF8600;"></i>
Color de fondo Color de fondo
</label> </label>
<input type="color" <input type="color" id="navbarBgColor" class="form-control form-control-color w-100" value="#1e3a5f" title="Seleccionar color de fondo">
id="navbarBgColor" <small class="text-muted d-block mt-1" id="navbarBgColorValue">#1e3a5f</small>
class="form-control form-control-color"
value="#1e3a5f">
</div>
</div> </div>
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-3"> <label for="navbarTextColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<label for="navbarTextColor" class="text-secondary fw-medium mb-1"> <i class="bi bi-fonts me-1" style="color: #FF8600;"></i>
Color de texto Color de texto
</label> </label>
<input type="color" <input type="color" id="navbarTextColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color de texto">
id="navbarTextColor" <small class="text-muted d-block mt-1" id="navbarTextColorValue">#ffffff</small>
class="form-control form-control-color"
value="#ffffff">
</div>
</div> </div>
</div> <div class="col-6">
<label for="navbarLinkHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<!-- Hover states - 2 por fila --> <i class="bi bi-cursor me-1" style="color: #FF8600;"></i>
<div class="row"> Color hover links
<div class="col-md-6"> </label>
<div class="form-group mb-3"> <input type="color" id="navbarLinkHoverColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color hover enlaces">
<label for="navbarLinkHoverColor" class="text-secondary fw-medium mb-1"> <small class="text-muted d-block mt-1" id="navbarLinkHoverColorValue">#FF8600</small>
Color hover links
</label>
<input type="color"
id="navbarLinkHoverColor"
class="form-control form-control-color"
value="#FF8600">
</div>
</div> </div>
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-3"> <label for="navbarLinkHoverBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<label for="navbarLinkHoverBgColor" class="text-secondary fw-medium mb-1"> <i class="bi bi-square-fill me-1" style="color: #FF8600;"></i>
Background hover Background hover
</label> </label>
<input type="color" <input type="color" id="navbarLinkHoverBgColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color fondo hover">
id="navbarLinkHoverBgColor" <small class="text-muted d-block mt-1" id="navbarLinkHoverBgColorValue">#FF8600</small>
class="form-control form-control-color"
value="#FF8600">
</div>
</div> </div>
</div> <div class="col-6">
<label for="navbarDropdownBgColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<!-- Dropdown colors - 3 por fila --> <i class="bi bi-card-text me-1" style="color: #FF8600;"></i>
<div class="row"> Dropdown BG
<div class="col-md-4"> </label>
<div class="form-group mb-0"> <input type="color" id="navbarDropdownBgColor" class="form-control form-control-color w-100" value="#ffffff" title="Seleccionar color fondo dropdown">
<label for="navbarDropdownBgColor" class="text-secondary fw-medium mb-1"> <small class="text-muted d-block mt-1" id="navbarDropdownBgColorValue">#ffffff</small>
Dropdown BG
</label>
<input type="color"
id="navbarDropdownBgColor"
class="form-control form-control-color"
value="#ffffff">
</div>
</div> </div>
<div class="col-md-4"> <div class="col-6">
<div class="form-group mb-0"> <label for="navbarDropdownItemColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<label for="navbarDropdownItemColor" class="text-secondary fw-medium mb-1"> <i class="bi bi-text-left me-1" style="color: #FF8600;"></i>
Item Color Item Color
</label> </label>
<input type="color" <input type="color" id="navbarDropdownItemColor" class="form-control form-control-color w-100" value="#495057" title="Seleccionar color items dropdown">
id="navbarDropdownItemColor" <small class="text-muted d-block mt-1" id="navbarDropdownItemColorValue">#495057</small>
class="form-control form-control-color"
value="#495057">
</div>
</div> </div>
<div class="col-md-4"> <div class="col-6">
<div class="form-group mb-0"> <label for="navbarDropdownItemHoverColor" class="form-label small mb-1 fw-semibold" style="color: #495057;">
<label for="navbarDropdownItemHoverColor" class="text-secondary fw-medium mb-1"> <i class="bi bi-hand-index me-1" style="color: #FF8600;"></i>
Item Hover Item Hover
</label> </label>
<input type="color" <input type="color" id="navbarDropdownItemHoverColor" class="form-control form-control-color w-100" value="#FF8600" title="Seleccionar color hover items dropdown">
id="navbarDropdownItemHoverColor" <small class="text-muted d-block mt-1" id="navbarDropdownItemHoverColorValue">#FF8600</small>
class="form-control form-control-color"
value="#FF8600">
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -241,8 +212,8 @@ if (!defined('ABSPATH')) {
Tipografía Tipografía
</h5> </h5>
<div class="row"> <div class="row g-2">
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label for="navbarFontSize" class="text-secondary fw-medium mb-1"> <label for="navbarFontSize" class="text-secondary fw-medium mb-1">
Tamaño de fuente Tamaño de fuente
@@ -254,7 +225,7 @@ if (!defined('ABSPATH')) {
</select> </select>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label for="navbarFontWeight" class="text-secondary fw-medium mb-1"> <label for="navbarFontWeight" class="text-secondary fw-medium mb-1">
Peso de fuente Peso de fuente
@@ -313,8 +284,8 @@ if (!defined('ABSPATH')) {
</div> </div>
<!-- Selects y números compactados --> <!-- Selects y números compactados -->
<div class="row"> <div class="row g-2">
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label for="navbarBoxShadowIntensity" class="text-secondary fw-medium mb-1"> <label for="navbarBoxShadowIntensity" class="text-secondary fw-medium mb-1">
Intensidad sombra Intensidad sombra
@@ -327,7 +298,7 @@ if (!defined('ABSPATH')) {
</select> </select>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label for="navbarBorderRadius" class="text-secondary fw-medium mb-1"> <label for="navbarBorderRadius" class="text-secondary fw-medium mb-1">
Border radius (px) Border radius (px)
@@ -361,7 +332,7 @@ if (!defined('ABSPATH')) {
Espaciado Espaciado
</h5> </h5>
<div class="row"> <div class="row g-2">
<div class="col-md-4"> <div class="col-md-4">
<div class="form-group mb-3"> <div class="form-group mb-3">
<label for="navbarPaddingVertical" class="text-secondary fw-medium mb-1"> <label for="navbarPaddingVertical" class="text-secondary fw-medium mb-1">
@@ -440,8 +411,8 @@ if (!defined('ABSPATH')) {
</div> </div>
<!-- Texto e icono --> <!-- Texto e icono -->
<div class="row"> <div class="row g-2">
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-3"> <div class="form-group mb-3">
<label for="navbarLetsTalkText" class="text-secondary fw-medium mb-1"> <label for="navbarLetsTalkText" class="text-secondary fw-medium mb-1">
Texto del botón Texto del botón
@@ -454,7 +425,7 @@ if (!defined('ABSPATH')) {
placeholder="Let's Talk"> placeholder="Let's Talk">
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-3"> <div class="form-group mb-3">
<label for="navbarLetsTalkIconClass" class="text-secondary fw-medium mb-1"> <label for="navbarLetsTalkIconClass" class="text-secondary fw-medium mb-1">
Clase del icono Clase del icono
@@ -505,8 +476,8 @@ if (!defined('ABSPATH')) {
</div> </div>
<!-- Números y selects --> <!-- Números y selects -->
<div class="row"> <div class="row g-2">
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-3"> <div class="form-group mb-3">
<label for="navbarDropdownMaxHeight" class="text-secondary fw-medium mb-1"> <label for="navbarDropdownMaxHeight" class="text-secondary fw-medium mb-1">
Altura máxima (vh) Altura máxima (vh)
@@ -519,7 +490,7 @@ if (!defined('ABSPATH')) {
max="90"> max="90">
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-3"> <div class="form-group mb-3">
<label for="navbarDropdownBorderRadius" class="text-secondary fw-medium mb-1"> <label for="navbarDropdownBorderRadius" class="text-secondary fw-medium mb-1">
Border radius (px) Border radius (px)
@@ -534,8 +505,8 @@ if (!defined('ABSPATH')) {
</div> </div>
</div> </div>
<div class="row"> <div class="row g-2">
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label for="navbarDropdownItemPaddingVertical" class="text-secondary fw-medium mb-1"> <label for="navbarDropdownItemPaddingVertical" class="text-secondary fw-medium mb-1">
Padding items V (rem) Padding items V (rem)
@@ -549,7 +520,7 @@ if (!defined('ABSPATH')) {
step="0.05"> step="0.05">
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label for="navbarDropdownItemPaddingHorizontal" class="text-secondary fw-medium mb-1"> <label for="navbarDropdownItemPaddingHorizontal" class="text-secondary fw-medium mb-1">
Padding items H (rem) Padding items H (rem)
@@ -577,8 +548,8 @@ if (!defined('ABSPATH')) {
Avanzado Avanzado
</h5> </h5>
<div class="row"> <div class="row g-2">
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label for="navbarZIndex" class="text-secondary fw-medium mb-1"> <label for="navbarZIndex" class="text-secondary fw-medium mb-1">
Z-index Z-index
@@ -591,7 +562,7 @@ if (!defined('ABSPATH')) {
max="9999"> max="9999">
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-6">
<div class="form-group mb-0"> <div class="form-group mb-0">
<label for="navbarTransitionSpeed" class="text-secondary fw-medium mb-1"> <label for="navbarTransitionSpeed" class="text-secondary fw-medium mb-1">
Velocidad transiciones Velocidad transiciones