Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-22 01:22:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: parallax broken since safari 16.4

Browse Source 
Moves the parallax effect into a directive which injects required elements into the shadow DOM and adds `part` attributes, so it can be styled from a global stylesheet.
This commit is contained in:
Thea Schöbl
2023-05-04 12:18:48 +00:00
parent abf2ab6a5a
commit 0f970fa1f1
16 changed files with 428 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/app/modules/news/page/news-page.html
View File

@@ -22,41 +22,39 @@
</ion-toolbar>
</ion-header>
<ion-content class="ion-content-parallax" (elementSizeChange)="calcPageSize($event)">
<div>
<ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
<ion-refresher-content
pullingIcon="chevron-down-outline"
pullingText="{{ 'data.REFRESH_ACTION' | translate }}"
refreshingText="{{ 'data.REFRESHING' | translate }}"
refreshingSpinner="crescent"
>
</ion-refresher-content>
</ion-refresher>
<ion-grid>
<ion-row>
<ion-col size="12">
<stapps-news-settings-filter
*ngIf="settings"
[settings]="settings"
(filtersChanged)="toggleFilter($event)"
></stapps-news-settings-filter>
</ion-col>
</ion-row>
</ion-grid>
<div class="news-grid">
<ng-container *ngIf="!news">
<stapps-skeleton-news-item *ngFor="let skeleton of [1, 2, 3, 4, 5]"></stapps-skeleton-news-item>
</ng-container>
<ng-container *ngIf="news.length > 0">
<stapps-news-item *ngFor="let item of news" [item]="item"></stapps-news-item>
</ng-container>
</div>
<ion-label *ngIf="news.length === 0" class="centeredMessageContainer">
{{ 'search.nothing_found' | translate | titlecase }}
</ion-label>
<ion-infinite-scroll id="infinite-scroll" threshold="20%" (ionInfinite)="loadMore($event.target)">
<ion-infinite-scroll-content loading-spinner="crescent"> </ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-content parallax (elementSizeChange)="calcPageSize($event)">
<ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
<ion-refresher-content
pullingIcon="chevron-down-outline"
pullingText="{{ 'data.REFRESH_ACTION' | translate }}"
refreshingText="{{ 'data.REFRESHING' | translate }}"
refreshingSpinner="crescent"
>
</ion-refresher-content>
</ion-refresher>
<ion-grid>
<ion-row>
<ion-col size="12">
<stapps-news-settings-filter
*ngIf="settings"
[settings]="settings"
(filtersChanged)="toggleFilter($event)"
></stapps-news-settings-filter>
</ion-col>
</ion-row>
</ion-grid>
<div class="news-grid">
<ng-container *ngIf="!news">
<stapps-skeleton-news-item *ngFor="let skeleton of [1, 2, 3, 4, 5]"></stapps-skeleton-news-item>
</ng-container>
<ng-container *ngIf="news.length > 0">
<stapps-news-item *ngFor="let item of news" [item]="item"></stapps-news-item>
</ng-container>
</div>
<ion-label *ngIf="news.length === 0" class="centeredMessageContainer">
{{ 'search.nothing_found' | translate | titlecase }}
</ion-label>
<ion-infinite-scroll id="infinite-scroll" threshold="20%" (ionInfinite)="loadMore($event.target)">
<ion-infinite-scroll-content loading-spinner="crescent"> </ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>