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).
colaborando3.php
+68 -19
View File
@@ -90,7 +90,6 @@
.rail-logo {
text-align: center;
padding: 4px 0;
}
.rail-logo img {
@@ -107,7 +106,6 @@
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: .08em;
margin-top: 4px;
text-align: center;
}
@@ -238,13 +236,13 @@
.timer-face {
font-family: var(--font-mono);
font-size: 22px;
font-size: 20px;
font-weight: 700;
letter-spacing: .03em;
background: #ffffffff;
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 0;
/*padding: 6px 0;*/
color: var(--gold);
text-align: center;
}
@@ -372,17 +370,19 @@
#bAccion1, #bAccion2 {
font-family: var(--font-mono) !important;
font-weight: 700 !important;
font-size: 12px !important;
padding: 6px 16px !important;
border-radius: 6px !important;
font-size: 11px !important;
padding: 3px 8px !important;
border-radius: 5px !important;
border: 1px solid var(--border) !important;
background: var(--panel-2) !important;
color: var(--text) !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
min-width: 44px !important;
min-width: 28px !important;
height: 28px !important;
text-align: center !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
line-height: 1 !important;
}
#bAccion1:hover, #bAccion2:hover {
@@ -499,6 +499,49 @@
text-align: center;
}
/* Estilos de Tabla de Activos (#tablaActivos) con borde y texto en color del activo sobre fondo suave pastel */
#tablaActivos td.actPersonalCalificado {
background-color: #FFFDF4 !important;
color: var(--a-personal) !important;
border: 1.5px solid var(--a-personal) !important;
font-weight: 700 !important;
}
#tablaActivos td.actAnalistas {
background-color: #FFF9F3 !important;
color: var(--a-analistas) !important;
border: 1.5px solid var(--a-analistas) !important;
font-weight: 700 !important;
}
#tablaActivos td.actFlujoDeEfectivo {
background-color: #F3FAF5 !important;
color: var(--a-flujo) !important;
border: 1.5px solid var(--a-flujo) !important;
font-weight: 700 !important;
}
#tablaActivos td.actCreditoEInversion {
background-color: #F3F7FE !important;
color: var(--a-credito) !important;
border: 1.5px solid var(--a-credito) !important;
font-weight: 700 !important;
}
#tablaActivos td.actTecnologia {
background-color: #FDF4F2 !important;
color: var(--a-tecnologia) !important;
border: 1.5px solid var(--a-tecnologia) !important;
font-weight: 700 !important;
}
#tablaActivos td.actTransporteYMaquinaria {
background-color: #F3F5FA !important;
color: var(--a-transporte) !important;
border: 1.5px solid var(--a-transporte) !important;
font-weight: 700 !important;
}
/* Variables de Colores de Activos según la propuesta de diseño */
:root {
--a-personal: #C79A16;
@@ -1487,7 +1530,6 @@
<div class="rail-lbl">Tiempo Restante</div>
<div id="timer">
<div class="timer-face"><span id="time">02:00</span></div>
<div class="timer-sub" id="rangeValue">turno de 2 min</div>
<div style="display:flex; gap:5px; margin-top:6px;">
<button id="relojStartPauseButton" onclick="relojToggleTimer()" class="btn btn-primary btn-block">Iniciar</button>
<button onclick="relojResumeTimer()" class="btn" style="width: auto; padding: 5px 8px;" title="Continuar temporizador">Continuar</button>
@@ -1523,27 +1565,34 @@
</div>
</div>
<!-- CAPACITACIONES Y ACCIONES -->
<!-- CAPACITACIONES Y ACCIONES EN 2 RENGLONES COMPACTOS -->
<div class="rail-block">
<div style="display:flex; align-items:center; gap:6px; margin-bottom:4px;">
<!-- Renglon 1: Etiquetas (Capacitaciones a la izquierda, Acciones a la derecha) -->
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
<div style="display:flex; align-items:center; gap:5px;">
<input type="checkbox" name="habilidadesAcreditadas" id="habilidadesAcreditadas">
<label for="habilidadesAcreditadas" class="rail-lbl" style="cursor:pointer; text-transform:none; font-size:11px;">Capacitaciones</label>
</div>
<table id="tablaHabilidadesAcreditadas" actual="" style="height:35px; width:100%; text-align:center; font-size:11px; background:var(--panel-2); border-radius:6px; border:1px solid var(--border-soft);">
<span class="rail-lbl" style="font-size:10px;">Acciones</span>
</div>
<!-- Renglon 2: Contenido (#haNombre a la izquierda, botones #bAccion1 y #bAccion2 a la derecha) -->
<div style="display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center;">
<table id="tablaHabilidadesAcreditadas" actual="" style="height:32px; width:100%; text-align:center; font-size:10px; background:var(--panel-2); border-radius:6px; border:1px solid var(--border-soft); box-sizing:border-box;">
<tr>
<td><span id="haNombre" style="font-weight:bold;"></span></td>
<td><span id="haNombre" style="font-size: 9px;font-weight:bold; display:block; line-height:1.1;"></span></td>
</tr>
<tr>
<td><span id="haCosto"></span></td>
<td><span id="haCosto" style="display:block; font-size:9.5px; color:var(--text-dim); line-height:1.1;"></span></td>
</tr>
</table>
<div class="rail-lbl" style="margin-top:8px; margin-bottom:4px;">Acciones Quincenales</div>
<div style="display:flex; gap:8px; justify-content:center;">
<div style="display:flex; gap:4px; align-items:center;">
<button id="bAccion1" onclick="toggleColor(this)">1</button>
<button id="bAccion2" onclick="toggleColor(this)">2</button>
</div>
</div>
</div>
<!-- TABLA DE ACTIVOS (PRODUCCIÓN / RECUPERACIÓN) -->
<div class="rail-block">
@@ -1551,9 +1600,9 @@
<table id="tablaActivos" class="activos">
<thead>
<tr>
<th colspan="2">ACTIVOS</th>
<th>Prod.</th>
<th>Recup.</th>
<th colspan="2" style="width: 33%;font-size:11px; font-weight:bold; background-color:var(--panel-1);">ACTIVOS</th>
<th style="font-size:11px; font-weight:bold; background-color:var(--panel-1);">Prod.</th>
<th style="font-size:11px; font-weight:bold; background-color:var(--panel-1);">Recup.</th>
</tr>
</thead>
<tbody>