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): refactorizar layout en porcentajes y ajustar escala tipografica

Browse Source 
- Ajustar la cuadricula del tablero (.layout) a proporciones en porcentaje (18% 1fr 30%).
- Disponer botones de navegacion (.rail-btns) horizontalmente en un solo renglon.
- Reordenar el bloque de Acciones Posibles por encima de la Tabla de Activos en el Rail.
- Ajustar proporciones de Capacitaciones y Acciones a 70%/30% con botones flexibles.
- Ampliar escala tipografica en titulos, descripciones, tarjetas de departamentos y proyectos.
- Aumentar tamano del avatar de departamentos a 130px.
- Actualizar CONTEXT.md con la arquitectura y decisiones de la sesion.
This commit is contained in:
Cheve Guerra
2026-08-12 21:59:01 -06:00
parent 1ac6233e3c
commit 4df606e8ca
3 changed files with 59 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CONTEXT.md
+11 -14
View File
@@ -2,27 +2,24 @@
## Resumen Ejecutivo de la Sesión ## Resumen Ejecutivo de la Sesión
El objetivo principal de esta sesión consistió en la creación e implementación de **`colaborando3.php`**, la depuración del código en **`jsCode.js`**, y la refactorización arquitectónica de estilos mediante la extracción a **`estilos3.css`** con control de caché dinámico (*cache busting*). El objetivo principal de esta sesión consistió en el refinamiento del layout responsivo y la escala tipográfica de **`colaborando3.php`** y **`estilos3.css`**, ajustando proporciones en porcentajes, reordenando el panel lateral (Rail) y aumentando la legibilidad general de la interfaz.
--- ---
## Decisiones Principales y Arquitectura ## Decisiones Principales y Arquitectura
1. **Desacoplamiento de Estilos (`estilos3.css`)**: 1. **Reestructuración de Layout en Porcentajes (`estilos3.css`)**:
* Se extrajeron más de 1,470 líneas del bloque `<style>` de `colaborando3.php` hacia el nuevo archivo independiente **`estilos3.css`**, reduciendo el archivo PHP de ~2,270 a 798 líneas. * **Cuadrícula Principal (`.layout`)**: Se migró de anchos fijos a `18% 1fr 30%`. La columna de Proyectos ocupa ahora el 30% del viewport.
* **Cache Busting Dinámico**: Se implementó la inclusión con versión basada en tiempo de modificación (`filemtime('estilos3.css')`) en `colaborando3.php`. * **Navegación Horizontal (`.rail-btns`)**: Se configuró en fila (`flex-direction: row`), manteniendo "Pantalla Completa" e "Ir al Resumen" en el mismo renglón.
* **Refinamiento de UI**: Ocultación de slots vacíos en la tarjeta del Proyecto en Turno (`:empty { display: none !important; }`), ajuste tipográfico en el temporizador (`.timer-face`), y actualización de enlaces a `resumen3.php`. * **Reorganización del Rail (`colaborando3.php`)**: Se posicionó el bloque `#tablaAccionesPosibles` por encima de la `#tablaActivos`.
* **Proporción Capacitaciones / Acciones**: Ajustada a cuadrícula `1fr 30%` con botones flexibles (`flex: 1`).
2. **Creación y Refactorización de `colaborando3.php`**: 2. **Escala Visual y Tipografía**:
* 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. * **Avatares de Departamentos**: Se duplicó el tamaño del contenedor a **`130px × 130px`** y las imágenes a `123px` para mayor visibilidad.
* **Tarjetas de Proyectos**: Rediseño del Proyecto en Turno y proyectos secundarios con etiquetas compactas y contadores temáticos. * **Ampliación Tipográfica General**: Aumento progresivo de tamaños de fuente en títulos de proyectos (16px), descripciones (15px), etiquetas del rail (13px), tarjetas de proyectos chicos (12px/13px) y habilidades (15px).
* **Tabla de Activos (`#tablaActivos`)**: Refinada con bordes y letras en colores temáticos sobre fondos pastel.
* **Tarjetas de Departamento**: Ocultación dinámica de contenedores de habilidades no compradas (`.dept-hab-item:empty { display: none !important; }`).
3. **Limpieza y Consistencia en `jsCode.js`**: 3. **Desacoplamiento previo de Estilos (`estilos3.css`)**:
* **Formato Unificado**: Homogeneización del texto de habilidades acreditadas (`Tipo: Nombre, Beneficio`) tanto en vivo como al recargar sesión. * Estilos extraídos del bloque `<style>` de `colaborando3.php` con *cache busting* dinámico (`filemtime`).
* **Depuración de Código Muerto**: Eliminación de funciones huérfanas sin invocaciones en el proyecto.
* **Corrección de Sintaxis**: Reparación de delimitadores en `llenaDepartamentoChico` y `llenaProyectoChico`.
--- ---
colaborando3.php
+22 -22
View File
@@ -106,16 +106,16 @@
<!-- CAPACITACIONES Y ACCIONES EN 2 RENGLONES COMPACTOS --> <!-- CAPACITACIONES Y ACCIONES EN 2 RENGLONES COMPACTOS -->
<div class="rail-block"> <div class="rail-block">
<!-- Renglon 1: Etiquetas (Capacitaciones a la izquierda, Acciones a la derecha) --> <!-- 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:grid; grid-template-columns: 1fr 30%; align-items:center; margin-bottom:4px;">
<div style="display:flex; align-items:center; gap:5px;"> <div style="display:flex; align-items:center; gap:5px;">
<input type="checkbox" name="habilidadesAcreditadas" id="habilidadesAcreditadas"> <input type="checkbox" name="habilidadesAcreditadas" id="habilidadesAcreditadas">
<label for="habilidadesAcreditadas" class="rail-lbl" style="cursor:pointer; text-transform:none; font-size:11px;">Capacitaciones</label> <label for="habilidadesAcreditadas" class="rail-lbl" style="cursor:pointer; text-transform:none;">Capacitaciones</label>
</div> </div>
<span class="rail-lbl" style="font-size:10px;">Acciones</span> <span class="rail-lbl" style="text-align:center;">Acciones</span>
</div> </div>
<!-- Renglon 2: Contenido (#haNombre a la izquierda, botones #bAccion1 y #bAccion2 a la derecha) --> <!-- 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;"> <div style="display:grid; grid-template-columns: 1fr 30%; 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;"> <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> <tr>
<td><span id="haNombre" style="font-size: 9px;font-weight:bold; display:block; line-height:1.1;"></span></td> <td><span id="haNombre" style="font-size: 9px;font-weight:bold; display:block; line-height:1.1;"></span></td>
@@ -125,13 +125,28 @@
</tr> </tr>
</table> </table>
<div style="display:flex; gap:4px; align-items:center;"> <div style="display:flex; gap:4px; align-items:center; width:100%;">
<button id="bAccion1" onclick="toggleColor(this)">1</button> <button id="bAccion1" onclick="toggleColor(this)" style="flex:1;">1</button>
<button id="bAccion2" onclick="toggleColor(this)">2</button> <button id="bAccion2" onclick="toggleColor(this)" style="flex:1;">2</button>
</div> </div>
</div> </div>
</div> </div>
<!-- ACCIONES POSIBLES -->
<div class="rail-block">
<div class="rail-lbl" style="margin-bottom:4px;">Acciones Posibles</div>
<table id="tablaAccionesPosibles" style="width:100%; border:1px solid var(--border); font-size:14.5px; border-radius:6px; background:var(--panel-2);padding:8px">
<tr><td>1.-</td><td>Generar recursos</td></tr>
<tr><td>2.-</td><td>Generar activos</td></tr>
<tr><td>3.-</td><td>Intercambiar recursos</td></tr>
<tr><td>4.-</td><td><span id="accionGestionarProyecto">Gestionar nuevo proyecto</span></td></tr>
<tr><td>5.-</td><td>Convocar junta</td></tr>
<tr><td>6.-</td><td><span id="accionComprarCapacitacion">Abrir/Cambiar/Comprar habilidad</span></td></tr>
<tr><td>7.-</td><td>Colocar activos recuperados</td></tr>
<tr><td>8.-</td><td><span id="accionHabilidadEspecial">Habilidad especial</span></td></tr>
</table>
</div>
<!-- TABLA DE ACTIVOS (PRODUCCIÓN / RECUPERACIÓN) --> <!-- TABLA DE ACTIVOS (PRODUCCIÓN / RECUPERACIÓN) -->
<div class="rail-block"> <div class="rail-block">
<div class="rail-lbl" style="margin-bottom:4px;">Tabla de Activos</div> <div class="rail-lbl" style="margin-bottom:4px;">Tabla de Activos</div>
@@ -178,21 +193,6 @@
</table> </table>
</div> </div>
<!-- ACCIONES POSIBLES -->
<div class="rail-block">
<div class="rail-lbl" style="margin-bottom:4px;">Acciones Posibles</div>
<table id="tablaAccionesPosibles" style="width:100%; border:1px solid var(--border); font-size:10.5px; border-radius:6px; background:var(--panel-2);">
<tr><td>1.-</td><td>Generar recursos</td></tr>
<tr><td>2.-</td><td>Generar activos</td></tr>
<tr><td>3.-</td><td>Intercambiar recursos</td></tr>
<tr><td>4.-</td><td><span id="accionGestionarProyecto">Gestionar nuevo proyecto</span></td></tr>
<tr><td>5.-</td><td>Convocar junta</td></tr>
<tr><td>6.-</td><td><span id="accionComprarCapacitacion">Abrir/Cambiar/Comprar habilidad</span></td></tr>
<tr><td>7.-</td><td>Colocar activos recuperados</td></tr>
<tr><td>8.-</td><td><span id="accionHabilidadEspecial">Habilidad especial</span></td></tr>
</table>
</div>
<!-- CONTADORES FINALES --> <!-- CONTADORES FINALES -->
<div class="rail-block"> <div class="rail-block">
<table style="width:100%; text-align:center; font-size:11px; border:1px solid var(--border); border-radius:6px; background:var(--panel);"> <table style="width:100%; text-align:center; font-size:11px; border:1px solid var(--border); border-radius:6px; background:var(--panel);">
estilos3.css
+26 -25
View File
@@ -41,13 +41,13 @@ body {
.canvas { .canvas {
width: 100%; width: 100%;
max-width: 1680px; /*max-width: 1680px;*/
margin: 0 auto; margin: 0 auto;
} }
.layout { .layout {
display: grid; display: grid;
grid-template-columns: 260px 1fr 350px; grid-template-columns: 18% 1fr 30%;
gap: 14px; gap: 14px;
align-items: start; align-items: start;
} }
@@ -98,7 +98,7 @@ body {
.rail-lbl { .rail-lbl {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 10px; font-size: 13px;
letter-spacing: .08em; letter-spacing: .08em;
color: var(--text-faint); color: var(--text-faint);
text-transform: uppercase; text-transform: uppercase;
@@ -107,14 +107,14 @@ body {
.rail-btns { .rail-btns {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
gap: 5px; gap: 5px;
} }
.btn { .btn {
font-family: var(--font-display); font-family: var(--font-display);
font-weight: 600; font-weight: 600;
font-size: 11px; font-size: 13px;
padding: 6px 10px; padding: 6px 10px;
border-radius: 6px; border-radius: 6px;
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -581,7 +581,7 @@ table.activos td {
border-radius: 14px !important; border-radius: 14px !important;
padding: 0 10px !important; padding: 0 10px !important;
height: 28px !important; height: 28px !important;
font-size: 9px !important; font-size: 13px !important;
font-weight: 700 !important; font-weight: 700 !important;
cursor: pointer; cursor: pointer;
line-height: 1.2; line-height: 1.2;
@@ -703,7 +703,7 @@ table.activos td {
.pf-title-block { .pf-title-block {
font-family: var(--font-body); font-family: var(--font-body);
font-size: 14px; font-size: 16px;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
color: var(--text); color: var(--text);
@@ -713,7 +713,7 @@ table.activos td {
.pf-title-block span { .pf-title-block span {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 9px; font-size: 13px;
letter-spacing: .08em; letter-spacing: .08em;
color: var(--text-faint); color: var(--text-faint);
text-transform: uppercase; text-transform: uppercase;
@@ -722,7 +722,7 @@ table.activos td {
} }
.pf-desc { .pf-desc {
font-size: 10.5px; font-size: 15px;
color: var(--text-dim); color: var(--text-dim);
line-height: 1.35; line-height: 1.35;
} }
@@ -1033,7 +1033,7 @@ table.activos td {
.pm-dept { .pm-dept {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 8px; font-size: 12px;
font-weight: 700; font-weight: 700;
letter-spacing: .06em; letter-spacing: .06em;
color: var(--text-faint); color: var(--text-faint);
@@ -1042,7 +1042,7 @@ table.activos td {
.pm-title { .pm-title {
font-family: var(--font-body); font-family: var(--font-body);
font-size: 11.5px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: var(--text); color: var(--text);
line-height: 1.25; line-height: 1.25;
@@ -1053,7 +1053,7 @@ table.activos td {
.pm-puntos { .pm-puntos {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 8.5px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: var(--green-ok); color: var(--green-ok);
line-height: 1.2; line-height: 1.2;
@@ -1063,10 +1063,11 @@ table.activos td {
} }
.pm-desc { .pm-desc {
font-size: 9.5px; font-size: 12px;
color: var(--text-dim); color: var(--text-dim);
line-height: 1.35; line-height: 1.35;
display: -webkit-box; display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
@@ -1091,7 +1092,7 @@ table.activos td {
border-radius: 12px !important; border-radius: 12px !important;
padding: 2px 7px !important; padding: 2px 7px !important;
font-family: var(--font-mono) !important; font-family: var(--font-mono) !important;
font-size: 9px !important; font-size: 11px !important;
font-weight: 700 !important; font-weight: 700 !important;
line-height: 1.2 !important; line-height: 1.2 !important;
white-space: nowrap !important; white-space: nowrap !important;
@@ -1188,7 +1189,7 @@ table.activos td {
/* Mantenimiento en Proyectos Chicos */ /* Mantenimiento en Proyectos Chicos */
.pm-manto { .pm-manto {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 8.5px; font-size: 11px;
font-weight: 700; font-weight: 700;
color: var(--text-faint); color: var(--text-faint);
letter-spacing: .04em; letter-spacing: .04em;
@@ -1211,7 +1212,7 @@ table.activos td {
.pm-card #activoAsignado2, .pm-card #activoAsignado2,
.pm-card #activoAsignado3 { .pm-card #activoAsignado3 {
font-family: var(--font-mono) !important; font-family: var(--font-mono) !important;
font-size: 10px !important; font-size: 12px !important;
font-weight: 800 !important; font-weight: 800 !important;
line-height: 1 !important; line-height: 1 !important;
background: transparent !important; background: transparent !important;
@@ -1306,8 +1307,8 @@ table.activos td {
} }
.dept-avatar-box { .dept-avatar-box {
width: 65px; width: 130px;
height: 65px; height: 130px;
border-radius: 10px; border-radius: 10px;
background: var(--panel-2); background: var(--panel-2);
border: 1px solid var(--border-soft); border: 1px solid var(--border-soft);
@@ -1319,7 +1320,7 @@ table.activos td {
} }
.dept-avatar-box img { .dept-avatar-box img {
height: 56px; height: 123px;
width: auto; width: auto;
object-fit: contain; object-fit: contain;
} }
@@ -1351,7 +1352,7 @@ table.activos td {
border-radius: 8px; border-radius: 8px;
background: var(--panel-2); background: var(--panel-2);
padding: 6px 10px; padding: 6px 10px;
font-size: 11px; font-size: 15px;
color: var(--text-dim); color: var(--text-dim);
line-height: 1.3; line-height: 1.3;
box-sizing: border-box; box-sizing: border-box;
@@ -1386,21 +1387,21 @@ table.activos td {
color: #C79A16 !important; color: #C79A16 !important;
font-family: var(--font-mono); font-family: var(--font-mono);
font-weight: 700; font-weight: 700;
font-size: 10px; font-size: 13px;
} }
.val-personal { .val-personal {
color: #0E86A8 !important; color: #0E86A8 !important;
font-family: var(--font-mono); font-family: var(--font-mono);
font-weight: 700; font-weight: 700;
font-size: 10px; font-size: 13px;
} }
.val-capital { .val-capital {
color: #8A38C4 !important; color: #8A38C4 !important;
font-family: var(--font-mono); font-family: var(--font-mono);
font-weight: 700; font-weight: 700;
font-size: 10px; font-size: 13px;
} }
.dept-habilidades-acreditadas-list { .dept-habilidades-acreditadas-list {
@@ -1413,7 +1414,7 @@ table.activos td {
.dept-hab-item { .dept-hab-item {
color: var(--text); color: var(--text);
font-size: 11px; font-size: 15px;
line-height: 1.3; line-height: 1.3;
} }
@@ -1460,7 +1461,7 @@ table.activos td {
border-width: 5px; border-width: 5px;
} }
.ui-dialog .ui-dialog-content { .ui-dialog .ui-dialog-content {
font-size: 16px; font-size: 15px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
} }