Fix menu

projects/common/src/fm/components/app/app.component.html

@@ -1,7 +1,7 @@
 <div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
   <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
     <button type="button" class="btn btn-outline-light" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
-    <router-outlet name="menu ml-4 float-right"></router-outlet>
+    <router-outlet name="menu" class="ml-4"></router-outlet>
   </nav>
   <div class="body">
     <router-outlet></router-outlet>

src/app/app-routing.module.ts

@@ -5,6 +5,7 @@ import { AuthGuard,FullScreenGuard } from '@farmmaps/common';
 import { MapComponent } from '@farmmaps/common-map';
 import { LogoComponent } from './logo/logo.component';
 import { MenuComponent } from './menu/menu.component';
+import {RegisterDeviceComponent} from './registerdevice/registerdevice.component';
 import {NotImplementedComponent} from '@farmmaps/common';
 import { NavBarGuard } from 'projects/common/src/public-api';
 
@@ -27,7 +28,7 @@ const routes = [
     path: '',
     redirectTo: 'map',
     pathMatch: 'full'
-  },  
+  },     
   {
     path:'editor/:type/item/:itemcode',
     canActivate:[NavBarGuard],
@@ -47,7 +48,12 @@ const routes = [
         path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
         component: MapComponent       
     }    
-   ]}
+   ]},
+   {
+     path:'registerdevice/:deviceToken',
+     canActivate:[FullScreenGuard],
+     component:RegisterDeviceComponent
+   }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { StoreRouterConnectingModule} from '@ngrx/router-store';
 import {AppRoutingModule} from './app-routing.module';
 import { LogoComponent } from './logo/logo.component';
 import { MenuComponent } from './menu/menu.component';
+import {RegisterDeviceComponent} from './registerdevice/registerdevice.component';
 import { SecureOAuthStorage} from '@farmmaps/common';
 import { OAuthStorage } from 'angular-oauth2-oidc';
 
@@ -50,7 +51,8 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
   declarations: [
     AppRootComponent,
     LogoComponent,
-    MenuComponent
+    MenuComponent,
+    RegisterDeviceComponent
   ],
   imports: [
     AppRoutingModule,

src/app/registerdevice/registerdevice.component.html

@@ -0,0 +1,5 @@
+<div class="container text-center pt-10">   
+    <img class="logo" src="/images/farmmapslogo.png" alt="FarmMaps logo"> 
+    <div class="message" i18n>To register this device<br/> download the FarmMaps app and create an account or login. <br/><br/>Next scan this QR code with the function "Register device" from the menu</div>
+    <a href="https://play.google.com/store/apps/details?id=ag.farmmaps.app"><img class="play-badge" src="/images/google-play-badge.png" alt="Get it on google play"></a>  
+</div>

src/app/registerdevice/registerdevice.component.scss

@@ -0,0 +1,32 @@
+.container {
+  width:100%;
+  height:100;
+  padding-top: 5em;
+}
+
+.logo {
+  max-width: 80%;
+  margin-bottom: 1.5em;
+}
+
+.play-badge {
+  margin-top: 1.5em;
+  max-width: 45%;
+}
+
+.message {
+  margin:auto;
+  font-size: 1.5em;
+  line-height: 1.5em;
+  max-width: 90%;
+}
+
+@media screen and (min-width:44rem) {
+  .logo {
+    max-width: 22rem;
+  }
+
+  .play-badge {
+    max-width: 10rem;
+  }
+}

src/app/registerdevice/registerdevice.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'registerdevice',
+  templateUrl: './registerdevice.component.html',
+  styleUrls: ['./registerdevice.component.scss']
+})
+export class RegisterDeviceComponent implements OnInit {
+  
+
+  constructor( ) { }
+
+  ngOnInit() {
+   
+  }
+}