Merge pull request #3884 from crazyserver/MOBILE-3947

Mobile 3947

src/addons/block/myoverview/components/myoverview/myoverview.scss

@@ -28,7 +28,7 @@
             --a11y-min-target-size: 40px;
         }
 
-       ion-searchbar {
+        ion-searchbar {
             padding: 0;
             --height: 40px;
         }

src/addons/block/timeline/components/events/addon-block-timeline-events.html

@@ -19,7 +19,7 @@ <h4 [class.core-bold]="!course">{{ dayEvents.dayTimestamp * 1000 | coreFormatDat
                 <ion-row class="ion-justify-content-between ion-align-items-center ion-no-padding">
                     <ion-col class="addon-block-timeline-activity-main ion-no-padding">
                         <ion-row class="ion-justify-content-between ion-align-items-center ion-nowrap ion-no-padding">
-                            <ion-col class="addon-block-timeline-activity-time ion-no-padding">
+                            <ion-col class="addon-block-timeline-activity-time ion-no-padding ion-text-nowrap">
                                 <small>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</small>
                                 <core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance"
                                     [modname]="event.modulename" [purpose]="event.purpose" />

src/addons/messages/tests/behat/navigation.feature

@@ -14,7 +14,6 @@ Feature: Test messages navigation in the app
       | teacher | C1     | editingteacher |
       | student | C1     | student        |
 
-  @ionic7_failure
   Scenario: Avoid recursive links to profile
     Given I entered the app as "teacher"
     When I press "Messages" in the app

src/addons/mod/assign/tests/behat/basic_usage.feature

@@ -58,7 +58,6 @@ Feature: Test basic usage of assignment activity in app
     Then I should find "Online text submissions" in the app
     And I should find "Submission test edited" in the app
 
-  @ionic7_failure
   Scenario: Edit/Add submission (online text) & Add new attempt from previous submission & Submit for grading
     # Submit first attempt as a student
     Given I entered the assign activity "assignment1" on course "Course 1" as "student1" in the app

src/addons/mod/data/tests/behat/entries.feature

@@ -26,7 +26,6 @@ Feature: Users can manage entries in database activities
     | data1    | text | URL         | URL link         |
     | data1    | text | Description | Link description |
 
-  @ionic7_failure
   Scenario: Create entry
     Given I entered the data activity "Web links" on course "Course 1" as "student1" in the app
     Then I should find "No entries yet" in the app
@@ -38,7 +37,6 @@ Feature: Users can manage entries in database activities
     Then I should find "https://moodle.org/" in the app
     And I should find "Moodle community site" in the app
 
-  @ionic7_failure
   Scenario: Browse entry
     Given I entered the data activity "Web links" on course "Course 1" as "student1" in the app
 
@@ -72,7 +70,6 @@ Feature: Users can manage entries in database activities
     And I should find "Moodle community site" in the app
     And I should find "Moodle Cloud" in the app
 
-  @ionic7_failure
   Scenario: Students can not edit or delete other user's entries from list and single view in the app
     Given I entered the data activity "Web links" on course "Course 1" as "student1" in the app
     And I press "Add entries" in the app
@@ -88,7 +85,6 @@ Feature: Users can manage entries in database activities
     And "Edit" "link" should not exist
     And "Delete" "link" should not exist
 
-  @ionic7_failure
   Scenario: Delete entry (student) & Update entry (student)
     Given I entered the data activity "Web links" on course "Course 1" as "student1" in the app
     And I press "Add entries" in the app
@@ -148,7 +144,6 @@ Feature: Users can manage entries in database activities
     And I should not find "Moodle Cloud" in the app
     And I should find "No entries yet" in the app
 
-  @ionic7_failure
   Scenario: Delete entry (teacher) & Update entry (teacher)
     Given I entered the data activity "Web links" on course "Course 1" as "student1" in the app
     And I press "Add entries" in the app
@@ -212,7 +207,6 @@ Feature: Users can manage entries in database activities
     And I press "Delete" in the app
     And I should not find "Moodle Cloud" in the app
 
-  @ionic7_failure
   Scenario: Handle number 0 correctly when creating entries
     Given the following "activities" exist:
       | activity | name      | intro     | course | idnumber |

src/addons/mod/data/tests/behat/sync.feature

@@ -26,7 +26,6 @@ Feature: Users can store entries in database activities when offline and sync wh
     | data1    | text | URL         | URL link         |
     | data1    | text | Description | Link description |
 
-  @ionic7_failure
   Scenario: Create entry (offline)
     Given I entered the data activity "Web links" on course "Course 1" as "student1" in the app
     And I switch network connection to offline
@@ -46,7 +45,6 @@ Feature: Users can store entries in database activities when offline and sync wh
     And I should find "Moodle community site" in the app
     And I should not find "This Database has offline data to be synchronised" in the app
 
-  @ionic7_failure
   Scenario: Update entry (offline) & Delete entry (offline)
     Given I entered the data activity "Web links" on course "Course 1" as "student1" in the app
     And I should find "No entries yet" in the app
@@ -97,7 +95,6 @@ Feature: Users can store entries in database activities when offline and sync wh
     And I should not find "Moodle Cloud" in the app
     And I should not find "This Database has offline data to be synchronised" in the app
 
-  @ionic7_failure
   Scenario: Students can undo deleting entries to a database in the app while offline
     Given I entered the data activity "Web links" on course "Course 1" as "student1" in the app
     And I should find "No entries yet" in the app

src/addons/mod/forum/tests/behat/basic_usage.feature

@@ -50,7 +50,6 @@ Feature: Test basic usage of forum activity in app
     Then I should find "My happy subject" in the app
     And I should find "An awesome message" inside the split-view content in the app
 
-  @ionic7_failure
   Scenario: Reply a post
     Given I entered the forum activity "Test forum name" on course "Course 1" as "student1" in the app
     When I replace "/.*/" within ".addon-mod-forum-discussion-author p" with "[Publication date]"
@@ -179,7 +178,6 @@ Feature: Test basic usage of forum activity in app
     And I press "Save changes" in the app
     Then I should find "Auto-test message edited" in the app
 
-  @ionic7_failure
   Scenario: Delete a forum post (only online)
     Given I entered the forum activity "Test forum name" on course "Course 1" as "student1" in the app
     When I press "Add discussion topic" in the app

src/addons/mod/quiz/tests/behat/basic_usage.feature

@@ -191,7 +191,6 @@ Feature: Attempt a quiz in app
     Then I should find "The correct answer is: Berlin" in the app
     And I should find "Mark 1.00 out of 1.00" in the app
 
-  @ionic7_failure
   Scenario: Submit a quiz & Review a quiz attempt
     Given I entered the quiz activity "Quiz 1" on course "Course 1" as "student1" in the app
     When I press "Attempt quiz now" in the app

src/addons/notifications/tests/behat/notifications.feature

@@ -40,8 +40,7 @@ Feature: Notifications
       | Test 30  | student2 | student1 | 1649766629  | null       |
 
   Scenario: Mobile navigation
-    Given I enter the app
-    And I log in as "student1"
+    Given I entered the app as "student1"
     And I press "Notifications" in the app
     Then I should find "Test 30" in the app
     But I should not find "Test 10" in the app
@@ -81,9 +80,8 @@ Feature: Notifications
 
   @ionic7_failure
   Scenario: Tablet navigation
-    Given I enter the app
+    Given I entered the app as "student1"
     And I change viewport size to "1200x640" in the app
-    And I log in as "student1"
     And I press "Notifications" in the app
     Then I should find "Test 30" in the app
     But I should not find "Test 10" in the app

src/addons/qtype/match/component/addon-qtype-match.html

@@ -10,20 +10,20 @@
         <ion-select id="{{row.id}}" [name]="row.name" [(ngModel)]="row.selected" interface="action-sheet" [disabled]="row.disabled"
             [cancelText]="'core.cancel' | translate"
             [ngClass]="{'addon-qtype-match-correct': row.isCorrect === 1,'addon-qtype-match-incorrect': row.isCorrect === 0}">
-            <div slot="label">
+            <div slot="label" class="flew-row">
                 <core-format-text [component]="component" [componentId]="componentId" [text]="row.text" [contextLevel]="contextLevel"
                     [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                 <label class="accesshide" for="{{row.id}}" *ngIf="row.accessibilityLabel">
                     {{ row.accessibilityLabel }}
                 </label>
+                <ion-icon *ngIf="row.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success" slot="end"
+                    [attr.aria-label]="'core.question.correct' | translate" />
+                <ion-icon *ngIf="row.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger" slot="end"
+                    [attr.aria-label]="'core.question.incorrect' | translate" />
             </div>
             <ion-select-option *ngFor="let option of row.options" [value]="option.value">
                 {{option.label}}
             </ion-select-option>
         </ion-select>
-        <ion-icon *ngIf="row.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success" slot="end"
-            [attr.aria-label]="'core.question.correct' | translate" />
-        <ion-icon *ngIf="row.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger" slot="end"
-            [attr.aria-label]="'core.question.incorrect' | translate" />
     </ion-item>
 </section>

src/addons/qtype/match/component/match.scss

@@ -10,4 +10,16 @@
     .addon-qtype-match-incorrect {
         color: var(--danger);
     }
+
+    ion-select::part(label) {
+        flex-grow: 1;
+    }
+
+    div.flew-row {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
 }

src/addons/qtype/multichoice/component/addon-qtype-multichoice.html

@@ -18,21 +18,22 @@
         <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
             <ion-checkbox [attr.name]="option.name" [(ngModel)]="option.checked" [disabled]="option.disabled"
                 [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
-                <div [class]="option.class">
-                    <core-format-text [component]="component" [componentId]="componentId" [text]="option.text" [contextLevel]="contextLevel"
-                        [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+                <div>
+                    <div [class]="option.class">
+                        <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
+                            [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+                    </div>
                     <div *ngIf="option.feedback" class="specificfeedback">
                         <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
                             [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                     </div>
                 </div>
+                <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
+                    [attr.aria-label]="'core.question.correct' | translate" />
+                <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
+                    [attr.aria-label]="'core.question.incorrect' | translate" />
             </ion-checkbox>
 
-            <ion-icon slot="end" *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
-                [attr.aria-label]="'core.question.correct' | translate" />
-            <ion-icon slot="end" *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
-                [attr.aria-label]="'core.question.incorrect' | translate" />
-
             <!-- ion-checkbox doesn't use an input. Create a hidden input to hold the value. -->
             <input type="hidden" [ngModel]="option.checked" [attr.name]="option.name">
         </ion-item>
@@ -43,20 +44,21 @@
         <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
             <ion-radio [value]="option.value" [disabled]="option.disabled"
                 [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
-                <div [class]="option.class">
-                    <core-format-text [component]="component" [componentId]="componentId" [text]="option.text" [contextLevel]="contextLevel"
-                        [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+                <div>
+                    <div [class]="option.class">
+                        <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
+                            [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+                    </div>
                     <div *ngIf="option.feedback" class="specificfeedback">
                         <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
                             [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
                     </div>
                 </div>
+                <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
+                    [attr.aria-label]="'core.question.correct' | translate" />
+                <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
+                    [attr.aria-label]="'core.question.incorrect' | translate" />
             </ion-radio>
-
-            <ion-icon slot="end" *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
-                [attr.aria-label]="'core.question.correct' | translate" />
-            <ion-icon slot="end" *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
-                [attr.aria-label]="'core.question.incorrect' | translate" />
         </ion-item>
         <ion-button *ngIf="!question.disabled" class="ion-text-wrap ion-margin-top" expand="block" fill="outline"
             [disabled]="!question.singleChoiceModel" (click)="clear()" type="button">

src/addons/qtype/multichoice/component/multichoice.scss

@@ -6,15 +6,24 @@
         padding: 0 .7em;
     }
 
-    .answer {
-        line-height: 2em;
-    }
-
     .d-flex {
         display: flex !important;
     }
 
-    .answer .answernumber {
-        min-width: 1.5em;
+    .answer {
+        line-height: 2em;
+
+        .answernumber {
+            min-width: 1.5em;
+        }
+
+        ion-checkbox::part(label),
+        ion-radio::part(label) {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+        }
     }
 }

src/core/components/send-message-form/send-message-form.scss

@@ -1,12 +1,15 @@
+@use "theme/globals" as *;
+
 :host {
+    display: contents;
+
     --textarea-background: var(--core-input-background);
     --textarea-color: var(--core-input-text);
     --textarea-border-width: var(--core-input-border-width);
     --textarea-border-color: var(--core-input-stroke);
     --textarea-radius: var(--radius-xl);
 
     form {
-        position: relative;
         display: flex;
         align-items: center;
         width: 100%;
@@ -27,10 +30,15 @@
         min-height: var(--a11y-min-target-size);
         line-height: 20px;
         padding: 10px;
-        margin: 4px 8px;
+        @include margin(4px, 0px, 4px, 8px);
         resize: vertical;
     }
 
+    ion-button {
+        --padding-start: 16px;
+        --padding-end: 16px;
+    }
+
     .core-send-message-input::placeholder {
         color: var(--ion-placeholder-color);
     }

src/core/features/comments/tests/behat/basic_usage.feature

@@ -26,7 +26,6 @@ Feature: Test basic usage of comments in app
       | database | type | name              | description              |
       | data1    | text | Test field name   | Test field description   |
 
-  @ionic7_failure
   Scenario: Add comments & Delete comments (database)
     # Create database entry and comment as a teacher
     Given I entered the data activity "Data" on course "Course 1" as "teacher1" in the app
@@ -65,7 +64,6 @@ Feature: Test basic usage of comments in app
     When I press the back button in the app
     Then I should find "Comments (1)" in the app
 
-  @ionic7_failure
   Scenario: Add comments offline & Delete comments offline & Sync comments (database)
     Given I entered the data activity "Data" on course "Course 1" as "teacher1" in the app
     And I press "Add entries" in the app
@@ -152,7 +150,6 @@ Feature: Test basic usage of comments in app
     When I press the back button in the app
     And I should find "Comments (1)" in the app
 
-  @ionic7_failure
   Scenario: Add comments offline & Delete comments offline & Sync comments (glossary)
     Given I entered the glossary activity "Test glossary" on course "Course 1" as "teacher1" in the app
     And I press "Add a new entry" in the app
@@ -231,7 +228,6 @@ Feature: Test basic usage of comments in app
     When I press the back button in the app
     Then I should find "Comments (0)" in the app
 
-  @ionic7_failure
   Scenario: Add comments offline & Delete comments offline & Sync comments (blogs)
     # Create blog as a teacher
     Given the following "core_blog > entries" exist: