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

MOBILE-3927 swipe: Make swipe-slides fill whole height

main
Dani Palou 2022-02-21 15:44:34 +01:00
parent 8736014b35
commit dd1050d4e6
13 changed files with 235 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
src/addons/calendar/components/calendar/addon-calendar-calendar.html
View File

@ -7,102 +7,104 @@
</core-context-menu> </core-context-menu>
</core-navbar-buttons> </core-navbar-buttons>
<core-loading [hideUntil]="loaded" class="safe-area-padding"> <core-loading [hideUntil]="loaded" class="safe-area-padding core-loading-full-height">
<!-- Period name and arrows to navigate. --> <div class="core-swipe-slides-container">
<ion-grid class="ion-no-padding addon-calendar-navigation"> <!-- Period name and arrows to navigate. -->
<ion-row class="ion-align-items-center"> <ion-grid class="ion-no-padding addon-calendar-navigation">
<ion-col class="ion-text-start" *ngIf="canNavigate"> <ion-row class="ion-align-items-center">
<ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'core.previous' | translate"> <ion-col class="ion-text-start" *ngIf="canNavigate">
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon> <ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'core.previous' | translate">
</ion-button> <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-col> </ion-button>
<ion-col class="ion-text-center addon-calendar-period"> </ion-col>
<h2 id="addon-calendar-monthname"> <ion-col class="ion-text-center addon-calendar-period">
{{ periodName }} <h2 id="addon-calendar-monthname">
<ion-spinner *ngIf="!selectedMonthLoaded()" class="addon-calendar-loading-month"> {{ periodName }}
</ion-spinner> <ion-spinner *ngIf="!selectedMonthLoaded()" class="addon-calendar-loading-month">
</h2> </ion-spinner>
</ion-col> </h2>
<ion-col class="ion-text-end" *ngIf="canNavigate"> </ion-col>
<ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'core.next' | translate"> <ion-col class="ion-text-end" *ngIf="canNavigate">
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon> <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'core.next' | translate">
</ion-button> <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-col> </ion-button>
</ion-row> </ion-col>
</ion-grid> </ion-row>
</ion-grid>
<core-swipe-slides [manager]="manager"> <core-swipe-slides [manager]="manager">
<ng-template let-month="item"> <ng-template let-month="item">
<!-- Calendar view. --> <!-- Calendar view. -->
<ion-grid class="addon-calendar-months" role="table" aria-describedby="addon-calendar-monthname"> <ion-grid class="addon-calendar-months" role="table" aria-describedby="addon-calendar-monthname">
<div role="rowgroup"> <div role="rowgroup">
<!-- List of days. --> <!-- List of days. -->
<ion-row role="row"> <ion-row role="row">
<ion-col class="ion-text-center addon-calendar-weekday" *ngFor="let day of month.weekDays" role="columnheader"> <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="sr-only">{{ day.fullname | translate }}</span>
<span class="ion-hide-md-up" aria-hidden="true">{{ day.shortname | 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> <span class="ion-hide-md-down" aria-hidden="true">{{ day.fullname | translate }}</span>
</ion-col> </ion-col>
</ion-row> </ion-row>
</div> </div>
<div role="rowgroup"> <div role="rowgroup">
<!-- Weeks. --> <!-- Weeks. -->
<ion-row *ngFor="let week of month.weeks" class="addon-calendar-week" role="row"> <ion-row *ngFor="let week of month.weeks" class="addon-calendar-week" role="row">
<!-- Empty slots (first week). --> <!-- Empty slots (first week). -->
<ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day" role="cell"> <ion-col *ngFor="let value of week.prepadding" class="dayblank addon-calendar-day" role="cell">
</ion-col> </ion-col>
<ion-col *ngFor="let day of week.days" class="addon-calendar-day ion-text-center" [ngClass]='{ <ion-col *ngFor="let day of week.days" class="addon-calendar-day ion-text-center" [ngClass]='{
"hasevents": day.hasevents, "hasevents": day.hasevents,
"today": month.isCurrentMonth && day.istoday, "today": month.isCurrentMonth && day.istoday,
"weekend": day.isweekend, "weekend": day.isweekend,
"duration_finish": day.haslastdayofevent "duration_finish": day.haslastdayofevent
}' [class.addon-calendar-event-past-day]="month.isPastMonth || day.ispast" role="cell" tabindex="0" }' [class.addon-calendar-event-past-day]="month.isPastMonth || day.ispast" role="cell" tabindex="0"
(ariaButtonClick)="dayClicked(day.mday)"> (ariaButtonClick)="dayClicked(day.mday)">
<p class="addon-calendar-day-number" role="button"> <p class="addon-calendar-day-number" role="button">
<span aria-hidden="true">{{ day.mday }}</span> <span aria-hidden="true">{{ day.mday }}</span>
<span class="sr-only">{{ day.periodName | translate }}</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>
</p> </p>
</div>
</ion-col> <!-- In phone, display some dots to indicate the type of events. -->
<!-- Empty slots (last week). --> <p class="ion-hide-md-up addon-calendar-dot-types"><span *ngFor="let type of day.calendareventtypes"
<ion-col *ngFor="let value of week.postpadding" class="dayblank addon-calendar-day" role="cell"> class="calendar_event_type calendar_event_{{type}}"></span></p>
</ion-col>
</ion-row> <!-- In tablet, display list of events. -->
</div> <div class="ion-hide-md-down addon-calendar-day-events" *ngIf="day.filteredEvents">
</ion-grid> <ng-container *ngFor="let event of day.filteredEvents | slice:0:4; let index = index">
</ng-template> <div *ngIf="index < 3 || day.filteredEvents.length == 4" class="addon-calendar-event"
</core-swipe-slides> [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> </core-loading>

5
src/addons/calendar/components/calendar/calendar.scss
View File

@ -3,6 +3,11 @@
:host { :host {
--addon-calendar-blank-day-background-color: var(--light); --addon-calendar-blank-day-background-color: var(--light);
.core-swipe-slides-container ion-grid {
flex: none;
width: 100%;
}
.addon-calendar-navigation { .addon-calendar-navigation {
padding-top: 5px; padding-top: 5px;
padding-left: 10px; padding-left: 10px;

142
src/addons/calendar/pages/day/day.html
View File

@ -27,78 +27,80 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher> </ion-refresher>
<core-loading [hideUntil]="loaded"> <core-loading [hideUntil]="loaded" class="core-loading-full-height">
<!-- Period name and arrows to navigate. --> <div class="core-swipe-slides-container">
<ion-grid class="ion-no-padding safe-area-padding"> <!-- Period name and arrows to navigate. -->
<ion-row class="ion-align-items-center"> <ion-grid class="ion-no-padding safe-area-padding">
<ion-col class="ion-text-start"> <ion-row class="ion-align-items-center">
<ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'addon.calendar.dayprev' | translate"> <ion-col class="ion-text-start">
<ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon> <ion-button fill="clear" (click)="loadPrevious()" [attr.aria-label]="'addon.calendar.dayprev' | translate">
</ion-button> <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-col> </ion-button>
<ion-col class="ion-text-center addon-calendar-period"> </ion-col>
<h3>{{ periodName }}</h3> <ion-col class="ion-text-center addon-calendar-period">
</ion-col> <h3>{{ periodName }}</h3>
<ion-col class="ion-text-end"> </ion-col>
<ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'addon.calendar.daynext' | translate"> <ion-col class="ion-text-end">
<ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon> <ion-button fill="clear" (click)="loadNext()" [attr.aria-label]="'addon.calendar.daynext' | translate">
</ion-button> <ion-icon name="fas-chevron-right" slot="icon-only" aria-hidden="true"></ion-icon>
</ion-col> </ion-button>
</ion-row> </ion-col>
</ion-grid> </ion-row>
</ion-grid>
<core-swipe-slides [manager]="manager"> <core-swipe-slides [manager]="manager">
<ng-template let-day="item"> <ng-template let-day="item">
<core-loading [hideUntil]="day.loaded" class="safe-area-padding"> <core-loading [hideUntil]="day.loaded" class="safe-area-padding">
<!-- There is data to be synchronized --> <!-- There is data to be synchronized -->
<ion-card class="core-warning-card" *ngIf="day.hasOffline"> <ion-card class="core-warning-card" *ngIf="day.hasOffline">
<ion-item> <ion-item>
<ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon> <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-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>
</ion-item> </ion-item>
</ng-container> </ion-card>
</ion-list>
</core-loading> <core-empty-box *ngIf="!day.filteredEvents || !day.filteredEvents.length" icon="fas-calendar" inline="true"
</ng-template> [message]="'addon.calendar.noevents' | translate">
</core-swipe-slides> </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> </core-loading>
<!-- Create a calendar event. --> <!-- Create a calendar event. -->

9
src/addons/calendar/pages/day/day.scss
View File

@ -1,4 +1,9 @@
:host { :host {
.core-swipe-slides-container ion-grid {
flex: none;
width: 100%;
}
.addon-calendar-period { .addon-calendar-period {
flex-grow: 3; flex-grow: 3;
h3 { h3 {
@ -6,8 +11,4 @@
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
core-swipe-slides {
--swipe-slides-min-height: calc(100% - 52px);
}
} }

16
src/addons/mod/book/pages/contents/contents.html
View File

@ -21,16 +21,16 @@
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content> <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher> </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-card class="core-warning-card" *ngIf="warning">
<ion-item> <ion-item>
<ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon> <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
<ion-label><span [innerHTML]="warning"></span></ion-label> <ion-label><span [innerHTML]="warning"></span></ion-label>
</ion-item> </ion-item>
</ion-card> </ion-card>
<div class="safe-area-padding-horizontal">
<core-navigation-bar *ngIf="displayNavBar" [items]="navigationItems" [showTitles]="displayTitlesInNavBar" <core-navigation-bar *ngIf="displayNavBar" [items]="navigationItems" [showTitles]="displayTitlesInNavBar"
previousTranslate="addon.mod_book.navprevtitle" nextTranslate="addon.mod_book.navnexttitle" previousTranslate="addon.mod_book.navprevtitle" nextTranslate="addon.mod_book.navnexttitle"
(action)="changeChapter($event.id)"> (action)="changeChapter($event.id)">

7
src/addons/mod/book/pages/contents/contents.scss 100644
View File

@ -0,0 +1,7 @@
:host {
.core-swipe-slides-container {
ion-card, core-navigation-bar {
flex: none;
}
}
}

1
src/addons/mod/book/pages/contents/contents.ts
View File

@ -47,6 +47,7 @@ import {
@Component({ @Component({
selector: 'page-addon-mod-book-contents', selector: 'page-addon-mod-book-contents',
templateUrl: 'contents.html', templateUrl: 'contents.html',
styleUrls: ['contents.scss'],
}) })
export class AddonModBookContentsPage implements OnInit, OnDestroy { export class AddonModBookContentsPage implements OnInit, OnDestroy {

4
src/core/components/loading/loading.scss
View File

@ -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:not(.core-loading-inline) .core-loading-content,
&.safe-area-padding-horizontal: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); @include safe-area-padding-horizontal(0px, 0px);

4
src/core/components/swipe-slides/swipe-slides.scss
View File

@ -1,8 +1,6 @@
:host { :host {
--swipe-slides-min-height: auto;
ion-slides { ion-slides {
min-height: var(--swipe-slides-min-height); height: 100%;
} }
ion-slide { ion-slide {

34
src/core/components/swipe-slides/swipe-slides.ts
View File

@ -181,17 +181,8 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
this.onWillChange.emit(currentItemData); this.onWillChange.emit(currentItemData);
if (this.options.scrollOnChange !== 'top') { // Apply scroll on change. In some devices it's too soon to do it, that's why it's done again in DidChange.
return; await this.applyScrollOnChange();
}
// 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' });
}
} }
/** /**
@ -204,6 +195,27 @@ export class CoreSwipeSlidesComponent<Item = unknown> implements OnChanges, OnDe
} }
this.onDidChange.emit(currentItemData); 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' });
}
} }
/** /**

2
src/core/features/login/pages/site-policy/site-policy.html
View File

@ -10,7 +10,7 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<core-loading [hideUntil]="policyLoaded"> <core-loading [hideUntil]="policyLoaded" class="core-loading-full-height">
<ion-list *ngIf="sitePolicy"> <ion-list *ngIf="sitePolicy">
<ion-item class="ion-text-wrap"> <ion-item class="ion-text-wrap">
<ion-label> <ion-label>

6
src/core/features/login/pages/site-policy/site-policy.scss
View File

@ -18,9 +18,3 @@
} }
} }
} }
:host core-loading ::ng-deep {
.core-loading-content {
height: 100%;
}
}

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

@ -1581,3 +1581,14 @@ ion-app.md .collapsible-title h1 {
body.core-iframe-fullscreen ion-content { body.core-iframe-fullscreen ion-content {
--offset-top: 0px !important; --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;
}
}