MOBILE-4075 h5p: Full screen iframe hide course header and ion-tab-bar
parent
9dfe87e2b2
commit
c851105b79
|
@ -1,4 +1,4 @@
|
|||
<ion-header [collapsible]="tabsComponent?.selectedIndex == 0 || tabsComponent?.selectedIndex === undefined">
|
||||
<ion-header [collapsible]="(tabsComponent?.selectedIndex == 0 || tabsComponent?.selectedIndex === undefined) && !fullScreenEnabled">
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button [text]="'core.back' | translate"></ion-back-button>
|
||||
|
|
|
@ -49,8 +49,10 @@ export class CoreCourseIndexPage implements OnInit, OnDestroy {
|
|||
tabs: CourseTab[] = [];
|
||||
loaded = false;
|
||||
progress?: number;
|
||||
fullScreenEnabled = false;
|
||||
|
||||
protected currentPagePath = '';
|
||||
protected fullScreenObserver: CoreEventObserver;
|
||||
protected selectTabObserver: CoreEventObserver;
|
||||
protected completionObserver: CoreEventObserver;
|
||||
protected sections: CoreCourseWSSection[] = []; // List of course sections.
|
||||
|
@ -114,6 +116,10 @@ export class CoreCourseIndexPage implements OnInit, OnDestroy {
|
|||
|
||||
this.updateProgress();
|
||||
});
|
||||
|
||||
this.fullScreenObserver = CoreEvents.on(CoreEvents.FULL_SCREEN_CHANGED, (event: { enabled: boolean }) => {
|
||||
this.fullScreenEnabled = event.enabled;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -267,6 +273,7 @@ export class CoreCourseIndexPage implements OnInit, OnDestroy {
|
|||
CoreNavigator.decreaseRouteDepth(path.replace(/(\/deep)+/, ''));
|
||||
this.selectTabObserver?.off();
|
||||
this.completionObserver?.off();
|
||||
this.fullScreenObserver?.off();
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -122,6 +122,7 @@ export class CoreEvents {
|
|||
static readonly COURSE_MODULE_VIEWED = 'course_module_viewed';
|
||||
static readonly COMPLETE_REQUIRED_PROFILE_DATA_FINISHED = 'complete_required_profile_data_finished';
|
||||
static readonly MAIN_HOME_LOADED = 'main_home_loaded';
|
||||
static readonly FULL_SCREEN_CHANGED = 'full_screen_changed';
|
||||
|
||||
protected static logger = CoreLogger.getInstance('CoreEvents');
|
||||
protected static observables: { [eventName: string]: Subject<unknown> } = {};
|
||||
|
|
|
@ -592,6 +592,11 @@ core-split-view.menu-and-content {
|
|||
// Using router outlet to avoid changing styles on modals.
|
||||
body.core-iframe-fullscreen ion-router-outlet {
|
||||
|
||||
.core-course-header,
|
||||
ion-tab-bar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
ion-tab-bar.mainmenu-tabs {
|
||||
display: none;
|
||||
|
||||
|
@ -627,7 +632,7 @@ body.core-iframe-fullscreen ion-router-outlet {
|
|||
.ion-page {
|
||||
flex-direction: row-reverse;
|
||||
ion-header {
|
||||
width: calc(var(--core-header-toolbar-height), var(--ion-safe-area-right));
|
||||
width: calc(var(--core-header-toolbar-height) + var(--ion-safe-area-right));
|
||||
@include safe-area-padding-horizontal(null, 0px);
|
||||
background: var(--core-header-toolbar-background);
|
||||
|
||||
|
@ -643,6 +648,10 @@ body.core-iframe-fullscreen ion-router-outlet {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
core-tabs-outlet {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue