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
colaborando3.php
+78 -29
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,25 +1565,32 @@
</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;">
<input type="checkbox" name="habilidadesAcreditadas" id="habilidadesAcreditadas">
<label for="habilidadesAcreditadas" class="rail-lbl" style="cursor:pointer; text-transform:none; font-size:11px;">Capacitaciones</label>
<!-- 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>
<span class="rail-lbl" style="font-size:10px;">Acciones</span>
</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);">
<tr>
<td><span id="haNombre" style="font-weight:bold;"></span></td>
</tr>
<tr>
<td><span id="haCosto"></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;">
<button id="bAccion1" onclick="toggleColor(this)">1</button>
<button id="bAccion2" onclick="toggleColor(this)">2</button>
<!-- 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-size: 9px;font-weight:bold; display:block; line-height:1.1;"></span></td>
</tr>
<tr>
<td><span id="haCosto" style="display:block; font-size:9.5px; color:var(--text-dim); line-height:1.1;"></span></td>
</tr>
</table>
<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>
@@ -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>