Merge pull request #2828 from crazyserver/MOBILE-3320

Mobile 3320

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

@@ -1,10 +1,8 @@
 <ion-list class="addon-qtype-multianswer-container" *ngIf="question && (question.text || question.text === '')">
-    <ion-item class="ion-text-wrap">
-        <ion-label>
-            <core-format-text [component]="component" [componentId]="componentId" [text]="question.text"
-                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
-                (afterRender)="questionRendered()">
-            </core-format-text>
-        </ion-label>
-    </ion-item>
+    <div class="fake-ion-item ion-text-wrap">
+        <core-format-text [component]="component" [componentId]="componentId" [text]="question.text"
+            [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
+            (afterRender)="questionRendered()">
+        </core-format-text>
+    </div>
 </ion-list>

src/core/directives/fab.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Directive, OnDestroy } from '@angular/core';
+import { Directive, ElementRef, OnDestroy } from '@angular/core';
 import { IonContent } from '@ionic/angular';
 
 /**
@@ -31,8 +31,10 @@ export class CoreFabDirective implements OnDestroy {
 
     protected scrollElement?: HTMLElement;
     protected done = false;
+    protected element: HTMLElement;
 
-    constructor(protected content: IonContent) {
+    constructor(el: ElementRef, protected content: IonContent) {
+        this.element = el.nativeElement;
         this.asyncInit();
     }
 
@@ -43,6 +45,13 @@ export class CoreFabDirective implements OnDestroy {
         if (this.content) {
             this.scrollElement = await this.content.getScrollElement();
             if (!this.done) {
+                // Move element to the nearest ion-content if it's not the parent
+                if (this.element.parentElement?.nodeName != 'ION-CONTENT') {
+                    const ionContent = this.element.closest('ion-content');
+                    ionContent?.appendChild(this.element);
+                }
+
+                // Add space at the bottom to let the user see the whole content.
                 const bottom = parseInt(this.scrollElement.style.paddingBottom, 10) || 0;
                 this.scrollElement.style.paddingBottom = (bottom + CoreFabDirective.PADDINGBOTTOM) + 'px';
                 this.done = true;

src/theme/components/format-text.scss

@@ -292,7 +292,6 @@ core-rich-text-editor .core-rte-editor {
     @include core-headings();
 
     p {
-        font-size: 1.4rem;
         margin-bottom: 1rem;
     }
 

src/theme/theme.base.scss

@@ -146,13 +146,15 @@ ion-app.ios ion-header h2 {
 
 
 // Correctly inherit ion-text-wrap onto labels.
-.item ion-label core-format-text .core-format-text-content > * {
+.item ion-label core-format-text .core-format-text-content > *,
+.fake-ion-item core-format-text .core-format-text-content > * {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.item.ion-text-wrap ion-label core-format-text .core-format-text-content > * {
+.item.ion-text-wrap ion-label core-format-text .core-format-text-content > *,
+.fake-ion-item.ion-text-wrap core-format-text .core-format-text-content > * {
     white-space: normal;
 }
 
@@ -759,18 +761,15 @@ textarea:not([core-auto-rows]) {
     height: 200px;
 }
 
-ion-fab[core-fab] {
-    position: fixed;
-}
-
-ion-content > ion-fab[core-fab] {
-    position: absolute;
-}
-
 ion-back-button.md::part(text) {
     display: none;
 }
 
+// Hide close button because when present is read on voice over.
+ion-fab[core-fab] ion-fab-button::part(close-icon) {
+    display: none;
+}
+
 .core-media-adapt-width {
     max-width: 100%;
 }
@@ -783,6 +782,98 @@ audio.core-media-adapt-width {
     width: 100%;
 }
 
+// Fake item.
+div.fake-ion-item {
+    position: relative;
+    align-items: center;
+    justify-content: space-between;
+    outline: none;
+    color: var(--ion-text-color);
+    background: var(--ion-item-background);
+    text-align: initial;
+    text-decoration: none;
+    overflow: hidden;
+    box-sizing: border-box;
+
+}
+
+html.md div.fake-ion-item {
+    font-size: 16px;
+    font-weight: normal;
+    text-transform: none;
+    @include padding(null, 16px, null, 16px);
+    @include margin(11px, null, 10px, null);
+
+    h1 {
+        @include margin(0, 0, 2px);
+        font-size: 24px;
+        font-weight: normal;
+    }
+
+    h2 {
+        @include margin(2px, 0);
+        font-size: 16px;
+        font-weight: normal;
+    }
+
+    h3,
+    h4,
+    h5,
+    h6 {
+        @include margin(2px, 0);
+
+        font-size: 14px;
+        font-weight: normal;
+
+        line-height: normal;
+    }
+
+    p {
+        @include margin(0, 0, 2px);
+        font-size: 14px;
+        line-height: 20px;
+        text-overflow: inherit;
+        overflow: inherit;
+    }
+}
+
+html.ios div.fake-ion-item {
+    font-size: 14px;
+    @include padding(null, 10px, null, 20px);
+    @include margin(10px, 8px, 10px, null);
+
+    h1 {
+        @include margin(3px, 0, 2px);
+        font-size: 22px;
+        font-weight: normal;
+    }
+
+    h2 {
+        @include margin(0, 0, 2px);
+        font-size: 17px;
+        font-weight: normal;
+    }
+
+    h3,
+    h4,
+    h5,
+    h6 {
+        @include margin(0, 0, 3px);
+        font-size: 14px;
+        font-weight: normal;
+        line-height: normal;
+    }
+
+    p {
+        @include margin(0, 0, 2px 0);
+        font-size: 14px;
+        line-height: normal;
+        text-overflow: inherit;
+        overflow: inherit;
+    }
+
+}
+
 // Make links clickable when inside radio or checkbox items. Style part.
 @media (hover: hover) {
     ion-item.item-multiple-inputs:hover::part(native) {