Marco del contenido de actividad

Ficha técnica

• Impacto — Tema: SCSS nuevo scss/activitypage.scss + scss/mixins.scss, registrados en theme_cdigital_get_main_scss_content() (lib.php)
• Impacto — Plugin: —
• Requisito: Lógica Dashboard / Panel aprendizaje (xlsx) · Figma: 19784-6263, 19784-6837 · Estado: Implementado

Propósito

Extiende el lenguaje visual del marco de secciones del curso (tarjeta blanca de borde redondeado, cabecera sombreada en los paneles colapsables) a la página individual de actividad (mod/*/view.php), usando contratos de core estables y transversales a cualquier tipo de módulo — no una plantilla por cada plugin de actividad.

Alcance

Aplica dentro de id="page-content", el mismo límite acordado para todo el contenido interno de curso (ver Marco de secciones del curso). Cuatro piezas, las cuatro sobre selectores estables de core o de clases de core reutilizadas en un plugin de core, sin sobrescribir ninguna plantilla:

1. Tarjeta de descripción de actividad — core\output\activity_header + lib/templates/activity_header.mustache. La renderiza el layout (theme/boost/layout/drawers.php), no cada script mod/*/view.php, así que aplica a todo módulo con $PAGE->activityrecord — es decir, toda página de actividad a la que el usuario esté matriculado. Ya la pintaba Boost como caja gris redondeada; aquí se recolorea a blanco con el mismo borde/radio que las secciones, y se antepone un ícono decorativo (Icon/book, el mismo ya usado en course_content_header.mustache) — genérico para todo tipo de módulo, no mapeado por tipo de actividad.
2. Navegación anterior/siguiente actividad — core_course\output\activity_navigation, emitida por core_renderer::activity_navigation() en toda página de módulo con layout incourse. Se estila como tarjeta con botones tipo píldora; el texto y el glifo ◄/► siguen siendo los de core, en una sola línea (ver "Decisiones de alcance").
3. mod_assign, panel "Agregar entrega" — no es una plantilla propia del tema ni de mod_assign: $mform->addElement('header', 'submission header', ...) (mod/assign/locallib.php) pasa por core_form/element-header.mustache, que ya emite un acordeón real de Bootstrap (fieldset.collapsible) con el mismo mecanismo .icons-collapse-expand/.collapsed que el drawer de índice de curso y el marco de secciones ya usan. Se le aplica la misma cabecera sombreada + chevron.
4. mod_folder, listado de archivos — mod/folder/templates/folder.mustache envuelve el árbol de archivos en .box.generalbox.foldertree, con filas .fp-filename-icon/.fp-icon/.fp-filename (familia de clases del filepicker/filemanager de core, no inventada por el plugin). Se estila como tarjeta; el encabezado "Ver archivos" del Figma no se reproduce (ver "Decisiones de alcance").

Decisiones de alcance

Acordadas explícitamente antes de implementar, para no sobrescribir ninguna plantilla de core ni de plugin (con el costo de resincronización en cada upgrade que eso implicaría — mismo trade-off que ya aceptó theme_moove en este árbol para el mismo componente, theme/moove/classes/output/core_course/activity_navigation.php):

• La navegación anterior/siguiente actividad conserva el glifo ◄/► + nombre de core en una sola línea, no la leyenda de dos líneas "Actividad anterior" / nombre del Figma: ese texto y el glifo llegan concatenados en un único nodo de texto ($OUTPUT->larrow() . ' ' . $nombre), así que separarlos exigiría sobrescribir la plantilla. Distinto de la navegación anterior/siguiente sección de la vista de una sola sección (marco de secciones), que sí lleva la leyenda completa porque ahí la plantilla es enteramente propia del tema, no un override de una de core.
• mod_folder no lleva el encabezado "Ver archivos" del Figma: no existe como string de idioma ni en ninguna plantilla de core o del plugin, y fijarlo en CSS (content: "Ver archivos") rompería con otros idiomas.
• El texto de instrucciones que el Figma dibuja dentro del acordeón "Agregar entrega" en realidad vive en la tarjeta de descripción, no dentro del formulario: son subárboles de DOM distintos (.activity-header, que arma render_assign_header() en mod/assign/classes/output/renderer.php, y .box.editsubmissionform, que arma add_submission_form_elements() en mod/assign/locallib.php), y moverlo de uno a otro requeriría cambios en mod_assign, no solo CSS. No se duplica: la tarjeta de descripción, justo arriba, ya lo muestra.
• Ícono decorativo genérico en la tarjeta de descripción, igual para todo tipo de módulo: mapear un ícono distinto por cada uno de los tipos de actividad instalados en el sitio es una entrega aparte.

Detalles técnicos

• Encabezado duplicado corregido. lib/templates/activity_header.mustache antepone un <h2>{{title}}</h2> (hermano de .activity-header, sin clase ni id) que repite el mismo texto que el <h1> genérico de Boost (#page-header-headings, dentro de header#page-header.header-maxwidth). El duplicado ya existía en Moodle/Boost antes de esta entrega; solo se volvió evidente al quedar justo encima de la tarjeta de descripción nueva. Se oculta el <h2> (body.path-mod h2:has(+ .activity-header) { display: none; }) y se conserva el <h1>, que es el patrón consistente en todo el sitio y ya queda alineado con la miga de pan.
• Ancho de página alineado con la miga de pan. theme/boost/scss/moodle/layout.scss acota .main-inner (todo el contenido principal) a $course-content-maxwidth solo cuando el body tiene pagelayout-standard o limitedwidth — ninguna de las dos aplica en pagelayout-incourse (toda página de actividad), mientras que .header-maxwidth (miga de pan + <h1>) se acota siempre, sin condición. Esa inconsistencia de Boost, preexistente y antes invisible, hacía que el contenido de actividad se viera más ancho que la miga de pan de arriba en cuanto tuvo un borde propio que lo delatara. Se replica la misma regla de Boost, con el mismo selector (#page.drawers .main-inner) y la misma variable ($course-content-maxwidth, 1024px), añadiendo pagelayout-incourse a la lista de condiciones — alinea todo el contenido de la página de actividad con la miga de pan, no solo la tarjeta de descripción.

Archivos del tema involucrados

Archivo	Función
scss/mixins.scss	@mixin cdigital-chevron-toggle() — mecanismo de chevron reutilizado también aquí para el acordeón de mod_assign
scss/activitypage.scss	Todo el restyle: ancho de página, encabezado duplicado, tarjeta de descripción, navegación de actividad, acordeón de mod_assign, tarjeta de archivos de mod_folder
lib.php	theme_cdigital_get_main_scss_content() — registra el parcial anterior después de scss/coursesections.scss

Build y despliegue

Solo SCSS: no requiere build de AMD (grunt). Basta con purgar cachés tras el despliegue — ver Procedimiento de despliegue.

Historial de cambios

Ver CHANGELOG.md en la raíz del sitio de documentación.