Merge pull request #360 from dpalou/MOBILE-1389-new

MOBILE-1389 scorm: Fix issues with iframes and remove some buttons

Author: jleyva

www/addons/mod_imscp/scss/styles.scss

@@ -9,7 +9,7 @@
         <ion-refresher pulling-text="{{ 'mm.core.pulltorefresh' | translate }}" on-refresh="doRefresh()" ng-if="loaded"></ion-refresher>
         <mm-loading hide-until="loaded">
             <mm-navigation-bar previous="previousItem" next="nextItem" action="loadItem" info="description" title="{{ 'mm.core.description' | translate }}"></mm-navigation-bar>
-            <mm-iframe src="src" class="mma-imscp-iframe-container"></mm-iframe>
+            <mm-iframe src="src" ng-class='{"mm-has-navigation-bar": previousItem || nextItem || description}'></mm-iframe>
         </mm-loading>
     </ion-content>
 </ion-view>

www/addons/mod_imscp/templates/index.html

@@ -36,7 +36,6 @@ angular.module('mm.addons.mod_scorm')
         offline = false;
 
     $scope.title = scorm.name; // We use SCORM name at start, later we'll use the SCO title.
-    $scope.description = scorm.intro;
     $scope.scorm = scorm;
     $scope.loadingToc = true;
 

www/addons/mod_scorm/controllers/player.js

@@ -16,13 +16,6 @@ $mma-mod-scorm-warning-color:		#c00 !default;
   color: $mma-mod-scorm-warning-color;
 }
 
-.mma-mod-scorm-iframe-container {
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-}
-
 ion-popover-view {
   /* Adapt popover to content's height. The popover's ion-content needs to disable Ionic scroll. */
   &.mma-scorm-popover {

www/addons/mod_scorm/scss/styles.scss

@@ -1,15 +1,14 @@
 <ion-view>
     <ion-nav-title><mm-format-text watch="true">{{ title }}</mm-format-text></ion-nav-title>
     <ion-nav-buttons side="secondary">
-        <a ng-href="{{externalUrl}}" class="button button-icon ion-ios-browsers-outline" mm-browser></a>
         <button class="button button-icon ion-more" ng-if="showToc && !loadingToc && toc && toc.length" ng-click="popover.show($event)">
         </button>
         <ion-spinner ng-if="showToc && loadingToc"></ion-spinner>
     </ion-nav-buttons>
     <ion-content>
         <mm-loading hide-until="loaded">
-            <mm-navigation-bar previous="previousSco" next="nextSco" action="loadSco" info="description" title="{{ 'mm.core.description' | translate }}"></mm-navigation-bar>
-            <mm-iframe ng-if="src" src="src" class="mma-mod-scorm-iframe-container" iframe-width="{{scorm.popup ? scorm.width : undefined}}" iframe-height="{{scorm.popup ? scorm.height : undefined}}"></mm-iframe>
+            <mm-navigation-bar previous="previousSco" next="nextSco" action="loadSco"></mm-navigation-bar>
+            <mm-iframe ng-if="src" src="src" iframe-width="{{scorm.popup ? scorm.width : undefined}}" iframe-height="{{scorm.popup ? scorm.height : undefined}}" ng-class='{"mm-has-navigation-bar": previousSco || nextSco}'></mm-iframe>
             <p ng-if="!src && errorMessage">{{ errorMessage | translate }}</p>
 	    </mm-loading>
     </ion-content>

www/addons/mod_scorm/templates/player.html

@@ -274,17 +274,41 @@ img.mm-media-adapt-width {
   line-height: 30px;
 }
 
+// Remove padding-top and bottom from navigation bar to minimize height used.
+mm-navigation-bar {
+  .row {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+  .col {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+}
+
 // Extra attributes to ionic classes to force frames via directive 100% height.
 
 .scroll {
   height: 100%;
 }
 
 .iframe-wrapper {
-  height: 100%;
-  width: 100%;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: auto;
+  width: auto;
+  position: absolute !important; // Position fixed causes problems in Android 4.1-4.3.
 }
 
+.mm-has-navigation-bar {
+  .iframe-wrapper {
+    top: $button-height + 5px;
+  }
+}
+
+
 /**
  * This CSS uses adjacent selectors instead of general sibling (~) selectors
  * for ion radio that are broken in iOS 9 UIWebView.