Saltar al contenido principal

Fila "Contenido del curso" + insignias

Ficha técnica
  • Impacto — Tema: course_content_header.mustache, core_renderer::full_header() / course_content_header_context(), SCSS .cdigital-coursecontent* / .cdigital-coursebadges*
  • Impacto — Plugin: —
  • Requisito: 02 · Lógica Dashboard (xlsx) · Figma: 19723-2791 · Estado: Implementado

Propósito​

Fila que cierra el encabezado de la vista de curso, justo antes del contenido: el título "Contenido del curso" a la izquierda y, a la derecha, un enlace "Insignias" con el stack de insignias que el estudiante ya obtuvo en ese curso, hacia la página de insignias del curso. Da visibilidad permanente a los logros de gamificación en el flujo normal de estudio, sin depender de que el bloque de barra lateral esté agregado a la página.

Cuando el estudiante no tiene insignias en el curso (o las insignias están deshabilitadas a nivel de sitio), el grupo "Insignias" se omite por completo y solo queda el título — la fila nunca desaparece del todo, porque etiqueta el contenido del curso independientemente de la gamificación.

Diseño​

Tokens de color y tipografía según Figma 19723-2791:

ElementoValor
Título "Contenido del curso"Nunito Sans Bold 22px, line-height 1.2, color #111
Etiqueta "Insignias"Nunito Sans Regular 14px, line-height 1.5, color #002e87
Insignias del stackCirculares, 40×40 px, solape de 13px
Sombra del grupo "Insignias"0 4px 6px rgba(9, 67, 181, .05), border-radius: 12px
Separación vertical con los bloques vecinos16px por encima (respecto al banner "Tu desempeño académico") y 16px por debajo (respecto a la navegación secundaria del curso)

El ritmo vertical de 16px es el mismo que usa Figma entre cada bloque del encabezado de curso (banner → pestañas, pestañas → esta fila). .course-info-banner bajó su margin-bottom de 24px a 16px porque, tras esta feature, el banner queda siempre seguido inmediatamente por esta fila (los márgenes verticales de bloques contiguos colapsan al mayor de los dos, así que ambos deben declarar 16px para que el espacio visible sea 16px y no 24px).

Implementación técnica​

Punto de inyección​

theme_cdigital/classes/output/core_renderer.php añade la fila en full_header(), en un if separado del que controla la fila hero y el banner "Tu desempeño académico" (Banner informativo de curso): esos dos comparten el ajuste enablecoursebanner, pero esta fila no depende de él — etiqueta el contenido del curso en sí, así que debe seguir visible aunque el banner esté apagado.

if ($this->page->pagelayout === 'course' && $this->page->course->id != SITEID) {
    $output .= $this->render_from_template(
        'theme_cdigital/course_content_header',
        $this->course_content_header_context()
    );
}

Datos de insignias​

course_content_header_context() reutiliza exactamente la misma fuente de datos y las mismas guardas que ya usan el bloque core block_badges (mostrado en /my/, ver Widget insignias del Área personal más abajo) y el bloque propio block_pccntr8203403_logros de la barra lateral de curso:

  • Guardas: $CFG->enablebadges, $CFG->badges_allowcoursebadges, isloggedin(), !isguestuser().
  • Datos: badges_get_user_badges($USER->id, $courseid, 0, 5) — solo insignias ya obtenidas por el usuario en el curso actual, orden dateissued DESC, tope de 5 (el resto se ve siguiendo el enlace).
  • Imagen de cada insignia: mismo patrón de resolución de contexto y tamaño (f3) que core_badges_renderer::print_badges_list().
  • Enlace del grupo: /badges/view.php?type=2&id=<courseid> (insignias del curso), el mismo destino que ya usa block_pccntr8203403_logros.

Plantilla​

theme_cdigital/templates/course_content_header.mustache — el grupo de insignias es un único <a> (no un botón, a diferencia de Figma, porque navega a otra página) con aria-label que indica cuántas insignias se muestran; las imágenes van con alt="" porque el nombre accesible ya lo aporta el enlace completo.

Relación con el Área personal​

Esta fila no modifica nada de /my/: ni layout/mydashboard.php, ni el bloque core block_badges, ni sus reglas SCSS. Se reutilizan sus mismas APIs de datos (badges_get_user_badges()) y los mismos valores visuales del stack superpuesto (40px, circular, solape de 13px), pero declarados en una sección SCSS propia (.cdigital-coursebadges__stack) — la duplicación de esos valores frente a .block[data-block="badges"] es deliberada, para no editar CSS ya en funcionamiento en el Área personal en esta iteración.

Ajuste de administración​

Ninguno propio: la fila no tiene un toggle dedicado (ver "Diseño" arriba) y las insignias se gobiernan íntegramente por los ajustes nativos de Moodle (Administración del sitio > Insignias).

Archivos modificados​

ArchivoCambio
classes/output/core_renderer.phpBloque nuevo en full_header() + método course_content_header_context()
templates/course_content_header.mustachePlantilla de la fila (nueva)
scss/preset/cdigital.scssSecciones .cdigital-coursecontent* / .cdigital-coursebadges* (nuevas, con margin-top/margin-bottom: 16px); .course-info-banner con margin-bottom ajustado de 24px a 16px; nota añadida junto a .block[data-block="badges"] señalando la duplicación de valores
lang/en/theme_cdigital.php · lang/es/theme_cdigital.phpStrings coursecontent_*
version.phpBump de versión