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

src/addons/competency/pages/competency/competency.html

@@ -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>

src/addons/mod/assign/components/submission/addon-mod-assign-submission.html

@@ -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>

src/addons/mod/choice/components/index/addon-mod-choice-index.html

@@ -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>

src/addons/mod/feedback/pages/attempt/attempt.html

@@ -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>

src/addons/mod/h5pactivity/pages/attempt-results/attempt-results.html

@@ -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>

src/addons/mod/h5pactivity/pages/user-attempts/user-attempts.html

@@ -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>

src/addons/mod/lesson/pages/user-retake/user-retake.html

@@ -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>

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-top: 6px;
-    margin-bottom: 12px;
+    margin-bottom: 6px;
+    @include margin(6px, 8px, 6px, 0px);
+    img {
+        min-width: var(--core-avatar-size);
+        min-height: var(--core-avatar-size);
+    }
 }

src/core/features/user/components/tag-area/core-user-tag-area.html

@@ -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>

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

src/theme/theme.light.scss

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