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

Merge pull request #2053 from crazyserver/MOBILE-3068 

Mobile 3068
main
Juan Leyva 2019-08-09 16:55:57 +02:00 committed by GitHub
parent 2458721f6e 0e9d0356af
commit 85ef2a8e12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 446 additions and 319 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/addon/block/blogtags/blogtags.scss
View File

@ -6,77 +6,83 @@
-webkit-padding-start: 0;
li {
padding: 0 .2em;
display: inline;
padding: .2em;
display: inline-block;
a {
@extend ion-badge;
@extend .badge-md;
text-decoration: none;
}
.s20 {
font-size: 1.5em;
font-weight: bold;
}
.s19 {
font-size: 1.5em;
}
.s18 {
font-size: 1.4em;
font-weight: bold;
}
.s17 {
font-size: 1.4em;
}
.s16 {
font-size: 1.3em;
font-weight: bold;
}
.s15 {
font-size: 1.3em;
}
.s14 {
font-size: 1.2em;
font-weight: bold;
}
.s13 {
font-size: 1.2em;
}
.s12,
.s11 {
font-size: 1.1em;
font-weight: bold;
}
.s10,
.s9 {
font-size: 1.1em;
}
.s8,
.s7 {
font-size: 1em;
font-weight: bold;
}
.s6,
.s5 {
font-size: 1em;
}
.s4,
.s3 {
font-size: 0.9em;
font-weight: bold;
}
.s2,
.s1 {
font-size: 0.9em;
}
}
}
.s20 {
font-size: 1.5em;
font-weight: bold;
}
.s19 {
font-size: 1.5em;
}
.s18 {
font-size: 1.4em;
font-weight: bold;
}
.s17 {
font-size: 1.4em;
}
.s16 {
font-size: 1.3em;
font-weight: bold;
}
.s15 {
font-size: 1.3em;
}
.s14 {
font-size: 1.2em;
font-weight: bold;
}
.s13 {
font-size: 1.2em;
}
.s12,
.s11 {
font-size: 1.1em;
font-weight: bold;
}
.s10,
.s9 {
font-size: 1.1em;
}
.s8,
.s7 {
font-size: 1em;
font-weight: bold;
}
.s6,
.s5 {
font-size: 1em;
}
.s4,
.s3 {
font-size: 0.9em;
font-weight: bold;
}
.s2,
.s1 {
font-size: 0.9em;
}
}
}

2
src/addon/block/comments/providers/block-handler.ts
View File

@ -47,7 +47,7 @@ export class AddonBlockCommentsHandler extends CoreBlockBaseHandler {
component: CoreBlockOnlyTitleComponent,
link: 'CoreCommentsViewerPage',
linkParams: { contextLevel: contextLevel, instanceId: instanceId,
component: 'block_comments', area: 'page_comments', itemId: 0 }
componentName: 'block_comments', area: 'page_comments', itemId: 0 }
};
}
}

176
src/addon/block/tags/tags.scss
View File

@ -8,93 +8,99 @@
-webkit-padding-start: 0;
li {
padding: 0 .2em;
display: inline;
padding: .2em;
display: inline-block;
a {
@extend ion-badge;
@extend .badge-md;
text-decoration: none;
}
.s20 {
font-size: 2.7em;
}
.s19 {
font-size: 2.6em;
}
.s18 {
font-size: 2.5em;
}
.s17 {
font-size: 2.4em;
}
.s16 {
font-size: 2.3em;
}
.s15 {
font-size: 2.2em;
}
.s14 {
font-size: 2.1em;
}
.s13 {
font-size: 2em;
}
.s12 {
font-size: 1.9em;
}
.s11 {
font-size: 1.8em;
}
.s10 {
font-size: 1.7em;
}
.s9 {
font-size: 1.6em;
}
.s8 {
font-size: 1.5em;
}
.s7 {
font-size: 1.4em;
}
.s6 {
font-size: 1.3em;
}
.s5 {
font-size: 1.2em;
}
.s4 {
font-size: 1.1em;
}
.s3 {
font-size: 1em;
}
.s2 {
font-size: 0.9em;
}
.s1 {
font-size: 0.8em;
}
.s0 {
font-size: 0.7em;
}
}
}
}
.tag_cloud .s20 {
font-size: 2.7em;
}
.tag_cloud .s19 {
font-size: 2.6em;
}
.tag_cloud .s18 {
font-size: 2.5em;
}
.tag_cloud .s17 {
font-size: 2.4em;
}
.tag_cloud .s16 {
font-size: 2.3em;
}
.tag_cloud .s15 {
font-size: 2.2em;
}
.tag_cloud .s14 {
font-size: 2.1em;
}
.tag_cloud .s13 {
font-size: 2em;
}
.tag_cloud .s12 {
font-size: 1.9em;
}
.tag_cloud .s11 {
font-size: 1.8em;
}
.tag_cloud .s10 {
font-size: 1.7em;
}
.tag_cloud .s9 {
font-size: 1.6em;
}
.tag_cloud .s8 {
font-size: 1.5em;
}
.tag_cloud .s7 {
font-size: 1.4em;
}
.tag_cloud .s6 {
font-size: 1.3em;
}
.tag_cloud .s5 {
font-size: 1.2em;
}
.tag_cloud .s4 {
font-size: 1.1em;
}
.tag_cloud .s3 {
font-size: 1em;
}
.tag_cloud .s2 {
font-size: 0.9em;
}
.tag_cloud .s1 {
font-size: 0.8em;
}
.tag_cloud .s0 {
font-size: 0.7em;
}
}
}

19
src/addon/mod/glossary/providers/edit-link-handler.ts
View File

@ -18,6 +18,7 @@ import { CoreContentLinksAction } from '@core/contentlinks/providers/delegate';
import { CoreContentLinksHelperProvider } from '@core/contentlinks/providers/helper';
import { CoreCourseProvider } from '@core/course/providers/course';
import { CoreDomUtilsProvider } from '@providers/utils/dom';
import { AddonModGlossaryProvider } from './glossary';
/**
* Content links handler for glossary new entry.
@ -31,7 +32,7 @@ export class AddonModGlossaryEditLinkHandler extends CoreContentLinksHandlerBase
pattern = /\/mod\/glossary\/edit\.php.*([\?\&](cmid)=\d+)/;
constructor(private linkHelper: CoreContentLinksHelperProvider, private courseProvider: CoreCourseProvider,
private domUtils: CoreDomUtilsProvider) {
private domUtils: CoreDomUtilsProvider, private glossaryProvider: AddonModGlossaryProvider) {
super();
}
@ -53,14 +54,16 @@ export class AddonModGlossaryEditLinkHandler extends CoreContentLinksHandlerBase
cmId = parseInt(params.cmid, 10);
this.courseProvider.getModuleBasicInfo(cmId, siteId).then((module) => {
const pageParams = {
courseId: module.course,
module: module,
glossary: module.module,
entry: null // It does not support entry editing.
};
return this.glossaryProvider.getGlossary(module.course, module.id).then((glossary) => {
const pageParams = {
courseId: module.course,
module: module,
glossary: glossary,
entry: null // It does not support entry editing.
};
return this.linkHelper.goInSite(navCtrl, 'AddonModGlossaryEditPage', pageParams, siteId);
this.linkHelper.goInSite(navCtrl, 'AddonModGlossaryEditPage', pageParams, siteId);
});
}).finally(() => {
// Just in case. In fact we need to dismiss the modal before showing a toast or error message.
modal.dismiss();

10
src/addon/mod/glossary/providers/entry-link-handler.ts
View File

@ -27,7 +27,7 @@ import { AddonModGlossaryProvider } from './glossary';
export class AddonModGlossaryEntryLinkHandler extends CoreContentLinksHandlerBase {
name = 'AddonModGlossaryEntryLinkHandler';
featureName = 'CoreCourseModuleDelegate_AddonModGlossary';
pattern = /\/mod\/glossary\/showentry\.php.*([\&\?]eid=\d+)/;
pattern = /\/mod\/glossary\/(showentry|view)\.php.*([\&\?](eid|g|mode|hook)=\d+)/;
constructor(
private domUtils: CoreDomUtilsProvider,
@ -51,7 +51,13 @@ export class AddonModGlossaryEntryLinkHandler extends CoreContentLinksHandlerBas
return [{
action: (siteId, navCtrl?): void => {
const modal = this.domUtils.showModalLoading();
const entryId = parseInt(params.eid, 10);
let entryId;
if (params.mode == 'entry') {
entryId = parseInt(params.hook, 10);
} else {
entryId = parseInt(params.eid, 10);
}
let promise;
if (courseId) {

1
src/app/app.scss
View File

@ -226,6 +226,7 @@ ion-app.app-root {
user-select: text;
word-break: break-word;
word-wrap: break-word;
white-space: normal;
&[maxHeight],
&[ng-reflect-max-height] {

2
src/components/rich-text-editor/rich-text-editor.ts
View File

@ -103,7 +103,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
}
/**
* Init editor
* Init editor.
*/
ngAfterContentInit(): void {
this.domUtils.isRichTextEditorEnabled().then((enabled) => {

18
src/components/tabs/tab.ts
View File

@ -121,18 +121,14 @@ export class CoreTabComponent implements OnInit, OnDestroy {
this.showHideNavBarButtons(true);
// Setup tab scrolling.
setTimeout(() => {
// Workaround to solve undefined this.scroll on tab change.
const scroll: HTMLElement = this.content ? this.content.getScrollElement() :
this.element.querySelector('ion-content > .scroll-content');
this.domUtils.waitElementToExist(() => this.content ? this.content.getScrollElement() :
this.element.querySelector('ion-content > .scroll-content')).then((scroll) => {
scroll.addEventListener('scroll', (e): void => {
this.tabs.showHideTabs(e.target);
});
if (scroll) {
scroll.onscroll = (e): void => {
this.tabs.showHideTabs(e.target);
};
this.tabs.showHideTabs(scroll);
}
}, 1);
this.tabs.showHideTabs(scroll);
});
}
/**

1
src/core/block/components/block/block.scss
View File

@ -1,5 +1,6 @@
ion-app.app-root core-block {
position: relative;
display: block;
core-loading.core-loading-center {
display: block;

22
src/core/block/components/course-blocks/core-block-course-blocks.html
View File

@ -2,13 +2,15 @@
<ng-content></ng-content>
</div>
<ion-content *ngIf="blocks && blocks.length > 0" [class.core-hide-blocks]="hideBlocks" class="core-course-blocks-side">
<core-loading [hideUntil]="dataLoaded" class="core-loading-center">
<ion-list>
<!-- Course blocks. -->
<ng-container *ngFor="let block of blocks">
<core-block [block]="block" contextLevel="course" [instanceId]="courseId" [extraData]="{'downloadEnabled': downloadEnabled}"></core-block>
</ng-container>
</ion-list>
</core-loading>
</ion-content>
<div *ngIf="blocks && blocks.length > 0" [class.core-hide-blocks]="hideBlocks" class="core-course-blocks-side">
<div class="core-course-blocks-side-scroll">
<core-loading [hideUntil]="dataLoaded" class="core-loading-center">
<ion-list>
<!-- Course blocks. -->
<ng-container *ngFor="let block of blocks">
<core-block [block]="block" contextLevel="course" [instanceId]="courseId" [extraData]="{'downloadEnabled': downloadEnabled}"></core-block>
</ng-container>
</ion-list>
</core-loading>
</div>
</div>

74
src/core/block/components/course-blocks/course-blocks.scss
View File

@ -1,8 +1,5 @@
$core-side-blocks-max-small-width: 300px;
$core-side-blocks-min-small-width: 25%;
$core-side-blocks-max-width: 320px;
$core-side-blocks-min-width: 30%;
$core-side-blocks-max-width: 30%;
$core-side-blocks-min-width: 280px;
.core-course-block-with-blocks > .scroll-content {
overflow-y: visible;
@ -10,15 +7,8 @@ $core-side-blocks-min-width: 30%;
ion-app.app-root core-block-course-blocks {
&.core-no-blocks {
.core-course-blocks-content > ion-content {
height: auto;
> .scroll-content {
overflow-y: visible;
position: relative;
}
}
&.core-no-blocks .core-course-blocks-content {
height: auto;
}
&.core-has-blocks {
@ -33,49 +23,51 @@ ion-app.app-root core-block-course-blocks {
flex-wrap: nowrap;
.core-course-blocks-content {
min-width: calc(100% - #{($core-side-blocks-max-small-width)});
max-width: calc(100% - #{($core-side-blocks-min-small-width)});
z-index: 0;
flex: 1;
box-shadow: none !important;
flex-grow: 1;
max-width: 100%;
}
ion-content.core-course-blocks-side {
transform: none !important;
position: sticky;
@include position(0, 0, 0, auto);
z-index: 30;
max-width: $core-side-blocks-max-small-width;
min-width: $core-side-blocks-min-small-width;
@include border-start(1px, solid, $list-md-border-color);
}
}
@include media-breakpoint-up(lg) {
.core-course-blocks-content {
min-width: calc(100% - #{($core-side-blocks-max-width)});
max-width: calc(100% - #{($core-side-blocks-min-width)});
}
ion-content.core-course-blocks-side {
div.core-course-blocks-side {
position: relative;
@include position(auto, 0, auto, auto);
max-width: $core-side-blocks-max-width;
min-width: $core-side-blocks-min-width;
@include border-start(1px, solid, $list-md-border-color);
.core-course-blocks-side-scroll {
position: absolute;
top: 0;
max-width: 100%;
min-width: 100%;
&.core-course-blocks-fixed-bottom {
position: fixed;
bottom: 0;
top: auto;
transform: none !important;
}
core-block {
max-width: $core-side-blocks-max-width;
min-width: $core-side-blocks-min-width;
}
}
}
}
@include media-breakpoint-down(sm) {
// Disable scroll on individual columns.
.core-course-blocks-content > ion-content,
ion-content.core-course-blocks-side {
div.core-course-blocks-side {
transform: none !important;
height: auto;
&.core-hide-blocks {
display: none;
}
> .scroll-content {
overflow-y: visible;
position: relative;
.core-course-blocks-side-scroll {
transform: none !important;
}
}
}

89
src/core/block/components/course-blocks/course-blocks.ts
View File

@ -12,9 +12,10 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, ViewChildren, Input, OnInit, QueryList, ElementRef, Optional } from '@angular/core';
import { Component, ViewChildren, Input, OnInit, QueryList, ElementRef, OnDestroy } from '@angular/core';
import { Content } from 'ionic-angular';
import { CoreDomUtilsProvider } from '@providers/utils/dom';
import { CoreAppProvider } from '@providers/app';
import { CoreCourseProvider } from '@core/course/providers/course';
import { CoreBlockComponent } from '../block/block';
import { CoreBlockHelperProvider } from '../../providers/helper';
@ -26,7 +27,7 @@ import { CoreBlockHelperProvider } from '../../providers/helper';
selector: 'core-block-course-blocks',
templateUrl: 'core-block-course-blocks.html',
})
export class CoreBlockCourseBlocksComponent implements OnInit {
export class CoreBlockCourseBlocksComponent implements OnInit, OnDestroy {
@Input() courseId: number;
@Input() hideBlocks = false;
@ -38,13 +39,17 @@ export class CoreBlockCourseBlocksComponent implements OnInit {
blocks = [];
protected element: HTMLElement;
protected parentContent: HTMLElement;
protected lastScroll;
protected translationY = 0;
protected blocksScrollHeight = 0;
protected sideScroll: HTMLElement;
protected vpHeight = 0; // Viewport height.
protected scrollWorking = false;
constructor(private domUtils: CoreDomUtilsProvider, private courseProvider: CoreCourseProvider,
protected blockHelper: CoreBlockHelperProvider, element: ElementRef,
@Optional() content: Content) {
protected content: Content, protected appProvider: CoreAppProvider) {
this.element = element.nativeElement;
this.parentContent = content.getElementRef().nativeElement;
}
/**
@ -53,9 +58,77 @@ export class CoreBlockCourseBlocksComponent implements OnInit {
ngOnInit(): void {
this.loadContent().finally(() => {
this.dataLoaded = true;
window.addEventListener('resize', this.initScroll.bind(this));
});
}
/**
* Setup scrolling.
*/
protected initScroll(): void {
const scroll: HTMLElement = this.content && this.content.getScrollElement();
this.domUtils.waitElementToExist(() => scroll && scroll.querySelector('.core-course-blocks-side')).then((sideElement) => {
const contentHeight = parseInt(this.content.getNativeElement().querySelector('.scroll-content').scrollHeight, 10);
this.sideScroll = scroll.querySelector('.core-course-blocks-side-scroll');
this.blocksScrollHeight = this.sideScroll.scrollHeight;
this.vpHeight = sideElement.clientHeight;
// Check if needed and event was not init before.
if (this.appProvider.isWide() && this.vpHeight && contentHeight > this.vpHeight &&
this.blocksScrollHeight > this.vpHeight) {
if (typeof this.lastScroll == 'undefined') {
this.lastScroll = 0;
scroll.addEventListener('scroll', this.scrollFunction.bind(this));
}
this.scrollWorking = true;
} else {
this.sideScroll.style.transform = 'translate(0, 0)';
this.sideScroll.classList.remove('core-course-blocks-fixed-bottom');
this.scrollWorking = false;
}
});
}
/**
* Scroll function that moves the sidebar if needed.
*
* @param {Event} e Event to get the target from.
*/
protected scrollFunction(e: Event): void {
if (!this.scrollWorking) {
return;
}
const target: any = e.target,
top = parseInt(target.scrollTop, 10),
goingUp = top < this.lastScroll;
if (goingUp) {
this.sideScroll.classList.remove('core-course-blocks-fixed-bottom');
if (top <= this.translationY ) {
// Fixed to top.
this.translationY = top;
this.sideScroll.style.transform = 'translate(0, ' + this.translationY + 'px)';
}
} else if (top - this.translationY >= (this.blocksScrollHeight - this.vpHeight)) {
// Fixed to bottom.
this.sideScroll.classList.add('core-course-blocks-fixed-bottom');
this.translationY = top - (this.blocksScrollHeight - this.vpHeight);
this.sideScroll.style.transform = 'translate(0, ' + this.translationY + 'px)';
}
this.lastScroll = top;
}
/**
* Component destroyed.
*/
ngOnDestroy(): void {
window.removeEventListener('resize', this.initScroll);
}
/**
* Invalidate blocks data.
*
@ -95,11 +168,13 @@ export class CoreBlockCourseBlocksComponent implements OnInit {
this.element.classList.add('core-has-blocks');
this.element.classList.remove('core-no-blocks');
this.parentContent.classList.add('core-course-block-with-blocks');
this.content.getElementRef().nativeElement.classList.add('core-course-block-with-blocks');
this.initScroll();
} else {
this.element.classList.remove('core-has-blocks');
this.element.classList.add('core-no-blocks');
this.parentContent.classList.remove('core-course-block-with-blocks');
this.content.getElementRef().nativeElement.classList.remove('core-course-block-with-blocks');
}
});
}

2
src/core/comments/pages/viewer/viewer.ts
View File

@ -156,7 +156,7 @@ export class CoreCommentsViewerPage implements OnDestroy {
this.canAddComments = this.addDeleteCommentsAvailable && response.canpost;
const comments = response.comments.sort((a, b) => b.timecreated - a.timecreated);
this.canLoadMore = comments.length >= CoreCommentsProvider.pageSize;
this.canLoadMore = comments.length > 0 && comments.length >= CoreCommentsProvider.pageSize;
return Promise.all(comments.map((comment) => {
// Get the user profile image.

112
src/core/course/components/format/core-course-format.html
View File

@ -6,69 +6,67 @@
</core-navbar-buttons>
<core-block-course-blocks [courseId]="course.id" [hideBlocks]="selectedSection && selectedSection.id == allSectionsId && canLoadMore" [downloadEnabled]="downloadEnabled">
<ion-content>
<!-- Default course format. -->
<core-dynamic-component [component]="courseFormatComponent" [data]="data">
<core-loading [hideUntil]="loaded">
<!-- Section selector. -->
<core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
<div text-wrap *ngIf="displaySectionSelector && sections && sections.length" padding class="clearfix" ion-row justify-content-between class="safe-padding-horizontal" [class.core-section-download]="downloadEnabled">
<button float-start ion-button icon-start icon-end (click)="showSectionSelector($event)" color="light" class="core-button-select button-no-uppercase" ion-col [attr.aria-label]="('core.course.sections' | translate) + ': ' + (selectedSection && (selectedSection.formattedName || selectedSection.name))" aria-haspopup="true" [attr.aria-expanded]="sectionSelectorExpanded" aria-controls="core-course-section-selector" id="core-course-section-button">
<core-icon name="fa-folder"></core-icon>
<span class="core-section-selector-text">{{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}</span>
<ion-icon name="arrow-dropdown" ios="md-arrow-dropdown"></ion-icon>
</button>
<!-- Section download. -->
<ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: selectedSection}"></ng-container>
<!-- Default course format. -->
<core-dynamic-component [component]="courseFormatComponent" [data]="data">
<core-loading [hideUntil]="loaded">
<!-- Section selector. -->
<core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
<div text-wrap *ngIf="displaySectionSelector && sections && sections.length" padding class="clearfix" ion-row justify-content-between class="safe-padding-horizontal" [class.core-section-download]="downloadEnabled">
<button float-start ion-button icon-start icon-end (click)="showSectionSelector($event)" color="light" class="core-button-select button-no-uppercase" ion-col [attr.aria-label]="('core.course.sections' | translate) + ': ' + (selectedSection && (selectedSection.formattedName || selectedSection.name))" aria-haspopup="true" [attr.aria-expanded]="sectionSelectorExpanded" aria-controls="core-course-section-selector" id="core-course-section-button">
<core-icon name="fa-folder"></core-icon>
<span class="core-section-selector-text">{{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}</span>
<ion-icon name="arrow-dropdown" ios="md-arrow-dropdown"></ion-icon>
</button>
<!-- Section download. -->
<ng-container *ngTemplateOutlet="sectionDownloadTemplate; context: {section: selectedSection}"></ng-container>
</div>
</core-dynamic-component>
<!-- Course summary. By default we only display the course progress. -->
<core-dynamic-component [component]="courseSummaryComponent" [data]="data">
<ion-list no-lines *ngIf="course.imageThumb || (selectedSection && selectedSection.id == allSectionsId && course.progress != null && course.progress >= 0)" class="core-format-progress-list">
<div *ngIf="course.imageThumb" class="core-course-thumb">
<img [src]="course.imageThumb" core-external-content alt=""/>
</div>
<ion-item class="core-course-progress" *ngIf="selectedSection && selectedSection.id == allSectionsId && course.progress != null && course.progress >= 0 && course.completionusertracked !== false">
<core-progress-bar [progress]="course.progress"></core-progress-bar>
</ion-item>
</ion-list>
</core-dynamic-component>
<!-- Single section. -->
<div *ngIf="selectedSection && selectedSection.id != allSectionsId">
<core-dynamic-component [component]="singleSectionComponent" [data]="data">
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection}"></ng-container>
<core-empty-box *ngIf="!selectedSection.hasContent" icon="qr-scanner" [message]="'core.course.nocontentavailable' | translate"></core-empty-box>
</core-dynamic-component>
</div>
<!-- Course summary. By default we only display the course progress. -->
<core-dynamic-component [component]="courseSummaryComponent" [data]="data">
<ion-list no-lines *ngIf="course.imageThumb || (selectedSection && selectedSection.id == allSectionsId && course.progress != null && course.progress >= 0)" class="core-format-progress-list">
<div *ngIf="course.imageThumb" class="core-course-thumb">
<img [src]="course.imageThumb" core-external-content alt=""/>
</div>
<ion-item class="core-course-progress" *ngIf="selectedSection && selectedSection.id == allSectionsId && course.progress != null && course.progress >= 0 && course.completionusertracked !== false">
<core-progress-bar [progress]="course.progress"></core-progress-bar>
</ion-item>
</ion-list>
</core-dynamic-component>
<!-- Single section. -->
<div *ngIf="selectedSection && selectedSection.id != allSectionsId">
<core-dynamic-component [component]="singleSectionComponent" [data]="data">
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: selectedSection}"></ng-container>
<core-empty-box *ngIf="!selectedSection.hasContent" icon="qr-scanner" [message]="'core.course.nocontentavailable' | translate"></core-empty-box>
</core-dynamic-component>
</div>
<!-- Multiple sections. -->
<div *ngIf="selectedSection && selectedSection.id == allSectionsId">
<core-dynamic-component [component]="allSectionsComponent" [data]="data">
<ng-container *ngFor="let section of sections; index as i">
<ng-container *ngIf="i <= showSectionId">
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}"></ng-container>
</ng-container>
<!-- Multiple sections. -->
<div *ngIf="selectedSection && selectedSection.id == allSectionsId">
<core-dynamic-component [component]="allSectionsComponent" [data]="data">
<ng-container *ngFor="let section of sections; index as i">
<ng-container *ngIf="i <= showSectionId">
<ng-container *ngTemplateOutlet="sectionTemplate; context: {section: section}"></ng-container>
</ng-container>
</core-dynamic-component>
</ng-container>
</core-dynamic-component>
<core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
</div>
</core-loading>
<ion-buttons padding end class="core-course-section-nav-buttons" *ngIf="displaySectionSelector && sections && sections.length">
<button *ngIf="previousSection" ion-button color="light" icon-only (click)="sectionChanged(previousSection)" title="{{ 'core.previous' | translate }}">
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
<core-format-text class="accesshide" [text]="previousSection.formattedName || previousSection.name"></core-format-text>
</button>
<button *ngIf="nextSection" ion-button icon-only (click)="sectionChanged(nextSection)" title="{{ 'core.next' | translate }}">
<core-format-text class="accesshide" [text]="nextSection.formattedName || nextSection.name"></core-format-text>
<ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
</button>
</ion-buttons>
<core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
</div>
</core-loading>
<ion-buttons padding end class="core-course-section-nav-buttons" *ngIf="displaySectionSelector && sections && sections.length">
<button *ngIf="previousSection" ion-button color="light" icon-only (click)="sectionChanged(previousSection)" title="{{ 'core.previous' | translate }}">
<ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
<core-format-text class="accesshide" [text]="previousSection.formattedName || previousSection.name"></core-format-text>
</button>
<button *ngIf="nextSection" ion-button icon-only (click)="sectionChanged(nextSection)" title="{{ 'core.next' | translate }}">
<core-format-text class="accesshide" [text]="nextSection.formattedName || nextSection.name"></core-format-text>
<ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
</button>
</ion-buttons>
</core-dynamic-component>
</ion-content>
</core-dynamic-component>
</core-block-course-blocks>
<!-- Template to render a section. -->

48
src/core/sitehome/components/index/core-sitehome-index.html
View File

@ -1,30 +1,28 @@
<core-block-course-blocks [courseId]="siteHomeId" [downloadEnabled]="downloadEnabled">
<ion-content>
<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>
<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>
<core-course-module *ngFor="let module of section.modules" [module]="module" [courseId]="siteHomeId" [downloadEnabled]="downloadEnabled" [section]="section"></core-course-module>
<core-course-module *ngFor="let module of section.modules" [module]="module" [courseId]="siteHomeId" [downloadEnabled]="downloadEnabled" [section]="section"></core-course-module>
</ng-container>
<!-- Site home items: news, categories, courses, etc. -->
<ng-container *ngIf="items.length > 0">
<ion-item-divider *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>
</ion-list>
<!-- Site home items: news, categories, courses, etc. -->
<ng-container *ngIf="items.length > 0">
<ion-item-divider *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>
</ion-list>
<core-empty-box *ngIf="!hasContent" icon="qr-scanner" [message]="'core.course.nocontentavailable' | translate"></core-empty-box>
</core-loading>
</ion-content>
<core-empty-box *ngIf="!hasContent" icon="qr-scanner" [message]="'core.course.nocontentavailable' | translate"></core-empty-box>
</core-loading>
</core-block-course-blocks>

39
src/providers/utils/dom.ts
View File

@ -702,6 +702,45 @@ export class CoreDomUtilsProvider {
return this.instances[id];
}
/**
* Wait an element to exists using the findFunction.
*
* @param {Function} findFunction The function used to find the element.
* @return {Promise<HTMLElement>} Resolved if found, rejected if too many tries.
*/
waitElementToExist(findFunction: Function): Promise<HTMLElement> {
const promiseInterval = {
promise: null,
resolve: null,
reject: null
};
let tries = 100;
promiseInterval.promise = new Promise((resolve, reject): void => {
promiseInterval.resolve = resolve;
promiseInterval.reject = reject;
});
const clear = setInterval(() => {
const element: HTMLElement = findFunction();
if (element) {
clearInterval(clear);
promiseInterval.resolve(element);
} else {
tries--;
if (tries <= 0) {
clearInterval(clear);
promiseInterval.reject();
}
}
}, 100);
return promiseInterval.promise;
}
/**
* Handle bootstrap tooltips in a certain element.
*

4
src/theme/format-text.scss
View File

@ -9,6 +9,10 @@ ion-app.app-root core-rich-text-editor .core-rte-editor {
margin-bottom: 1rem;
}
.no-overflow {
overflow: auto;
}
// Fix lists styles in core-format-text.
ul {
padding-left: 1rem;