feat: dynamic news page rows

2026-01-18 15:42:54 +00:00 · 2022-09-21 15:30:13 +00:00
parent 13cee2d426
commit 848d2574c7
6 changed files with 125 additions and 33 deletions
--- a/src/app/modules/news/item/news-item.html
+++ b/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
-  ~  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-card>
-  <span>
-    <a [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>
-    </a>
-  </span>
+<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-header>
    <ion-card-subtitle *ngIf="item.datePublished">{{
      item.datePublished | amCalendar | sentencecase
--- a/src/app/modules/news/item/news-item.scss
+++ b/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%;
--- a/src/app/modules/news/page/news-page.component.ts
+++ b/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 {
  /**
--- a/src/app/modules/news/page/news-page.html
+++ b/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>
--- a/src/app/modules/news/page/news-page.scss
+++ b/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);
+}
--- a/src/theme/util/_mixins.scss
+++ b/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))
+}