refactor: news module styling

src/app/modules/data/chips/filter/chip-filter.component.html

@@ -1,22 +1,24 @@
 <!--
   ~ Copyright (C) 2022 StApps
-  ~  This program is free software: you can redistribute it and/or modify it
+  ~ 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
+  ~ under the terms of the GNU General Public License as published by the Free
-  ~  Software Foundation, version 3.
+  ~ Software Foundation, version 3.
   ~
-  ~  This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
-  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-  ~  more details.
+  ~ more details.
   ~
-  ~  You should have received a copy of the GNU General Public License along with
+  ~ You should have received a copy of the GNU General Public License along with
-  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ion-chip
+<ion-chip [class.active]="active" (click)="emitToggle(value)">
-  [attr.color]="active ? 'primary' : 'medium'"
+  <ion-icon
-  (click)="emitToggle(value)"
+    class="ion-color"
->
+    name="check_circle"
-  <ion-icon name="check_circle" *ngIf="active"></ion-icon>
+    fill="true"
+    *ngIf="active"
+  ></ion-icon>
   <ion-label>{{ displayValue }}</ion-label>
 </ion-chip>

src/app/modules/data/chips/filter/chip-filter.component.scss

@@ -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);
+  }
+}

src/app/modules/news/item/news-item.html

@@ -13,29 +13,17 @@
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<ion-card [routerLink]="['/data-detail', item.uid]">
+<ion-card
-  <ion-thumbnail
+  [routerLink]="['/data-detail', item.uid]"
-    ><ion-img
+  class="card"
-      src="{{ item.image }}"
+  [style.--background]="item.image ? 'url(' + item.image + ')' : undefined"
-      (ionError)="$event.target.nextSibling.style.display = 'block'"
+>
-      alt=""
-    ></ion-img>
-    <ion-icon name="newspaper"></ion-icon>
-  </ion-thumbnail>
   <ion-card-header>
     <ion-card-subtitle *ngIf="item.datePublished">{{
       item.datePublished | amCalendar | sentencecase
     }}</ion-card-subtitle>
     <ion-card-title>
-      <span>
+      {{ item.name }}
-        <a [routerLink]="['/data-detail', item.uid]"
-          ><span class="text">{{ item.name }}</span></a
-        ></span
-      >
     </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>

src/app/modules/news/item/news-item.scss

@@ -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 {
+ion-card::part(native) {
-  background: var(--placeholder-gray);
+  display: flex;
-  width: 100%;
+  flex-direction: column-reverse;
-  height: auto;
+  height: 100%;
-  img {
+  background: linear-gradient(to top, var(--ion-color-dark), transparent);
-    display: block;
+}
-  }
+
-  ion-icon {
+.card {
-    width: 100%;
+  aspect-ratio: 1;
-    height: 250px;
+  padding: 0;
-    color: white;
+  box-shadow: none;
-    display: 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);
 }

src/app/modules/news/page/news-item.html

@@ -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>

src/app/modules/news/page/news-page.html

@@ -22,49 +22,51 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content fullscreen>
+<ion-content class="ion-content-parallax">
-  <ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
+  <div>
-    <ion-refresher-content
+    <ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
-      pullingIcon="chevron-down-outline"
+      <ion-refresher-content
-      pullingText="{{ 'data.REFRESH_ACTION' | translate }}"
+        pullingIcon="chevron-down-outline"
-      refreshingText="{{ 'data.REFRESHING' | translate }}"
+        pullingText="{{ 'data.REFRESH_ACTION' | translate }}"
-      refreshingSpinner="crescent"
+        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-infinite-scroll-content loading-spinner="crescent">
-  </ion-refresher>
+      </ion-infinite-scroll-content>
-  <ion-grid>
+    </ion-infinite-scroll>
-    <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>

src/app/modules/news/page/news-page.scss

@@ -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);