EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #4154 from crazyserver/MOBILE-4636 

MOBILE-4636 course: Enclose sections in cards instead of modules
main
Dani Palou 2024-09-17 14:47:04 +02:00 committed by GitHub
parent 7271ee3c24 d87dfc9678
commit 404cbf7965
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 244 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
View File

@ -4,7 +4,7 @@
</ion-label>
</ion-item-divider>
<core-loading [hideUntil]="loaded">
<ion-list *ngIf="mainMenuBlock" class="core-course-module-list-wrapper">
<ion-list *ngIf="mainMenuBlock" class="core-course-module-list-wrapper list-item-limited-width">
<ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
<ion-label>
<core-format-text [text]="mainMenuBlock.summary" [component]="component" [componentId]="siteHomeId" contextLevel="course"

7
src/core/components/infinite-loading/infinite-loading.ts
View File

@ -112,6 +112,13 @@ export class CoreInfiniteLoadingComponent implements OnChanges {
this.action.emit(() => this.complete());
}
/**
* Fire the infinite scroll load more action if needed.
*/
async fireInfiniteScrollIfNeeded(): Promise<void> {
this.checkScrollDistance();
}
/**
* Complete loading.
*/

62
src/core/features/course/components/course-format/course-format.html
View File

@ -8,22 +8,27 @@
<core-loading [hideUntil]="loaded">
<!-- Single section. -->
<div *ngIf="selectedSection && selectedSection.id !== allSectionsId">
<div *ngIf="selectedSection && selectedSection.id !== allSectionsId" class="single-section list-item-limited-width">
<core-dynamic-component [component]="singleSectionComponent" [data]="data">
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection}" />
<ion-accordion-group [readonly]="true" value="single">
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection, sectionId: 'single'}" />
</ion-accordion-group>
<core-empty-box *ngIf="!selectedSection.hasContent" icon="fas-table-cells-large"
[message]="'core.course.nocontentavailable' | translate" />
</core-dynamic-component>
</div>
<!-- Multiple sections. -->
<div *ngIf="selectedSection && selectedSection.id === allSectionsId">
<div *ngIf="selectedSection && selectedSection.id === allSectionsId" class="multiple-sections list-item-limited-width">
<core-dynamic-component [component]="allSectionsComponent" [data]="data">
<ng-container *ngFor="let section of sections; index as i">
<ng-container *ngIf="i <= lastShownSectionIndex">
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}" />
</ng-container>
</ng-container>
<ion-accordion-group [multiple]="true" (ionChange)="accordionMultipleChange($event.detail)" [value]="accordionMultipleValue"
#accordionMultiple>
@for (section of sections; track section.id) {
@if ($index <= lastShownSectionIndex) {
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section, sectionId: section.id}" />
}
}
</ion-accordion-group>
</core-dynamic-component>
<core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)" />
@ -62,12 +67,12 @@
</ion-fab>
<!-- Template to render a section. -->
<ng-template #sectionTemplate let-section="section">
<section *ngIf="!section.hiddenbynumsections && section.id !== allSectionsId && section.id !== stealthModulesSectionId"
<ng-template #sectionTemplate let-section="section" let-sectionId="sectionId">
<ion-accordion *ngIf="!section.hiddenbynumsections && section.id !== allSectionsId && section.id !== stealthModulesSectionId"
class="core-course-module-list-wrapper" [id]="section.id"
[attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null">
<ion-item-divider class="course-section ion-text-wrap" [class.item-dimmed]="section.visible === 0 || section.uservisible === false">
<ion-label>
[attr.aria-labelledby]="section.name ? 'core-section-name-' + section.id : null" [value]="''+sectionId" toggleIconSlot="start">
<ion-item class="course-section divider" [class.item-dimmed]="section.visible === 0 || section.uservisible === false" slot="header">
<ion-label class="ion-text-wrap">
<h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course.id" />
</h2>
@ -91,19 +96,24 @@
</div>
</ion-label>
<ion-badge *ngIf="section.highlighted && highlighted" slot="end">{{highlighted}}</ion-badge>
</ion-item-divider>
<ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
<ion-label>
<core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id" />
</ion-label>
</ion-item>
<ng-container *ngFor="let module of section.modules">
<core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section"
[showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
[isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === module.id" [class.core-course-module-not-viewed]="
!viewedModules[module.id] && (!module.completiondata || module.completiondata.state === completionStatusIncomplete)" />
</ng-container>
</section>
<div slot="content">
<ng-container *ngIf="section.expanded">
<ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
<ion-label>
<core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="course.id" />
</ion-label>
</ion-item>
<ng-container *ngFor="let module of section.modules">
<core-course-module *ngIf="module.visibleoncoursepage !== 0" [module]="module" [section]="section"
[showActivityDates]="course.showactivitydates" [showCompletionConditions]="course.showcompletionconditions"
[isLastViewed]="lastModuleViewed && lastModuleViewed.cmId === module.id"
[class.core-course-module-not-viewed]="
!viewedModules[module.id] && (!module.completiondata || module.completiondata.state === completionStatusIncomplete)" />
</ng-container>
</ng-container>
</div>
</ion-accordion>
</ng-template>

23
src/core/features/course/components/course-format/course-format.scss
View File

@ -14,3 +14,26 @@
.course-section {
--inner-padding-end: 12px;
}
.multiple-sections .core-course-module-list-wrapper {
border: var(--ion-card-border-width) solid var(--ion-card-border-color);
border-radius: var(--ion-card-radius);
margin: 8px 4px;
width: calc(100% - 8px);
ion-card {
--ion-card-background: transparent;
}
ion-item.divider.course-section {
--background: transparent;
}
}
.single-section ::ng-deep {
ion-item.divider.course-section {
ion-icon.ion-accordion-toggle-icon {
display: none;
}
}
}

136
src/core/features/course/components/course-format/course-format.ts
View File

@ -24,6 +24,7 @@ import {
Type,
ElementRef,
ChangeDetectorRef,
ViewChild,
} from '@angular/core';
import { CoreDomUtils } from '@services/utils/dom';
import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component';
@ -39,7 +40,7 @@ import {
} from '@features/course/services/course-helper';
import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate';
import { CoreEventObserver, CoreEvents } from '@singletons/events';
import { IonContent } from '@ionic/angular';
import { AccordionGroupChangeEventDetail, IonContent } from '@ionic/angular';
import { CoreUtils } from '@services/utils/utils';
import { CoreCourseIndexSectionWithModule } from '../course-index/course-index';
import { CoreBlockHelper } from '@features/block/services/block-helper';
@ -57,8 +58,10 @@ import { CoreSharedModule } from '@/core/shared.module';
import { CoreBlockComponentsModule } from '@features/block/components/components.module';
import { CoreCourseComponentsModule } from '../components.module';
import { CoreSites } from '@services/sites';
import { COURSE_ALL_SECTIONS_PREFERRED_PREFIX } from '@features/course/constants';
import { COURSE_ALL_SECTIONS_PREFERRED_PREFIX, COURSE_EXPANDED_SECTIONS_PREFIX } from '@features/course/constants';
import { toBoolean } from '@/core/transforms/boolean';
import { CoreInfiniteLoadingComponent } from '@components/infinite-loading/infinite-loading';
import { CoreSite } from '@classes/sites/site';
/**
* Component to display course contents using a certain format. If the format isn't found, use default one.
@ -96,6 +99,10 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ViewChildren(CoreDynamicComponent) dynamicComponents?: QueryList<CoreDynamicComponent<any>>;
@ViewChild(CoreInfiniteLoadingComponent) infiteLoading?: CoreInfiniteLoadingComponent;
accordionMultipleValue: string[] = [];
// All the possible component classes.
courseFormatComponent?: Type<unknown>;
singleSectionComponent?: Type<unknown>;
@ -119,9 +126,9 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
displayCourseIndex = false;
displayBlocks = false;
hasBlocks = false;
selectedSection?: CoreCourseSection;
previousSection?: CoreCourseSection;
nextSection?: CoreCourseSection;
selectedSection?: CoreCourseSectionToDisplay;
previousSection?: CoreCourseSectionToDisplay;
nextSection?: CoreCourseSectionToDisplay;
allSectionsId: number = CoreCourseProvider.ALL_SECTIONS_ID;
stealthModulesSectionId: number = CoreCourseProvider.STEALTH_MODULES_SECTION_ID;
loaded = false;
@ -136,6 +143,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
protected modViewedObserver?: CoreEventObserver;
protected lastCourseFormat?: string;
protected viewedModulesInitialized = false;
protected currentSite?: CoreSite;
constructor(
protected content: IonContent,
@ -158,6 +166,8 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
return;
}
this.currentSite = CoreSites.getRequiredCurrentSite();
// Listen for select course tab events to select the right section if needed.
this.selectTabObserver = CoreEvents.on(CoreEvents.SELECT_COURSE_TAB, (data) => {
if (data.name) {
@ -196,10 +206,12 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
}
this.changeDetectorRef.markForCheck();
});
this.initializeExpandedSections();
}
/**
* Detect changes on input properties.
* @inheritdoc
*/
async ngOnChanges(changes: { [name: string]: SimpleChange }): Promise<void> {
this.setInputData();
@ -287,14 +299,12 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
* Treat received sections.
*
* @param sections Sections to treat.
* @returns Promise resolved when done.
*/
protected async treatSections(sections: CoreCourseSection[]): Promise<void> {
protected async treatSections(sections: CoreCourseSectionToDisplay[]): Promise<void> {
const hasAllSections = sections[0].id == CoreCourseProvider.ALL_SECTIONS_ID;
const hasSeveralSections = sections.length > 2 || (sections.length == 2 && !hasAllSections);
await this.initializeViewedModules();
if (this.selectedSection) {
const selectedSection = this.selectedSection;
// We have a selected section, but the list has changed. Search the section in the list.
@ -366,14 +376,10 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
this.loaded = true;
this.sectionChanged(section, moduleId);
}
return;
}
/**
* Initialize viewed modules.
*
* @returns Promise resolved when done.
*/
protected async initializeViewedModules(): Promise<void> {
if (this.viewedModulesInitialized) {
@ -387,6 +393,13 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
viewedModules.forEach(entry => {
this.viewedModules[entry.cmId] = true;
});
if (this.lastModuleViewed) {
const section = this.getViewedModuleSection(this.sections, this.lastModuleViewed);
if (section) {
this.setSectionExpanded(section);
}
}
}
/**
@ -426,7 +439,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
// Check current scrolled section.
const allSectionElements: NodeListOf<HTMLElement> =
this.elementRef.nativeElement.querySelectorAll('section.core-course-module-list-wrapper');
this.elementRef.nativeElement.querySelectorAll('.core-course-module-list-wrapper');
const scroll = await this.content.getScrollElement();
const containerTop = scroll.getBoundingClientRect().top;
@ -515,12 +528,15 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
* @param newSection The new selected section.
* @param moduleId The module to scroll to.
*/
sectionChanged(newSection: CoreCourseSection, moduleId?: number): void {
sectionChanged(newSection: CoreCourseSectionToDisplay, moduleId?: number): void {
const previousValue = this.selectedSection;
this.selectedSection = newSection;
this.data.section = this.selectedSection;
if (newSection.id !== this.allSectionsId) {
this.setSectionExpanded(newSection);
// Select next and previous sections to show the arrows.
const i = this.sections.findIndex((value) => this.compareSections(value, newSection));
@ -627,7 +643,10 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
modulesLoaded < CoreCourseFormatComponent.LOAD_MORE_ACTIVITIES) {
this.lastShownSectionIndex++;
if (!this.sections[this.lastShownSectionIndex].hasContent || !this.sections[this.lastShownSectionIndex].modules) {
// Skip sections without content, with stealth modules or collapsed.
if (!this.sections[this.lastShownSectionIndex].hasContent ||
!this.sections[this.lastShownSectionIndex].modules ||
!this.sections[this.lastShownSectionIndex].expanded) {
continue;
}
@ -712,10 +731,8 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
*
* @param show Whether if all sections is preferred.
*/
async setAllSectionsPreferred(show: boolean): Promise<void> {
const site = CoreSites.getCurrentSite();
await site?.setLocalSiteConfig(`${COURSE_ALL_SECTIONS_PREFERRED_PREFIX}${this.course.id}`, show ? 1 : 0);
protected async setAllSectionsPreferred(show: boolean): Promise<void> {
await this.currentSite?.setLocalSiteConfig(`${COURSE_ALL_SECTIONS_PREFERRED_PREFIX}${this.course.id}`, show ? 1 : 0);
}
/**
@ -723,17 +740,88 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
*
* @returns Whether if all sections is preferred.
*/
async isAllSectionsPreferred(): Promise<boolean> {
const site = CoreSites.getCurrentSite();
protected async isAllSectionsPreferred(): Promise<boolean> {
const showAllSections =
await site?.getLocalSiteConfig<number>(`${COURSE_ALL_SECTIONS_PREFERRED_PREFIX}${this.course.id}`, 0);
await this.currentSite?.getLocalSiteConfig<number>(`${COURSE_ALL_SECTIONS_PREFERRED_PREFIX}${this.course.id}`, 0);
return !!showAllSections;
}
/**
* Save expanded sections for the course.
*/
protected async saveExpandedSections(): Promise<void> {
const expandedSections = this.sections.filter((section) => section.expanded).map((section) => section.id).join(',');
await this.currentSite?.setLocalSiteConfig(`${COURSE_EXPANDED_SECTIONS_PREFIX}${this.course.id}`, expandedSections);
}
/**
* Initializes the expanded sections for the course.
*/
protected async initializeExpandedSections(): Promise<void> {
const expandedSections = await CoreUtils.ignoreErrors(
this.currentSite?.getLocalSiteConfig<string>(`${COURSE_EXPANDED_SECTIONS_PREFIX}${this.course.id}`),
);
// Expand all sections if not defined.
if (expandedSections === undefined) {
this.sections.forEach((section) => {
section.expanded = true;
this.accordionMultipleValue.push(section.id.toString());
});
return;
}
this.accordionMultipleValue = expandedSections.split(',');
this.sections.forEach((section) => {
section.expanded = this.accordionMultipleValue.includes(section.id.toString());
});
}
/**
* Toogle the visibility of a section (expand/collapse).
*
* @param ev The event of the accordion.
*/
accordionMultipleChange(ev: AccordionGroupChangeEventDetail): void {
const sectionIds = ev.value as string[] | undefined;
this.sections.forEach((section) => {
section.expanded = false;
});
sectionIds?.forEach((sectionId) => {
const sId = Number(sectionId);
const section = this.sections.find((section) => section.id === sId);
if (section) {
section.expanded = true;
}
});
// Save course expanded sections.
this.saveExpandedSections();
this.infiteLoading?.fireInfiniteScrollIfNeeded();
}
/**
* Expands a section and save state.
*
* @param section The section to expand.
*/
protected setSectionExpanded(section: CoreCourseSectionToDisplay): void {
section.expanded = true;
if (!this.accordionMultipleValue.includes(section.id.toString())) {
this.accordionMultipleValue.push(section.id.toString());
this.saveExpandedSections();
}
}
}
type CoreCourseSectionToDisplay = CoreCourseSection & {
highlighted?: boolean;
expanded?: boolean; // The aim of this property is to avoid DOM overloading.
};

4
src/core/features/course/components/module/core-course-module.html
View File

@ -1,7 +1,7 @@
<ion-card *ngIf="module.handlerData && module.visibleoncoursepage !== 0"
class="activity-card core-course-module-handler {{module.handlerData.class}}" [class.core-course-module-with-view]="moduleHasView"
[class.item-dimmed]="module.visible === 0 || module.uservisible === false" [class.activityinline]="activityInline"
(click)="moduleClicked($event)" [button]="module.handlerData.action && module.uservisible"
[class.item-dimmed]="module.visible === 0 || module.uservisible === false" (click)="moduleClicked($event)"
[button]="module.handlerData.action && module.uservisible"
[attr.aria-label]="module.handlerData.a11yTitle ? module.handlerData.a11yTitle : null" id="core-course-module-{{module.id}}">
<ng-container *ngIf="!module.handlerData.loading">
<ion-item class="ion-text-wrap">

17
src/core/features/course/components/module/module.scss
View File

@ -4,13 +4,15 @@
--horizontal-margin: 12px;
--vertical-margin: 12px;
--card-padding: 16px;
--card-border-width: 0px;
--card-radius: 0px;
--card-background: transparent;
ion-card {
margin: var(--vertical-margin) var(--horizontal-margin);
&.activityinline {
border: 0px;
}
--ion-card-border-width: var(--card-border-width);
--ion-card-radius: var(--card-radius);
--ion-card-background: var(--card-background);
}
ion-item {
@ -125,6 +127,7 @@
}
.activity-extrabadges {
font: var(--mdl-typography-body-font-md);
color: var(--medium);
}
@ -182,13 +185,11 @@
}
&.indented ion-card {
border: none;
--ion-card-radius: 0;
@include margin-horizontal(calc(var(--horizontal-margin) + 1rem), null);
}
&.indented + ::ng-deep core-course-module.indented ion-card {
border-top: 1px solid var(--border-color);
& + ::ng-deep core-course-module ion-card {
border-top: 1px solid var(--ion-card-border-color);
}
// Hide download folder icon meanwhile MOBILE-4147 is not solved

13
src/core/features/course/components/module/module.ts
View File

@ -66,7 +66,6 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
prefetchStatusIcon$ = new BehaviorSubject<string>(''); // Module prefetch status icon.
prefetchStatusText$ = new BehaviorSubject<string>(''); // Module prefetch status text.
moduleHasView = true;
activityInline = false;
protected prefetchHandler?: CoreCourseModulePrefetchHandler;
@ -103,18 +102,6 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
this.module.handlerData.a11yTitle = this.module.handlerData.a11yTitle ?? this.module.handlerData.title;
this.moduleHasView = CoreCourse.moduleHasView(this.module);
if (
this.module.handlerData.hasCustomCmListItem &&
(!this.showAvailability || !this.module.availabilityinfo) &&
(!this.showCompletion || !this.hasCompletion) &&
(!this.showActivityDates || !this.module.dates?.length) &&
!this.module.groupmode &&
!(this.module.visible === 0) &&
!(this.module.visible !== 0 && this.module.isStealth)
) {
this.activityInline = true;
}
if (this.showDownloadStatus && this.module.handlerData.showDownloadButton) {
const status = await CoreCourseModulePrefetchDelegate.getDownloadedModuleStatus(this.module, this.module.course);
this.updateModuleStatus(status);

1
src/core/features/course/constants.ts
View File

@ -18,3 +18,4 @@ export const CONTENTS_PAGE_NAME = 'contents';
export const COURSE_CONTENTS_PATH = `${COURSE_PAGE_NAME}/${COURSE_INDEX_PATH}/${CONTENTS_PAGE_NAME}`;
export const COURSE_ALL_SECTIONS_PREFERRED_PREFIX = 'CoreCourseFormatAllSectionsPreferred-';
export const COURSE_EXPANDED_SECTIONS_PREFIX = 'CoreCourseFormatExpandedSections-';

6
src/core/features/course/pages/list-mod-type/list-mod-type.html
View File

@ -8,7 +8,7 @@
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-content class="limited-width">
<ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshData($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
</ion-refresher>
@ -18,7 +18,7 @@
<ion-list class="core-course-module-list-wrapper">
<ng-container *ngFor="let section of sections; index as i">
<ng-container *ngIf="i <= lastShownSectionIndex">
<ion-card *ngIf="i <= lastShownSectionIndex">
<ion-item-divider class="course-section ion-text-wrap" *ngIf="section.name">
<ion-label>
<h2>
@ -30,7 +30,7 @@
<core-course-module [module]="module" [section]="section" [showActivityDates]="false" [showAvailability]="false"
[showExtra]="false" [showDownloadStatus]="false" [showCompletion]="false" [showIndentation]="false" />
</ng-container>
</ng-container>
</ion-card>
</ng-container>
</ion-list>
<core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)" />

BIN
src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_53.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 34 KiB

BIN
src/core/features/course/tests/behat/snapshots/test-basic-usage-of-one-course-in-app-view-course-contents_57.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 39 KiB

35
src/core/features/sitehome/pages/index/index.html
View File

@ -8,9 +8,37 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
</ion-refresher>
<core-loading [hideUntil]="dataLoaded">
<ion-list class="core-course-module-list-wrapper">
<ion-list class="list-item-limited-width">
<!-- Site home main contents. -->
<ng-container *ngIf="section && section.hasContent">
<section *ngIf="section && section.hasContent" class="core-course-module-list-wrapper">
<ion-item-divider class="course-section ion-text-wrap"
[class.item-dimmed]="section.visible === 0 || section.uservisible === false">
<ion-label>
<h2 *ngIf="section.name" class="big" [id]="'core-section-name-' + section.id">
<core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="siteHomeId" />
</h2>
<div *ngIf="section.visible === 0 && section.uservisible !== false">
<ion-badge color="warning">
{{ 'core.course.hiddenfromstudents' | translate }}
</ion-badge>
</div>
<div *ngIf="section.visible === 0 && section.uservisible === false">
<ion-badge color="warning">
{{ 'core.notavailable' | translate }}
</ion-badge>
</div>
<div *ngIf="section.availabilityinfo">
<ion-chip class="clickable">
<ion-icon name="fas-lock" [attr.aria-label]="'core.restricted' | translate" />
<ion-label>
<core-format-text [text]=" section.availabilityinfo" contextLevel="course"
[contextInstanceId]="siteHomeId" />
</ion-label>
</ion-chip>
</div>
</ion-label>
</ion-item-divider>
<ion-item class="ion-text-wrap section-summary" *ngIf="section.summary">
<ion-label>
<core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="siteHomeId" />
@ -18,11 +46,10 @@
</ion-item>
<core-course-module *ngFor="let module of section.modules" [module]="module" [section]="section" />
</ng-container>
</section>
<!-- Site home items: news, categories, courses, etc. -->
<ng-container *ngIf="items.length > 0">
<core-spacer *ngIf="section && section!.hasContent" />
<ng-container *ngFor="let item of items">
<ng-container [ngSwitch]="item">
<ng-container *ngSwitchCase="'LIST_OF_COURSE'">

19
src/core/features/sitehome/pages/index/index.scss
View File

@ -10,6 +10,21 @@ ion-item ion-icon {
@include margin-horizontal(null, var(--margin-end));
}
core-spacer {
--spacer-horizontal: 10px;
section.core-course-module-list-wrapper {
border: var(--ion-card-border-width) solid var(--ion-card-border-color);
border-radius: var(--ion-card-radius);
margin: 12px;
ion-card {
--ion-card-background: transparent;
}
ion-item-divider {
--background: transparent;
}
}
core-course-module.core-sitehome-news {
--card-border-width: var(--ion-card-border-width);
--card-radius: var(--ion-card-radius);
}

5
src/testing/services/behat-blocking.ts
View File

@ -24,7 +24,7 @@ import {
NavigationError,
NavigationStart,
} from '@angular/router';
import { Subscription, filter } from 'rxjs';
import { filter } from 'rxjs';
import { CoreNavigator } from '@services/navigator';
/**
@ -39,7 +39,6 @@ export class TestingBehatBlockingService {
protected lastMutation = 0;
protected initialized = false;
protected keyIndex = 0;
protected navSubscription?: Subscription;
/**
* Listen to mutations and override XML Requests.
@ -60,7 +59,7 @@ export class TestingBehatBlockingService {
win.M.util = win.M.util ?? {};
win.M.util.pending_js = win.M.util.pending_js ?? [];
this.navSubscription = Router.events
Router.events
.pipe(filter(event =>
event instanceof NavigationStart ||
event instanceof NavigationEnd ||

2
src/theme/theme.base.scss
View File

@ -207,9 +207,7 @@ img[core-external-content]:not([src]) {
border-radius: var(--mdl-shape-borderRadius-lg);
}
ion-list.core-course-module-list-wrapper,
.list-item-limited-width,
.core-course-module-list-wrapper,
ion-content.limited-width > :not([slot]) {
max-width: var(--list-item-max-width);
margin-left: auto !important;