Banner informativo de curso — "Tu desempeño académico"
- Impacto — Tema: Override
core_renderer::full_header(),course_info_banner.mustache, settingenablecoursebanner - Impacto — Plugin: —
- Requisito: 02 · Lógica Dashboard (xlsx) · Figma:
19723-2780· Estado: Implementado
Propósito
Banner amarillo que aparece en la parte superior de la vista de curso para usuarios autenticados no invitados, orientando al estudiante hacia su panel de desempeño académico y el modal "Ver mi avance".
Diseño
Tokens de color según Figma:
| Token | Valor |
|---|---|
| Fondo | #fffae8 (corn-silk) |
| Franja de acento | #fecc2f (sunglow) |
| Color de texto del enlace | #0943b5 (cobalt) |
Dimensiones: altura exacta 60 px (Figma). Ícono de advertencia a la izquierda, texto descriptivo y flecha-enlace a la derecha.
Implementación técnica
Override del renderer
theme_cdigital/classes/output/core_renderer.php sobreescribe full_header() para inyectar el banner entre el título del curso y la barra de navegación (moremenu):
// Injects course_info_banner between course title and navigation moremenu
public function full_header(): string { ... }
Nota: El banner se inyecta en
full_header()y no encourse_content_header(): solo así queda en la posición que define Figma (entre el título del curso y el moremenu).
Template Mustache
theme_cdigital/templates/course_info_banner.mustache — renderiza el banner completo con los tokens de diseño y el ícono icon-warning.svg.
Setting de administración
El banner se puede activar/desactivar desde Administración del sitio > Apariencia > Tema cdigital:
| Setting | Descripción |
|---|---|
enablecoursebanner | Gobierna toda la cabecera propia de la vista de curso: la fila héroe del curso, este banner y el acceso a la modal "Ver mi avance". Desactivarlo devuelve la vista al encabezado nativo de Boost. Ver Ajustes del tema |
Configurado en theme_cdigital/settings.php.
Íconos utilizados
| Ícono | Archivo | Uso |
|---|---|---|
| Advertencia | pix/icon-warning.svg | Lado izquierdo del banner |
| Flecha | pix/icon-arrow-alt.svg | Enlace "Ver mi avance" (path de Figma, color #0943B5) |
Accesibilidad
El botón de enlace usa aria-disabled + pointer-events: none en lugar del atributo disabled (no válido en <a>) para deshabilitar el enlace sin pérdida de accesibilidad.
Archivos modificados
| Archivo | Cambio |
|---|---|
classes/output/core_renderer.php | Override de full_header() |
templates/course_info_banner.mustache | Template del banner |
scss/preset/cdigital.scss | Estilos del banner + padding ajustado (8px → 5px vertical) |
settings.php | Setting enablecoursebanner |
lang/en/theme_cdigital.php · lang/es/theme_cdigital.php | Strings del banner |
version.php | Bump de versión |
pix/icon-arrow-alt.svg | Ícono de flecha (nuevo) |