Add message on certain pages about mobile not being supported (#2914)

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-administration.component.html

@@ -1,3 +1,4 @@
+<app-mobile-not-supported></app-mobile-not-supported>
 <h1>Serval Administration</h1>
 
 <app-serval-projects></app-serval-projects>

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-administration.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
+import { MobileNotSupportedComponent } from '../shared/mobile-not-supported/mobile-not-supported.component';
 import { ServalProjectsComponent } from './serval-projects.component';
 
 @Component({
   selector: 'app-serval-administration',
   templateUrl: './serval-administration.component.html',
   styleUrls: ['./serval-administration.component.scss'],
   standalone: true,
-  imports: [ServalProjectsComponent]
+  imports: [ServalProjectsComponent, MobileNotSupportedComponent]
 })
 export class ServalAdministrationComponent {}

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-project.component.html

@@ -1,3 +1,5 @@
+<app-mobile-not-supported></app-mobile-not-supported>
+
 @if (showProjectTitle) {
   <h1>{{ projectName }}</h1>
 }

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-project.component.ts

@@ -14,6 +14,7 @@ import { filterNullish } from 'xforge-common/util/rxjs-util';
 import { ParatextService } from '../core/paratext.service';
 import { SFProjectService } from '../core/sf-project.service';
 import { BuildDto } from '../machine-api/build-dto';
+import { MobileNotSupportedComponent } from '../shared/mobile-not-supported/mobile-not-supported.component';
 import { NoticeComponent } from '../shared/notice/notice.component';
 import { SharedModule } from '../shared/shared.module';
 import { projectLabel } from '../shared/utils';
@@ -38,7 +39,14 @@ function projectType(project: TranslateSource | SFProjectProfile): string {
   selector: 'app-serval-project',
   templateUrl: './serval-project.component.html',
   styleUrls: ['./serval-project.component.scss'],
-  imports: [CommonModule, NoticeComponent, SharedModule, UICommonModule, DraftInformationComponent],
+  imports: [
+    CommonModule,
+    NoticeComponent,
+    SharedModule,
+    UICommonModule,
+    DraftInformationComponent,
+    MobileNotSupportedComponent
+  ],
   standalone: true
 })
 export class ServalProjectComponent extends DataLoadingComponent implements OnInit {

src/SIL.XForge.Scripture/ClientApp/src/app/shared/mobile-not-supported/mobile-not-supported.component.html

@@ -0,0 +1,3 @@
+<app-notice class="hide-gt-md" type="warning" icon="warning" mode="fill-dark">
+  This page is not supported on mobile and may be broken.
+</app-notice>

src/SIL.XForge.Scripture/ClientApp/src/app/shared/mobile-not-supported/mobile-not-supported.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { NoticeComponent } from '../notice/notice.component';
+
+@Component({
+  selector: 'app-mobile-not-supported',
+  standalone: true,
+  imports: [NoticeComponent],
+  templateUrl: './mobile-not-supported.component.html'
+})
+export class MobileNotSupportedComponent {}

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/system-administration.component.html

@@ -1,3 +1,4 @@
+<app-mobile-not-supported></app-mobile-not-supported>
 <div class="body-content">
   <h1>System Administration</h1>
 

src/SIL.XForge.Scripture/ClientApp/src/xforge-common/xforge-common.module.ts

@@ -7,6 +7,7 @@ import { TRANSLOCO_CONFIG, TRANSLOCO_LOADER, TranslocoModule } from '@ngneat/tra
 import { ngfModule } from 'angular-file';
 import { OwnerComponent } from 'xforge-common/owner/owner.component';
 import { ProjectSelectComponent } from '../app/project-select/project-select.component';
+import { MobileNotSupportedComponent } from '../app/shared/mobile-not-supported/mobile-not-supported.component';
 import { PageNotFoundComponent } from '../app/shared/page-not-found/page-not-found.component';
 import { SyncProgressComponent } from '../app/sync/sync-progress/sync-progress.component';
 import { AuthHttpInterceptor } from './auth-http-interceptor';
@@ -38,7 +39,16 @@ const componentExports = [
 ];
 
 @NgModule({
-  imports: [CommonModule, ngfModule, RouterModule, UICommonModule, TranslocoModule, MatDialogModule, AvatarComponent],
+  imports: [
+    CommonModule,
+    ngfModule,
+    RouterModule,
+    UICommonModule,
+    TranslocoModule,
+    MatDialogModule,
+    AvatarComponent,
+    MobileNotSupportedComponent
+  ],
   declarations: componentExports,
   exports: componentExports,
   providers: [