Saltar al contenido principal

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.

ElementoContenidoFuente 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 recientementecourse_get_recent_courses($USER->id, 1) (API core)
CTA secundario"Ver mis cursos"/my/courses.php
IlustraciónImagen 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/ usa limitedwidth y quedaba capado a $course-content-maxwidth (1024 px). 1320 = 1288 del Figma + gutters px-3 (2×16 px). No afecta cursos ni otras páginas limitedwidth. 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 <992px la ilustración se oculta y en <576px los botones pasan a ancho completo.

Archivos clave

ArchivoDescripción
theme/cdigital/layout/mydashboard.phpArma el contexto welcomehero y agrega la clase de body has-welcomehero
theme/cdigital/templates/welcome_hero.mustachePartial de la sección (saludo, H1, descripción, CTAs, ilustración)
theme/cdigital/templates/mydashboard.mustacheIncluye el partial encima del Stats Row
theme/cdigital/scss/preset/cdigital.scssSección .cdigital-welcomehero + overrides has-welcomehero
theme/cdigital/pix/welcome-hero.pngIlustración exportada del Figma (910 px de ancho, 2× del render)
theme/cdigital/lang/{en,es}/theme_cdigital.phpStrings welcomehero_greeting, welcomehero_title, welcomehero_description, welcomehero_continue, welcomehero_mycourses