Merge pull request #1965 from albertgasset/MOBILE-3039

Mobile 3039

src/addon/mod/lesson/pages/player/player.html

@@ -108,7 +108,7 @@
                     </ng-container>
 
                     <ion-item>
-                        <button ion-button block (click)="submitQuestion($event)" class="button-no-uppercase">{{ question.submitLabel }}</button>
+                        <button ion-button block text-wrap (click)="submitQuestion($event)" class="button-no-uppercase">{{ question.submitLabel }}</button>
                     </ion-item>
                 </form>
             </ion-card>
@@ -175,7 +175,7 @@
                     <core-format-text [text]="eolData.displayofgrade.message"></core-format-text>
                 </ion-item>
                 <ion-item text-wrap *ngIf="eolData.reviewlesson">
-                    <a ion-button block (click)="reviewLesson(eolData.reviewlesson.pageid)" class="button-no-uppercase">
+                    <a ion-button block text-wrap (click)="reviewLesson(eolData.reviewlesson.pageid)" class="button-no-uppercase">
                         <core-format-text [text]="'addon.mod_lesson.reviewlesson' | translate"></core-format-text>
                     </a>
                 </ion-item>
@@ -185,7 +185,7 @@
                 <ion-item text-wrap *ngIf="eolData.activitylink && eolData.activitylink.value">
                     <ng-container *ngIf="eolData.activitylink.value.formatted">
                         <!-- Activity link was successfully formatted, render the button. -->
-                        <a ion-button block color="light" [href]="eolData.activitylink.value.href" core-link [capture]="true" class="button-no-uppercase">
+                        <a ion-button block text-wrap color="light" [href]="eolData.activitylink.value.href" core-link [capture]="true" class="button-no-uppercase">
                             <core-format-text [text]="eolData.activitylink.value.label"></core-format-text>
                         </a>
                     </ng-container>
@@ -212,8 +212,8 @@
                     </div>
                 </ion-item>
                 <ion-item text-wrap *ngIf="review || (processData.buttons && processData.buttons.length)">
-                    <a ion-button block color="light" *ngIf="review" (click)="changePage(LESSON_EOL)">{{ 'addon.mod_lesson.finish' | translate }}</a>
-                    <a ion-button block color="light" *ngFor="let button of processData.buttons" (click)="changePage(button.pageId, true)">{{ button.label | translate }}</a>
+                    <a ion-button block text-wrap color="light" *ngIf="review" (click)="changePage(LESSON_EOL)">{{ 'addon.mod_lesson.finish' | translate }}</a>
+                    <a ion-button block text-wrap color="light" *ngFor="let button of processData.buttons" (click)="changePage(button.pageId, true)">{{ button.label | translate }}</a>
                 </ion-item>
             </ion-list>
         </div>

src/addon/mod/lesson/pages/user-retake/user-retake.html

@@ -78,7 +78,7 @@
                                 <!-- Content page, display a button and the content. -->
                                 <ion-row>
                                     <ion-col>
-                                        <button ion-button block color="light" [disabled]="true">{{ answer[0].buttonText }}</button>
+                                        <button ion-button block text-wrap color="light" [disabled]="true">{{ answer[0].buttonText }}</button>
                                     </ion-col>
                                     <ion-col>
                                         <p [innerHTML]="answer[0].content"></p>

src/app/app.scss

@@ -678,7 +678,7 @@ ion-app.app-root {
         > ion-icon {
           color: $color-base;
           position: absolute;
-          @include position(0, null, null, 16px)
+          @include position(0, null, null, 16px);
           height: 100%;
           font-size: 24px;
           display: flex;
@@ -1103,3 +1103,52 @@ ion-app.platform-desktop {
     }
   }
 }
+
+// Fix text wrapping in block buttons.
+.button-block[text-wrap] {
+  height: auto;
+
+  // Changed from "strict" because the size depends on child elements.
+  contain: content;
+
+  // Add vertical padding, we cannot rely on a fixed height + centering like in normal buttons.
+  .item-md & {
+    padding-top: .5357em;
+    padding-bottom: .5357em;
+  }
+  .item-md &.item-button {
+    padding-top: .6em;
+    padding-bottom: .6em;
+  }
+  .item-ios & {
+    padding-top: .9em;
+    padding-bottom: .9em;
+  }
+  .item-ios &.item-button {
+    padding-top: .7846em;
+    padding-bottom: .7846em;
+  }
+
+  // Keep a consistent height with normal buttons if text does not wrap.
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  &.button-md {
+    min-height: $button-md-height;
+  }
+  &.button-large-md {
+    min-height: $button-md-large-height;
+  }
+  &.button-small-md {
+    min-height: $button-md-small-height;
+  }
+  &.button-ios {
+    min-height: $button-ios-height;
+  }
+  &.button-large-ios {
+    min-height: $button-ios-large-height;
+  }
+  &.button-small-ios {
+    min-height: $button-ios-small-height;
+  }
+}

src/components/rich-text-editor/rich-text-editor.ts

@@ -148,7 +148,10 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
                 // Editor is ready, adjust Height if needed.
                 let height;
 
-                if (this.platform.is('ios') && this.kbHeight > 0) {
+                if (this.platform.is('android')) {
+                    // Android, ignore keyboard height because web view is resized.
+                    height = this.domUtils.getContentHeight(this.content) - this.getSurroundingHeight(this.element);
+                } else if (this.platform.is('ios') && this.kbHeight > 0) {
                     // Keyboard open in iOS.
                     // In this case, the header disappears or is scrollable, so we need to adjust the calculations.
                     height = window.innerHeight - this.getSurroundingHeight(this.element);