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

MOBILE-4470 a11y: Fix fixed font sizes

main
Pau Ferrer Ocaña 2024-05-17 15:23:27 +02:00
parent 42b67d58a3
commit af94add7e9
55 changed files with 124 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/addons/block/myoverview/components/myoverview/myoverview.scss
View File

@ -33,7 +33,6 @@
.item-heading { .item-heading {
font-weight: bold; font-weight: bold;
margin-bottom: 0; margin-bottom: 0;
font-size: 16px;
} }
.subdued { .subdued {

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

@ -9,7 +9,7 @@
<ion-item-group *ngFor="let dayEvents of events"> <ion-item-group *ngFor="let dayEvents of events">
<ion-item> <ion-item>
<ion-label> <ion-label>
<h4 [class.core-bold]="!course">{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4> <h4>{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ng-container *ngFor="let event of dayEvents.events"> <ng-container *ngFor="let event of dayEvents.events">

9
src/addons/block/timeline/components/events/events.scss
View File

@ -1,16 +1,11 @@
@use "theme/globals" as *; @use "theme/globals" as *;
h3 { h3 {
font-weight: bold; font: var(--mdl-typography-heading5-font);
font-size: 18px;
} }
h4 { h4 {
font-size: 15px; font: var(--mdl-typography-heading6-font);
}
h4.core-bold {
font-weight: bold;
} }
.addon-block-timeline-activity { .addon-block-timeline-activity {

1
src/addons/calendar/components/calendar/calendar.scss
View File

@ -144,7 +144,6 @@
swiper-slide { swiper-slide {
display: block; display: block;
font-size: inherit;
justify-content: start; justify-content: start;
align-items: start; align-items: start;
text-align: start; text-align: start;

2
src/addons/messages/messages-common.scss
View File

@ -30,7 +30,7 @@
} }
.addon-message-last-message-date { .addon-message-last-message-date {
white-space: nowrap; white-space: nowrap;
font-size: 11px; font-size: #{dynamic-font(11px)};
} }
} }

BIN
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
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 45 KiB

15
src/addons/mod/forum/pages/search/search.scss
View File

@ -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);
}

1
src/addons/mod/forum/pages/search/search.ts
View File

@ -34,7 +34,6 @@ import { Translate } from '@singletons';
@Component({ @Component({
selector: 'page-addon-mod-forum-search', selector: 'page-addon-mod-forum-search',
templateUrl: 'search.html', templateUrl: 'search.html',
styleUrls: ['search.scss'],
}) })
export class AddonModForumSearchPage implements OnInit { export class AddonModForumSearchPage implements OnInit {

BIN
src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 31 KiB

BIN
src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_40.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

12
src/addons/notifications/pages/list/list.scss
View File

@ -5,12 +5,12 @@ ion-item.addon-notification-item {
ion-label { ion-label {
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
p.item-heading {
font-size: var(--text-size);
@include ellipsis(3);
}
p { 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; padding-top: 12px;
ion-icon { ion-icon {
font-size: 6px; font-size: #{dynamic-font(6px)};
vertical-align: middle; vertical-align: middle;
} }
} }

4
src/addons/notifications/pages/notification/notification.scss
View File

@ -10,10 +10,10 @@
margin-top: 16px; margin-top: 16px;
} }
p.item-heading { p.item-heading {
font-size: 16px; font: var(--mdl-typography-body-font-lg);
} }
p { p {
font-size: 12px; font: var(--mdl-typography-body-font-sm);
} }
} }

13
src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
View File

@ -2,13 +2,14 @@
<!-- Content is outside the core-loading to let the script calculate drag items position --> <!-- Content is outside the core-loading to let the script calculate drag items position -->
<core-loading [hideUntil]="question.loaded" /> <core-loading [hideUntil]="question.loaded" />
<ion-card *ngIf="!question.readOnly" class="core-info-card" [hidden]="!question.loaded">
<ion-item>
<ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
<ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
</ion-item>
</ion-card>
<div class="fake-ion-item ion-text-wrap" [hidden]="!question.loaded"> <div class="fake-ion-item ion-text-wrap" [hidden]="!question.loaded">
<ion-card *ngIf="!question.readOnly" class="core-info-card">
<ion-item>
<ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
<ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
</ion-item>
</ion-card>
<div class="addon-qtype-ddwtos-container"> <div class="addon-qtype-ddwtos-container">
<core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel" <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
[contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()" /> [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()" />

2
src/core/components/input-errors/input-errors.scss
View File

@ -8,7 +8,7 @@
.core-input-error { .core-input-error {
padding: 4px; padding: 4px;
color: var(--danger); color: var(--danger);
font-size: 12px; font: var(--mdl-typography-body-font-sm);
display: none; display: none;
&:first-child { &:first-child {

3
src/core/components/message/message.scss
View File

@ -63,12 +63,11 @@
} }
div { div {
font-weight: 500;
flex-grow: 1; flex-grow: 1;
padding-left: .5rem; padding-left: .5rem;
padding-right: .5rem; padding-right: .5rem;
@include ellipsis(); @include ellipsis();
font-size: 16px; font: var(--mdl-typography-subtitle-font-md);
} }
} }

1
src/core/components/swipe-slides/swipe-slides.scss
View File

@ -4,7 +4,6 @@
swiper-slide { swiper-slide {
display: block; display: block;
font-size: inherit;
justify-content: start; justify-content: start;
align-items: start; align-items: start;
text-align: start; text-align: start;

13
src/core/components/tabs/tabs.scss
View File

@ -65,9 +65,16 @@
word-wrap: break-word; word-wrap: break-word;
max-width: 100%; max-width: 100%;
line-height: 1.2em; line-height: 1.2em;
display: flex;
flex-direction: row;
align-items: center;
h2 { h2 {
font-size: 14px; font: var(--mdl-typography-label-font-lg);
font-weight: 400; }
ion-badge {
@include margin-horizontal(4px, 0px);
} }
} }
} }
@ -78,7 +85,7 @@
border-bottom-color: var(--border-color-active); border-bottom-color: var(--border-color-active);
ion-tab-button { ion-tab-button {
color: var(--color-active); color: var(--color-active);
ion-label { ion-label h2 {
font-weight: var(--font-weight-active); font-weight: var(--font-weight-active);
} }
} }

5
src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss
View File

@ -1,10 +1,11 @@
:host { :host {
h2 { h1 {
margin-top: 0; margin-top: 0;
font-size: var(--mdl-typography-heading2-fontSize);
} }
h2, p { h1, p {
text-align: center; text-align: center;
} }

3
src/core/features/comments/components/comments/comments.scss 100644
View File

@ -0,0 +1,3 @@
button.as-link {
font: var(--mdl-typography-body-font-md);
}

20
src/core/features/comments/components/comments/comments.ts
View File

@ -29,6 +29,7 @@ import { ContextLevel } from '@/core/constants';
@Component({ @Component({
selector: 'core-comments', selector: 'core-comments',
templateUrl: 'core-comments.html', templateUrl: 'core-comments.html',
styleUrl: 'comments.scss',
}) })
export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestroy { export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestroy {
@ -38,7 +39,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
@Input() itemId!: number; @Input() itemId!: number;
@Input() area = ''; @Input() area = '';
@Input() title?: string; @Input() title?: string;
@Output() onLoading: EventEmitter<boolean>; // Event that indicates whether the component is loading data. @Output() onLoading = new EventEmitter<boolean>(); // 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() 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. @Input() showItem = false; // Show button as an item.
@ -47,14 +48,11 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
countError = false; countError = false;
enabled = false; enabled = false;
protected updateSiteObserver?: CoreEventObserver; protected updateSiteObserver: CoreEventObserver;
protected refreshCommentsObserver?: CoreEventObserver; protected refreshCommentsObserver: CoreEventObserver;
protected commentsCountObserver?: CoreEventObserver; protected commentsCountObserver: CoreEventObserver;
constructor() { constructor() {
this.onLoading = new EventEmitter<boolean>();
this.enabled = CoreComments.areCommentsEnabledInSite(); this.enabled = CoreComments.areCommentsEnabledInSite();
// Update visibility if current site info is updated. // Update visibility if current site info is updated.
@ -87,7 +85,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
this.commentsCountObserver = CoreEvents.on( this.commentsCountObserver = CoreEvents.on(
CoreCommentsProvider.COMMENTS_COUNT_CHANGED_EVENT, CoreCommentsProvider.COMMENTS_COUNT_CHANGED_EVENT,
(data) => { (data) => {
// Verify these comments need to be updated. // Verify these comments need to be updated.
if (!this.commentsCount.endsWith('+') && this.undefinedOrEqual(data, 'contextLevel') && if (!this.commentsCount.endsWith('+') && this.undefinedOrEqual(data, 'contextLevel') &&
this.undefinedOrEqual(data, 'instanceId') && this.undefinedOrEqual(data, 'component') && this.undefinedOrEqual(data, 'instanceId') && this.undefinedOrEqual(data, 'component') &&
this.undefinedOrEqual(data, 'itemId') && this.undefinedOrEqual(data, 'area') && !this.countError) { 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 { ngOnInit(): void {
this.fetchData(); this.fetchData();
} }
/** /**
* Listen to changes. * @inheritdoc
*/ */
ngOnChanges(changes: { [name: string]: SimpleChange }): void { ngOnChanges(changes: { [name: string]: SimpleChange }): void {
// If something change, update the fields. // If something change, update the fields.
@ -193,7 +191,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
} }
/** /**
* Component destroyed. * @inheritdoc
*/ */
ngOnDestroy(): void { ngOnDestroy(): void {
this.updateSiteObserver?.off(); this.updateSiteObserver?.off();

5
src/core/features/course/components/course-index-tour/course-index-tour.scss
View File

@ -1,10 +1,11 @@
:host { :host {
h2 { h1 {
margin-top: 0; margin-top: 0;
font-size: var(--mdl-typography-heading2-fontSize);
} }
h2, p { h1, p {
text-align: center; text-align: center;
} }

2
src/core/features/course/components/course-index/course-index.scss
View File

@ -74,7 +74,7 @@ ion-item.item {
padding: 12px 16px; padding: 12px 16px;
&.completioninfo { &.completioninfo {
font-size: 10px; font-size: #{dynamic-font(10px)};
width: 18px; width: 18px;
} }

12
src/core/features/course/components/module-completion-details/module-completion-details.scss
View File

@ -1,14 +1,14 @@
@use "theme/globals" as *;
:host { :host {
h2, div {
font-size: 16px;
}
h2 { h2 {
margin-top: 0px; margin-top: 0px;
margin-bottom: 8px; margin-bottom: 8px;
line-height: 27px; font: var(--mdl-typography-heading6-font);
} }
ion-list { ion-list {
line-height: 32px; font: var(--mdl-typography-body-font-lg);
line-height: 200%;
} }
ion-icon { ion-icon {
@ -17,6 +17,6 @@
} }
ion-icon.completion_dot { ion-icon.completion_dot {
font-size: 4px; font-size: #{dynamic-font(4px)};
} }
} }

5
src/core/features/course/components/module-navigation/module-navigation.scss
View File

@ -25,8 +25,7 @@
margin: 0; margin: 0;
--border-radius: 0; --border-radius: 0;
width: 100%; width: 100%;
font-size: 12px; font: var(--mdl-typography-body-font-sm);
font-weight: normal;
--color: var(--button-color); --color: var(--button-color);
.button-text { .button-text {
@ -34,7 +33,7 @@
} }
ion-icon { ion-icon {
font-size: 12px; font-size: var(--mdl-typography-body-fontSize-sm);
} }
} }
.core-course-previous-module { .core-course-previous-module {

2
src/core/features/course/components/module-summary/module-summary.scss
View File

@ -5,7 +5,7 @@
} }
h1 { h1 {
font-size: 20px; font-size: var(--mdl-typography-heading4-fontSize);
} }
.core-modulename { .core-modulename {

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

@ -93,8 +93,7 @@
ion-badge { ion-badge {
@include margin-horizontal(null, 4px); @include margin-horizontal(null, 4px);
font-size: 12px; font: var(--mdl-typography-body-font-sm);
font-weight: normal;
} }
} }
} }
@ -135,7 +134,7 @@
border-radius: var(--mdl-shape-borderRadius-sm); border-radius: var(--mdl-shape-borderRadius-sm);
margin-top: 8px; margin-top: 8px;
padding: 8px; padding: 8px;
font-size: 14px; font-size: var(--mdl-typography-body-fontSize-md);
line-height: 120%; line-height: 120%;
::ng-deep ul { ::ng-deep ul {

3
src/core/features/course/pages/course-summary/course-summary.scss
View File

@ -34,6 +34,7 @@
} }
} }
/** Deprecated icon */
ion-icon.course-icon { ion-icon.course-icon {
padding: 24px; padding: 24px;
font-size: calc(var(--thumb-height) - 48px); font-size: calc(var(--thumb-height) - 48px);
@ -58,7 +59,7 @@
} }
h1 { h1 {
font-size: 20px; font-size: var(--mdl-typography-heading4-fontSize);
} }
.core-course-category { .core-course-category {

3
src/core/features/course/pages/index/index.scss
View File

@ -20,6 +20,7 @@
} }
} }
/** Deprecated icon */
ion-icon.course-icon { ion-icon.course-icon {
padding: 12px; padding: 12px;
font-size: calc(var(--core-courseimage-on-course-size) - 24px); font-size: calc(var(--core-courseimage-on-course-size) - 24px);
@ -47,7 +48,7 @@
} }
h1 { h1 {
font-size: 20px; font-size: var(--mdl-typography-heading4-fontSize);
} }
.core-course-header { .core-course-header {

1
src/core/features/courses/components/course-list-item/course-list-item.scss
View File

@ -106,6 +106,7 @@ ion-chip {
ion-card.core-course-list-item { ion-card.core-course-list-item {
max-width: var(--list-item-max-width); max-width: var(--list-item-max-width);
/** Deprecated icon */
ion-icon.course-icon { ion-icon.course-icon {
padding: 12px; padding: 12px;
font-size: calc(var(--avatar-size) - 24px); font-size: calc(var(--avatar-size) - 24px);

2
src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
View File

@ -147,7 +147,7 @@
padding-right: 6px; padding-right: 6px;
padding-left: 6px; padding-left: 6px;
margin: 2px auto; margin: 2px auto;
font-size: 18px; font-size: #{dynamic-font(18px)};
background-color: var(--toobar-background); background-color: var(--toobar-background);
border-radius: var(--mdl-shape-borderRadius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
@include core-transition(background-color, 200ms); @include core-transition(background-color, 200ms);

8
src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss
View File

@ -8,9 +8,7 @@
h1 { h1 {
margin: 0; margin: 0;
font-size: 16px; font: var(--mdl-typography-body-font-lg);
font-weight: 400;
line-height: 24px;
letter-spacing: 0.15px; letter-spacing: 0.15px;
} }
@ -36,9 +34,7 @@
align-items: center; align-items: center;
p { p {
font-size: 14px; font: var(--mdl-typography-body-font-md);
font-weight: 400;
line-height: 20px;
letter-spacing: 0.25px; letter-spacing: 0.25px;
text-align: center; text-align: center;
opacity: 0.6; opacity: 0.6;

2
src/core/features/h5p/components/h5p-player/h5p-player.scss
View File

@ -21,7 +21,7 @@
} }
.core-h5p-placeholder-play-button { .core-h5p-placeholder-play-button {
font-size: 30px; font-size: #{dynamic-font(30px)};
min-height: 50px; min-height: 50px;
} }

2
src/core/features/login/components/site-onboarding/site-onboarding.scss
View File

@ -28,6 +28,6 @@
} }
h1 { h1 {
font-size: 22px; font-size: var(--mdl-typography-heading3-fontSize);
} }
} }

4
src/core/features/login/login.scss
View File

@ -147,7 +147,7 @@
} }
p.core-login-inbrowser { p.core-login-inbrowser {
font-size: 12px; font: var(--mdl-typography-body-font-sm);
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -161,7 +161,7 @@
.core-login-sign-up h2 { .core-login-sign-up h2 {
margin-top: 16px; margin-top: 16px;
margin-bottom: 8px; margin-bottom: 8px;
font-size: 16px; font: var(--mdl-typography-heading6-font);
} }
} }

2
src/core/features/login/pages/site/site.scss
View File

@ -31,7 +31,7 @@
} }
ion-icon { ion-icon {
margin: 0 auto; margin: 0 auto;
font-size: 35px; font-size: #{dynamic-font(35px)};
height: 50px; height: 50px;
} }
} }

5
src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.scss
View File

@ -1,10 +1,11 @@
:host { :host {
h2 { h1 {
margin-top: 0; margin-top: 0;
font-size: var(--mdl-typography-heading2-fontSize);
} }
h2, p { h1, p {
text-align: center; text-align: center;
} }

4
src/core/features/mainmenu/components/user-menu/user-menu.scss
View File

@ -23,9 +23,7 @@
} }
.core-usermenu-sitename { .core-usermenu-sitename {
font-weight: bold; font: var(--mdl-typography-subtitle-font-lg);
font-size: 20px;
line-height: 24px;
} }
img.core-usermenu-site-logo { img.core-usermenu-site-logo {

6
src/core/features/mainmenu/pages/menu/menu.scss
View File

@ -68,7 +68,7 @@ ion-tab-button {
} }
ion-badge.core-tab-badge { ion-badge.core-tab-badge {
font-size: 12px; font-size: var(--mdl-typography-body-fontSize-sm);
font-weight: bold; font-weight: bold;
border-radius: 10px; border-radius: 10px;
padding-left: 6px; padding-left: 6px;
@ -83,7 +83,7 @@ ion-tab-button {
padding: 3px 6px 2px; padding: 3px 6px 2px;
@include position(8px, null, null, calc(50% + 6px)); @include position(8px, null, null, calc(50% + 6px));
min-width: 12px; min-width: 12px;
font-size: 8px; font-size: #{dynamic-font(8px)};
font-weight: normal; font-weight: normal;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
@ -173,7 +173,7 @@ ion-tabs.placement-side {
transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;
opacity: .8; opacity: .8;
z-index: 12; z-index: 12;
font-size: 12px; font-size: var(--mdl-typography-body-font-sm);
.core-online-message { .core-online-message {
display: var(--network-message-online); display: var(--network-message-online);

2
src/core/features/policy/pages/acceptances/acceptances.scss
View File

@ -105,7 +105,7 @@
margin: 3px; margin: 3px;
&.core-policy-icon-bullet { &.core-policy-icon-bullet {
font-size: 6px; font-size: #{dynamic-font(6px)};
width: 18px; width: 18px;
} }
} }

3
src/core/features/reminders/components/date/date.scss
View File

@ -9,7 +9,8 @@
div { div {
flex-grow: 1; flex-grow: 1;
font-size: 14px; font: var(--mdl-typography-body-font-md);
line-height: normal;
margin: 0; margin: 0;
align-self: center; align-self: center;

4
src/core/features/search/components/global-search-filters/global-search-filters.html
View File

@ -17,7 +17,7 @@
<ion-list> <ion-list>
<ng-container *ngIf="searchAreaCategories.length > 0"> <ng-container *ngIf="searchAreaCategories.length > 0">
<core-spacer /> <core-spacer />
<ion-item class="ion-text-wrap help"> <ion-item class="ion-text-wrap heading">
<ion-label> <ion-label>
<p class="item-heading">{{ 'core.search.filtercategories' | translate }}</p> <p class="item-heading">{{ 'core.search.filtercategories' | translate }}</p>
</ion-label> </ion-label>
@ -35,7 +35,7 @@
</ng-container> </ng-container>
<ng-container *ngIf="!hideCourses && courses.length > 0"> <ng-container *ngIf="!hideCourses && courses.length > 0">
<core-spacer /> <core-spacer />
<ion-item class="ion-text-wrap help"> <ion-item class="ion-text-wrap heading">
<ion-label> <ion-label>
<p class="item-heading">{{ 'core.search.filtercourses' | translate }}</p> <p class="item-heading">{{ 'core.search.filtercourses' | translate }}</p>
</ion-label> </ion-label>

13
src/core/features/search/components/global-search-filters/global-search-filters.scss
View File

@ -1,21 +1,16 @@
:host { :host {
--help-text-color: var(--gray-700); --heading-text-color: var(--gray-700);
ion-item.help { ion-item.heading {
color: var(--help-text-color); color: var(--heading-text-color);
ion-label { ion-label {
margin-bottom: 0; margin-bottom: 0;
} }
} }
ion-item:not(.help) {
font-size: 16px;
}
} }
:host-context(html.dark) { :host-context(html.dark) {
--help-text-color: var(--gray-400); --heading-text-color: var(--gray-400);
} }

4
src/core/features/search/components/global-search-result/global-search-result.html
View File

@ -2,14 +2,14 @@
<core-course-image *ngIf="result.course" [course]="result.course" /> <core-course-image *ngIf="result.course" [course]="result.course" />
<core-user-avatar *ngIf="result.user" [user]="result.user" [linkProfile]="false" /> <core-user-avatar *ngIf="result.user" [user]="result.user" [linkProfile]="false" />
<ion-label> <ion-label>
<h3 *ngIf="result.title"> <p class="item-heading" *ngIf="result.title">
<ion-icon *ngIf="renderedIcon" [name]="renderedIcon" aria-hidden="true" /> <ion-icon *ngIf="renderedIcon" [name]="renderedIcon" aria-hidden="true" />
<core-mod-icon *ngIf="!renderedIcon && result.module" [modicon]="result.module.iconurl" [modname]="result.module.name" <core-mod-icon *ngIf="!renderedIcon && result.module" [modicon]="result.module.iconurl" [modname]="result.module.name"
[colorize]="false" /> [colorize]="false" />
<img *ngIf="!renderedIcon && !result.module && result.component" [url]="result.component.iconurl" alt="" class="result-icon" <img *ngIf="!renderedIcon && !result.module && result.component" [url]="result.component.iconurl" alt="" class="result-icon"
core-external-content [component]="result.component.name"> core-external-content [component]="result.component.name">
<core-format-text [text]="result.title" /> <core-format-text [text]="result.title" />
</h3> </p>
<core-format-text *ngIf="result.content && !result.course && !result.user" [text]="result.content" /> <core-format-text *ngIf="result.content && !result.course && !result.user" [text]="result.content" />
<div *ngIf="renderedContext" class="result-context-wrapper"> <div *ngIf="renderedContext" class="result-context-wrapper">
<div *ngIf="renderedContext.courseName" class="result-context"> <div *ngIf="renderedContext.courseName" class="result-context">

5
src/core/features/search/components/global-search-result/global-search-result.scss
View File

@ -7,8 +7,7 @@
--core-global-search-result-context-color: var(--gray-600); --core-global-search-result-context-color: var(--gray-600);
--core-global-search-result-icon-size: 16px; --core-global-search-result-icon-size: 16px;
h3 { p.item-heading {
font-size: 16px;
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--core-global-search-result-title-color); color: var(--core-global-search-result-title-color);
@ -69,7 +68,7 @@
color: var(--core-global-search-result-context-color); color: var(--core-global-search-result-context-color);
margin-top: var(--mdl-spacing-2); margin-top: var(--mdl-spacing-2);
margin-inline-end: var(--mdl-spacing-4); margin-inline-end: var(--mdl-spacing-4);
font-size: 12px; font: var(--mdl-typography-body-font-sm);
ion-icon { ion-icon {
margin-inline-end: var(--mdl-spacing-1); margin-inline-end: var(--mdl-spacing-1);

2
src/core/features/search/components/search-box/search-box.scss
View File

@ -31,7 +31,7 @@
--a11y-sizing-minTargetSize: var(--search-height); --a11y-sizing-minTargetSize: var(--search-height);
--padding-start: 0px; --padding-start: 0px;
--padding-end: 0px; --padding-end: 0px;
font-size: 12px; font-size: var(--mdl-typography-body-fontSize-sm);
} }
} }

4
src/core/features/user/pages/about/about.scss
View File

@ -39,10 +39,10 @@
} }
h2 { h2 {
font-size: 24px; font: var(--mdl-typography-heading2-font);
} }
h3 { h3 {
font-size: 20px; font: var(--mdl-typography-heading4-font);
} }
.core-user-profile-interests { .core-user-profile-interests {
ion-badge { ion-badge {

BIN
src/core/features/user/tests/behat/snapshots/test-basic-usage-of-user-features-view-profile_22.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

1
src/theme/components/collapsible-item.scss
View File

@ -30,7 +30,6 @@
text-align: center; text-align: center;
z-index: 7; z-index: 7;
text-transform: none; text-transform: none;
font-size: 11px;
font-weight: normal; font-weight: normal;
background-color: var(--collapsible-toggle-background); background-color: var(--collapsible-toggle-background);
color: var(--collapsible-toggle-text); color: var(--collapsible-toggle-text);

3
src/theme/components/ion-action-sheet.scss
View File

@ -19,11 +19,10 @@ ion-action-sheet {
&.md { &.md {
.action-sheet-title { .action-sheet-title {
@include padding(4px, null, 4px, 16px); @include padding(4px, null, 4px, 16px);
font-size: 12px; font: var(--mdl-typography-body-font-sm);
min-height: auto; min-height: auto;
color: var(--medium); color: var(--medium);
line-height: 2em; line-height: 2em;
font-weight: normal;
} }
.action-sheet-group:first-child { .action-sheet-group:first-child {

2
src/theme/components/ion-card.scss
View File

@ -23,7 +23,7 @@ ion-card {
} }
ion-card-title { ion-card-title {
font-size: 20px; font: var(--mdl-typography-heading4-font);
} }
&.core-card-with-buttons .item ion-label { &.core-card-with-buttons .item ion-label {

4
src/theme/components/ion-chip.scss
View File

@ -49,7 +49,7 @@ ion-chip {
ion-chip, ion-chip,
ion-button.button.chip { ion-button.button.chip {
line-height: 1.1; line-height: 1.1;
font-size: 12px; font-size: var(--mdl-typography-body-fontSize-sm);
min-height: 24px; min-height: 24px;
margin: 4px; margin: 4px;
font-weight: normal; font-weight: normal;
@ -68,7 +68,7 @@ ion-button.button.chip {
ion-button.button.chip { ion-button.button.chip {
--border-radius: var(--mdl-shape-borderRadius-md); --border-radius: var(--mdl-shape-borderRadius-md);
min-height: 32px; min-height: 32px;
font-size: 14px; font-size: var(--mdl-typography-body-fontSize-md);
ion-icon[slot=start] { ion-icon[slot=start] {
@include margin(0, 8px, 0, 0); @include margin(0, 8px, 0, 0);

83
src/theme/components/ion-item.scss
View File

@ -54,6 +54,7 @@ ion-item.item {
} }
// Fake item. // Fake item.
// The usage of this fake item is discouraged, use ion-item instead. It will be removed soon.
div.fake-ion-item { div.fake-ion-item {
position: relative; position: relative;
align-items: center; align-items: center;
@ -63,91 +64,49 @@ div.fake-ion-item {
background: var(--ion-item-background); background: var(--ion-item-background);
text-align: initial; text-align: initial;
text-decoration: none; text-decoration: none;
overflow: hidden;
box-sizing: border-box; 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 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 { h1 {
@include margin(0, 0, 2px); @include margin(0px, 0px, 2px);
font-size: 24px; font: var(--mdl-typography-heading4-font);
font-weight: normal;
} }
h2 { h2 {
@include margin(2px, 0); @include margin(2px, 0px);
font-size: 16px; font: var(--mdl-typography-heading5-font);
font-weight: normal;
} }
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
@include margin(2px, 0); @include margin(2px, 0px);
font: var(--mdl-typography-heading6-font);
font-size: var(--text-size);
font-weight: normal;
line-height: normal;
} }
p { p {
@include margin(0, 0, 2px); @include margin(0px, 0px, 2px);
font-size: var(--text-size); font: var(--mdl-typography-body-font-md);
line-height: 20px; line-height: 20px;
text-overflow: inherit; }
core-format-text,
core-format-text > *:not(pre) {
white-space: normal;
overflow: inherit; 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. // Item Headings.
// Some styles taken from ion-label // Some styles taken from ion-label
ion-item.item.item-label > ion-label, ion-item.item > ion-label,
.fake-ion-item > ion-label, ion-item-divider.item > ion-label,
ion-item .in-item { ion-item .in-item {
font-size: var(--text-size); font-size: var(--text-size);
@ -183,7 +142,6 @@ ion-item .in-item {
// Correctly inherit ion-text-wrap onto labels. // Correctly inherit ion-text-wrap onto labels.
.item > ion-label, .item > ion-label,
.fake-ion-item,
.item > ion-checkbox::part(label), .item > ion-checkbox::part(label),
ion-checkbox::part(label), ion-checkbox::part(label),
.item ion-toggle::part(label), .item ion-toggle::part(label),
@ -198,7 +156,6 @@ ion-input > label {
.item.ion-text-wrap > ion-label, .item.ion-text-wrap > ion-label,
ion-item > .in-item, ion-item > .in-item,
.fake-ion-item.ion-text-wrap,
.item.ion-text-wrap > ion-checkbox::part(label), .item.ion-text-wrap > ion-checkbox::part(label),
ion-checkbox.ion-text-wrap::part(label), ion-checkbox.ion-text-wrap::part(label),
ion-toggle.ion-text-wrap::part(label), ion-toggle.ion-text-wrap::part(label),

2
src/theme/components/swiper.scss
View File

@ -27,8 +27,6 @@ swiper-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 18px;
text-align: center; text-align: center;
box-sizing: border-box; box-sizing: border-box;

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

@ -713,7 +713,7 @@ table.core-table {
thead th { thead th {
vertical-align: bottom; vertical-align: bottom;
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: var(--mdl-typography-body-fontSize-md);
background-color: var(--core-table-header-background); background-color: var(--core-table-header-background);
} }
@ -722,7 +722,7 @@ table.core-table {
font-weight: normal; font-weight: normal;
} }
td { td {
font-size: 16px; font-size: var(--mdl-typography-body-fontSize-lg);
} }
} }

2
src/theme/theme.design-system.scss
View File

@ -197,7 +197,7 @@ html {
--core-combobox-border-width: var(--core-input-border-width); --core-combobox-border-width: var(--core-input-border-width);
--core-combobox-box-shadow: none; --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-tabs-height: 48px;
--core-progressbar-height: 8px; --core-progressbar-height: 8px;