feat(frontend): optimize newsfeed on mobile devices

chaotic-cx · Jan 3, 2025 · 3a63259 · 3a63259
1 parent 44c007f
commit 3a63259
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/frontend/src/app/newsfeed/newsfeed.component.html b/frontend/src/app/newsfeed/newsfeed.component.html
@@ -2,11 +2,21 @@
   <h2 class="text-maroon my-5 text-center text-2xl font-bold">
     <i class="pi-info-circle pi" style="font-size: 1.25rem"></i> Latest news
   </h2>
-  <p-scroll-panel [style]="{ width: '80%', height: '800px', 'margin-left': 'auto', 'margin-right': 'auto' }">
-    @for (news of newsList; track news) {
-      <p-fieldset class="mx-auto" legend="{{ news.data.author }} on {{ news.data.date | date: 'short' }}">
-        <p [innerHTML]="news.html"></p>
-      </p-fieldset>
-    }
-  </p-scroll-panel>
+  @if (isWide()) {
+    <p-scroll-panel [style]="{ height: '800px', 'margin-left': 'auto', 'margin-right': 'auto', 'max-width': '80%' }">
+      @for (news of newsList; track news) {
+        <p-fieldset class="mx-auto" legend="{{ news.data.author }} on {{ news.data.date | date: 'short' }}">
+          <p [innerHTML]="news.html"></p>
+        </p-fieldset>
+      }
+    </p-scroll-panel>
+  } @else {
+    <p-scroll-panel [style]="{ height: '800px', 'margin-left': '0.5rem', 'margin-right': '0.5rem' }">
+      @for (news of newsList; track news) {
+        <p-fieldset class="mx-auto" legend="{{ news.data.author }} on {{ news.data.date | date: 'short' }}">
+          <p [innerHTML]="news.html"></p>
+        </p-fieldset>
+      }
+    </p-scroll-panel>
+  }
 </div>
diff --git a/frontend/src/app/newsfeed/newsfeed.component.ts b/frontend/src/app/newsfeed/newsfeed.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject, OnInit, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { AppService } from '../app.service';
 import { TableModule } from 'primeng/table';
@@ -7,6 +7,7 @@ import { ScrollPanel } from 'primeng/scrollpanel';
 import { MessageToastService } from '@garudalinux/core';
 import { Message } from './interfaces';
 import { entityToHtml } from '../functions';
+import { BreakpointObserver } from '@angular/cdk/layout';
 
 @Component({
   selector: 'chaotic-newsfeed',
@@ -16,12 +17,18 @@ import { entityToHtml } from '../functions';
   providers: [MessageToastService],
 })
 export class NewsfeedComponent implements OnInit {
+  isWide = signal<boolean>(true);
   newsList: { data: Message; html?: string }[] = [];
 
   private readonly appService = inject(AppService);
   private readonly messageToastService = inject(MessageToastService);
+  private readonly observer = inject(BreakpointObserver);
 
   async ngOnInit(): Promise<void> {
+    this.observer.observe('(min-width: 768px)').subscribe((result) => {
+      this.isWide.set(result.matches);
+    });
+
     this.appService.getNews().subscribe({
       next: (data) => {
         for (const news of data) {