From 3feee9e831afdc8c84c4e3e1e94380bb4bde9b3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 26 Oct 2021 16:23:09 +0200
Subject: [PATCH] MOBILE-3899 quiz: Fix multichoice display flex

---
 .../component/addon-qtype-multichoice.html       | 16 ++++++++++------
 .../qtype/multichoice/component/multichoice.scss |  6 +++++-
 .../question/classes/base-question-component.ts  |  4 ++++
 src/theme/components/format-text.scss            | 12 ++++--------
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
index 76137e258..65ea49dc7 100644
--- a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
+++ b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
@@ -2,9 +2,11 @@
     <!-- Question text first. -->
     <ion-item class="ion-text-wrap">
         <ion-label>
-            <p><core-format-text [component]="component" [componentId]="componentId" [text]="multiQuestion.text"
-                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
-            </core-format-text></p>
+            <p>
+                <core-format-text [component]="component" [componentId]="componentId" [text]="multiQuestion.text"
+                    [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
+                </core-format-text>
+            </p>
             <p *ngIf="multiQuestion.prompt">{{ multiQuestion.prompt }}</p>
         </ion-label>
     </ion-item>
@@ -12,7 +14,8 @@
     <!-- Checkbox for multiple choice. -->
     <ng-container *ngIf="multiQuestion.multi">
         <ion-item class="ion-text-wrap answer" *ngFor="let option of multiQuestion.options">
-            <ion-label [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")' class="flex">
+            <ion-label [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'
+                [class]="option.class">
                 <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
                     [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
                 </core-format-text>
@@ -38,9 +41,10 @@
     </ng-container>
 
     <!-- Radio buttons for single choice. -->
-    <ion-radio-group *ngIf="!multiQuestion.multi" [(ngModel)]="multiQuestion.singleChoiceModel" [name]="multiQuestion.optionsName">
+    <ion-radio-group *ngIf="!multiQuestion.multi" [(ngModel)]="multiQuestion.singleChoiceModel"
+        [name]="multiQuestion.optionsName">
         <ion-item class="ion-text-wrap answer" *ngFor="let option of multiQuestion.options">
-            <ion-label class="flex">
+            <ion-label [class]="option.class">
                 <core-format-text [component]="component" [componentId]="componentId" [text]="option.text"
                     [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId">
                 </core-format-text>
diff --git a/src/addons/qtype/multichoice/component/multichoice.scss b/src/addons/qtype/multichoice/component/multichoice.scss
index 6923b59e0..3cdbe2c85 100644
--- a/src/addons/qtype/multichoice/component/multichoice.scss
+++ b/src/addons/qtype/multichoice/component/multichoice.scss
@@ -6,7 +6,11 @@
         padding: 0 .7em;
     }
 
-    .flex {
+    .answer {
+        line-height: 2em;
+    }
+
+    .d-flex {
         display: flex !important;
     }
 
diff --git a/src/core/features/question/classes/base-question-component.ts b/src/core/features/question/classes/base-question-component.ts
index 2c8013b83..630142130 100644
--- a/src/core/features/question/classes/base-question-component.ts
+++ b/src/core/features/question/classes/base-question-component.ts
@@ -97,6 +97,7 @@ export class CoreQuestionBaseComponent {
             const radioEl = radios[i];
             const option: AddonModQuizQuestionRadioOption = {
                 id: radioEl.id,
+                class: '',
                 name: radioEl.name,
                 value: radioEl.value,
                 checked: radioEl.checked,
@@ -621,6 +622,7 @@ export class CoreQuestionBaseComponent {
             const element = options[i];
             const option: AddonModQuizQuestionRadioOption = {
                 id: element.id,
+                class: '',
                 name: element.name,
                 value: element.value,
                 checked: element.checked,
@@ -643,6 +645,7 @@ export class CoreQuestionBaseComponent {
                 // Not found, use the old format.
                 label = questionEl.querySelector('label[for="' + option.id + '"]');
             }
+            option.class = label?.className || option.class;
 
             // Check that we were able to successfully extract options required data.
             if (!label || option.name === undefined || option.value === undefined) {
@@ -736,6 +739,7 @@ export type AddonModQuizQuestionSelectOption = {
 export type AddonModQuizQuestionRadioOption = {
     id: string;
     name: string;
+    class: string;
     value: string;
     disabled: boolean;
     checked: boolean;
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index ddb921751..204c0612b 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -201,14 +201,6 @@ core-format-text {
     }
 }
 
-// Erase if core-format-text display is contents again.
-.flex > core-format-text {
-    display: flex;
-}
-.core-course-title > p.item-heading > core-format-text {
-    display: inline;
-}
-
 @keyframes loading {
     0% {
         left: -45%;
@@ -327,6 +319,10 @@ core-rich-text-editor .core-rte-editor {
         }
     }
 
+    sub, sup {
+        overflow: visible !important;
+    }
+
     .badge {
         position: initial !important;
     }