cheveguerra/Colaborando
1
0
Fork 0
mirror of https://github.com/cheveguerra/Colaborando.git synced 2026-08-19 00:46:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(ui): refaccionar tabla de activos y compactar capacitaciones/acciones en colaborando3

Browse Source 
Rediseno visual de la Tabla de Activos (#tablaActivos). Compactacion del bloque de Capacitaciones y Acciones en la columna izquierda en 2 renglones horizontales. Centrado horizontal de activos requeridos y pagados en proyectos secundarios. Actualizacion de CONTEXT.md. Preservacion 100% intacta de jsCode.js.
This commit is contained in:
Cheve Guerra
2026-08-09 06:24:08 -06:00
parent eefb7aaea3
commit 656359af48
2 changed files with 86 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CONTEXT.md
+8 -3
View File
@@ -11,13 +11,18 @@ El objetivo principal de esta sesión consistió en la creación e implementaci
1. **Creación de `colaborando3.php` basada en `propuesta-diseño.html`**:
* Se aplicó la nueva interfaz gráfica con paletas de color Tailwind/HSL, tipografía Inter/JetBrains Mono, estética pastel en tarjetas de departamento y activos, y maquetación responsive.
* Se rediseñó el **Proyecto en Turno (Grande)** y los **Proyectos Activos Secundarios** (`#proyecto_1` a `#proyecto_6`) para presentar etiquetas compactas de activos, contadores de activos pagados sin fondo sólido y bloques de mantenimiento integrados.
* Se centraron horizontalmente las píldoras de activos requeridos, contadores pagados y texto de mantenimiento en los proyectos secundarios.
2. **Garantía de Compatibilidad Total con `jsCode.js`**:
2. **Ajustes en la Columna Izquierda (Rail)**:
* **Capacitaciones y Acciones**: Se compactó el bloque en 2 renglones (Renglón 1: Checkbox Capacitaciones + Etiqueta Acciones; Renglón 2: `#tablaHabilidadesAcreditadas` con `#haNombre` y `#haCosto` + botones de acción `#bAccion1` y `#bAccion2` con dimensiones reducidas).
* **Tabla de Activos (`#tablaActivos`)**: Se estilizó la primera columna de nombres de activos con fondos suaves pastel, bordes `1.5px solid` y texto en el color característico de cada activo (Dorado, Naranja, Verde, Azul, Rojo, Azul Marino).
3. **Garantía de Compatibilidad Total con `jsCode.js`**:
* **Sin Cambios en JS**: `jsCode.js` se mantiene 100% idéntico a la versión del repositorio.
* **Jerarquía DOM Preservada**: Se adaptó el HTML/CSS de `colaborando3.php` para mantener intactos los IDs y selectores requeridos por `jsCode.js` (`#TablaProyectoGde`, `#activosProyectoGde`, `#activoReqProyectoNom1..3`, `#activoReqProyectoCant1..3`, `#renglonProyectos2`, `.droppableActivos`, etc.).
* **Jerarquía DOM Preservada**: Se adaptó el HTML/CSS de `colaborando3.php` para mantener intactos los IDs y selectores requeridos por `jsCode.js` (`#TablaProyectoGde`, `#activosProyectoGde`, `#activoReqProyectoNom1..3`, `#activoReqProyectoCant1..3`, `#tablaHabilidadesAcreditadas`, `#haNombre`, `#haCosto`, `#bAccion1`, `#bAccion2`, `#tablaActivos`, etc.).
* **Inmunidad de Estilos**: Se configuraron selectores CSS específicos por ID para que las tarjetas conserven su formato compacto y colores de activo incluso cuando `jsCode.js` limpia o inyecta clases dinámicamente (`llenaProyectoGde`, `llenaProyectoChico2`).
3. **Interacción y Drag & Drop**:
4. **Interacción y Drag & Drop**:
* Se ajustó el z-index de los elementos arrastrados (`.ui-draggable-dragging`) para flotar por encima de la interfaz.
* Se eliminaron clases duplicadas (`droppableActivos`) en contenedores anidados para asegurar que cada evento de arrastrar y soltar se ejecute una sola vez (+1 activo).