feat: dynamic news page rows

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

@@ -1,31 +1,27 @@
 <!--
   ~ 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-card>
+<ion-card [routerLink]="['/data-detail', item.uid]">
-  <span>
+  <ion-thumbnail
-    <a [routerLink]="['/data-detail', item.uid]">
+    ><ion-img
-      <ion-thumbnail
+      src="{{ item.image }}"
-        ><ion-img
+      (ionError)="$event.target.nextSibling.style.display = 'block'"
-          src="{{ item.image }}"
+      alt=""
-          (ionError)="$event.target.nextSibling.style.display = 'block'"
+    ></ion-img>
-          alt=""
+    <ion-icon name="newspaper"></ion-icon>
-        ></ion-img>
+  </ion-thumbnail>
-        <ion-icon name="newspaper"></ion-icon>
-      </ion-thumbnail>
-    </a>
-  </span>
   <ion-card-header>
     <ion-card-subtitle *ngIf="item.datePublished">{{
       item.datePublished | amCalendar | sentencecase

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

@@ -1,8 +1,28 @@
+/*!
+ * 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-header a {
   color: var(--ion-color-dark-tint);
   text-decoration: none;
 }
 
+ion-card {
+  height: 100%;
+  margin: 0;
+}
+
 ion-card ion-thumbnail {
   background: var(--placeholder-gray);
   width: 100%;

src/app/modules/news/page/news-page.component.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2020-2021 StApps
+ * 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.
@@ -35,6 +35,7 @@ import {SplashScreen} from '@capacitor/splash-screen';
 @Component({
   selector: 'stapps-news-page',
   templateUrl: 'news-page.html',
+  styleUrls: ['news-page.scss'],
 })
 export class NewsPageComponent implements OnInit {
   /**

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

@@ -1,3 +1,18 @@
+<!--
+  ~ 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-header>
   <ion-toolbar color="primary" mode="ios">
     <ion-buttons slot="start">
@@ -27,17 +42,20 @@
         ></stapps-news-settings-filter>
       </ion-col>
     </ion-row>
-    <ion-row *ngIf="!news">
-      <ion-col size="12" size-md="6" *ngFor="let skeleton of [1, 2, 3, 4, 5]">
-        <stapps-skeleton-news-item></stapps-skeleton-news-item>
-      </ion-col>
-    </ion-row>
-    <ion-row *ngIf="news.length > 0">
-      <ion-col size="12" size-md="6" *ngFor="let item of news">
-        <stapps-news-item [item]="item"></stapps-news-item>
-      </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>

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

@@ -0,0 +1,36 @@
+/*!
+ * 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/>.
+ */
+@import "src/theme/util/mixins";
+
+.news-grid {
+  display: grid;
+  gap: var(--spacing-sm);
+  margin: var(--spacing-sm);
+  @include auto-grid(300px);
+
+  // force scrolling & infinite scroll
+  // fill in on large screens
+  min-height: 101%;
+
+  > * {
+    height: 100%;
+  }
+}
+
+ion-content.ios > .news-grid {
+  gap: var(--spacing-lg);
+  margin: var(--spacing-lg);
+  @include auto-grid(350px);
+}

src/theme/util/_mixins.scss

@@ -1,3 +1,18 @@
+/*!
+ * 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/>.
+ */
+
 
 /**
  * Breakpoints copied from node_modules/@ionic/angular/css/display.css
@@ -56,3 +71,9 @@
     @content
   }
 }
+
+@mixin auto-grid($item-width) {
+  // fit as many items on the page while keeping items >$item-width,
+  // but also ensure items get shrunk on small screens
+  grid-template-columns: repeat(auto-fit, minmax(calc(min($item-width, 100%)), 1fr))
+}