From 1dd5eba1de1b0416c2758087ffc75eff163aee30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Mon, 24 Jan 2022 17:46:31 +0100 Subject: [PATCH] MOBILE-3915 course: Improve course summary info --- .../components/format/core-course-format.html | 96 +++++++++++-------- .../course/components/format/format.scss | 19 +--- .../course/components/format/format.ts | 40 ++++++-- src/theme/theme.light.scss | 2 +- 4 files changed, 88 insertions(+), 69 deletions(-) diff --git a/src/core/features/course/components/format/core-course-format.html b/src/core/features/course/components/format/core-course-format.html index 7e549a3c2..81b7ad122 100644 --- a/src/core/features/course/components/format/core-course-format.html +++ b/src/core/features/course/components/format/core-course-format.html @@ -9,6 +9,53 @@ + + + + + + + + +

+ + +

+

{{ course.displayname || course.fullname }}

+
+ + +
+ + + + + + + + +

+ + +

+ + {{ 'core.course.hiddenfromstudents' | translate }} + + + {{ 'core.notavailable' | translate }} + + + + + + + + +
+ [contextInstanceId]="course.id" [clean]="true" [singleLine]="true"> {{ 'core.course.sections' | translate }} @@ -27,39 +74,6 @@
- - - -
- -
- - - - - - - - {{ 'core.course.hiddenfromstudents' | translate }} - - - {{ 'core.notavailable' | translate }} - - - - - - - - - -
@@ -88,12 +102,12 @@ - + - + @@ -112,7 +126,7 @@ [class.item-dimmed]="section.visible === 0 || section.uservisible === false">

- +

@@ -123,7 +137,7 @@ {{ 'core.notavailable' | translate }} - +

@@ -132,15 +146,15 @@ - + + (completionChanged)="onCompletionChange($event)" [showActivityDates]="course.showactivitydates" + [showCompletionConditions]="course.showcompletionconditions"> diff --git a/src/core/features/course/components/format/format.scss b/src/core/features/course/components/format/format.scss index e7d109381..25f43001b 100644 --- a/src/core/features/course/components/format/format.scss +++ b/src/core/features/course/components/format/format.scss @@ -16,23 +16,8 @@ } .core-course-thumb { - display: none; - height: var(--core-courseimage-on-course-height); - width: 100%; - overflow: hidden; - cursor: pointer; - pointer-events: auto; - position: relative; - background: var(--ion-item-background); - border-bottom: 1px solid var(--stroke); - - img { - position: absolute; - top: 0; - bottom: 0; - margin: auto; - width: 100%; - } + height: var(--core-courseimage-on-course-size); + width: var(--core-courseimage-on-course-size); } @if ($core-show-courseimage-on-course) { diff --git a/src/core/features/course/components/format/format.ts b/src/core/features/course/components/format/format.ts index 7d93a2084..c4121074f 100644 --- a/src/core/features/course/components/format/format.ts +++ b/src/core/features/course/components/format/format.ts @@ -39,6 +39,7 @@ import { CoreCourseModuleData, CoreCourseModuleCompletionData, CoreCourseSection, + CoreCourseSectionWithStatus, } from '@features/course/services/course-helper'; import { CoreCourseFormatDelegate } from '@features/course/services/format-delegate'; import { CoreEventObserver, CoreEvents } from '@singletons/events'; @@ -46,6 +47,7 @@ import { IonContent, IonRefresher } from '@ionic/angular'; import { CoreUtils } from '@services/utils/utils'; import { CoreCourseSectionSelectorComponent } from '../section-selector/section-selector'; import { CoreBlockHelper } from '@features/block/services/block-helper'; +import { CoreNavigator } from '@services/navigator'; /** * Component to display course contents using a certain format. If the format isn't found, use default one. @@ -66,7 +68,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { static readonly LOAD_MORE_ACTIVITIES = 20; // How many activities should load each time showMoreActivities is called. - @Input() course?: CoreCourseAnyCourseData; // The course to render. + @Input() course!: CoreCourseAnyCourseData; // The course to render. @Input() sections?: CoreCourseSection[]; // List of course sections. @Input() initialSectionId?: number; // The section to load first (by ID). @Input() initialSectionNumber?: number; // The section to load first (by number). @@ -116,9 +118,17 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { } /** - * Component being initialized. + * @inheritdoc */ ngOnInit(): void { + if (this.course === undefined) { + CoreDomUtils.showErrorModal('Course not set'); + + CoreNavigator.back(); + + return; + } + // 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) { @@ -207,7 +217,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { * @return Promise resolved when done. */ protected async loadCourseFormatComponent(): Promise { - this.courseFormatComponent = await CoreCourseFormatDelegate.getCourseFormatComponent(this.course!); + this.courseFormatComponent = await CoreCourseFormatDelegate.getCourseFormatComponent(this.course); } /** @@ -216,7 +226,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { * @return Promise resolved when done. */ protected async loadCourseSummaryComponent(): Promise { - this.courseSummaryComponent = await CoreCourseFormatDelegate.getCourseSummaryComponent(this.course!); + this.courseSummaryComponent = await CoreCourseFormatDelegate.getCourseSummaryComponent(this.course); } /** @@ -225,7 +235,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { * @return Promise resolved when done. */ protected async loadSectionSelectorComponent(): Promise { - this.sectionSelectorComponent = await CoreCourseFormatDelegate.getSectionSelectorComponent(this.course!); + this.sectionSelectorComponent = await CoreCourseFormatDelegate.getSectionSelectorComponent(this.course); } /** @@ -234,7 +244,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { * @return Promise resolved when done. */ protected async loadSingleSectionComponent(): Promise { - this.singleSectionComponent = await CoreCourseFormatDelegate.getSingleSectionComponent(this.course!); + this.singleSectionComponent = await CoreCourseFormatDelegate.getSingleSectionComponent(this.course); } /** @@ -243,7 +253,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { * @return Promise resolved when done. */ protected async loadAllSectionsComponent(): Promise { - this.allSectionsComponent = await CoreCourseFormatDelegate.getAllSectionsComponent(this.course!); + this.allSectionsComponent = await CoreCourseFormatDelegate.getAllSectionsComponent(this.course); } /** @@ -262,7 +272,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { if (!newSection) { // Section not found, calculate which one to use. - newSection = await CoreCourseFormatDelegate.getCurrentSection(this.course!, sections); + newSection = await CoreCourseFormatDelegate.getCurrentSection(this.course, sections); } this.sectionChanged(newSection); @@ -289,7 +299,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { if (!this.loaded) { // No section specified, not found or not visible, get current section. - const section = await CoreCourseFormatDelegate.getCurrentSection(this.course!, sections); + const section = await CoreCourseFormatDelegate.getCurrentSection(this.course, sections); this.loaded = true; this.sectionChanged(section); @@ -368,7 +378,7 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { if (!previousValue || previousValue.id != newSection.id) { // First load or section changed, add log in Moodle. CoreUtils.ignoreErrors( - CoreCourse.logView(this.course!.id, newSection.section, undefined, this.course!.fullname), + CoreCourse.logView(this.course.id, newSection.section, undefined, this.course.fullname), ); } @@ -558,4 +568,14 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy { this.progress = this.course.progress; } + /** + * Open the course summary + */ + openCourseSummary(): void { + CoreNavigator.navigateToSitePath( + '/course/' + this.course.id + '/preview', + { params: { course: this.course, avoidOpenCourse: true } }, + ); + } + } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index ff855bb82..ee6036013 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -301,7 +301,7 @@ --core-send-message-input-background: var(--gray-200); --core-send-message-input-color: var(--gray-900); - --core-courseimage-on-course-height: 150px; + --core-courseimage-on-course-size: 72px; --core-course-module-navigation-max-height: 56px; --core-course-module-navigation-background: var(--contrast-background);