Welcome Hero del Área personal (/my/)
Sección de bienvenida renderizada en la parte superior del Área personal (/my/), encima del Stats Row. Saluda al estudiante por su nombre y ofrece dos accesos rápidos a su proceso de formación. Figma node 19541-3137.
| Elemento | Contenido | Fuente del dato |
|---|---|---|
| Saludo | "Hola {nombre} 👋" | $USER->firstname |
| Título (H1) | "Continúa tu aprendizaje" | string welcomehero_title |
| CTA primario | "Continuar último curso" → curso accedido más recientemente | course_get_recent_courses($USER->id, 1) (API core) |
| CTA secundario | "Ver mis cursos" | /my/courses.php |
| Ilustración | Imagen 455×288 (recorte inferior, object-fit: cover) | pix/welcome-hero.png |
Arquitectura
Mismo patrón del Stats Row (ADR-002): presentación quemada en el tema, sin bloques custom. No requiere el plugin local de datos — usa solo APIs core.
theme_cdigital/layout/mydashboard.php
└── arma el contexto welcomehero (nombre, URLs, imagen)
└── renderiza templates/mydashboard.mustache
└── partial templates/welcome_hero.mustache (wrapper .cdigital-welcomehero)
- Si el usuario no tiene cursos accedidos recientemente, el CTA primario se oculta (sección
{{#lastcourseurl}}). - La sección solo se muestra a usuarios autenticados no invitados (igual que el Stats Row).
Ajustes de layout (pixel-perfect)
El hero reemplaza el heading por defecto "Área personal" y ensancha la página para igualar el diseño de Figma (1288 px). Ambos ajustes van atados a la clase de body has-welcomehero, que el layout agrega solo cuando el hero se renderiza:
.has-welcomehero #page-header .page-header-headings { display: none }— evita un doble H1; para invitados el heading nativo sigue visible.body.limitedwidth.has-welcomehero #page.drawers .main-inner { max-width: 1320px }—/my/usalimitedwidthy quedaba capado a$course-content-maxwidth(1024 px). 1320 = 1288 del Figma + gutterspx-3(2×16 px). No afecta cursos ni otras páginaslimitedwidth. Nota: el Stats Row también se ensancha a 1288 px al vivir en el mismo.main-inner.- La sección no tiene padding vertical: la ilustración (455×288 fijos) define la altura de 288 px y el contenido se centra, como en el frame de Figma. En
<992pxla ilustración se oculta y en<576pxlos botones pasan a ancho completo.
Archivos clave
| Archivo | Descripción |
|---|---|
theme/cdigital/layout/mydashboard.php | Arma el contexto welcomehero y agrega la clase de body has-welcomehero |
theme/cdigital/templates/welcome_hero.mustache | Partial de la sección (saludo, H1, descripción, CTAs, ilustración) |
theme/cdigital/templates/mydashboard.mustache | Incluye el partial encima del Stats Row |
theme/cdigital/scss/preset/cdigital.scss | Sección .cdigital-welcomehero + overrides has-welcomehero |
theme/cdigital/pix/welcome-hero.png | Ilustración exportada del Figma (910 px de ancho, 2× del render) |
theme/cdigital/lang/{en,es}/theme_cdigital.php | Strings welcomehero_greeting, welcomehero_title, welcomehero_description, welcomehero_continue, welcomehero_mycourses |