refactor: news module styling

This commit is contained in:
Thea Schöbl
2022-09-27 13:44:06 +00:00
committed by Rainer Killinger
parent 7ecba0b781
commit 92eb0ee3b0
7 changed files with 112 additions and 150 deletions

View File

@@ -22,49 +22,51 @@
</ion-toolbar>
</ion-header>
<ion-content fullscreen>
<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-content class="ion-content-parallax">
<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-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>
<ion-infinite-scroll-content loading-spinner="crescent">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</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>