mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-18 23:52:52 +00:00
refactor: news module styling
This commit is contained in:
Thea Schöbl
committed by
Rainer Killinger
Rainer Killinger
parent
7ecba0b781
commit
92eb0ee3b0
@@ -1,22 +1,24 @@
|
||||
<!--
|
||||
~ Copyright (C) 2022 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 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.
|
||||
~ 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/>.
|
||||
~ 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-chip
|
||||
[attr.color]="active ? 'primary' : 'medium'"
|
||||
(click)="emitToggle(value)"
|
||||
>
|
||||
<ion-icon name="check_circle" *ngIf="active"></ion-icon>
|
||||
<ion-chip [class.active]="active" (click)="emitToggle(value)">
|
||||
<ion-icon
|
||||
class="ion-color"
|
||||
name="check_circle"
|
||||
fill="true"
|
||||
*ngIf="active"
|
||||
></ion-icon>
|
||||
<ion-label>{{ displayValue }}</ion-label>
|
||||
</ion-chip>
|
||||
|
||||
@@ -0,0 +1,23 @@
|
||||
/*!
|
||||
* Copyright (C) 2022 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-chip {
|
||||
--background: var(--ion-color-primary-tint);
|
||||
--color: var(--ion-color-primary-contrast);
|
||||
|
||||
&.active {
|
||||
--background: var(--ion-color-primary-shade);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,29 +13,17 @@
|
||||
~ this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<ion-card [routerLink]="['/data-detail', item.uid]">
|
||||
<ion-thumbnail
|
||||
><ion-img
|
||||
src="{{ item.image }}"
|
||||
(ionError)="$event.target.nextSibling.style.display = 'block'"
|
||||
alt=""
|
||||
></ion-img>
|
||||
<ion-icon name="newspaper"></ion-icon>
|
||||
</ion-thumbnail>
|
||||
<ion-card
|
||||
[routerLink]="['/data-detail', item.uid]"
|
||||
class="card"
|
||||
[style.--background]="item.image ? 'url(' + item.image + ')' : undefined"
|
||||
>
|
||||
<ion-card-header>
|
||||
<ion-card-subtitle *ngIf="item.datePublished">{{
|
||||
item.datePublished | amCalendar | sentencecase
|
||||
}}</ion-card-subtitle>
|
||||
<ion-card-title>
|
||||
<span>
|
||||
<a [routerLink]="['/data-detail', item.uid]"
|
||||
><span class="text">{{ item.name }}</span></a
|
||||
></span
|
||||
>
|
||||
{{ item.name }}
|
||||
</ion-card-title>
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<!-- TODO: Temporary solution until the designs are ready, where is probable use of title only -->
|
||||
{{ item.messageBody | slice: 0:120 }}...
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
@@ -13,27 +13,30 @@
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
ion-card-header a {
|
||||
color: var(--ion-color-dark-tint);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ion-card {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
ion-card ion-thumbnail {
|
||||
background: var(--placeholder-gray);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
ion-icon {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
color: white;
|
||||
display: none;
|
||||
}
|
||||
ion-card::part(native) {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
height: 100%;
|
||||
background: linear-gradient(to top, var(--ion-color-dark), transparent);
|
||||
}
|
||||
|
||||
.card {
|
||||
aspect-ratio: 1;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
ion-card-title {
|
||||
font-size: var(--font-size-xl);
|
||||
--color: var(--ion-color-dark-contrast);
|
||||
}
|
||||
|
||||
ion-card-subtitle {
|
||||
--color: var(--ion-color-dark-contrast);
|
||||
}
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
<!--
|
||||
~ Copyright (C) 2022 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-card>
|
||||
<span *ngIf="item.url; else imageNoUrl">
|
||||
<a href="{{ item.url }}">
|
||||
<ion-thumbnail
|
||||
><ion-img
|
||||
src="{{ item.image }}"
|
||||
(ionError)="$event.target.nextSibling.style.display = 'block'"
|
||||
alt=""
|
||||
></ion-img>
|
||||
<ion-icon name="newspaper"></ion-icon>
|
||||
</ion-thumbnail>
|
||||
</a>
|
||||
</span>
|
||||
<ng-template #imageNoUrl>
|
||||
<ion-thumbnail>
|
||||
<ion-img
|
||||
src="{{ item.image }}"
|
||||
(ionError)="$event.target.nextSibling.style.display = 'block'"
|
||||
alt=""
|
||||
></ion-img>
|
||||
<ion-icon name="newspaper"></ion-icon>
|
||||
</ion-thumbnail>
|
||||
</ng-template>
|
||||
<ion-card-header>
|
||||
<ion-card-subtitle *ngIf="item.datePublished">{{
|
||||
item.datePublished | amCalendar | sentencecase
|
||||
}}</ion-card-subtitle>
|
||||
<ion-card-title>
|
||||
<span *ngIf="item.url; else titleNoUrl"
|
||||
><a href="{{ item.url }}"
|
||||
><span class="text">{{ item.name }}</span
|
||||
><span class="icon"
|
||||
><ion-icon name="open_in_browser"></ion-icon></span></a
|
||||
></span>
|
||||
<ng-template #titleNoUrl>{{ item.name }}</ng-template>
|
||||
</ion-card-title>
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
{{ item.messageBody }}
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
@@ -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>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
ion-content.ios > .news-grid {
|
||||
ion-content.ios > div > .news-grid {
|
||||
gap: var(--spacing-lg);
|
||||
margin: var(--spacing-lg);
|
||||
@include auto-grid(350px);
|
||||
|
||||
Reference in New Issue
Block a user