MOBILE-3670 messages: Arrange space to make discussion index wider

src/addons/messages/messages-common.scss

@@ -1,6 +1,11 @@
 :host {
     .addon-messages-conversation-item,
     .addon-message-discussion {
+        ion-label {
+            margin-right: 0;
+            margin-left: 0;
+        }
+
         h2 {
             core-format-text {
                 font-weight: bold;
@@ -12,10 +17,18 @@
         }
 
         ion-note {
-            ion-badge {
+            display: flex;
-                margin-left: 6px;
+            flex-direction: column;
-                margin-right: 6px;
+            align-self: flex-start;
-                vertical-align: middle;
+            margin-left: 2px;
+
+            ion-badge, ion-icon {
+                margin-top: 3px;
+                align-self: flex-end;
+            }
+            .addon-message-last-message-date {
+                white-space: nowrap;
+                font-size: 11px;
             }
         }
 

src/addons/messages/pages/discussion/discussion.scss

@@ -23,6 +23,8 @@
         color: var(--ion-color-primary);
         background-color: transparent;
         margin-top: 6px;
+        margin-left: auto;
+        margin-right: auto;
         ion-icon {
             color: var(--ion-color-primary);
             background-color: transparent;

src/addons/messages/pages/discussions-35/discussions.html

@@ -52,16 +52,22 @@
                 <ng-container *ngIf="!search.showResults">
                     <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let discussion of discussions" button
                         [attr.aria-label]="discussion.fullname" (click)="gotoDiscussion(discussion.message!.user)"
-                        [attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'">
+                        [attr.aria-current]="discussion.message!.user == discussionUserId ? 'page' : 'false'" detail="false">
                         <core-user-avatar [user]="discussion" slot="start" checkOnline="false"></core-user-avatar>
                         <ion-label>
+                            <div class="flex-row ion-justify-content-between">
                                 <h2>{{ discussion.fullname }}</h2>
                                 <ion-note *ngIf="discussion.message!.timecreated > 0 || discussion.unread">
-                                <span *ngIf="discussion.unread" class="core-primary-circle"></span>
+                                    <span *ngIf="discussion.message!.timecreated > 0" class="addon-message-last-message-date">
-                                <span *ngIf="discussion.message!.timecreated > 0">
                                         {{discussion.message!.timecreated / 1000 | coreDateDayOrTime}}
                                     </span>
+                                    <ion-icon *ngIf="discussion.unread" name="fas-circle" color="primary" aria-hidden="true">
+                                    </ion-icon>
+                                    <span *ngIf="discussion.unread" class="sr-only">
+                                        {{ 'addon.messages.unreadmessages' | translate }}
+                                    </span>
                                 </ion-note>
+                            </div>
                             <p>
                                 <core-format-text clean="true" singleLine="true" [text]="discussion.message!.message"
                                     contextLevel="system" [contextInstanceId]="0">

src/addons/messages/pages/group-conversations/group-conversations.html

@@ -146,7 +146,7 @@
 
 <!-- Template to render a list of conversations. -->
 <ng-template #conversationsTemplate let-conversations="conversations">
-    <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button
+    <ion-item class="ion-text-wrap addon-message-discussion" *ngFor="let conversation of conversations" button detail="false"
         [attr.aria-label]="conversation.name" (click)="gotoConversation(conversation.id, conversation.userid)"
         [attr.aria-current]="((conversation.id && conversation.id == selectedConversationId) ||
             (conversation.userid && conversation.userid == selectedUserId)) ? 'page': 'false'"
@@ -162,6 +162,7 @@
             [linkProfile]="false" [checkOnline]="conversation.showonlinestatus" slot="start"></core-user-avatar>
 
         <ion-label>
+            <div class="flex-row ion-justify-content-between">
                 <h2>
                     <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0"></core-format-text>
                     <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
@@ -169,6 +170,16 @@
                     <ion-icon *ngIf="conversation.ismuted" name="fas-volume-mute"
                         [title]="'addon.messages.mutedconversation' | translate"></ion-icon>
                 </h2>
+                <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount">
+                    <span *ngIf="conversation.lastmessagedate > 0" class="addon-message-last-message-date">
+                        {{conversation.lastmessagedate | coreDateDayOrTime}}
+                    </span>
+                    <ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
+                    <span *ngIf="conversation.unreadcount > 0" class="sr-only">
+                        {{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
+                    </span>
+                </ion-note>
+            </div>
             <p *ngIf="conversation.subname"><core-format-text [text]="conversation.subname" contextLevel="system"
                 [contextInstanceId]="0"></core-format-text></p>
             <p class="addon-message-last-message">
@@ -181,12 +192,5 @@
                     class="addon-message-last-message-text" contextLevel="system" [contextInstanceId]="0"></core-format-text>
             </p>
         </ion-label>
-        <ion-note *ngIf="conversation.lastmessagedate > 0 || conversation.unreadcount" slot="end">
-            <ion-badge *ngIf="conversation.unreadcount > 0" aria-label="true">{{ conversation.unreadcount }}</ion-badge>
-            <span *ngIf="conversation.unreadcount > 0" class="sr-only">
-                {{ 'addon.messages.unreadmessages' | translate:{$a: conversation.unreadcount} }}
-            </span>
-            <span *ngIf="conversation.lastmessagedate > 0">{{conversation.lastmessagedate | coreDateDayOrTime}}</span>
-        </ion-note>
     </ion-item>
 </ng-template>

src/addons/mod/quiz/pages/review/review.html

@@ -24,7 +24,9 @@
             <ion-card-header class="ion-text-wrap">
                 <ion-card-title>
                     <ng-container *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</ng-container>
-                    <ng-container *ngIf="!attempt.preview">{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}</ng-container>
+                    <ng-container *ngIf="!attempt.preview">
+                        {{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}
+                    </ng-container>
                 </ion-card-title>
             </ion-card-header>
             <ion-list lines="none">

src/core/features/search/components/search-box/search-box.scss

@@ -1,5 +1,5 @@
 :host {
-    height: 80px;
+    height: 73px;
     display: block;
     position: relative;
 
@@ -8,9 +8,11 @@
         left: 0;
         right: 0;
         z-index: 4;
+        margin-top: 10px;
+        margin-bottom: 10px;
     }
 
-    ion-button.button:last-child {
+    ion-button.button {
         margin-left: unset;
         margin-inline-start: 10px;
     }
@@ -28,4 +30,9 @@
     ion-label {
         margin: 0;
     }
+
+    ion-input {
+        --padding-start: 0;
+        --padding-end: 0;
+    }
 }

src/theme/theme.base.scss

@@ -554,6 +554,13 @@ textarea, button, select, input, a {
     }
 }
 
+ion-loading:focus-visible,
+ion-alert:focus-visible,
+ion-popover:focus-visible,
+ion-modal:focus-visible {
+    box-shadow: none;
+}
+
 ion-input .native-input{
     &:focus, &:focus-visible {
         box-shadow: none;