MOBILE-2488 sitehome: Fix content displayed under tab bar

src/core/courses/pages/my-overview/my-overview.html

@@ -17,7 +17,12 @@
         <!-- Site home tab. -->
         <core-tab [show]="siteHomeEnabled" [title]="'core.sitehome.sitehome' | translate" (ionSelect)="tabChanged('sitehome')">
             <ng-template>
-                <core-sitehome-index></core-sitehome-index>
+                <ion-content>
+                    <ion-refresher [enabled]="siteHomeComponent && siteHomeComponent.dataLoaded" (ionRefresh)="siteHomeComponent.doRefresh($event)">
+                        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+                    </ion-refresher>
+                    <core-sitehome-index></core-sitehome-index>
+                </ion-content>
             </ng-template>
         </core-tab>
 

src/core/courses/pages/my-overview/my-overview.ts

@@ -25,6 +25,7 @@ import { CoreCourseOptionsDelegate } from '@core/course/providers/options-delega
 import { CoreSiteHomeProvider } from '@core/sitehome/providers/sitehome';
 import * as moment from 'moment';
 import { CoreTabsComponent } from '@components/tabs/tabs';
+import { CoreSiteHomeIndexComponent } from '@core/sitehome/components/index/index';
 
 /**
  * Page that displays My Overview.
@@ -37,6 +38,7 @@ import { CoreTabsComponent } from '@components/tabs/tabs';
 export class CoreCoursesMyOverviewPage implements OnDestroy {
     @ViewChild(CoreTabsComponent) tabsComponent: CoreTabsComponent;
     @ViewChild('searchbar') searchbar: Searchbar;
+    @ViewChild(CoreSiteHomeIndexComponent) siteHomeComponent: CoreSiteHomeIndexComponent;
 
     firstSelectedTab: number;
     siteHomeEnabled: boolean;

src/core/sitehome/components/index/core-sitehome-index.html

@@ -1,43 +1,37 @@
-<ion-content>
+<core-loading [hideUntil]="dataLoaded">
-    <ion-refresher [enabled]="dataLoaded" (ionRefresh)="doRefresh($event)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
-    </ion-refresher>
 
-    <core-loading [hideUntil]="dataLoaded">
+    <ion-list>
+        <!-- Site home main contents. -->
+        <ng-container *ngIf="section && section.hasContent">
+            <ion-item text-wrap *ngIf="section.summary">
+                <core-format-text [text]="section.summary"></core-format-text>
+            </ion-item>
 
-        <ion-list>
+            <core-course-module *ngFor="let module of section.modules" [module]="module" [courseId]="siteHomeId"></core-course-module>
-            <!-- Site home main contents. -->
+        </ng-container>
-            <ng-container *ngIf="section && section.hasContent">
-                <ion-item text-wrap *ngIf="section.summary">
-                    <core-format-text [text]="section.summary"></core-format-text>
-                </ion-item>
 
-                <core-course-module *ngFor="let module of section.modules" [module]="module" [courseId]="siteHomeId"></core-course-module>
+        <!-- Site home items: news, categories, courses, etc. -->
+        <ng-container *ngIf="items.length > 0">
+            <ion-item-divider color="light" *ngIf="section && section.hasContent"></ion-item-divider>
+            <ng-container *ngFor="let item of items">
+                <core-sitehome-all-course-list class="item" *ngIf="item == 'all-course-list'"></core-sitehome-all-course-list>
+                <core-sitehome-categories  *ngIf="item == 'categories'"></core-sitehome-categories>
+                <core-sitehome-course-search *ngIf="item == 'course-search'"></core-sitehome-course-search>
+                <core-sitehome-enrolled-course-list *ngIf="item == 'enrolled-course-list'"></core-sitehome-enrolled-course-list>
+                <core-sitehome-news *ngIf="item == 'news'"></core-sitehome-news>
             </ng-container>
+        </ng-container>
 
-            <!-- Site home items: news, categories, courses, etc. -->
+        <!-- Site home block. -->
-            <ng-container *ngIf="items.length > 0">
+        <ng-container *ngIf="block && block.hasContent">
-                <ion-item-divider color="light" *ngIf="section && section.hasContent"></ion-item-divider>
+            <ion-item-divider color="light" *ngIf="(section && section.hasContent) || items.length > 0"></ion-item-divider>
-                <ng-container *ngFor="let item of items">
+            <ion-item text-wrap *ngIf="block.summary">
-                    <core-sitehome-all-course-list class="item" *ngIf="item == 'all-course-list'"></core-sitehome-all-course-list>
+                <core-format-text [text]="block.summary"></core-format-text>
-                    <core-sitehome-categories  *ngIf="item == 'categories'"></core-sitehome-categories>
+            </ion-item>
-                    <core-sitehome-course-search *ngIf="item == 'course-search'"></core-sitehome-course-search>
-                    <core-sitehome-enrolled-course-list *ngIf="item == 'enrolled-course-list'"></core-sitehome-enrolled-course-list>
-                    <core-sitehome-news *ngIf="item == 'news'"></core-sitehome-news>
-                </ng-container>
-            </ng-container>
 
-            <!-- Site home block. -->
+            <core-course-module *ngFor="let module of block.modules" [module]="module" [courseId]="siteHomeId"></core-course-module>
-            <ng-container *ngIf="block && block.hasContent">
+        </ng-container>
-                <ion-item-divider color="light" *ngIf="(section && section.hasContent) || items.length > 0"></ion-item-divider>
+    </ion-list>
-                <ion-item text-wrap *ngIf="block.summary">
-                    <core-format-text [text]="block.summary"></core-format-text>
-                </ion-item>
 
-                <core-course-module *ngFor="let module of block.modules" [module]="module" [courseId]="siteHomeId"></core-course-module>
+    <core-empty-box *ngIf="!hasContent" icon="qr-scanner" [message]="'core.course.nocontentavailable' | translate"></core-empty-box>
-            </ng-container>
+</core-loading>
-        </ion-list>
-
-        <core-empty-box *ngIf="!hasContent" icon="qr-scanner" [message]="'core.course.nocontentavailable' | translate"></core-empty-box>
-    </core-loading>
-</ion-content>

src/core/sitehome/pages/index/index.html

@@ -3,4 +3,9 @@
         <ion-title>{{ 'core.sitehome.sitehome' | translate }}</ion-title>
     </ion-navbar>
 </ion-header>
-<core-sitehome-index></core-sitehome-index>
+<ion-content>
+    <ion-refresher [enabled]="siteHomeComponent && siteHomeComponent.dataLoaded" (ionRefresh)="siteHomeComponent.doRefresh($event)">
+        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
+    </ion-refresher>
+    <core-sitehome-index></core-sitehome-index>
+</ion-content>

src/core/sitehome/pages/index/index.scss

@@ -1,5 +0,0 @@
-page-core-sitehome-index {
-    ion-header {
-        position: relative;
-    }
-}

src/core/sitehome/pages/index/index.ts

@@ -12,10 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { IonicPage, NavParams, NavController } from 'ionic-angular';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreCourseHelperProvider } from '@core/course/providers/helper';
+import { CoreSiteHomeIndexComponent } from '../../components/index/index';
 
 /**
  * Page that displays site home index.
@@ -26,6 +27,7 @@ import { CoreCourseHelperProvider } from '@core/course/providers/helper';
     templateUrl: 'index.html',
 })
 export class CoreSiteHomeIndexPage {
+    @ViewChild(CoreSiteHomeIndexComponent) siteHomeComponent: CoreSiteHomeIndexComponent;
 
     constructor(navParams: NavParams, navCtrl: NavController, courseHelper: CoreCourseHelperProvider,
             sitesProvider: CoreSitesProvider) {