diff --git a/scripts/langindex.json b/scripts/langindex.json index 29d1c1122..3010f8f0a 100644 --- a/scripts/langindex.json +++ b/scripts/langindex.json @@ -1567,6 +1567,7 @@ "core.course.thisweek": "format_weeks/currentsection", "core.course.todo": "completion", "core.course.useactivityonbrowser": "local_moodlemobileapp", + "core.course.viewcourse": "block_timeline", "core.course.warningmanualcompletionmodified": "local_moodlemobileapp", "core.course.warningofflinemanualcompletiondeleted": "local_moodlemobileapp", "core.coursedetails": "moodle", diff --git a/src/addons/competency/pages/competency/competency.html b/src/addons/competency/pages/competency/competency.html index 53b0778d7..194bef3ca 100644 --- a/src/addons/competency/pages/competency/competency.html +++ b/src/addons/competency/pages/competency/competency.html @@ -122,7 +122,7 @@ - +

{{ evidence.actionuser.fullname }}

{{ evidence.timemodified * 1000 | coreFormatDate }}

diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html index d0efe3655..5da98c6d8 100644 --- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html +++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html @@ -3,7 +3,7 @@ - +

{{ user!.fullname }}

@@ -176,7 +176,7 @@ - +

{{ user.fullname }}

 @@ -334,7 +334,7 @@ - +

{{ 'addon.mod_assign.gradedby' | translate }}

{{ grader!.fullname }}

diff --git a/src/addons/mod/choice/components/index/addon-mod-choice-index.html b/src/addons/mod/choice/components/index/addon-mod-choice-index.html index 2dcdcf85c..cc554ee45 100644 --- a/src/addons/mod/choice/components/index/addon-mod-choice-index.html +++ b/src/addons/mod/choice/components/index/addon-mod-choice-index.html @@ -114,7 +114,7 @@ - +

{{user.fullname}}

 diff --git a/src/addons/mod/feedback/pages/attempt/attempt.html b/src/addons/mod/feedback/pages/attempt/attempt.html index cb30f110e..41005c393 100644 --- a/src/addons/mod/feedback/pages/attempt/attempt.html +++ b/src/addons/mod/feedback/pages/attempt/attempt.html @@ -14,7 +14,7 @@ - +

{{attempt.fullname}}

{{attempt.timemodified * 1000 | coreFormatDate }}

diff --git a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html index 718811590..d40c53516 100644 --- a/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html +++ b/src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html @@ -21,7 +21,7 @@ - +

{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}: {{user.fullname}}

 diff --git a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html index fe477e1e8..52fb73ded 100644 --- a/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html +++ b/src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html @@ -20,7 +20,7 @@ - +

{{ user.fullname }}

 diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html index 6c8bcc2df..722c6a495 100644 --- a/src/addons/mod/lesson/pages/user-retake/user-retake.html +++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html @@ -17,7 +17,7 @@
- +

{{student.fullname}}

diff --git a/src/addons/storagemanager/pages/course-storage/course-storage.scss b/src/addons/storagemanager/pages/course-storage/course-storage.scss index 91a4907f4..bf803e5ab 100644 --- a/src/addons/storagemanager/pages/course-storage/course-storage.scss +++ b/src/addons/storagemanager/pages/course-storage/course-storage.scss @@ -3,6 +3,10 @@ :host { --course-storage-max-activity-height: 120px; + ion-card ion-item { + --inner-padding-end: 0px; + } + ion-card.section ion-card-header { margin-bottom: 8px; padding-top: 8px; @@ -48,7 +52,3 @@ ion-item core-mod-icon { display: flex; align-items: center; } - -ion-item { - --inner-padding-end: 0px; -} diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss index d7c33997c..ad04a1ec8 100644 --- a/src/core/components/user-avatar/user-avatar.scss +++ b/src/core/components/user-avatar/user-avatar.scss @@ -1,3 +1,5 @@ +@import '~theme/globals.scss'; + :host { position: relative; width: var(--core-avatar-size); @@ -76,6 +78,11 @@ } :host-context(ion-item) { - margin-top: 12px; - margin-bottom: 12px; + margin-top: 6px; + margin-bottom: 6px; + @include margin(6px, 8px, 6px, 0px); + img { + min-width: var(--core-avatar-size); + min-height: var(--core-avatar-size); + } } diff --git a/src/core/features/course/lang.json b/src/core/features/course/lang.json index efa7b5613..1b1ae4835 100644 --- a/src/core/features/course/lang.json +++ b/src/core/features/course/lang.json @@ -54,6 +54,7 @@ "thisweek": "This week", "todo": "To do", "useactivityonbrowser": "You can still use it using your device's web browser.", + "viewcourse": "View course", "warningmanualcompletionmodified": "The manual completion of an activity was modified on the site.", "warningofflinemanualcompletiondeleted": "Some offline manual completion of course '{{name}}' has been deleted. {{error}}" } diff --git a/src/core/features/course/pages/course-summary/course-summary.html b/src/core/features/course/pages/course-summary/course-summary.html index 625e360ae..cde4c68c3 100644 --- a/src/core/features/course/pages/course-summary/course-summary.html +++ b/src/core/features/course/pages/course-summary/course-summary.html @@ -1,12 +1,9 @@ - + -

- {{'core.course.coursesummary' | translate}} -

@@ -15,27 +12,29 @@ - + -
- +
+ +
- - +
+

-

+

{{ 'core.courses.aria:coursename' | translate }} -

+ {{ 'core.courses.aria:coursecategory' | translate }} @@ -43,7 +42,14 @@ - + + + + + + +
@@ -51,26 +57,22 @@

- {{ 'core.course.startdate' | translate }}: {{ course.startdate * 1000 | - coreFormatDate:'strftimedatefullshort' }} + {{ 'core.course.startdate' | translate }}
+ {{ course.startdate * 1000 | coreFormatDate:'strftimedaydatetime' }}

- {{ 'core.course.enddate' | translate }}: {{ course.enddate * 1000 | - coreFormatDate:'strftimedatefullshort' }} + {{ 'core.course.enddate' | translate }}
+ {{ course.enddate * 1000 | coreFormatDate:'strftimedaydatetime' }}

- - -

- {{'core.summary' | translate}} + {{'core.course.coursesummary' | translate}}

@@ -78,19 +80,28 @@ - + + -

{{ 'core.teachers' | translate }}

- - - - - - -

{{contact.fullname}}

+

+ {{ 'core.teachers' | translate }} +

+ + + + + +

{{contact.fullname}}

+ + + @@ -102,58 +113,44 @@ - : + : + - +
- +
- - - - -

{{ instance.name }}

- - {{ 'core.courses.enrolme' | translate }} - - - - - -

{{ 'core.courses.otherenrolments' | translate }}

- - {{ 'core.courses.completeenrolmentbrowser' | translate }} - - - - - -

{{ 'core.courses.notenrollable' | translate }}

- - - - - {{item.data.title | translate }} - - - - {{ 'core.course' | translate }} - + + {{ 'core.courses.enrolme' | translate }} + + + + + + {{ 'core.courses.notenrollable' | translate }} + + + + + + {{ 'core.course.viewcourse' | translate }} diff --git a/src/core/features/course/pages/course-summary/course-summary.scss b/src/core/features/course/pages/course-summary/course-summary.scss index 0386bcac6..477f4a454 100644 --- a/src/core/features/course/pages/course-summary/course-summary.scss +++ b/src/core/features/course/pages/course-summary/course-summary.scss @@ -1,28 +1,99 @@ @import '~theme/globals.scss'; :host { - .core-course-thumb { - overflow: hidden; - text-align: center; - max-height: 35vh; - z-index: -1; - overflow: hidden; - border-bottom: 1px solid var(--stroke); + --thumb-height: 180px; + + ion-content { + position: absolute; } + .core-course-thumb { + background: var(--course-color, white); + overflow: hidden; + text-align: center; + height: var(--thumb-height); + position: fixed; + z-index: -1; + width: 100%; - .core-customfieldvalue core-format-text { - display: inline; + @for $i from 0 to length($core-course-image-background) { + &.course-color-#{$i} { + --course-color: var(--core-course-color-#{$i}); + --course-color-tint: var(--core-course-color-#{$i}-tint); + } + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + ion-icon.course-icon { + padding: 24px; + font-size: calc(var(--thumb-height) - 48px); + color: var(--course-color-tint); + } + } + + .course-container { + position: relative; + top: calc(var(--thumb-height) - var(--big-radius)); + } + + .course-name { + border-radius: var(--big-radius) var(--big-radius) 0 0; + box-shadow: var(--drop-shadow-top); + ion-label { + margin-bottom: 0px; + } + } + + h1 { + font-size: 20px; + } + + .core-course-category { + margin-left: 0; + margin-right: 0; } .core-course-dates { background: var(--light); border-radius: var(--small-radius); padding: 8px; + width: 100%; + + p { + margin-bottom: 8px; + } + + p:last-child { + margin-bottom: 0px; + } ion-icon { @include margin-horizontal(null, 8px); } } + + .core-customfield { + margin-bottom: 8px; + + &.core-customfield_textarea { + display: flex; + flex-direction: column; + margin-bottom: 12px; + } + + .core-customfieldname { + @include margin-horizontal(null, 4px); + font-weight: bold; + display: inline; + } + .core-customfieldvalue { + display: inline; + } + } } diff --git a/src/core/features/course/pages/course-summary/course-summary.ts b/src/core/features/course/pages/course-summary/course-summary.ts index 547e9a6cb..694346601 100644 --- a/src/core/features/course/pages/course-summary/course-summary.ts +++ b/src/core/features/course/pages/course-summary/course-summary.ts @@ -12,8 +12,8 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, OnDestroy, OnInit, Input } from '@angular/core'; -import { IonRefresher } from '@ionic/angular'; +import { Component, OnDestroy, OnInit, Input, ViewChild, ElementRef } from '@angular/core'; +import { ActionSheetButton, IonRefresher } from '@ionic/angular'; import { CoreEventObserver, CoreEvents } from '@singletons/events'; import { CoreSites } from '@services/sites'; import { CoreDomUtils } from '@services/utils/dom'; @@ -31,12 +31,13 @@ import { CoreCourseOptionsMenuHandlerToDisplay, } from '@features/course/services/course-options-delegate'; import { CoreCourseHelper } from '@features/course/services/course-helper'; -import { ModalController, NgZone, Platform, Translate } from '@singletons'; +import { ActionSheetController, ModalController, NgZone, Platform, Translate } from '@singletons'; import { CoreCoursesSelfEnrolPasswordComponent } from '../../../courses/components/self-enrol-password/self-enrol-password'; import { CoreNavigator } from '@services/navigator'; import { CoreUtils } from '@services/utils/utils'; -import { CoreCourseWithImageAndColor } from '@features/courses/services/courses-helper'; +import { CoreCoursesHelper, CoreCourseWithImageAndColor } from '@features/courses/services/courses-helper'; import { Subscription } from 'rxjs'; +import { CoreColors } from '@singletons/colors'; /** * Page that shows the summary of a course including buttons to enrol and other available options. @@ -51,23 +52,25 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy { @Input() course?: CoreCourseSummaryData; @Input() courseId = 0; + @ViewChild('courseThumb') courseThumb?: ElementRef; + isEnrolled = false; canAccessCourse = true; selfEnrolInstances: CoreCourseEnrolmentMethod[] = []; - paypalEnabled = false; + otherEnrolments = false; dataLoaded = false; isModal = false; + contactsExpanded = false; courseUrl = ''; - courseImageUrl?: string; progress?: number; + protected actionSheet?: HTMLIonActionSheetElement; + courseMenuHandlers: CoreCourseOptionsMenuHandlerToDisplay[] = []; - protected isGuestEnabled = false; protected useGuestAccess = false; protected guestInstanceId?: number; - protected enrolmentMethods: CoreCourseEnrolmentMethod[] = []; protected waitStart = 0; protected enrolUrl = ''; protected pageDestroyed = false; @@ -127,25 +130,14 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy { * password is required for guest access. */ protected async canAccessAsGuest(): Promise { - if (!this.isGuestEnabled) { - throw Error('Guest access is not enabled.'); + if (this.guestInstanceId === undefined) { + return false; } - // Search instance ID of guest enrolment method. - const method = this.enrolmentMethods.find((method) => method.type == 'guest'); - this.guestInstanceId = method?.id; + const info = await CoreCourses.getCourseGuestEnrolmentInfo(this.guestInstanceId); - if (this.guestInstanceId) { - const info = await CoreCourses.getCourseGuestEnrolmentInfo(this.guestInstanceId); - if (!info.status) { - // Not active, reject. - throw Error('Guest access is not enabled.'); - } - - return info.passwordrequired; - } - - throw Error('Guest enrollment method not found.'); + // Guest access with password is not supported by the app. + return !!info.status && !info.passwordrequired; } /** @@ -156,17 +148,24 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy { protected async getCourse(refresh = false): Promise { // Get course enrolment methods. this.selfEnrolInstances = []; + this.otherEnrolments = false; try { - this.enrolmentMethods = await CoreCourses.getCourseEnrolmentMethods(this.courseId); + const enrolmentMethods = await CoreCourses.getCourseEnrolmentMethods(this.courseId); + this.guestInstanceId = undefined; + + enrolmentMethods.forEach((method) => { + if (!method.status) { + return; + } - this.enrolmentMethods.forEach((method) => { if (method.type === 'self') { this.selfEnrolInstances.push(method); } else if (method.type === 'guest') { - this.isGuestEnabled = true; - } else if (method.type === 'paypal') { - this.paypalEnabled = true; + this.guestInstanceId = method.id; + } else { + // Other enrolments that comes from that WS should need user action. + this.otherEnrolments = true; } }); } catch (error) { @@ -189,16 +188,8 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy { this.useGuestAccess = false; } catch { // The user is not an admin/manager. Check if we can provide guest access to the course. - try { - this.canAccessCourse = !(await this.canAccessAsGuest()); - this.useGuestAccess = this.canAccessCourse; - } catch { - this.canAccessCourse = false; - } - } - - if (this.course && 'overviewfiles' in this.course && this.course.overviewfiles?.length) { - this.courseImageUrl = this.course.overviewfiles[0].fileurl; + this.canAccessCourse = await this.canAccessAsGuest(); + this.useGuestAccess = this.canAccessCourse; } try { @@ -213,12 +204,17 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy { this.course = courseByField; } - this.paypalEnabled = !this.isEnrolled && courseByField.enrollmentmethods?.indexOf('paypal') > -1; + // enrollmentmethods contains ALL enrolment methods including manual. + if (!this.isEnrolled && courseByField.enrollmentmethods?.some((method) => method === 'paypal')) { + this.otherEnrolments = true; + } } catch { // Ignore errors. } + await this.setCourseColor(); + if (!this.course || !('progress' in this.course) || typeof this.course.progress !== 'number' || @@ -271,7 +267,7 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy { try { await CoreDomUtils.showConfirm( Translate.instant('core.courses.browserenrolinstructions'), - undefined, + Translate.instant('core.courses.completeenrolmentbrowser'), Translate.instant('core.openinbrowser'), ); } catch { @@ -291,15 +287,15 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy { } /** - * User clicked in a self enrol button. + * Confirm user to Self enrol in course. * - * @param instanceId The instance ID of the enrolment method. + * @param enrolMethod The enrolment method. */ - async selfEnrolClicked(instanceId: number): Promise { + async selfEnrolConfirm(enrolMethod: CoreCourseEnrolmentMethod): Promise { try { - await CoreDomUtils.showConfirm(Translate.instant('core.courses.confirmselfenrol')); + await CoreDomUtils.showConfirm(Translate.instant('core.courses.confirmselfenrol'), enrolMethod.name); - this.selfEnrolInCourse('', instanceId); + this.selfEnrolInCourse(enrolMethod.id); } catch { // User cancelled. } @@ -308,11 +304,11 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy { /** * Self enrol in a course. * - * @param password Password to use. * @param instanceId The instance ID. + * @param password Password to use. * @return Promise resolved when self enrolled. */ - async selfEnrolInCourse(password: string, instanceId: number): Promise { + async selfEnrolInCourse(instanceId: number, password = ''): Promise { const modal = await CoreDomUtils.showModalLoading('core.loading', true); try { @@ -351,7 +347,7 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy { ); if (modalData !== undefined) { - this.selfEnrolInCourse(modalData, instanceId); + this.selfEnrolInCourse(instanceId, modalData); return; } @@ -433,6 +429,82 @@ export class CoreCourseSummaryPage implements OnInit, OnDestroy { CoreNavigator.navigateToSitePath(item.data.page, { params }); } + /** + * Set course color. + */ + protected async setCourseColor(): Promise { + if (!this.course) { + return; + } + + await CoreCoursesHelper.loadCourseColorAndImage(this.course); + + if (!this.courseThumb) { + return; + } + + if (this.course.color) { + this.courseThumb.nativeElement.style.setProperty('--course-color', this.course.color); + + const tint = CoreColors.lighter(this.course.color, 50); + this.courseThumb.nativeElement.style.setProperty('--course-color-tint', tint); + } else if(this.course.colorNumber !== undefined) { + this.courseThumb.nativeElement.classList.add('course-color-' + this.course.colorNumber); + } + } + + /** + * Open enrol action sheet. + */ + async enrolMe(): Promise { + if (this.selfEnrolInstances.length == 1 && !this.otherEnrolments) { + this.selfEnrolConfirm(this.selfEnrolInstances[0]); + + return; + } + + if (this.selfEnrolInstances.length == 0 && this.otherEnrolments) { + this.browserEnrol(); + + return; + } + + const buttons: ActionSheetButton[] = this.selfEnrolInstances.map((enrolMethod) => ({ + text: enrolMethod.name, + handler: (): void => { + this.selfEnrolConfirm(enrolMethod); + }, + })); + + if (this.otherEnrolments) { + buttons.push({ + text: Translate.instant('core.courses.completeenrolmentbrowser'), + handler: (): void => { + this.browserEnrol(); + }, + }); + } + + buttons.push({ + text: Translate.instant('core.cancel'), + role: 'cancel', + }); + + this.actionSheet = await ActionSheetController.create({ + header: Translate.instant('core.courses.enrolme'), + buttons: buttons, + }); + + await this.actionSheet.present(); + } + + /** + * Toggle list of contacts. + */ + toggleContacts(): void { + this.contactsExpanded = !this.contactsExpanded; + } + /** * Close the modal. */ diff --git a/src/core/features/course/pages/index/index.html b/src/core/features/course/pages/index/index.html index b864139cd..a0e768d08 100644 --- a/src/core/features/course/pages/index/index.html +++ b/src/core/features/course/pages/index/index.html @@ -17,9 +17,16 @@ - - - + +
+ +
+ + + + +

{{ title }}

diff --git a/src/core/features/course/pages/index/index.scss b/src/core/features/course/pages/index/index.scss index 63efe0c1f..6b75fd1e8 100644 --- a/src/core/features/course/pages/index/index.scss +++ b/src/core/features/course/pages/index/index.scss @@ -11,6 +11,22 @@ width: var(--core-courseimage-on-course-size); min-width: var(--core-courseimage-on-course-size); --border-radius: var(--core-courseimage-radius); + @include margin(8px, 16px, 8px, 0px); + + @for $i from 0 to length($core-course-image-background) { + &.course-color-#{$i} { + --course-color: var(--core-course-color-#{$i}); + --course-color-tint: var(--core-course-color-#{$i}-tint); + } + } + + ion-icon.course-icon { + padding: 12px; + font-size: calc(var(--core-courseimage-on-course-size) - 24px); + border-radius: var(--border-radius); + color: var(--course-color-tint); + background: var(--course-color, transparent); + } } @if ($core-hide-courseimage-on-course) { diff --git a/src/core/features/course/pages/index/index.ts b/src/core/features/course/pages/index/index.ts index bb2537e83..3a7679baf 100644 --- a/src/core/features/course/pages/index/index.ts +++ b/src/core/features/course/pages/index/index.ts @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, ViewChild, OnDestroy, OnInit } from '@angular/core'; +import { Component, ViewChild, OnDestroy, OnInit, ElementRef } from '@angular/core'; import { ActivatedRoute, Params } from '@angular/router'; import { CoreTabsOutletTab, CoreTabsOutletComponent } from '@components/tabs-outlet/tabs-outlet'; @@ -28,6 +28,8 @@ import { CoreNavigationOptions, CoreNavigator } from '@services/navigator'; import { CONTENTS_PAGE_NAME } from '@features/course/course.module'; import { CoreDomUtils } from '@services/utils/dom'; import { CoreCourseSummaryPage } from '../course-summary/course-summary'; +import { CoreCoursesHelper, CoreCourseWithImageAndColor } from '@features/courses/services/courses-helper'; +import { CoreColors } from '@singletons/colors'; /** * Page that displays the list of courses the user is enrolled in. @@ -40,13 +42,13 @@ import { CoreCourseSummaryPage } from '../course-summary/course-summary'; export class CoreCourseIndexPage implements OnInit, OnDestroy { @ViewChild(CoreTabsOutletComponent) tabsComponent?: CoreTabsOutletComponent; + @ViewChild('courseThumb') courseThumb?: ElementRef; title = ''; category = ''; - course?: CoreCourseAnyCourseData; + course?: CoreCourseWithImageAndColor & CoreCourseAnyCourseData; tabs: CourseTab[] = []; loaded = false; - imageThumb?: string; progress?: number; protected currentPagePath = ''; @@ -235,9 +237,7 @@ export class CoreCourseIndexPage implements OnInit, OnDestroy { // Get the title to display initially. this.title = CoreCourseFormatDelegate.getCourseTitle(this.course); - if ('overviewfiles' in this.course) { - this.imageThumb = this.course.overviewfiles?.[0]?.fileurl; - } + await this.setCourseColor(); this.updateProgress(); @@ -313,6 +313,30 @@ export class CoreCourseIndexPage implements OnInit, OnDestroy { this.progress = this.course.progress; } + /** + * Set course color. + */ + protected async setCourseColor(): Promise { + if (!this.course) { + return; + } + + await CoreCoursesHelper.loadCourseColorAndImage(this.course); + + if (!this.courseThumb) { + return; + } + + if (this.course.color) { + this.courseThumb.nativeElement.style.setProperty('--course-color', this.course.color); + + const tint = CoreColors.lighter(this.course.color, 50); + this.courseThumb.nativeElement.style.setProperty('--course-color-tint', tint); + } else if(this.course.colorNumber !== undefined) { + this.courseThumb.nativeElement.classList.add('course-color-' + this.course.colorNumber); + } + } + } type CourseTab = CoreTabsOutletTab & { diff --git a/src/core/features/courses/components/course-list-item/course-list-item.ts b/src/core/features/courses/components/course-list-item/course-list-item.ts index c73a3dd3a..c13587b47 100644 --- a/src/core/features/courses/components/course-list-item/course-list-item.ts +++ b/src/core/features/courses/components/course-list-item/course-list-item.ts @@ -114,7 +114,7 @@ export class CoreCoursesCourseListItemComponent implements OnInit, OnDestroy, On } else if (instance === 'paypal') { this.enrolmentIcons.push({ label: 'core.courses.otherenrolments', - icon: 'fab-paypal', + icon: 'fas-external-link-alt', }); } }); diff --git a/src/core/features/user/components/tag-area/core-user-tag-area.html b/src/core/features/user/components/tag-area/core-user-tag-area.html index bfd6c0af4..3531973e0 100644 --- a/src/core/features/user/components/tag-area/core-user-tag-area.html +++ b/src/core/features/user/components/tag-area/core-user-tag-area.html @@ -1,6 +1,6 @@ - +

{{ item.heading }}

 diff --git a/src/core/features/viewer/components/text/text.scss b/src/core/features/viewer/components/text/text.scss index 4377e35e3..05570b320 100644 --- a/src/core/features/viewer/components/text/text.scss +++ b/src/core/features/viewer/components/text/text.scss @@ -1,5 +1,3 @@ -ion-app.app-root page-core-viewer-text { - ion-footer { - padding: 6px; - } +ion-footer { + padding: 6px; } diff --git a/src/core/features/viewer/components/text/text.ts b/src/core/features/viewer/components/text/text.ts index cd72a31f6..a6ae057fa 100644 --- a/src/core/features/viewer/components/text/text.ts +++ b/src/core/features/viewer/components/text/text.ts @@ -24,6 +24,7 @@ import { ModalController } from '@singletons'; @Component({ selector: 'page-core-viewer-text', templateUrl: 'text.html', + styleUrls: ['text.scss'], }) export class CoreViewerTextComponent { diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index 2bd618242..3b35bff23 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -77,8 +77,6 @@ core-format-text { } &.collapsible-collapsed .core-format-text-content { overflow: hidden; - height: var(--collapsible-height); - @include core-transition(height, 300ms); } } diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index 732686dd3..1396e9a71 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -152,6 +152,7 @@ ion-toolbar { // Header. ion-header { z-index: 12; // To hide ion-slides on scroll. + --core-header-buttons-background: var(--core-header-toolbar-background); ion-toolbar { ion-spinner { @@ -159,26 +160,22 @@ ion-header { } ion-back-button, - .in-toolbar.button-clear { + .in-toolbar.button-clear, + .in-toolbar.button-solid, + .button.button-clear, + .button.button-solid { --color: var(--core-header-toolbar-color); - --background: var(--core-header-toolbar-background); + --background: var(--core-header-buttons-background); --ion-toolbar-color: var(--core-header-toolbar-color); --border-radius: var(--huge-radius); + --primary: var(--core-header-toolbar-color); } ion-back-button::part(text) { display: none; } - .button.button-clear, - .button.button-solid { - --background: var(--core-header-toolbar-background); - --color: var(--core-header-toolbar-color); - --primary: var(--core-header-toolbar-color); - } - .button.button-clear.button-has-icon-only, .button.button-solid.button-has-icon-only { - --border-radius: var(--huge-radius); width: var(--a11y-min-target-size); height: var(--a11y-min-target-size); ion-icon { @@ -186,7 +183,6 @@ ion-header { } } - .core-navbar-button-hidden { display: none !important; } @@ -262,6 +258,10 @@ ion-footer ion-toolbar.ion-color-contrast { background-color: var(--contrast-background); } +ion-footer { + background-color: var(--contrast-background); +} + // Ionic icon. ion-icon { position: relative; @@ -833,24 +833,23 @@ ion-toolbar h1 .core-bar-button-image img { } // Action sheet. -.md ion-action-sheet { +ion-action-sheet.md { + .action-sheet-title { + @include padding(4px, null, 4px, 16px); + font-size: 12px; + min-height: auto; + color: var(--medium); + line-height: 2em; + font-weight: normal; + } + + .action-sheet-group:first-child { + border-radius: var(--big-radius) var(--big-radius) 0 0; + } + .action-sheet-group-cancel { box-shadow: var(--drop-shadow-top, none); } - - .action-sheet-title { - border-bottom: 2px solid var(--title-border-color); - } -} - -.ios ion-action-sheet { - .action-sheet-title { - font-size: 16px; - } - - .action-sheet-title { - border-bottom: 2px solid var(--title-border-color); - } } // Radio. @@ -1474,15 +1473,9 @@ ion-header.no-title { --core-header-toolbar-border-width: 0; --core-header-toolbar-background: transparent; --core-header-shadow: none !important; - - ion-toolbar .button.button-clear, - ion-toolbar .button.button-solid { - --background: var(--ion-background-color); - } + --core-header-buttons-background: var(--ion-background-color); } - - // To make core-swipe-slides fill the remaining height. .core-swipe-slides-container { display: flex; diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 8d0d29859..c19cac3bf 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -216,7 +216,6 @@ ion-action-sheet { --button-color: var(--ion-text-color); --button-color-selected: var(--ion-text-color); - --title-border-color: var(--primary); .action-sheet-title { --color: var(--ion-text-color);