forked from EVOgeek/Vmeda.Online
Merge pull request #3131 from dpalou/MOBILE-3927
MOBILE-3927 swipe: Make swipe-slides fill whole height
This commit is contained in:
Pau Ferrer Ocaña
GitHub
commit
04d2bcfe85
@ -7,102 +7,104 @@
|
||||
</core-context-menu>
|
||||
</core-navbar-buttons>
|
||||
|
||||
<core-loading [hideUntil]="loaded" class="safe-area-padding">
|
||||
<!-- Period name and arrows to navigate. -->
|
||||
<ion-grid class="ion-no-padding addon-calendar-navigation">
|
||||
<ion-row class="ion-align-items-center">
|
||||
<ion-col class="ion-text-start" *ngIf="canNavigate">
|
||||
<ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'core.previous' | translate">
|
||||
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="ion-text-center addon-calendar-period">
|
||||
<h2 id="addon-calendar-monthname">
|
||||
{{ periodName }}
|
||||
<ion-spinner *ngIf="!selectedMonthLoaded()" class="addon-calendar-loading-month">
|
||||
</ion-spinner>
|
||||
</h2>
|
||||
</ion-col>
|
||||
<ion-col class="ion-text-end" *ngIf="canNavigate">
|
||||
<ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'core.next' | translate">
|
||||
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<core-loading [hideUntil]="loaded" class="safe-area-padding core-loading-full-height">
|
||||
<div class="core-swipe-slides-container">
|
||||
<!-- Period name and arrows to navigate. -->
|
||||
<ion-grid class="ion-no-padding addon-calendar-navigation">
|
||||
<ion-row class="ion-align-items-center">
|
||||
<ion-col class="ion-text-start" *ngIf="canNavigate">
|
||||
<ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'core.previous' | translate">
|
||||
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="ion-text-center addon-calendar-period">
|
||||
<h2 id="addon-calendar-monthname">
|
||||
{{ periodName }}
|
||||
<ion-spinner *ngIf="!selectedMonthLoaded()" class="addon-calendar-loading-month">
|
||||
</ion-spinner>
|
||||
</h2>
|
||||
</ion-col>
|
||||
<ion-col class="ion-text-end" *ngIf="canNavigate">
|
||||
<ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'core.next' | translate">
|
||||
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<core-swipe-slides [manager]="manager">
|
||||
<ng-template let-month="item">
|
||||
<!-- Calendar view. -->
|
||||
<ion-grid class="addon-calendar-months" role="table" aria-describedby="addon-calendar-monthname">
|
||||
<div role="rowgroup">
|
||||
<!-- List of days. -->
|
||||
<ion-row role="row">
|
||||
<ion-col class="ion-text-center addon-calendar-weekday" *ngFor="let day of month.weekDays" role="columnheader">
|
||||
<span class="sr-only">{{ day.fullname | translate }}</span>
|
||||
<span class="ion-hide-md-up" aria-hidden="true">{{ day.shortname | translate }}</span>
|
||||
<span class="ion-hide-md-down" aria-hidden="true">{{ day.fullname | translate }}</span>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
<div role="rowgroup">
|
||||
<!-- Weeks. -->
|
||||
<ion-row *ngFor="let week of month.weeks" class="addon-calendar-week" role="row">
|
||||
<!-- Empty slots (first week). -->
|
||||
<ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day" role="cell">
|
||||
</ion-col>
|
||||
<ion-col *ngFor="let day of week.days" class="addon-calendar-day ion-text-center" [ngClass]='{
|
||||
"hasevents": day.hasevents,
|
||||
"today": month.isCurrentMonth && day.istoday,
|
||||
"weekend": day.isweekend,
|
||||
"duration_finish": day.haslastdayofevent
|
||||
}' [class.addon-calendar-event-past-day]="month.isPastMonth || day.ispast" role="cell" tabindex="0"
|
||||
(ariaButtonClick)="dayClicked(day.mday)">
|
||||
<p class="addon-calendar-day-number" role="button">
|
||||
<span aria-hidden="true">{{ day.mday }}</span>
|
||||
<span class="sr-only">{{ day.periodName | translate }}</span>
|
||||
</p>
|
||||
|
||||
<!-- In phone, display some dots to indicate the type of events. -->
|
||||
<p class="ion-hide-md-up addon-calendar-dot-types"><span *ngFor="let type of day.calendareventtypes"
|
||||
class="calendar_event_type calendar_event_{{type}}"></span></p>
|
||||
|
||||
<!-- In tablet, display list of events. -->
|
||||
<div class="ion-hide-md-down addon-calendar-day-events" *ngIf="day.filteredEvents">
|
||||
<ng-container *ngFor="let event of day.filteredEvents | slice:0:4; let index = index">
|
||||
<div *ngIf="index < 3 || day.filteredEvents.length == 4" class="addon-calendar-event"
|
||||
[class.addon-calendar-event-past]="event.ispast" role="button" tabindex="0"
|
||||
(ariaButtonClick)="eventClicked(event, $event)">
|
||||
<span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
|
||||
<ion-icon *ngIf="event.offline && !event.deleted" name="fas-clock"
|
||||
[attr.aria-label]="'core.notsent' | translate"></ion-icon>
|
||||
<ion-icon *ngIf="event.deleted" name="fas-trash"
|
||||
[attr.aria-label]="'core.deletedoffline' | translate"></ion-icon>
|
||||
<span class="addon-calendar-event-time">
|
||||
{{ event.timestart * 1000 | coreFormatDate: timeFormat }}
|
||||
</span>
|
||||
<!-- Add the icon title so accessibility tools read it. -->
|
||||
<span class="sr-only">
|
||||
{{ 'addon.calendar.type' + event.formattedType | translate }}
|
||||
<span class="sr-only" *ngIf="event.iconTitle">
|
||||
{{ event.iconTitle }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="addon-calendar-event-name">{{event.name}}</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
<p *ngIf="day.filteredEvents.length > 4" class="addon-calendar-day-more">
|
||||
<b>{{ 'core.nummore' | translate:{$a: day.filteredEvents.length - 3} }}</b>
|
||||
<core-swipe-slides [manager]="manager">
|
||||
<ng-template let-month="item">
|
||||
<!-- Calendar view. -->
|
||||
<ion-grid class="addon-calendar-months" role="table" aria-describedby="addon-calendar-monthname">
|
||||
<div role="rowgroup">
|
||||
<!-- List of days. -->
|
||||
<ion-row role="row">
|
||||
<ion-col class="ion-text-center addon-calendar-weekday" *ngFor="let day of month.weekDays" role="columnheader">
|
||||
<span class="sr-only">{{ day.fullname | translate }}</span>
|
||||
<span class="ion-hide-md-up" aria-hidden="true">{{ day.shortname | translate }}</span>
|
||||
<span class="ion-hide-md-down" aria-hidden="true">{{ day.fullname | translate }}</span>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
<div role="rowgroup">
|
||||
<!-- Weeks. -->
|
||||
<ion-row *ngFor="let week of month.weeks" class="addon-calendar-week" role="row">
|
||||
<!-- Empty slots (first week). -->
|
||||
<ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day" role="cell">
|
||||
</ion-col>
|
||||
<ion-col *ngFor="let day of week.days" class="addon-calendar-day ion-text-center" [ngClass]='{
|
||||
"hasevents": day.hasevents,
|
||||
"today": month.isCurrentMonth && day.istoday,
|
||||
"weekend": day.isweekend,
|
||||
"duration_finish": day.haslastdayofevent
|
||||
}' [class.addon-calendar-event-past-day]="month.isPastMonth || day.ispast" role="cell" tabindex="0"
|
||||
(ariaButtonClick)="dayClicked(day.mday)">
|
||||
<p class="addon-calendar-day-number" role="button">
|
||||
<span aria-hidden="true">{{ day.mday }}</span>
|
||||
<span class="sr-only">{{ day.periodName | translate }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</ion-col>
|
||||
<!-- Empty slots (last week). -->
|
||||
<ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day" role="cell">
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
</ion-grid>
|
||||
</ng-template>
|
||||
</core-swipe-slides>
|
||||
|
||||
<!-- In phone, display some dots to indicate the type of events. -->
|
||||
<p class="ion-hide-md-up addon-calendar-dot-types"><span *ngFor="let type of day.calendareventtypes"
|
||||
class="calendar_event_type calendar_event_{{type}}"></span></p>
|
||||
|
||||
<!-- In tablet, display list of events. -->
|
||||
<div class="ion-hide-md-down addon-calendar-day-events" *ngIf="day.filteredEvents">
|
||||
<ng-container *ngFor="let event of day.filteredEvents | slice:0:4; let index = index">
|
||||
<div *ngIf="index < 3 || day.filteredEvents.length == 4" class="addon-calendar-event"
|
||||
[class.addon-calendar-event-past]="event.ispast" role="button" tabindex="0"
|
||||
(ariaButtonClick)="eventClicked(event, $event)">
|
||||
<span class="calendar_event_type calendar_event_{{event.formattedType}}"></span>
|
||||
<ion-icon *ngIf="event.offline && !event.deleted" name="fas-clock"
|
||||
[attr.aria-label]="'core.notsent' | translate"></ion-icon>
|
||||
<ion-icon *ngIf="event.deleted" name="fas-trash"
|
||||
[attr.aria-label]="'core.deletedoffline' | translate"></ion-icon>
|
||||
<span class="addon-calendar-event-time">
|
||||
{{ event.timestart * 1000 | coreFormatDate: timeFormat }}
|
||||
</span>
|
||||
<!-- Add the icon title so accessibility tools read it. -->
|
||||
<span class="sr-only">
|
||||
{{ 'addon.calendar.type' + event.formattedType | translate }}
|
||||
<span class="sr-only" *ngIf="event.iconTitle">
|
||||
{{ event.iconTitle }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="addon-calendar-event-name">{{event.name}}</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
<p *ngIf="day.filteredEvents.length > 4" class="addon-calendar-day-more">
|
||||
<b>{{ 'core.nummore' | translate:{$a: day.filteredEvents.length - 3} }}</b>
|
||||
</p>
|
||||
</div>
|
||||
</ion-col>
|
||||
<!-- Empty slots (last week). -->
|
||||
<ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day" role="cell">
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
</ion-grid>
|
||||
</ng-template>
|
||||
</core-swipe-slides>
|
||||
</div>
|
||||
|
||||
</core-loading>
|
||||
|
||||
@ -3,6 +3,11 @@
|
||||
:host {
|
||||
--addon-calendar-blank-day-background-color: var(--light);
|
||||
|
||||
.core-swipe-slides-container ion-grid {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.addon-calendar-navigation {
|
||||
padding-top: 5px;
|
||||
padding-left: 10px;
|
||||
|
||||
@ -27,78 +27,80 @@
|
||||
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
|
||||
<core-loading [hideUntil]="loaded">
|
||||
<!-- Period name and arrows to navigate. -->
|
||||
<ion-grid class="ion-no-padding safe-area-padding">
|
||||
<ion-row class="ion-align-items-center">
|
||||
<ion-col class="ion-text-start">
|
||||
<ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'addon.calendar.dayprev' | translate">
|
||||
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="ion-text-center addon-calendar-period">
|
||||
<h3>{{ periodName }}</h3>
|
||||
</ion-col>
|
||||
<ion-col class="ion-text-end">
|
||||
<ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'addon.calendar.daynext' | translate">
|
||||
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<core-loading [hideUntil]="loaded" class="core-loading-full-height">
|
||||
<div class="core-swipe-slides-container">
|
||||
<!-- Period name and arrows to navigate. -->
|
||||
<ion-grid class="ion-no-padding safe-area-padding">
|
||||
<ion-row class="ion-align-items-center">
|
||||
<ion-col class="ion-text-start">
|
||||
<ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'addon.calendar.dayprev' | translate">
|
||||
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
<ion-col class="ion-text-center addon-calendar-period">
|
||||
<h3>{{ periodName }}</h3>
|
||||
</ion-col>
|
||||
<ion-col class="ion-text-end">
|
||||
<ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'addon.calendar.daynext' | translate">
|
||||
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<core-swipe-slides [manager]="manager">
|
||||
<ng-template let-day="item">
|
||||
<core-loading [hideUntil]="day.loaded" class="safe-area-padding">
|
||||
<!-- There is data to be synchronized -->
|
||||
<ion-card class="core-warning-card" *ngIf="day.hasOffline">
|
||||
<ion-item>
|
||||
<ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}</ion-label>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
|
||||
<core-empty-box *ngIf="!day.filteredEvents || !day.filteredEvents.length" icon="fas-calendar" inline="true"
|
||||
[message]="'addon.calendar.noevents' | translate">
|
||||
</core-empty-box>
|
||||
|
||||
<ion-list *ngIf="day.filteredEvents && day.filteredEvents.length" class="ion-no-margin">
|
||||
<ng-container *ngFor="let event of day.filteredEvents">
|
||||
<ion-item class="addon-calendar-event ion-text-wrap" [attr.aria-label]="event.name"
|
||||
(click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast"
|
||||
[ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button detail="true">
|
||||
<core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
|
||||
[modname]="event.modulename" [componentId]="event.instance">
|
||||
</core-mod-icon>
|
||||
<ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
|
||||
aria-hidden="true">
|
||||
</ion-icon>
|
||||
<ion-label>
|
||||
<!-- Add the icon title so accessibility tools read it. -->
|
||||
<span class="sr-only">
|
||||
{{ 'addon.calendar.type' + event.formattedType | translate }}
|
||||
<span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
|
||||
</span>
|
||||
<p class="item-heading">
|
||||
<core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
|
||||
[contextInstanceId]="event.contextInstanceId"></core-format-text>
|
||||
</p>
|
||||
<p [innerHTML]="event.formattedtime"></p>
|
||||
</ion-label>
|
||||
<ion-note *ngIf="event.offline && !event.deleted" slot="end">
|
||||
<ion-icon name="fas-clock" aria-hidden="true"></ion-icon>
|
||||
<span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
|
||||
</ion-note>
|
||||
<ion-note *ngIf="event.deleted" slot="end">
|
||||
<ion-icon name="fas-trash" aria-hidden="true"></ion-icon>
|
||||
<span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
|
||||
</ion-note>
|
||||
<core-swipe-slides [manager]="manager">
|
||||
<ng-template let-day="item">
|
||||
<core-loading [hideUntil]="day.loaded" class="safe-area-padding">
|
||||
<!-- There is data to be synchronized -->
|
||||
<ion-card class="core-warning-card" *ngIf="day.hasOffline">
|
||||
<ion-item>
|
||||
<ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>{{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}</ion-label>
|
||||
</ion-item>
|
||||
</ng-container>
|
||||
</ion-list>
|
||||
</core-loading>
|
||||
</ng-template>
|
||||
</core-swipe-slides>
|
||||
</ion-card>
|
||||
|
||||
<core-empty-box *ngIf="!day.filteredEvents || !day.filteredEvents.length" icon="fas-calendar" inline="true"
|
||||
[message]="'addon.calendar.noevents' | translate">
|
||||
</core-empty-box>
|
||||
|
||||
<ion-list *ngIf="day.filteredEvents && day.filteredEvents.length" class="ion-no-margin">
|
||||
<ng-container *ngFor="let event of day.filteredEvents">
|
||||
<ion-item class="addon-calendar-event ion-text-wrap" [attr.aria-label]="event.name"
|
||||
(click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast"
|
||||
[ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button detail="true">
|
||||
<core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
|
||||
[modname]="event.modulename" [componentId]="event.instance">
|
||||
</core-mod-icon>
|
||||
<ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
|
||||
aria-hidden="true">
|
||||
</ion-icon>
|
||||
<ion-label>
|
||||
<!-- Add the icon title so accessibility tools read it. -->
|
||||
<span class="sr-only">
|
||||
{{ 'addon.calendar.type' + event.formattedType | translate }}
|
||||
<span class="sr-only" *ngIf="event.moduleIcon && event.iconTitle">{{ event.iconTitle }}</span>
|
||||
</span>
|
||||
<p class="item-heading">
|
||||
<core-format-text [text]="event.name" [contextLevel]="event.contextLevel"
|
||||
[contextInstanceId]="event.contextInstanceId"></core-format-text>
|
||||
</p>
|
||||
<p [innerHTML]="event.formattedtime"></p>
|
||||
</ion-label>
|
||||
<ion-note *ngIf="event.offline && !event.deleted" slot="end">
|
||||
<ion-icon name="fas-clock" aria-hidden="true"></ion-icon>
|
||||
<span class="ion-text-wrap">{{ 'core.notsent' | translate }}</span>
|
||||
</ion-note>
|
||||
<ion-note *ngIf="event.deleted" slot="end">
|
||||
<ion-icon name="fas-trash" aria-hidden="true"></ion-icon>
|
||||
<span class="ion-text-wrap">{{ 'core.deletedoffline' | translate }}</span>
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
</ng-container>
|
||||
</ion-list>
|
||||
</core-loading>
|
||||
</ng-template>
|
||||
</core-swipe-slides>
|
||||
</div>
|
||||
</core-loading>
|
||||
|
||||
<!-- Create a calendar event. -->
|
||||
|
||||
@ -1,4 +1,9 @@
|
||||
:host {
|
||||
.core-swipe-slides-container ion-grid {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.addon-calendar-period {
|
||||
flex-grow: 3;
|
||||
h3 {
|
||||
@ -6,8 +11,4 @@
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
core-swipe-slides {
|
||||
--swipe-slides-min-height: calc(100% - 52px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,16 +21,16 @@
|
||||
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
|
||||
<core-loading [hideUntil]="loaded">
|
||||
<core-loading [hideUntil]="loaded" class="core-loading-full-height">
|
||||
<div class="safe-area-padding-horizontal core-swipe-slides-container">
|
||||
|
||||
<ion-card class="core-warning-card" *ngIf="warning">
|
||||
<ion-item>
|
||||
<ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label><span [innerHTML]="warning"></span></ion-label>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
<ion-card class="core-warning-card" *ngIf="warning">
|
||||
<ion-item>
|
||||
<ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label><span [innerHTML]="warning"></span></ion-label>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
|
||||
<div class="safe-area-padding-horizontal">
|
||||
<core-navigation-bar *ngIf="displayNavBar" [items]="navigationItems" [showTitles]="displayTitlesInNavBar"
|
||||
previousTranslate="addon.mod_book.navprevtitle" nextTranslate="addon.mod_book.navnexttitle"
|
||||
(action)="changeChapter($event.id)">
|
||||
|
||||
7
src/addons/mod/book/pages/contents/contents.scss
Normal file
7
src/addons/mod/book/pages/contents/contents.scss
Normal file
@ -0,0 +1,7 @@
|
||||
:host {
|
||||
.core-swipe-slides-container {
|
||||
ion-card, core-navigation-bar {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -47,6 +47,7 @@ import {
|
||||
@Component({
|
||||
selector: 'page-addon-mod-book-contents',
|
||||
templateUrl: 'contents.html',
|
||||
styleUrls: ['contents.scss'],
|
||||
})
|
||||
export class AddonModBookContentsPage implements OnInit, OnDestroy {
|
||||
|
||||
|
||||
@ -71,6 +71,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.core-loading-full-height .core-loading-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.safe-area-padding:not(.core-loading-inline) .core-loading-content,
|
||||
&.safe-area-padding-horizontal:not(.core-loading-inline) .core-loading-content {
|
||||
@include safe-area-padding-horizontal(0px, 0px);
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
:host {
|
||||
--swipe-slides-min-height: auto;
|
||||
|
||||
ion-slides {
|
||||
min-height: var(--swipe-slides-min-height);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ion-slide {
|
||||
|
||||
@ -181,17 +181,8 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
|
||||
|
||||
this.onWillChange.emit(currentItemData);
|
||||
|
||||
if (this.options.scrollOnChange !== 'top') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Scroll top. This can be improved in the future to keep the scroll for each slide.
|
||||
const scrollElement = await this.content?.getScrollElement();
|
||||
|
||||
if (!scrollElement || CoreDomUtils.isElementOutsideOfScreen(scrollElement, this.hostElement, VerticalPoint.TOP)) {
|
||||
// Scroll to top.
|
||||
this.hostElement.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
// Apply scroll on change. In some devices it's too soon to do it, that's why it's done again in DidChange.
|
||||
await this.applyScrollOnChange();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -204,6 +195,27 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
|
||||
}
|
||||
|
||||
this.onDidChange.emit(currentItemData);
|
||||
|
||||
await this.applyScrollOnChange();
|
||||
}
|
||||
|
||||
/**
|
||||
* Treat scroll on change.
|
||||
*
|
||||
* @return Promise resolved when done.
|
||||
*/
|
||||
protected async applyScrollOnChange(): Promise<void> {
|
||||
if (this.options.scrollOnChange !== 'top') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Scroll top. This can be improved in the future to keep the scroll for each slide.
|
||||
const scrollElement = await this.content?.getScrollElement();
|
||||
|
||||
if (!scrollElement || CoreDomUtils.isElementOutsideOfScreen(scrollElement, this.hostElement, VerticalPoint.TOP)) {
|
||||
// Scroll to top.
|
||||
this.hostElement.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<core-loading [hideUntil]="policyLoaded">
|
||||
<core-loading [hideUntil]="policyLoaded" class="core-loading-full-height">
|
||||
<ion-list *ngIf="sitePolicy">
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
|
||||
@ -18,9 +18,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host core-loading ::ng-deep {
|
||||
.core-loading-content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1581,3 +1581,14 @@ ion-app.md .collapsible-title h1 {
|
||||
body.core-iframe-fullscreen ion-content {
|
||||
--offset-top: 0px !important;
|
||||
}
|
||||
|
||||
// To make core-swipe-slides fill the remaining height.
|
||||
.core-swipe-slides-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
core-swipe-slides {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user