feat: display a warning on mobile phones

projects/mastolists/src/app/followings/matrix/matrix.component.html

@@ -3,6 +3,7 @@
         <h1>Matrix View for Followings</h1>
         <div class="divider"></div>
         <nb-badge text="experimental" position="top right" status="success"></nb-badge>
+        <app-not-optimized-for-mobile-devices></app-not-optimized-for-mobile-devices>
         <app-filters></app-filters>
     </nb-card-header>
     <nb-card-body>

projects/mastolists/src/app/followings/table/table.component.html

@@ -2,6 +2,7 @@
     <nb-card-header style="position: relative;">
         <h1>Table View for Followings</h1>
         <div class="divider"></div>
+        <app-not-optimized-for-mobile-devices></app-not-optimized-for-mobile-devices>
         <app-filters></app-filters>
     </nb-card-header>
     <nb-card-body>

projects/mastolists/src/app/shared/components/not-optimized-for-mobile-devices/not-optimized-for-mobile-devices.component.html

@@ -0,0 +1,4 @@
+<div class="only-visible-on-mobile">
+    <p>This view is not optimized for mobile devices</p>
+    <p>For a better experience on mobile visit the <a [routerLink]="['/followings', 'list']">list view</a></p>
+</div>

projects/mastolists/src/app/shared/components/not-optimized-for-mobile-devices/not-optimized-for-mobile-devices.component.scss

@@ -0,0 +1,9 @@
+.only-visible-on-mobile {
+    display: none;
+}
+
+@media (max-width: 573px) {
+    .only-visible-on-mobile {
+        display: block;
+    }
+}

projects/mastolists/src/app/shared/components/not-optimized-for-mobile-devices/not-optimized-for-mobile-devices.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotOptimizedForMobileDevicesComponent } from './not-optimized-for-mobile-devices.component';
+
+describe('NotOptimizedForMobilesComponent', () => {
+  let component: NotOptimizedForMobileDevicesComponent;
+  let fixture: ComponentFixture<NotOptimizedForMobileDevicesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NotOptimizedForMobileDevicesComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NotOptimizedForMobileDevicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/mastolists/src/app/shared/components/not-optimized-for-mobile-devices/not-optimized-for-mobile-devices.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-not-optimized-for-mobile-devices',
+  templateUrl: './not-optimized-for-mobile-devices.component.html',
+  styleUrls: ['./not-optimized-for-mobile-devices.component.scss']
+})
+export class NotOptimizedForMobileDevicesComponent {
+
+}

projects/mastolists/src/app/shared/shared.module.ts

@@ -14,12 +14,15 @@ import {
 } from "@nebular/theme";
 import {FiltersComponent} from './components/filters/filters.component';
 import {ReactiveFormsModule} from "@angular/forms";
+import {NotOptimizedForMobileDevicesComponent} from './components/not-optimized-for-mobile-devices/not-optimized-for-mobile-devices.component';
+import {RouterLink} from "@angular/router";
 
 
 @NgModule({
     declarations: [
         AccountComponent,
         FiltersComponent,
+        NotOptimizedForMobileDevicesComponent,
     ],
     providers: [],
     imports: [
@@ -38,6 +41,7 @@ import {ReactiveFormsModule} from "@angular/forms";
         NbIconModule,
         NbButtonModule,
         NbInputModule,
+        RouterLink,
     ],
     exports: [
         AccountComponent,
@@ -48,6 +52,7 @@ import {ReactiveFormsModule} from "@angular/forms";
         NbIconModule,
         NbButtonModule,
         NbInputModule,
+        NotOptimizedForMobileDevicesComponent,
     ]
 })
 export class SharedModule {