EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4075 h5p: Full screen iframe hide course header and ion-tab-bar

main
Alfonso Salces 2022-11-23 11:46:39 +01:00
parent 9dfe87e2b2
commit c851105b79
4 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/core/features/course/pages/index/index.html
View File

@ -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-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button [text]="'core.back' | translate"></ion-back-button> <ion-back-button [text]="'core.back' | translate"></ion-back-button>

7
src/core/features/course/pages/index/index.ts
View File

@ -49,8 +49,10 @@ export class CoreCourseIndexPage implements OnInit, OnDestroy {
tabs: CourseTab[] = []; tabs: CourseTab[] = [];
loaded = false; loaded = false;
progress?: number; progress?: number;
fullScreenEnabled = false;
protected currentPagePath = ''; protected currentPagePath = '';
protected fullScreenObserver: CoreEventObserver;
protected selectTabObserver: CoreEventObserver; protected selectTabObserver: CoreEventObserver;
protected completionObserver: CoreEventObserver; protected completionObserver: CoreEventObserver;
protected sections: CoreCourseWSSection[] = []; // List of course sections. protected sections: CoreCourseWSSection[] = []; // List of course sections.
@ -114,6 +116,10 @@ export class CoreCourseIndexPage implements OnInit, OnDestroy {
this.updateProgress(); 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)+/, '')); CoreNavigator.decreaseRouteDepth(path.replace(/(\/deep)+/, ''));
this.selectTabObserver?.off(); this.selectTabObserver?.off();
this.completionObserver?.off(); this.completionObserver?.off();
this.fullScreenObserver?.off();
} }
/** /**

1
src/core/singletons/events.ts
View File

@ -122,6 +122,7 @@ export class CoreEvents {
static readonly COURSE_MODULE_VIEWED = 'course_module_viewed'; static readonly COURSE_MODULE_VIEWED = 'course_module_viewed';
static readonly COMPLETE_REQUIRED_PROFILE_DATA_FINISHED = 'complete_required_profile_data_finished'; static readonly COMPLETE_REQUIRED_PROFILE_DATA_FINISHED = 'complete_required_profile_data_finished';
static readonly MAIN_HOME_LOADED = 'main_home_loaded'; static readonly MAIN_HOME_LOADED = 'main_home_loaded';
static readonly FULL_SCREEN_CHANGED = 'full_screen_changed';
protected static logger = CoreLogger.getInstance('CoreEvents'); protected static logger = CoreLogger.getInstance('CoreEvents');
protected static observables: { [eventName: string]: Subject<unknown> } = {}; protected static observables: { [eventName: string]: Subject<unknown> } = {};

11
src/theme/theme.base.scss
View File

@ -592,6 +592,11 @@ core-split-view.menu-and-content {
// Using router outlet to avoid changing styles on modals. // Using router outlet to avoid changing styles on modals.
body.core-iframe-fullscreen ion-router-outlet { body.core-iframe-fullscreen ion-router-outlet {
.core-course-header,
ion-tab-bar {
display: none !important;
}
ion-tab-bar.mainmenu-tabs { ion-tab-bar.mainmenu-tabs {
display: none; display: none;
@ -627,7 +632,7 @@ body.core-iframe-fullscreen ion-router-outlet {
.ion-page { .ion-page {
flex-direction: row-reverse; flex-direction: row-reverse;
ion-header { 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); @include safe-area-padding-horizontal(null, 0px);
background: var(--core-header-toolbar-background); background: var(--core-header-toolbar-background);
@ -643,6 +648,10 @@ body.core-iframe-fullscreen ion-router-outlet {
} }
} }
} }
core-tabs-outlet {
width: 100%;
}
} }
} }