manager: smoother dashboard headers (fixes #8243) (#8245)

Co-authored-by: dogi <[email protected]>
open-learning-exchange · Feb 18, 2025 · 450464f · 450464f
1 parent 030234b
commit 450464f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.17.20",
+  "version": "0.17.21",
   "myplanet": {
     "latest": "v0.23.14",
     "min": "v0.22.14"

diff --git a/src/app/manager-dashboard/manager-dashboard.component.html b/src/app/manager-dashboard/manager-dashboard.component.html
@@ -96,9 +96,11 @@ <h3 i18n *ngIf="showParentList">{{ planetType === 'community' ? 'Nation' : 'Cent
       </ng-template>
     </p>
   </div>
-  <mat-grid-list cols="4" rowHeight="2rem">
-    <mat-grid-tile i18n>Last Upgrade</mat-grid-tile><mat-grid-tile i18n>Last Sync</mat-grid-tile>
-    <mat-grid-tile i18n>Resource Views Last 30 Days</mat-grid-tile><mat-grid-tile i18n>Total Ratings Last 30 Days</mat-grid-tile>
+  <mat-grid-list cols="4" [rowHeight]="gridRowHeight">
+    <mat-grid-tile i18n><b>Last Upgrade</b></mat-grid-tile>
+    <mat-grid-tile i18n><b>Last Sync</b></mat-grid-tile>
+    <mat-grid-tile i18n><b>Resource Views Last 30 Days</b></mat-grid-tile>
+    <mat-grid-tile i18n><b>Total Ratings Last 30 Days</b></mat-grid-tile>
     <mat-grid-tile>{{activityLogs?.lastUpgrade?.max.time | date: 'medium'}}</mat-grid-tile>
     <mat-grid-tile>{{activityLogs?.lastSync?.max.time | date: 'medium'}}</mat-grid-tile>
     <mat-grid-tile>{{activityLogs?.resourceVisits}}</mat-grid-tile>

diff --git a/src/app/manager-dashboard/manager-dashboard.component.ts b/src/app/manager-dashboard/manager-dashboard.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, isDevMode, OnDestroy } from '@angular/core';
+import { Component, OnInit, isDevMode, OnDestroy, HostListener } from '@angular/core';
 import { UserService } from '../shared/user.service';
 import { CouchService } from '../shared/couchdb.service';
 import { findDocuments } from '../shared/mangoQueries';
@@ -16,6 +16,7 @@ import { CoursesService } from '../courses/courses.service';
 import { ConfigurationService } from '../configuration/configuration.service';
 import { ManagerService } from './manager.service';
 import { StateService } from '../shared/state.service';
+import { DeviceInfoService, DeviceType } from '../shared/device-info.service';
 
 @Component({
   templateUrl: './manager-dashboard.component.html',
@@ -71,6 +72,8 @@ export class ManagerDashboardComponent implements OnInit, OnDestroy {
   isHub = false;
   streaming: boolean;
   overlayOpen = false;
+  isMobile: boolean;
+  gridRowHeight: string = '2rem';
 
   constructor(
     private userService: UserService,
@@ -82,7 +85,8 @@ export class ManagerDashboardComponent implements OnInit, OnDestroy {
     private dialog: MatDialog,
     private configurationService: ConfigurationService,
     private stateService: StateService,
-    private managerService: ManagerService
+    private managerService: ManagerService,
+    private deviceInfoService: DeviceInfoService
   ) {}
 
   ngOnInit() {
@@ -317,4 +321,10 @@ export class ManagerDashboardComponent implements OnInit, OnDestroy {
     );
   }
 
+  @HostListener('window:resize')
+  onResize() {
+    this.isMobile = this.deviceInfoService.getDeviceType() === DeviceType.MOBILE;
+    this.gridRowHeight = this.isMobile ? '3.6rem' : '2rem';
+  }
+
 }