mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-21 09:03:02 +00:00
0f970fa1f1
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.
61 lines
2.2 KiB
HTML
61 lines
2.2 KiB
HTML
<!--
|
|
~ Copyright (C) 2023 StApps
|
|
~ This program is free software: you can redistribute it and/or modify it
|
|
~ under the terms of the GNU General Public License as published by the Free
|
|
~ Software Foundation, version 3.
|
|
~
|
|
~ This program is distributed in the hope that it will be useful, but WITHOUT
|
|
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
|
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
|
~ more details.
|
|
~
|
|
~ You should have received a copy of the GNU General Public License along with
|
|
~ this program. If not, see <https://www.gnu.org/licenses/>.
|
|
-->
|
|
|
|
<ion-header>
|
|
<ion-toolbar color="primary" mode="ios">
|
|
<ion-buttons slot="start">
|
|
<ion-back-button></ion-back-button>
|
|
</ion-buttons>
|
|
<ion-title>{{ 'news.title' | translate }}</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<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>
|