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 77c86122f0
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
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
1. **Desacoplamiento de Estilos (`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.
* **Cache Busting Dinámico**: Se implementó la inclusión con versión basada en tiempo de modificación (`filemtime('estilos3.css')`) en `colaborando3.php`.
* **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`.
1. **Reestructuración de Layout en Porcentajes (`estilos3.css`)**:
* **Cuadrícula Principal (`.layout`)**: Se migró de anchos fijos a `18% 1fr 30%`. La columna de Proyectos ocupa ahora el 30% del viewport.
* **Navegación Horizontal (`.rail-btns`)**: Se configuró en fila (`flex-direction: row`), manteniendo "Pantalla Completa" e "Ir al Resumen" en el mismo renglón.
* **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`**:
* 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.
* **Tarjetas de Proyectos**: Rediseño del Proyecto en Turno y proyectos secundarios con etiquetas compactas y contadores temáticos.
* **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; }`).
2. **Escala Visual y Tipografía**:
* **Avatares de Departamentos**: Se duplicó el tamaño del contenedor a **`130px × 130px`** y las imágenes a `123px` para mayor visibilidad.
* **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).
3. **Limpieza y Consistencia en `jsCode.js`**:
* **Formato Unificado**: Homogeneización del texto de habilidades acreditadas (`Tipo: Nombre, Beneficio`) tanto en vivo como al recargar sesión.
* **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`.
3. **Desacoplamiento previo de Estilos (`estilos3.css`)**:
* Estilos extraídos del bloque `<style>` de `colaborando3.php` con *cache busting* dinámico (`filemtime`).
---