CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3814 avatar: Improve a11y and reduce size of avatars

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-03-10 11:25:10 +01:00
parent 031a261bc1
commit d6269cf16d
11 changed files with 20 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addons/competency/pages/competency/competency.html
View File

@ -122,7 +122,7 @@
<ion-card *ngFor="let evidence of competency.evidence">
<ion-item class="ion-text-wrap" *ngIf="evidence.actionuser" core-user-link [userId]="evidence.actionuser.id"
[courseId]="courseId">
<core-user-avatar [user]="evidence.actionuser" slot="start"></core-user-avatar>
<core-user-avatar [user]="evidence.actionuser" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<p class="item-heading">{{ evidence.actionuser.fullname }}</p>
<p>{{ evidence.timemodified * 1000 | coreFormatDate }}</p>

6
src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
View File

@ -3,7 +3,7 @@
<!-- User and status of the submission. -->
<ion-item class="ion-text-wrap" *ngIf="!blindMarking && user" core-user-link [userId]="submitId" [courseId]="courseId"
[attr.aria-label]="user!.fullname">
<core-user-avatar [user]="user" slot="start"></core-user-avatar>
<core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ user!.fullname }}</h2>
<ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
@ -176,7 +176,7 @@
<ng-container *ngFor="let user of membersToSubmit">
<ion-item class="ion-text-wrap" core-user-link [userId]="user.id" [courseId]="courseId"
[attr.aria-label]="user.fullname">
<core-user-avatar [user]="user" slot="start"></core-user-avatar>
<core-user-avatar [user]="user" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ user.fullname }}</h2>
</ion-label>
@ -334,7 +334,7 @@
<!-- Data about the grader (teacher who graded). -->
<ion-item class="ion-text-wrap" *ngIf="grader" core-user-link [userId]="grader!.id" [courseId]="courseId"
[attr.aria-label]="grader!.fullname" detail="true">
<core-user-avatar [user]="grader" slot="start"></core-user-avatar>
<core-user-avatar [user]="grader" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
<h2>{{ grader!.fullname }}</h2>

2
src/addons/mod/choice/components/index/addon-mod-choice-index.html
View File

@ -114,7 +114,7 @@
<ng-container *ngIf="result.expanded">
<ion-item *ngFor="let user of result.userresponses" core-user-link [courseId]="courseId" [userId]="user.userid"
[attr.aria-label]="user.fullname" class="ion-text-wrap">
<core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
<core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
<ion-label>
<p>{{user.fullname}}</p>
</ion-label>

2
src/addons/mod/feedback/pages/attempt/attempt.html
View File

@ -14,7 +14,7 @@
<ion-list class="ion-no-margin" *ngIf="attempt || anonAttempt">
<ion-item *ngIf="attempt" class="ion-text-wrap" core-user-link [userId]="attempt.userid"
[attr.aria-label]="'core.user.viewprofile' | translate" [courseId]="attempt.courseid">
<core-user-avatar [user]="attempt" slot="start"></core-user-avatar>
<core-user-avatar [user]="attempt" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{attempt.fullname}}</h2>
<p *ngIf="attempt.timemodified">{{attempt.timemodified * 1000 | coreFormatDate }}</p>

2
src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html
View File

@ -21,7 +21,7 @@
<!-- Attempt number and user that did the attempt. -->
<ion-item class="ion-text-wrap" *ngIf="user" core-user-link [userId]="user.id" [courseId]="courseId"
[attr.aria-label]="user.fullname">
<core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
<core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ 'addon.mod_h5pactivity.attempt' | translate }} #{{attempt.attempt}}: {{user.fullname}}</h2>
</ion-label>

2
src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html
View File

@ -20,7 +20,7 @@
<!-- User viewed. -->
<ion-item class="ion-text-wrap" *ngIf="user && !isCurrentUser" core-user-link [userId]="user.id" [courseId]="courseId"
[attr.aria-label]="user.fullname" button detail="true">
<core-user-avatar [user]="user" slot="start" [courseId]="courseId"></core-user-avatar>
<core-user-avatar [user]="user" slot="start" [courseId]="courseId" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ user.fullname }}</h2>
</ion-label>

2
src/addons/mod/lesson/pages/user-retake/user-retake.html
View File

@ -17,7 +17,7 @@
<div *ngIf="student">
<!-- Student data. -->
<ion-item class="ion-text-wrap" core-user-link [userId]="student.id" [courseId]="courseId" [attr.aria-label]="student.fullname">
<core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId">
<core-user-avatar [user]="student" slot="start" [userId]="student.id" [courseId]="courseId" [linkProfile]="false">
</core-user-avatar>
<ion-label>
<h2>{{student.fullname}}</h2>

11
src/core/components/user-avatar/user-avatar.scss
View File

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

2
src/core/features/user/components/tag-area/core-user-tag-area.html
View File

@ -1,6 +1,6 @@
<ion-card *ngFor="let item of items">
<ion-item class="ion-text-wrap" core-user-link [userId]="item.user.id">
<core-user-avatar [user]="item.user" slot="start"></core-user-avatar>
<core-user-avatar [user]="item.user" slot="start" [linkProfile]="false"></core-user-avatar>
<ion-label>
<h2>{{ item.heading }}</h2>
</ion-label>

2
src/theme/components/format-text.scss
View File

@ -77,8 +77,6 @@ core-format-text {
}
&.collapsible-collapsed .core-format-text-content {
overflow: hidden;
height: var(--collapsible-height);
@include core-transition(height, 300ms);
}
}

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

@ -325,7 +325,7 @@
--core-star-color: var(--primary);
--core-large-avatar-size: 90px;
--core-avatar-size: var(--a11y-min-target-size);
--core-avatar-size: 40px;
--core-courseimage-on-course-size: 72px;
--core-courseimage-radius: var(--medium-radius);