manage communities: smoother toolbar on mobile (fixes #7618)

src/app/manager-dashboard/requests/requests.component.html

@@ -1,27 +1,43 @@
-<!-- Request template -->
 <mat-toolbar>
   <button class="btnBack" mat-icon-button routerLink="/manager">
     <mat-icon>arrow_back</mat-icon>
   </button>
   <span i18n>{ planetType, select, nation {Communities} center {Nations} }</span>
   <span class="toolbar-fill"></span>
-  <mat-button-toggle-group
-    class="margin-lr-5 font-size-1"
-    (change)="shownStatusChange($event.value)"
-    #filterGroup="matButtonToggleGroup">
-    <mat-button-toggle value="pending" [checked]="shownStatus === 'pending'" i18n>
-      Pending
-    </mat-button-toggle>
-    <mat-button-toggle value="accepted" [checked]="shownStatus === 'accepted'" i18n>
-      Connected
-    </mat-button-toggle>
-  </mat-button-toggle-group>
-  <mat-icon>search</mat-icon>
-  <mat-form-field class="font-size-1">
-    <input matInput (keyup)="requestListFilter($event.target.value)" [value]="searchValue" i18n-placeholder placeholder="Search">
-  </mat-form-field>
+  <ng-container *ngIf="!isMobile">
+    <ng-container *ngTemplateOutlet="filterItems"></ng-container>
+  </ng-container>
+  <button mat-icon-button *ngIf="isMobile" (click)="toggleMobileFilterList()">
+    <mat-icon>filter_list</mat-icon>
+  </button>
 </mat-toolbar>
-
+<mat-toolbar *ngIf="isMobile && showFilterRow" class="mobile-filter-toolbar">
+  <div class="mobile-filter-row">
+    <ng-container *ngTemplateOutlet="filterItems"></ng-container>
+  </div>
+</mat-toolbar>
+<ng-template #filterItems>
+  <mat-button-toggle-group
+      class="margin-lr-5 font-size-1"
+      (change)="shownStatusChange($event.value)"
+      #filterGroup="matButtonToggleGroup">
+      <mat-button-toggle value="pending" [checked]="shownStatus === 'pending'" i18n>
+        Pending
+      </mat-button-toggle>
+      <mat-button-toggle value="accepted" [checked]="shownStatus === 'accepted'" i18n>
+        Connected
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+    <mat-icon>search</mat-icon>
+    <mat-form-field class="font-size-1">
+      <input
+        matInput
+        (keyup)="requestListFilter($event.target.value)"
+        [value]="searchValue"
+        i18n-placeholder
+        placeholder="Search">
+    </mat-form-field>
+  </ng-template>
 <div class="space-container">
   <mat-toolbar>
     <mat-toolbar-row class="primary-color font-size-1">

src/app/manager-dashboard/requests/requests.component.scss

@@ -0,0 +1,21 @@
+@import "../../variables";
+
+.mat-column-name {
+  max-width: 25vw;
+}
+.mat-column-stepNum {
+  max-width: 90px;
+}
+
+@media (max-width: $screen-sm) {
+  .responsive-table {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  mat-header-cell,
+  mat-cell {
+    min-width: 130px;
+  }
+}

src/app/manager-dashboard/requests/requests.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { CouchService } from '../../shared/couchdb.service';
 import { switchMap, takeUntil } from 'rxjs/operators';
@@ -12,14 +12,11 @@ import { CustomValidators } from '../../validators/custom-validators';
 import { ReportsService } from '../reports/reports.service';
 import { ManagerService } from '../manager.service';
 import { attachNamesToPlanets, arrangePlanetsIntoHubs } from '../reports/reports.utils';
+import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
 
 @Component({
   templateUrl: './requests.component.html',
-  styles: [ `
-    mat-panel-title {
-      align-items: center;
-    }
-  ` ]
+  styleUrls: [ './requests.component.scss' ]
 })
 export class RequestsComponent implements OnInit, OnDestroy {
 
@@ -31,6 +28,9 @@ export class RequestsComponent implements OnInit, OnDestroy {
   shownStatus = 'pending';
   onDestroy$ = new Subject<void>();
   planetType = this.stateService.configuration.planetType;
+  deviceType: DeviceType;
+  isMobile: boolean;
+  showFilterRow = false;
   get childType() {
     return this.planetType === 'nation' ? $localize`Network` : $localize`Region`;
   }
@@ -43,8 +43,12 @@ export class RequestsComponent implements OnInit, OnDestroy {
     private stateService: StateService,
     private planetMessageService: PlanetMessageService,
     private reportsService: ReportsService,
-    private managerService: ManagerService
-  ) {}
+    private managerService: ManagerService,
+    private deviceInfoService: DeviceInfoService
+  ) {
+    this.deviceType = this.deviceInfoService.getDeviceType();
+    this.isMobile = this.deviceType === DeviceType.MOBILE;
+  }
 
   ngOnInit() {
     this.route.paramMap.pipe(
@@ -56,6 +60,12 @@ export class RequestsComponent implements OnInit, OnDestroy {
     });
   }
 
+  @HostListener('window:resize')
+  onResize() {
+    this.deviceType = this.deviceInfoService.getDeviceType();
+    this.isMobile = this.deviceType === DeviceType.MOBILE;
+  }
+
   ngOnDestroy() {
     this.onDestroy$.next();
     this.onDestroy$.complete();
@@ -130,4 +140,8 @@ export class RequestsComponent implements OnInit, OnDestroy {
     this.reportsService.viewPlanetDetails(hubPlanet.doc);
   }
 
+  toggleMobileFilterList() {
+    this.showFilterRow = !this.showFilterRow;
+  }
+
 }