Merge pull request #2906 from crazyserver/MOBILE-3711

Mobile 3711

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

@@ -45,13 +45,13 @@
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="gradeMethodReadable">
                 <ion-label>
-                    <h3>{{ 'addon.mod_quiz.grademethod' | translate }}</h3>
+                    <p class="item-heading">{{ 'addon.mod_quiz.grademethod' | translate }}</p>
                     <p>{{ gradeMethodReadable }}</p>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="bestGrade && bestGrade.gradetopass && quiz && quiz.gradeFormatted">
                 <ion-label>
-                    <h3>{{ 'core.grades.gradepass' | translate }}</h3>
+                    <p class="item-heading">{{ 'core.grades.gradepass' | translate }}</p>
                     <p>{{ 'addon.mod_quiz.outof' | translate: { $a: {
                         grade: bestGrade.gradetopass,
                         maxgrade: quiz.gradeFormatted
@@ -60,7 +60,7 @@
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="syncTime">
                 <ion-label>
-                    <h3>{{ 'core.lastsync' | translate }}</h3>
+                    <p class="item-heading">{{ 'core.lastsync' | translate }}</p>
                     <p>{{ syncTime }}</p>
                 </ion-label>
             </ion-item>
@@ -141,7 +141,7 @@
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="gradebookFeedback">
                 <ion-label>
-                    <h3 class="item-heading">{{ 'addon.mod_quiz.comment' | translate }}</h3>
+                    <p class="item-heading">{{ 'addon.mod_quiz.comment' | translate }}</p>
                     <p><core-format-text [component]="component" [componentId]="componentId" [text]="gradebookFeedback"
                         contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                     </core-format-text></p>
@@ -149,7 +149,7 @@
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="quiz.showFeedbackColumn && overallFeedback">
                 <ion-label>
-                    <h3 class="item-heading">{{ 'addon.mod_quiz.overallfeedback' | translate }}</h3>
+                    <p class="item-heading">{{ 'addon.mod_quiz.overallfeedback' | translate }}</p>
                     <p><core-format-text [component]="component" [componentId]="componentId" [text]="overallFeedback"
                         contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId">
                     </core-format-text></p>
@@ -162,28 +162,35 @@
     <ion-card *ngIf="quiz">
         <ion-list>
             <!-- Error messages. -->
-            <ion-item class="ion-text-wrap core-danger-item" *ngFor="let message of preventMessages">
+            <ion-item class="ion-text-wrap core-danger-item addon-mod_quiz-prevent-messages" *ngFor="let message of preventMessages">
                 <ion-label><p>{{ message }}</p></ion-label>
             </ion-item>
-            <ion-item class="ion-text-wrap core-danger-item" *ngIf="quiz.hasquestions === 0">
+            <ion-item class="ion-text-wrap core-danger-item addon-mod_quiz-no-questions" *ngIf="quiz.hasquestions === 0">
                 <ion-label><p>{{ 'addon.mod_quiz.noquestions' | translate }}</p></ion-label>
             </ion-item>
-            <ion-item class="ion-text-wrap core-danger-item" *ngIf="!hasSupportedQuestions && unsupportedQuestions.length">
+            <ion-item class="ion-text-wrap core-danger-item addon-mod_quiz-unsupported-questions"
+                *ngIf="!hasSupportedQuestions && unsupportedQuestions.length">
                 <ion-label>
-                    <p>{{ 'addon.mod_quiz.errorquestionsnotsupported' | translate }}</p>
-                    <p *ngFor="let type of unsupportedQuestions">{{ type }}</p>
+                    <p class="item-heading">{{ 'addon.mod_quiz.errorquestionsnotsupported' | translate }}</p>
+                    <p *ngFor="let type of unsupportedQuestions"
+                        class="addon-mod_quiz-unsupported-question addon-mod_quiz-unsupported-question-{{type}}">
+                        {{ type }}
+                    </p>
                 </ion-label>
             </ion-item>
-            <ion-item class="ion-text-wrap core-danger-item" *ngIf="unsupportedRules.length">
+            <ion-item class="ion-text-wrap core-danger-item addon-mod_quiz-unsupported-rules" *ngIf="unsupportedRules.length">
                 <ion-label>
-                    <p>{{ 'addon.mod_quiz.errorrulesnotsupported' | translate }}</p>
-                    <p *ngFor="let name of unsupportedRules">{{ name }}</p>
+                    <p class="item-heading">{{ 'addon.mod_quiz.errorrulesnotsupported' | translate }}</p>
+                    <p *ngFor="let name of unsupportedRules"
+                        class="addon-mod_quiz-unsupported-rule addon-mod_quiz-unsupported-rule-{{name}}">
+                        {{ name }}
+                    </p>
                 </ion-label>
             </ion-item>
-            <ion-item class="ion-text-wrap core-danger-item" *ngIf="behaviourSupported === false">
+            <ion-item class="ion-text-wrap core-danger-item addon-mod_quiz-unsupported-behaviours" *ngIf="behaviourSupported === false">
                 <ion-label>
-                    <p>{{ 'addon.mod_quiz.errorbehaviournotsupported' | translate }}</p>
-                    <p>{{ quiz.preferredbehaviour }}</p>
+                    <p class="item-heading">{{ 'addon.mod_quiz.errorbehaviournotsupported' | translate }}</p>
+                    <p class="addon-mod_quiz-unsupported-behaviour">{{ quiz.preferredbehaviour }}</p>
                 </ion-label>
             </ion-item>
 
@@ -198,7 +205,7 @@
             <!-- Other warnings. -->
             <ion-item class="core-warning-item ion-text-wrap" *ngIf="hasSupportedQuestions && unsupportedQuestions.length">
                 <ion-label>
-                    <p>{{ 'addon.mod_quiz.canattemptbutnotsubmit' | translate }}</p>
+                    <p class="item-heading">{{ 'addon.mod_quiz.canattemptbutnotsubmit' | translate }}</p>
                     <p>{{ 'addon.mod_quiz.warningquestionsnotsupported' | translate }}</p>
                     <p *ngFor="let type of unsupportedQuestions">{{ type }}</p>
                 </ion-label>

src/core/components/combobox/combobox.scss

@@ -99,6 +99,7 @@ ion-button {
         font-weight: 400;
         font-size: 16px;
         line-height: 20px;
+        border-radius: 0;
     }
 
     .select-text {

src/core/features/sitehome/pages/index/index.html

@@ -21,8 +21,8 @@
                     <!-- Site home main contents. -->
                     <ng-container *ngIf="section && section.hasContent">
                         <ion-item class="ion-text-wrap" *ngIf="section.summary">
-                            <core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="siteHomeId">
-                            </core-format-text>
+                            <ion-label><core-format-text [text]="section.summary" contextLevel="course" [contextInstanceId]="siteHomeId">
+                            </core-format-text></ion-label>
                         </ion-item>
 
                         <core-course-module *ngFor="let module of section.modules" [module]="module" [courseId]="siteHomeId"

src/theme/components/format-text.scss

@@ -16,11 +16,12 @@ body.dark core-format-text {
 }
 
 core-format-text {
-    display: block;
+    display: contents;
 
     .core-format-text-loader {
         opacity: 0;
         @include core-transition(opacity, 200ms);
+        display: contents;
     }
 
     &.core-format-text-loading {
@@ -31,6 +32,7 @@ core-format-text {
         background-color: rgba(0,0,0,.1);
         overflow: hidden;
         border-radius: 5px;
+        display: block;
 
         .core-format-text-loader {
             position: absolute;
@@ -66,6 +68,7 @@ core-format-text {
 
     &[maxHeight],
     &[ng-reflect-max-height] {
+        display: block;
         position: relative;
         width: 100%;
         overflow: hidden;

src/theme/theme.base.scss

@@ -466,7 +466,7 @@ ion-toolbar {
 
         border-bottom: 3px solid var(--color-base);
 
-        ion-item::part(native) {
+        ion-item {
             --inner-border-width: 0;
         }
         ion-label {
@@ -480,9 +480,9 @@ ion-toolbar {
     .item.core-#{$color-name}-item {
         --color-base: var(--ion-color-#{$color-name});
 
-        --inner-border-width: 0 0 3px 0;
-        --border-width: 0;
-        border-bottom: 3px solid var(--color-base) !important;
+        --border-width: 0 0 3px 0;
+        --border-color: var(--color-base);
+        --inner-border-width: 0;
         ion-icon {
             color: var(--color-base);
         }