diff --git a/scripts/langindex.json b/scripts/langindex.json index 08019c959..a381cb81c 100644 --- a/scripts/langindex.json +++ b/scripts/langindex.json @@ -926,7 +926,6 @@ "addon.mod_quiz.overduemustbesubmittedby": "quiz", "addon.mod_quiz.preview": "quiz", "addon.mod_quiz.previewquiznow": "quiz", - "addon.mod_quiz.question": "quiz", "addon.mod_quiz.quiznavigation": "quiz", "addon.mod_quiz.quizpassword": "quizaccess_password", "addon.mod_quiz.reattemptquiz": "quiz", @@ -943,7 +942,6 @@ "addon.mod_quiz.stateinprogress": "quiz", "addon.mod_quiz.stateoverdue": "quiz", "addon.mod_quiz.stateoverduedetails": "quiz", - "addon.mod_quiz.status": "quiz", "addon.mod_quiz.submission_confirmation_unanswered": "quiz", "addon.mod_quiz.submitallandfinish": "quiz", "addon.mod_quiz.summaryofattempt": "quiz", diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.scss b/src/addons/block/myoverview/components/myoverview/myoverview.scss index ace9c44e0..257242306 100644 --- a/src/addons/block/myoverview/components/myoverview/myoverview.scss +++ b/src/addons/block/myoverview/components/myoverview/myoverview.scss @@ -33,7 +33,6 @@ .item-heading { font-weight: bold; margin-bottom: 0; - font-size: 16px; } .subdued { diff --git a/src/addons/block/timeline/components/events/addon-block-timeline-events.html b/src/addons/block/timeline/components/events/addon-block-timeline-events.html index 415bc6636..4068ea1ad 100644 --- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html +++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html @@ -9,7 +9,7 @@ -

{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}

+

{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}

 diff --git a/src/addons/block/timeline/components/events/events.scss b/src/addons/block/timeline/components/events/events.scss index 16fdec4a5..5e5cd018c 100644 --- a/src/addons/block/timeline/components/events/events.scss +++ b/src/addons/block/timeline/components/events/events.scss @@ -1,16 +1,11 @@ @use "theme/globals" as *; h3 { - font-weight: bold; - font-size: 18px; + font: var(--mdl-typography-heading5-font); } h4 { - font-size: 15px; -} - -h4.core-bold { - font-weight: bold; + font: var(--mdl-typography-heading6-font); } .addon-block-timeline-activity { diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss index 2403bf1a1..1bdc04ba7 100644 --- a/src/addons/calendar/components/calendar/calendar.scss +++ b/src/addons/calendar/components/calendar/calendar.scss @@ -144,7 +144,6 @@ swiper-slide { display: block; - font-size: inherit; justify-content: start; align-items: start; text-align: start; diff --git a/src/addons/messages/messages-common.scss b/src/addons/messages/messages-common.scss index 20a561db1..f76c30b11 100644 --- a/src/addons/messages/messages-common.scss +++ b/src/addons/messages/messages-common.scss @@ -30,7 +30,7 @@ } .addon-message-last-message-date { white-space: nowrap; - font-size: 11px; + font-size: #{dynamic-font(11px)}; } } diff --git a/src/addons/mod/assign/tests/behat/snapshots/test-basic-usage-of-assignment-activity-in-app-editadd-submission-online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png b/src/addons/mod/assign/tests/behat/snapshots/test-basic-usage-of-assignment-activity-in-app-editadd-submission-online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png index 3c302f51c..ee770c806 100644 Binary files a/src/addons/mod/assign/tests/behat/snapshots/test-basic-usage-of-assignment-activity-in-app-editadd-submission-online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png and b/src/addons/mod/assign/tests/behat/snapshots/test-basic-usage-of-assignment-activity-in-app-editadd-submission-online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png differ diff --git a/src/addons/mod/forum/pages/search/search.scss b/src/addons/mod/forum/pages/search/search.scss deleted file mode 100644 index 99577941a..000000000 --- a/src/addons/mod/forum/pages/search/search.scss +++ /dev/null @@ -1,15 +0,0 @@ -:host { - --results-count-text-color: var(--gray-700); - - .results-count { - color: var(--results-count-text-color); - min-height: 0px; - margin: 8px 16px; - font-size: 14px; - } - -} - -:host-context(html.dark) { - --results-count-text-color: var(--gray-400); -} diff --git a/src/addons/mod/forum/pages/search/search.ts b/src/addons/mod/forum/pages/search/search.ts index 9fa207c70..b60bd9ec6 100644 --- a/src/addons/mod/forum/pages/search/search.ts +++ b/src/addons/mod/forum/pages/search/search.ts @@ -34,7 +34,6 @@ import { Translate } from '@singletons'; @Component({ selector: 'page-addon-mod-forum-search', templateUrl: 'search.html', - styleUrls: ['search.scss'], }) export class AddonModForumSearchPage implements OnInit { diff --git a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png index 50c71edb8..b2eca0f3a 100644 Binary files a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png and b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png differ diff --git a/src/addons/mod/quiz/lang.json b/src/addons/mod/quiz/lang.json index 135e71f37..2c5026c0f 100644 --- a/src/addons/mod/quiz/lang.json +++ b/src/addons/mod/quiz/lang.json @@ -54,7 +54,6 @@ "overduemustbesubmittedby": "This attempt is now overdue. It should already have been submitted. If you would like this quiz to be graded, you must submit it by {{$a}}. If you do not submit it by then, no marks from this attempt will be counted.", "preview": "Preview", "previewquiznow": "Preview quiz now", - "question": "Question", "quiznavigation": "Quiz navigation", "quizpassword": "Quiz password", "reattemptquiz": "Re-attempt quiz", @@ -71,7 +70,6 @@ "stateinprogress": "In progress", "stateoverdue": "Overdue", "stateoverduedetails": "Must be submitted by {{$a}}", - "status": "Status", "submission_confirmation_unanswered": "Questions without a response: {{$a}}", "submitallandfinish": "Submit all and finish", "summaryofattempt": "Summary of attempt", diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html index 35002d7c1..b9c3574f1 100644 --- a/src/addons/mod/quiz/pages/player/player.html +++ b/src/addons/mod/quiz/pages/player/player.html @@ -68,38 +68,21 @@ {{ 'addon.mod_quiz.summaryofattempt' | translate }} - - - - - - {{ 'addon.mod_quiz.question' | translate }} - - # - - {{ 'addon.mod_quiz.status' | translate }} - - - - - + [detail]="!isSequential && canReturn" [button]="!isSequential && canReturn" class="ion-text-wrap"> - - {{ question.questionnumber }} - {{ question.status }} - + + {{ question.questionnumber }}. {{ question.status }} - + + diff --git a/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_40.png b/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_40.png index 5b1e00e7f..f8affc29e 100644 Binary files a/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_40.png and b/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_40.png differ diff --git a/src/addons/notifications/pages/list/list.scss b/src/addons/notifications/pages/list/list.scss index 645c86029..80e2c867d 100644 --- a/src/addons/notifications/pages/list/list.scss +++ b/src/addons/notifications/pages/list/list.scss @@ -5,12 +5,12 @@ ion-item.addon-notification-item { ion-label { margin-top: 8px; margin-bottom: 8px; - p.item-heading { - font-size: var(--text-size); - @include ellipsis(3); - } p { - font-size: 12px; + font: var(--mdl-typography-body-font-sm); + &.item-heading { + font-size: var(--text-size); + @include ellipsis(3); + } } } @@ -20,7 +20,7 @@ ion-item.addon-notification-item { padding-top: 12px; ion-icon { - font-size: 6px; + font-size: #{dynamic-font(6px)}; vertical-align: middle; } } diff --git a/src/addons/notifications/pages/notification/notification.scss b/src/addons/notifications/pages/notification/notification.scss index 7d6ed4c9c..32fbd6ee6 100644 --- a/src/addons/notifications/pages/notification/notification.scss +++ b/src/addons/notifications/pages/notification/notification.scss @@ -10,10 +10,10 @@ margin-top: 16px; } p.item-heading { - font-size: 16px; + font: var(--mdl-typography-body-font-lg); } p { - font-size: 12px; + font: var(--mdl-typography-body-font-sm); } } diff --git a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html index d243f0fbf..372986dbd 100644 --- a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html +++ b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html @@ -2,13 +2,14 @@ + + + + +
- - - -
diff --git a/src/core/components/input-errors/input-errors.scss b/src/core/components/input-errors/input-errors.scss index aeb2e8fd2..e7ac543bd 100644 --- a/src/core/components/input-errors/input-errors.scss +++ b/src/core/components/input-errors/input-errors.scss @@ -8,7 +8,7 @@ .core-input-error { padding: 4px; color: var(--danger); - font-size: 12px; + font: var(--mdl-typography-body-font-sm); display: none; &:first-child { diff --git a/src/core/components/message/message.scss b/src/core/components/message/message.scss index ce49669aa..e33c153e5 100644 --- a/src/core/components/message/message.scss +++ b/src/core/components/message/message.scss @@ -63,12 +63,11 @@ } div { - font-weight: 500; flex-grow: 1; padding-left: .5rem; padding-right: .5rem; @include ellipsis(); - font-size: 16px; + font: var(--mdl-typography-subtitle-font-md); } } diff --git a/src/core/components/swipe-slides/swipe-slides.scss b/src/core/components/swipe-slides/swipe-slides.scss index 4f221edf4..129fae816 100644 --- a/src/core/components/swipe-slides/swipe-slides.scss +++ b/src/core/components/swipe-slides/swipe-slides.scss @@ -4,7 +4,6 @@ swiper-slide { display: block; - font-size: inherit; justify-content: start; align-items: start; text-align: start; diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss index ca2cae2b5..5e9b48cb4 100644 --- a/src/core/components/tabs/tabs.scss +++ b/src/core/components/tabs/tabs.scss @@ -65,9 +65,16 @@ word-wrap: break-word; max-width: 100%; line-height: 1.2em; + display: flex; + flex-direction: row; + align-items: center; + h2 { - font-size: 14px; - font-weight: 400; + font: var(--mdl-typography-label-font-lg); + } + + ion-badge { + @include margin-horizontal(4px, 0px); } } } @@ -78,7 +85,7 @@ border-bottom-color: var(--border-color-active); ion-tab-button { color: var(--color-active); - ion-label { + ion-label h2 { font-weight: var(--font-weight-active); } } diff --git a/src/core/directives/format-text.ts b/src/core/directives/format-text.ts index 838096107..e4c7fae9f 100644 --- a/src/core/directives/format-text.ts +++ b/src/core/directives/format-text.ts @@ -243,9 +243,9 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec } /** - * Add magnifying glass icons to view adapted images at full size. + * Add image viewer button to view adapted images at full size. */ - async addMagnifyingGlasses(): Promise { + protected async addImageViewerButton(): Promise { const imgs = Array.from(this.element.querySelectorAll('.core-adapted-img-container > img')); if (!imgs.length) { return; @@ -270,7 +270,6 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec return; } - const imgSrc = CoreTextUtils.escapeHTML(img.getAttribute('data-original-src') || img.getAttribute('src')); const label = Translate.instant('core.openfullimage'); const button = document.createElement('button'); @@ -283,6 +282,8 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec button.innerHTML = ``; button.addEventListener('click', (e: Event) => { + const imgSrc = CoreTextUtils.escapeHTML(img.getAttribute('data-original-src') || img.getAttribute('src')); + e.preventDefault(); e.stopPropagation(); CoreDomUtils.viewImage(imgSrc, img.getAttribute('alt'), this.component, this.componentId); @@ -371,7 +372,7 @@ export class CoreFormatTextDirective implements OnChanges, OnDestroy, AsyncDirec await CoreUtils.nextTick(); // Add magnifying glasses to images. - this.addMagnifyingGlasses(); + this.addImageViewerButton(); if (result.options.filter) { // Let filters handle HTML. We do it here because we don't want them to block the render of the text. diff --git a/src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss b/src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss index e02e83905..f1b01a5eb 100644 --- a/src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss +++ b/src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss @@ -1,10 +1,11 @@ :host { - h2 { + h1 { margin-top: 0; + font-size: var(--mdl-typography-heading2-fontSize); } - h2, p { + h1, p { text-align: center; } diff --git a/src/core/features/comments/components/comments/comments.scss b/src/core/features/comments/components/comments/comments.scss new file mode 100644 index 000000000..90f6a41eb --- /dev/null +++ b/src/core/features/comments/components/comments/comments.scss @@ -0,0 +1,3 @@ +button.as-link { + font: var(--mdl-typography-body-font-md); +} diff --git a/src/core/features/comments/components/comments/comments.ts b/src/core/features/comments/components/comments/comments.ts index 31b1f85f9..d780b9ebb 100644 --- a/src/core/features/comments/components/comments/comments.ts +++ b/src/core/features/comments/components/comments/comments.ts @@ -29,6 +29,7 @@ import { ContextLevel } from '@/core/constants'; @Component({ selector: 'core-comments', templateUrl: 'core-comments.html', + styleUrl: 'comments.scss', }) export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestroy { @@ -38,7 +39,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr @Input() itemId!: number; @Input() area = ''; @Input() title?: string; - @Output() onLoading: EventEmitter; // Event that indicates whether the component is loading data. + @Output() onLoading = new EventEmitter(); // Event that indicates whether the component is loading data. @Input() courseId?: number; // Course ID the comments belong to. It can be used to improve performance with filters. @Input() showItem = false; // Show button as an item. @@ -47,14 +48,11 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr countError = false; enabled = false; - protected updateSiteObserver?: CoreEventObserver; - protected refreshCommentsObserver?: CoreEventObserver; - protected commentsCountObserver?: CoreEventObserver; + protected updateSiteObserver: CoreEventObserver; + protected refreshCommentsObserver: CoreEventObserver; + protected commentsCountObserver: CoreEventObserver; constructor() { - - this.onLoading = new EventEmitter(); - this.enabled = CoreComments.areCommentsEnabledInSite(); // Update visibility if current site info is updated. @@ -87,7 +85,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr this.commentsCountObserver = CoreEvents.on( CoreCommentsProvider.COMMENTS_COUNT_CHANGED_EVENT, (data) => { - // Verify these comments need to be updated. + // Verify these comments need to be updated. if (!this.commentsCount.endsWith('+') && this.undefinedOrEqual(data, 'contextLevel') && this.undefinedOrEqual(data, 'instanceId') && this.undefinedOrEqual(data, 'component') && this.undefinedOrEqual(data, 'itemId') && this.undefinedOrEqual(data, 'area') && !this.countError) { @@ -103,14 +101,14 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr } /** - * View loaded. + * @inheritdoc */ ngOnInit(): void { this.fetchData(); } /** - * Listen to changes. + * @inheritdoc */ ngOnChanges(changes: { [name: string]: SimpleChange }): void { // If something change, update the fields. @@ -193,7 +191,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr } /** - * Component destroyed. + * @inheritdoc */ ngOnDestroy(): void { this.updateSiteObserver?.off(); diff --git a/src/core/features/course/components/course-index-tour/course-index-tour.scss b/src/core/features/course/components/course-index-tour/course-index-tour.scss index e02e83905..f1b01a5eb 100644 --- a/src/core/features/course/components/course-index-tour/course-index-tour.scss +++ b/src/core/features/course/components/course-index-tour/course-index-tour.scss @@ -1,10 +1,11 @@ :host { - h2 { + h1 { margin-top: 0; + font-size: var(--mdl-typography-heading2-fontSize); } - h2, p { + h1, p { text-align: center; } diff --git a/src/core/features/course/components/course-index/course-index.scss b/src/core/features/course/components/course-index/course-index.scss index d191638dc..881955cb7 100644 --- a/src/core/features/course/components/course-index/course-index.scss +++ b/src/core/features/course/components/course-index/course-index.scss @@ -74,7 +74,7 @@ ion-item.item { padding: 12px 16px; &.completioninfo { - font-size: 10px; + font-size: #{dynamic-font(10px)}; width: 18px; } diff --git a/src/core/features/course/components/module-completion-details/module-completion-details.scss b/src/core/features/course/components/module-completion-details/module-completion-details.scss index bbd4a147a..e152a7b8c 100644 --- a/src/core/features/course/components/module-completion-details/module-completion-details.scss +++ b/src/core/features/course/components/module-completion-details/module-completion-details.scss @@ -1,14 +1,14 @@ +@use "theme/globals" as *; + :host { - h2, div { - font-size: 16px; - } h2 { margin-top: 0px; margin-bottom: 8px; - line-height: 27px; + font: var(--mdl-typography-heading6-font); } ion-list { - line-height: 32px; + font: var(--mdl-typography-body-font-lg); + line-height: 200%; } ion-icon { @@ -17,6 +17,6 @@ } ion-icon.completion_dot { - font-size: 4px; + font-size: #{dynamic-font(4px)}; } } diff --git a/src/core/features/course/components/module-navigation/module-navigation.scss b/src/core/features/course/components/module-navigation/module-navigation.scss index 29fe5edd6..c43abc36f 100644 --- a/src/core/features/course/components/module-navigation/module-navigation.scss +++ b/src/core/features/course/components/module-navigation/module-navigation.scss @@ -25,8 +25,7 @@ margin: 0; --border-radius: 0; width: 100%; - font-size: 12px; - font-weight: normal; + font: var(--mdl-typography-body-font-sm); --color: var(--button-color); .button-text { @@ -34,7 +33,7 @@ } ion-icon { - font-size: 12px; + font-size: var(--mdl-typography-body-fontSize-sm); } } .core-course-previous-module { diff --git a/src/core/features/course/components/module-summary/module-summary.scss b/src/core/features/course/components/module-summary/module-summary.scss index eaa2daebf..0ddaae93b 100644 --- a/src/core/features/course/components/module-summary/module-summary.scss +++ b/src/core/features/course/components/module-summary/module-summary.scss @@ -5,7 +5,7 @@ } h1 { - font-size: 20px; + font-size: var(--mdl-typography-heading4-fontSize); } .core-modulename { diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss index a57402960..be33f3f6e 100644 --- a/src/core/features/course/components/module/module.scss +++ b/src/core/features/course/components/module/module.scss @@ -93,8 +93,7 @@ ion-badge { @include margin-horizontal(null, 4px); - font-size: 12px; - font-weight: normal; + font: var(--mdl-typography-body-font-sm); } } } @@ -135,7 +134,7 @@ border-radius: var(--mdl-shape-borderRadius-sm); margin-top: 8px; padding: 8px; - font-size: 14px; + font-size: var(--mdl-typography-body-fontSize-md); line-height: 120%; ::ng-deep ul { 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 ac0aecbaf..0bd84e69e 100644 --- a/src/core/features/course/pages/course-summary/course-summary.scss +++ b/src/core/features/course/pages/course-summary/course-summary.scss @@ -34,6 +34,7 @@ } } + /** Deprecated icon */ ion-icon.course-icon { padding: 24px; font-size: calc(var(--thumb-height) - 48px); @@ -58,7 +59,7 @@ } h1 { - font-size: 20px; + font-size: var(--mdl-typography-heading4-fontSize); } .core-course-category { diff --git a/src/core/features/course/pages/index/index.scss b/src/core/features/course/pages/index/index.scss index 32907c9a4..bf009d2b7 100644 --- a/src/core/features/course/pages/index/index.scss +++ b/src/core/features/course/pages/index/index.scss @@ -20,6 +20,7 @@ } } + /** Deprecated icon */ ion-icon.course-icon { padding: 12px; font-size: calc(var(--core-courseimage-on-course-size) - 24px); @@ -47,7 +48,7 @@ } h1 { - font-size: 20px; + font-size: var(--mdl-typography-heading4-fontSize); } .core-course-header { diff --git a/src/core/features/courses/components/course-list-item/course-list-item.scss b/src/core/features/courses/components/course-list-item/course-list-item.scss index 860f74121..c11f469ad 100644 --- a/src/core/features/courses/components/course-list-item/course-list-item.scss +++ b/src/core/features/courses/components/course-list-item/course-list-item.scss @@ -106,6 +106,7 @@ ion-chip { ion-card.core-course-list-item { max-width: var(--list-item-max-width); + /** Deprecated icon */ ion-icon.course-icon { padding: 12px; font-size: calc(var(--avatar-size) - 24px); diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss index f7c64f17f..adc88eec5 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss +++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss @@ -147,7 +147,7 @@ padding-right: 6px; padding-left: 6px; margin: 2px auto; - font-size: 18px; + font-size: #{dynamic-font(18px)}; background-color: var(--toobar-background); border-radius: var(--mdl-shape-borderRadius-xs); @include core-transition(background-color, 200ms); diff --git a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss index f1cfe35d2..06ce7ebe8 100644 --- a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss +++ b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss @@ -8,9 +8,7 @@ h1 { margin: 0; - font-size: 16px; - font-weight: 400; - line-height: 24px; + font: var(--mdl-typography-body-font-lg); letter-spacing: 0.15px; } @@ -36,9 +34,7 @@ align-items: center; p { - font-size: 14px; - font-weight: 400; - line-height: 20px; + font: var(--mdl-typography-body-font-md); letter-spacing: 0.25px; text-align: center; opacity: 0.6; diff --git a/src/core/features/h5p/components/h5p-player/h5p-player.scss b/src/core/features/h5p/components/h5p-player/h5p-player.scss index 4644e74b4..cbc743a2a 100644 --- a/src/core/features/h5p/components/h5p-player/h5p-player.scss +++ b/src/core/features/h5p/components/h5p-player/h5p-player.scss @@ -21,7 +21,7 @@ } .core-h5p-placeholder-play-button { - font-size: 30px; + font-size: #{dynamic-font(30px)}; min-height: 50px; } diff --git a/src/core/features/login/components/site-onboarding/site-onboarding.scss b/src/core/features/login/components/site-onboarding/site-onboarding.scss index a03301739..c52d42297 100644 --- a/src/core/features/login/components/site-onboarding/site-onboarding.scss +++ b/src/core/features/login/components/site-onboarding/site-onboarding.scss @@ -28,6 +28,6 @@ } h1 { - font-size: 22px; + font-size: var(--mdl-typography-heading3-fontSize); } } diff --git a/src/core/features/login/login.scss b/src/core/features/login/login.scss index 7eb22647d..cd22bfad5 100644 --- a/src/core/features/login/login.scss +++ b/src/core/features/login/login.scss @@ -147,7 +147,7 @@ } p.core-login-inbrowser { - font-size: 12px; + font: var(--mdl-typography-body-font-sm); margin-top: 8px; margin-bottom: 8px; } @@ -161,7 +161,7 @@ .core-login-sign-up h2 { margin-top: 16px; margin-bottom: 8px; - font-size: 16px; + font: var(--mdl-typography-heading6-font); } } diff --git a/src/core/features/login/pages/site/site.scss b/src/core/features/login/pages/site/site.scss index 24facb27f..0fc9e7a87 100644 --- a/src/core/features/login/pages/site/site.scss +++ b/src/core/features/login/pages/site/site.scss @@ -31,7 +31,7 @@ } ion-icon { margin: 0 auto; - font-size: 35px; + font-size: #{dynamic-font(35px)}; height: 50px; } } diff --git a/src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.scss b/src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.scss index e02e83905..f1b01a5eb 100644 --- a/src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.scss +++ b/src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.scss @@ -1,10 +1,11 @@ :host { - h2 { + h1 { margin-top: 0; + font-size: var(--mdl-typography-heading2-fontSize); } - h2, p { + h1, p { text-align: center; } diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.scss b/src/core/features/mainmenu/components/user-menu/user-menu.scss index 6296a660d..1cfd248fd 100644 --- a/src/core/features/mainmenu/components/user-menu/user-menu.scss +++ b/src/core/features/mainmenu/components/user-menu/user-menu.scss @@ -23,9 +23,7 @@ } .core-usermenu-sitename { - font-weight: bold; - font-size: 20px; - line-height: 24px; + font: var(--mdl-typography-subtitle-font-lg); } img.core-usermenu-site-logo { diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss index 22f2007d9..60328562a 100644 --- a/src/core/features/mainmenu/pages/menu/menu.scss +++ b/src/core/features/mainmenu/pages/menu/menu.scss @@ -68,7 +68,7 @@ ion-tab-button { } ion-badge.core-tab-badge { - font-size: 12px; + font-size: var(--mdl-typography-body-fontSize-sm); font-weight: bold; border-radius: 10px; padding-left: 6px; @@ -83,7 +83,7 @@ ion-tab-button { padding: 3px 6px 2px; @include position(8px, null, null, calc(50% + 6px)); min-width: 12px; - font-size: 8px; + font-size: #{dynamic-font(8px)}; font-weight: normal; box-sizing: border-box; position: absolute; @@ -173,7 +173,7 @@ ion-tabs.placement-side { transition: all 500ms ease-in-out; opacity: .8; z-index: 12; - font-size: 12px; + font-size: var(--mdl-typography-body-font-sm); .core-online-message { display: var(--network-message-online); diff --git a/src/core/features/policy/pages/acceptances/acceptances.scss b/src/core/features/policy/pages/acceptances/acceptances.scss index 43378dfa9..a59703565 100644 --- a/src/core/features/policy/pages/acceptances/acceptances.scss +++ b/src/core/features/policy/pages/acceptances/acceptances.scss @@ -105,7 +105,7 @@ margin: 3px; &.core-policy-icon-bullet { - font-size: 6px; + font-size: #{dynamic-font(6px)}; width: 18px; } } diff --git a/src/core/features/reminders/components/date/date.scss b/src/core/features/reminders/components/date/date.scss index 7b32f1d09..c5238e346 100644 --- a/src/core/features/reminders/components/date/date.scss +++ b/src/core/features/reminders/components/date/date.scss @@ -9,7 +9,8 @@ div { flex-grow: 1; - font-size: 14px; + font: var(--mdl-typography-body-font-md); + line-height: normal; margin: 0; align-self: center; diff --git a/src/core/features/search/components/global-search-filters/global-search-filters.html b/src/core/features/search/components/global-search-filters/global-search-filters.html index 2a1b69cba..ab89d1a72 100644 --- a/src/core/features/search/components/global-search-filters/global-search-filters.html +++ b/src/core/features/search/components/global-search-filters/global-search-filters.html @@ -17,7 +17,7 @@ - +

{{ 'core.search.filtercategories' | translate }}

 @@ -35,7 +35,7 @@ - +

{{ 'core.search.filtercourses' | translate }}

 diff --git a/src/core/features/search/components/global-search-filters/global-search-filters.scss b/src/core/features/search/components/global-search-filters/global-search-filters.scss index d9a9c2d1d..e7678a15c 100644 --- a/src/core/features/search/components/global-search-filters/global-search-filters.scss +++ b/src/core/features/search/components/global-search-filters/global-search-filters.scss @@ -1,21 +1,16 @@ :host { - --help-text-color: var(--gray-700); + --heading-text-color: var(--gray-700); - ion-item.help { - color: var(--help-text-color); + ion-item.heading { + color: var(--heading-text-color); ion-label { margin-bottom: 0; } } - - ion-item:not(.help) { - font-size: 16px; - } - } :host-context(html.dark) { - --help-text-color: var(--gray-400); + --heading-text-color: var(--gray-400); } diff --git a/src/core/features/search/components/global-search-result/global-search-result.html b/src/core/features/search/components/global-search-result/global-search-result.html index 321f4854c..4c0b11eb8 100644 --- a/src/core/features/search/components/global-search-result/global-search-result.html +++ b/src/core/features/search/components/global-search-result/global-search-result.html @@ -2,14 +2,14 @@ -

+

+

diff --git a/src/core/features/search/components/global-search-result/global-search-result.scss b/src/core/features/search/components/global-search-result/global-search-result.scss index b4fa7d514..6b1464abe 100644 --- a/src/core/features/search/components/global-search-result/global-search-result.scss +++ b/src/core/features/search/components/global-search-result/global-search-result.scss @@ -7,8 +7,7 @@ --core-global-search-result-context-color: var(--gray-600); --core-global-search-result-icon-size: 16px; - h3 { - font-size: 16px; + p.item-heading { display: flex; align-items: center; color: var(--core-global-search-result-title-color); @@ -69,7 +68,7 @@ color: var(--core-global-search-result-context-color); margin-top: var(--mdl-spacing-2); margin-inline-end: var(--mdl-spacing-4); - font-size: 12px; + font: var(--mdl-typography-body-font-sm); ion-icon { margin-inline-end: var(--mdl-spacing-1); diff --git a/src/core/features/search/components/search-box/search-box.scss b/src/core/features/search/components/search-box/search-box.scss index fa22c8742..4ac725f9f 100644 --- a/src/core/features/search/components/search-box/search-box.scss +++ b/src/core/features/search/components/search-box/search-box.scss @@ -31,7 +31,7 @@ --a11y-sizing-minTargetSize: var(--search-height); --padding-start: 0px; --padding-end: 0px; - font-size: 12px; + font-size: var(--mdl-typography-body-fontSize-sm); } } diff --git a/src/core/features/settings/pages/licenses/licenses.html b/src/core/features/settings/pages/licenses/licenses.html index 99d366555..7710faa0f 100644 --- a/src/core/features/settings/pages/licenses/licenses.html +++ b/src/core/features/settings/pages/licenses/licenses.html @@ -12,7 +12,7 @@ + [placeholder]="'core.filter' | translate" class="ion-margin-vertical" /> @@ -22,13 +22,13 @@ {{ 'core.view' | translate }} - +

{{ license.name }} {{ license.name }} - {{ license.version }}

-

+

{{ 'core.settings.publisher' | translate }}{{ 'core.labelsep' | translate }} {{ license.publisher }}

{{ 'core.settings.license' | translate }}{{ 'core.labelsep' | translate }} {{ license.licenses }}

@@ -37,7 +37,9 @@ [showBrowserWarning]="false">{{ license.email }}

 {{ 'core.view' | translate }} + auto-login="no" [ariaLabel]="'core.view' | translate"> + diff --git a/src/core/features/settings/pages/licenses/licenses.ts b/src/core/features/settings/pages/licenses/licenses.ts index 2df4cccb5..131ac3c67 100644 --- a/src/core/features/settings/pages/licenses/licenses.ts +++ b/src/core/features/settings/pages/licenses/licenses.ts @@ -52,7 +52,7 @@ export class CoreSettingsLicensesPage implements OnInit { protected allLicenses: CoreSettingsLicense[] = []; constructor() { - this.appLicenseVersion = CoreConstants.CONFIG.versionname.indexOf('-') > 0 + this.appLicenseVersion = CoreConstants.BUILD.isDevelopment ? 'main' : 'v' + CoreConstants.CONFIG.versionname; diff --git a/src/core/features/user/pages/about/about.scss b/src/core/features/user/pages/about/about.scss index b746d8e45..9614e0e5a 100644 --- a/src/core/features/user/pages/about/about.scss +++ b/src/core/features/user/pages/about/about.scss @@ -39,10 +39,10 @@ } h2 { - font-size: 24px; + font: var(--mdl-typography-heading2-font); } h3 { - font-size: 20px; + font: var(--mdl-typography-heading4-font); } .core-user-profile-interests { ion-badge { diff --git a/src/core/features/user/tests/behat/snapshots/test-basic-usage-of-user-features-view-profile_22.png b/src/core/features/user/tests/behat/snapshots/test-basic-usage-of-user-features-view-profile_22.png index 276ba2b33..4b5cf2a1b 100644 Binary files a/src/core/features/user/tests/behat/snapshots/test-basic-usage-of-user-features-view-profile_22.png and b/src/core/features/user/tests/behat/snapshots/test-basic-usage-of-user-features-view-profile_22.png differ diff --git a/src/theme/components/collapsible-item.scss b/src/theme/components/collapsible-item.scss index 998a055d5..dc68b6737 100644 --- a/src/theme/components/collapsible-item.scss +++ b/src/theme/components/collapsible-item.scss @@ -30,7 +30,6 @@ text-align: center; z-index: 7; text-transform: none; - font-size: 11px; font-weight: normal; background-color: var(--collapsible-toggle-background); color: var(--collapsible-toggle-text); diff --git a/src/theme/components/ion-action-sheet.scss b/src/theme/components/ion-action-sheet.scss index d89728cd3..7dfa2c271 100644 --- a/src/theme/components/ion-action-sheet.scss +++ b/src/theme/components/ion-action-sheet.scss @@ -19,11 +19,10 @@ ion-action-sheet { &.md { .action-sheet-title { @include padding(4px, null, 4px, 16px); - font-size: 12px; + font: var(--mdl-typography-body-font-sm); min-height: auto; color: var(--medium); line-height: 2em; - font-weight: normal; } .action-sheet-group:first-child { diff --git a/src/theme/components/ion-card.scss b/src/theme/components/ion-card.scss index 451a9530f..68ab6edce 100644 --- a/src/theme/components/ion-card.scss +++ b/src/theme/components/ion-card.scss @@ -23,7 +23,7 @@ ion-card { } ion-card-title { - font-size: 20px; + font: var(--mdl-typography-heading4-font); } &.core-card-with-buttons .item ion-label { diff --git a/src/theme/components/ion-chip.scss b/src/theme/components/ion-chip.scss index cb92de73f..380bc866b 100644 --- a/src/theme/components/ion-chip.scss +++ b/src/theme/components/ion-chip.scss @@ -49,7 +49,7 @@ ion-chip { ion-chip, ion-button.button.chip { line-height: 1.1; - font-size: 12px; + font-size: var(--mdl-typography-body-fontSize-sm); min-height: 24px; margin: 4px; font-weight: normal; @@ -68,7 +68,7 @@ ion-button.button.chip { ion-button.button.chip { --border-radius: var(--mdl-shape-borderRadius-md); min-height: 32px; - font-size: 14px; + font-size: var(--mdl-typography-body-fontSize-md); ion-icon[slot=start] { @include margin(0, 8px, 0, 0); diff --git a/src/theme/components/ion-item.scss b/src/theme/components/ion-item.scss index 80c2d492b..7665540e2 100644 --- a/src/theme/components/ion-item.scss +++ b/src/theme/components/ion-item.scss @@ -54,6 +54,7 @@ ion-item.item { } // Fake item. +// The usage of this fake item is discouraged, use ion-item instead. It will be removed soon. div.fake-ion-item { position: relative; align-items: center; @@ -63,91 +64,49 @@ div.fake-ion-item { background: var(--ion-item-background); text-align: initial; text-decoration: none; - overflow: hidden; box-sizing: border-box; -} + white-space: normal; + overflow: inherit; -.md div.fake-ion-item { - font-size: var(--text-size); - font-weight: normal; - text-transform: none; @include padding(null, var(--mdl-spacing-4), null, var(--mdl-spacing-4)); - @include margin(11px, null, 10px, null); + margin-top: var(--mdl-spacing-2); + margin-bottom: var(--mdl-spacing-2); h1 { - @include margin(0, 0, 2px); - font-size: 24px; - font-weight: normal; + @include margin(0px, 0px, 2px); + font: var(--mdl-typography-heading4-font); } h2 { - @include margin(2px, 0); - font-size: 16px; - font-weight: normal; + @include margin(2px, 0px); + font: var(--mdl-typography-heading5-font); } h3, h4, h5, h6 { - @include margin(2px, 0); - - font-size: var(--text-size); - font-weight: normal; - - line-height: normal; + @include margin(2px, 0px); + font: var(--mdl-typography-heading6-font); } p { - @include margin(0, 0, 2px); - font-size: var(--text-size); + @include margin(0px, 0px, 2px); + font: var(--mdl-typography-body-font-md); line-height: 20px; - text-overflow: inherit; + } + + core-format-text, + core-format-text > *:not(pre) { + white-space: normal; overflow: inherit; } } -.ios div.fake-ion-item { - font-size: var(--text-size); - @include padding(null, 10px, null, 20px); - @include margin(10px, 8px, 10px, null); - - h1 { - @include margin(3px, 0, 2px); - font-size: 22px; - font-weight: normal; - } - - h2 { - @include margin(0, 0, 2px); - font-size: 17px; - font-weight: normal; - } - - h3, - h4, - h5, - h6 { - @include margin(0, 0, 3px); - font-size: var(--text-size); - font-weight: normal; - line-height: normal; - } - - p { - @include margin(0, 0, 2px 0); - font-size: var(--text-size); - line-height: normal; - text-overflow: inherit; - overflow: inherit; - } - -} - // Item Headings. // Some styles taken from ion-label -ion-item.item.item-label > ion-label, -.fake-ion-item > ion-label, +ion-item.item > ion-label, +ion-item-divider.item > ion-label, ion-item .in-item { font-size: var(--text-size); @@ -183,7 +142,6 @@ ion-item .in-item { // Correctly inherit ion-text-wrap onto labels. .item > ion-label, -.fake-ion-item, .item > ion-checkbox::part(label), ion-checkbox::part(label), .item ion-toggle::part(label), @@ -198,7 +156,6 @@ ion-input > label { .item.ion-text-wrap > ion-label, ion-item > .in-item, -.fake-ion-item.ion-text-wrap, .item.ion-text-wrap > ion-checkbox::part(label), ion-checkbox.ion-text-wrap::part(label), ion-toggle.ion-text-wrap::part(label), diff --git a/src/theme/components/swiper.scss b/src/theme/components/swiper.scss index ceb684684..f32ffc92e 100644 --- a/src/theme/components/swiper.scss +++ b/src/theme/components/swiper.scss @@ -27,8 +27,6 @@ swiper-container { width: 100%; height: 100%; - font-size: 18px; - text-align: center; box-sizing: border-box; diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index b7e12df4e..34f7b1ec6 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -713,7 +713,7 @@ table.core-table { thead th { vertical-align: bottom; font-weight: bold; - font-size: 14px; + font-size: var(--mdl-typography-body-fontSize-md); background-color: var(--core-table-header-background); } @@ -722,7 +722,7 @@ table.core-table { font-weight: normal; } td { - font-size: 16px; + font-size: var(--mdl-typography-body-fontSize-lg); } } diff --git a/src/theme/theme.design-system.scss b/src/theme/theme.design-system.scss index efc3323fa..654856025 100644 --- a/src/theme/theme.design-system.scss +++ b/src/theme/theme.design-system.scss @@ -197,7 +197,7 @@ html { --core-combobox-border-width: var(--core-input-border-width); --core-combobox-box-shadow: none; - --core-tab-font-weight-active: normal; + --core-tab-font-weight-active: var(--mdl-typography-label-fontWeight); --core-tabs-height: 48px; --core-progressbar-height: 8px;