Merge pull request #1398 from crazyserver/MOBILE-2464

Mobile 2464

src/app/app.scss

@@ -268,6 +268,7 @@ core-format-text[ng-reflect-single-line="true"] {
 
 .core-media-adapt-width {
   max-width: 100%;
+  height: auto;
 }
 
 audio.core-media-adapt-width {
@@ -341,7 +342,7 @@ core-format-text {
 
 // Images in ion-card have width 100% and display block. Remove that when the image is in core-format-text.
 ion-card core-format-text img {
-  width: initial;
+  width: min-content;
   display: inline;
 }
 

src/core/course/components/format/format.scss

@@ -27,6 +27,17 @@ core-course-format {
             width: 100%;
         }
     }
+
+    .item-divider  {
+        .label {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+        core-format-text {
+            line-height: 44px;
+        }
+    }
 }
 
 .core-section-select {

src/core/viewer/pages/image/image.html

@@ -9,6 +9,8 @@
         </ion-buttons>
     </ion-navbar>
 </ion-header>
-<ion-content padding>
-    <img [src]="image" alt="{{ title }}" core-external-content [component]="component" [componentId]="componentId">
+<ion-content>
+    <ion-scroll zoom="true" maxZoom="2" class="core-zoom-pane" scrollX="true" scrollY="true">
+        <img [src]="image" [alt]="title" core-external-content [component]="component" [componentId]="componentId">
+    </ion-scroll>
 </ion-content>

src/core/viewer/pages/image/image.scss

@@ -0,0 +1,7 @@
+.core-zoom-pane {
+    height: 100%;
+
+    img {
+        max-width: none;
+    }
+}