Saltar al contenido principal

Banner informativo de curso — "Tu desempeño académico"

Componente: theme_cdigital
Figma: nodo 19723-2780
Alcance: 2 — Dashboard de aprendizaje
Estado: Estable

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:

TokenValor
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 en course_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:

SettingDescripción
enablecoursebannerActiva/desactiva el banner informativo en la vista de curso

Configurado en theme_cdigital/settings.php.

Íconos utilizados

ÍconoArchivoUso
Advertenciapix/icon-warning.svgLado izquierdo del banner
Flechapix/icon-arrow-alt.svgEnlace "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

ArchivoCambio
classes/output/core_renderer.phpOverride de full_header()
templates/course_info_banner.mustacheTemplate del banner
scss/preset/cdigital.scssEstilos del banner + padding ajustado (8px → 5px vertical)
settings.phpSetting enablecoursebanner
lang/en/theme_cdigital.php · lang/es/theme_cdigital.phpStrings del banner
version.phpBump de versión
pix/icon-arrow-alt.svgÍcono de flecha (nuevo)