feat: dynamic news page rows

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>