21 changed files with 35 additions and 33 deletions
--- a/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
+++ b/projects/common-map/src/fm-map/components/aol/layer-list/layer-list.component.html
@ -13,7 +13,7 @@
            </span>
            <a href="#" title="Zoom to extent" class="btn btn-light btn-sm" (click)="handleZoomToExtent($event,itemLayer)"><i class="far fa-search-plus" aria-hidden="true"></i></a>
            <span *ngIf="firstLayer(itemLayer)"><a href="#" title="Toggle legend" class="btn btn-light btn-sm" (click)="itemLayer.legendVisible=toggleLegend($event,itemLayer.legendVisible)"><i class="far fa-chart-bar" aria-hidden="true"></i></a></span>
-            <span *ngIf="!dataLayers" class="float-end"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
+            <span *ngIf="!dataLayers" class="float-right"><a href="#" title="Remove overlay" class="btn btn-light btn-sm" (click)="handleDelete($event,itemLayer)"><i class="fas fa-layer-minus" aria-hidden="true"></i></a></span>
          </div>
          <div *ngIf="itemLayer.legendVisible">
            <div class="card legend">
--- a/projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.html
+++ b/projects/common-map/src/fm-map/components/aol/layer-values/layer-values.component.html
@ -2,12 +2,12 @@
   <div class="cross"  *ngIf="enabled$ | async">
       <div class="pointer"></div>
       <div class="values-container border border-dark rounded p-2" *ngIf="(layerValues$ | async ) as layers">
-           <div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ms-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
+           <div class="lonlat pb-2 "><span class="font-weight-bold">{{lonlat$}}</span><i class="ml-2 fal fa-copy" (click)="copyToClipboard()"></i> </div>
           <ul class="value-list p-0 mb-0" *ngIf="layers.length>0 ;else no_data">
               <li class="border-top pt-1 pb-1 value" *ngFor="let layerValue of layers">
                   <div>{{layerValue.layerName}}</div>
                   <div>{{layerValue.date|date}}</div>
-                   <div><span *ngIf="layerValue.quantity"><span class="me-1">{{layerValue.quantity}}</span> </span><span class="me-1 font-weight-bold">{{layerValue.value}}</span><span>{{layerValue.unit}}</span></div>
+                   <div><span *ngIf="layerValue.quantity"><span class="mr-1">{{layerValue.quantity}}</span> </span><span class="mr-1 font-weight-bold">{{layerValue.value}}</span><span>{{layerValue.unit}}</span></div>
               </li>
           </ul>
           <ng-template #no_data>
--- a/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html
+++ b/projects/common-map/src/fm-map/components/feature-list-cropfield/feature-list-cropfield.component.html
@ -5,7 +5,7 @@
    <h3>{{schemeItem.name}}</h3>
    <div *ngIf="features;let features">
        <div class="cropfields">
-          <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+          <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
          <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
        </div>
      </div>
--- a/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html
+++ b/projects/common-map/src/fm-map/components/feature-list-croppingscheme/feature-list-croppingscheme.component.html
@ -4,7 +4,7 @@
      <h3><i class="far fa-farm"></i>&nbsp;<span i18n>Farms</span></h3>
      <div *ngIf="features;let features">
      <div class="farms">
-        <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+        <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features"[ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
          <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
        </div>
      </div>      
--- a/projects/common-map/src/fm-map/components/feature-list/feature-list.component.html
+++ b/projects/common-map/src/fm-map/components/feature-list/feature-list.component.html
@ -1,6 +1,6 @@
 <div *ngIf="features;let features">
  <fm-back-button></fm-back-button>
-  <div class="row m-0 ps-3 pe-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
+  <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" [ngClass]="{'selected':isFeatureSelected(feature)}" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
    <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
  </div>
 </div>
--- a/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html
+++ b/projects/common-map/src/fm-map/components/layer-switcher/layer-switcher.component.html
@ -4,7 +4,7 @@
    <div class="card layers-card m-1">
      <div class="card-header">
        <span i18n>Layers</span>
-        <i class="float-end fas fa-times" (click)="close($event)"></i>
+        <i class="float-right fas fa-times" (click)="close($event)"></i>
      </div>
      <ul class="navbar-nav">
        <li class="nav-item py-0">
--- a/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html
+++ b/projects/common-map/src/fm-map/components/legend/histogram-details/histogram-details.component.html
@ -1,4 +1,4 @@
-<div class="row ps-3">
+<div class="row pl-3">
  <div class="col-8 nopadding"><span i18n>Average</span>:</div>
  <div class="col-4 pull-left nopadding">{{histogram.mean| number:'1.0-2'}}</div>
  <div class="col-8 nopadding"><span i18n>Standard deviation</span>:</div>
--- a/projects/common-map/src/fm-map/components/legend/statistics-details/statistics-details.component.html
+++ b/projects/common-map/src/fm-map/components/legend/statistics-details/statistics-details.component.html
@ -1,4 +1,4 @@
-<div class="row ps-3">
+<div class="row pl-3">
  <div class="col-8 nopadding"><span i18n>Data points</span>:</div>
  <div class="col-4 pull-left nopadding">{{statistics.populationCount}}</div>
  <div class="col-8 nopadding"><span i18n>Min</span>:</div>
--- a/projects/common-map/src/fm-map/components/map-search/map-search.component.html
+++ b/projects/common-map/src/fm-map/components/map-search/map-search.component.html
@ -7,11 +7,15 @@
  <div class="card p-2">
    <form class="form" (ngSubmit)="handleSearch($event)">
      <div class="input-group">
+        <div class="input-group-prepend">
          <button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
+        </div>
        <input #searchText class="form-control" type="text" (focus)="handleFocus($event)" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
+        <div class="input-group-append">
          <button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fal fa-search"></i></button>
          <button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick($event)"><i class="fas fa-times"></i></button>
        </div>
+      </div>
      <div class="options">
        <div class="form-check">
          <input class="form-check-input" (ngModelChange)="handleChangeEnableDateFilter($event)" [ngModel]="dateFilter" name="datefilterEnabled" type="checkbox" value="" id="filtercheck1">
--- a/projects/common-map/src/fm-map/components/map/map.component.scss
+++ b/projects/common-map/src/fm-map/components/map/map.component.scss
@ -195,7 +195,7 @@ timespan.menuVisible {
  width: 4rem;
  overflow: hidden;
  text-overflow: ellipsis;
-  color: $primary;
+  color: theme-color();
 }

 .shortcut-icon > .farm-icon {
--- a/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-geotiff/selected-item-geotiff.component.html
@ -20,7 +20,7 @@
      </div>
      <div class="card menu-card">
        <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="ms-1 me-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
          <ng-container *ngIf="itemTypeService.isLayer(item)">
            <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
            <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
--- a/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html
@ -19,7 +19,7 @@
      </div>
      <div class="card menu-card">
        <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="mt-1 me-1" (click)="handleOnEdit(item)" ><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" ><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
          <ng-container *ngIf="itemTypeService.isLayer(item)">
            <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)" ><i class="fas fa-layer-olus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
            <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)" ><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
--- a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
+++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html
@ -36,7 +36,7 @@
      </div>
      <div class="card menu-card">
        <ul class="p-0 mt-2">
-          <li *ngIf="item.isEditable"><a href="#" class="mt-1 me-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
+          <li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)"><i class="fal fa-pencil" aria-hidden="true" i18n-title title="Edit"></i>&nbsp;<span i18n>Edit</span></a></li>
          <ng-container *ngIf="itemTypeService.isLayer(item)">
            <li *ngIf="!getItemLayer(item,itemLayer.layerIndex)"><a   href="#" (click)="handleAddAsLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-plus" aria-hidden="true" i18n-title title="Add as layer"></i>&nbsp;<span i18n>Add as overlay</span></a></li>
            <li *ngIf="getItemLayer(item,itemLayer.layerIndex)"><a  href="#" (click)="handleRemoveLayer(item,itemLayer.layerIndex)"><i class="fas fa-layer-minus" aria-hidden="true" i18n-title title="Remove overlay"></i>&nbsp;<span i18n>Remove overlay</span></a></li>
--- a/projects/common/src/fm/components/app/app.component.html
+++ b/projects/common/src/fm/components/app/app.component.html
@ -3,9 +3,9 @@
    <div class="container-fluid">
      <div class="header-logo pageonly"><router-outlet name="header-logo"></router-outlet></div> 
      <button type="button" class="btn btn-outline-secondary apponly" (click)="handleToggleMenu($event)"><i class="fal fa-bars" aria-hidden="true"></i></button>
-      <router-outlet name="menu" class="ms-4"></router-outlet>
+      <router-outlet name="menu" class="ml-4"></router-outlet>
      <div class="collapse navbar-collapse pageonly">      
-        <a class="btn btn-primary ms-auto" role="button" [routerLink]="[ startPage == null?'/map':startPage]">
+        <a class="btn btn-primary ml-auto" role="button" [routerLink]="[ startPage == null?'/map':startPage]">
          <span *ngIf="(user|async)==null" i18n>Sign in</span>
          <span *ngIf="(user|async)!=null" i18n>To app</span>
        </a>
@ -21,7 +21,7 @@
      <div class="body">
        <div class="d-flex flex-row">
          <div class="mt-2 mb-2 flex-grow-1 logo" (click)="handleHome($event)"><router-outlet name="side-panel-logo"></router-outlet></div>
-          <div class="mt-2 mb-2 ms-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-times" aria-hidden="true"></i></button></div>
+          <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fal fa-times" aria-hidden="true"></i></button></div>
        </div>
        <div class="d-flex flex-column cards"> 
            <router-outlet name="side-panel-menu"></router-outlet>          
--- a/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html
+++ b/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.html
@ -4,7 +4,7 @@
      <div class="card-header  p-3 bg-primary text-white">
        <span *ngIf="uploadService.isUploading">Uploading files (<span>{{uploadService.totalProgress | number:'1.1-1'}}</span> %)</span>
        <span *ngIf="uploadService.isUploading == false">Uploaded <span>{{uploadService.files.length}}</span> files</span>
-        <span title="Cancel" class="fal fa-times float-end" (click)="uploadService.close()"></span><span title="Minimize" class="fal fa-chevron-down float-end me-2" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
+        <span title="Cancel" class="fal fa-times float-right" (click)="uploadService.close()"></span><span title="Minimize" class="fal fa-chevron-down float-right mr-2" (click)="uploadService.toggleMinimize()" [ngClass]="{'fa-chevron-down': uploadService.isMinimized == false, 'fa-chevron-up':uploadService.isMinimized}"></span>
      </div>
      <div [ngClass]="{'minimized': uploadService.isMinimized }">
        <div class="card-block p-3">
--- a/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.scss
+++ b/projects/common/src/fm/components/resumable-file-upload/resumable-file-upload.component.scss
@ -76,7 +76,7 @@ div.card-header span.fa {
  }

 .upload-file.busy > div > span.fa-times {
-  color: $danger;
+  color: theme-color("danger");
  width: 20px;
  display: inline-block;
  vertical-align: middle;
@ -94,7 +94,7 @@ div.card-header span.fa {
  }

  .upload-file > div.errormessage {
-    color: $danger;
+    color: theme-color("danger");
    display: none;
  }

--- a/projects/common/src/fm/components/side-panel/side-panel.component.html
+++ b/projects/common/src/fm/components/side-panel/side-panel.component.html
@ -1,5 +1,5 @@
 <div class="side-panel hidden" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left}" [ngStyle]="{'top':top}">
-  <div *ngIf="collapsable" class="arrow rounded-end p-2" (click)="handleToggleClick($event)">
+  <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
    <i class="fal fa-chevron-left" aria-hidden="true"></i>
  </div>
  <div  draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
--- a/projects/common/src/fm/components/timespan/timespan.component.html
+++ b/projects/common/src/fm/components/timespan/timespan.component.html
@ -5,7 +5,7 @@
   <div class="popover-anchor" [style.left.px] = "endPopoverLeft" [ngbPopover]="popoverContent" #popoverEnd="ngbPopover">&nbsp;</div>
   <div class="collapsed clearfix" [ngClass]="{'collapsed':collapsed}">
     <!-- <div class="clearfix">
-        <select class="form-control float-end" [value]="unitScale">
+        <select class="form-control float-right" [value]="unitScale">
            <option value="0">Millisecond</option>
            <option value="1">Second</option>
            <option value="2">Minute</option>
@ -21,9 +21,9 @@
        <canvas #timeLine (mousedown)="handleViewPanMouseDown($event)" (touchstart)="handleViewPanMouseDown($event)" (mousemove)="handleCanvasMouseMove($event)" (mouseleave)="handleCanvasMouseLeave($event)">
        </canvas>
        <div class="control-container"  [style.margin-left.px]="marginLeft" [style.height.px]="lineHeight" >
-            <div class="leftGrip rounded-start" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)"   (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
+            <div class="leftGrip rounded-left" (mousedown)="handleLeftGripMouseDown($event)" (touchstart)="handleLeftGripMouseDown($event)"   (mouseenter)="handleLeftGripMouseEnter($event)" (mouseleave)="handleLeftGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
            <div class="range" [style.width.px]="rangeWidth" (mousedown)="handleRangeGripMouseDown($event)" (touchstart)="handleRangeGripMouseDown($event)" (mouseenter)="handleRangeGripMouseEnter($event)"></div>
-            <div class="rightGrip rounded-end" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
+            <div class="rightGrip rounded-right" (mousedown)="handleRightGripMouseDown($event)" (touchstart)="handleRightGripMouseDown($event)" (mouseenter)="handleRightGripMouseEnter($event)" (mouseleave)="handleRightGripMouseLeave($event)"><i class="fal fa-ellipsis-v" aria-hidden="true"></i></div>
        </div>
     </div>
     <!-- <div>
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -63,7 +63,7 @@ const routes = [
    canActivate: [NavBarGuard],
    component: NotImplementedComponent
  },
-  { path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard],canActivate: [FullScreenGuard], },
+  { path: 'map', loadChildren: () => import('../../projects/common-map/src/public-api').then(m => m.AppCommonMapModule), canActivateChild: [AuthGuard],canActivate: [NavBarGuard], },
  { path: 'map3d', loadChildren: () => import('./map3d/map3d.module').then(m => m.Map3DModule), canActivateChild: [AuthGuard], canActivate: [FullScreenGuard] },
  {
    path: 'registerdevice/:deviceToken',
--- a/src/app/landingpage/landingpage.component.html
+++ b/src/app/landingpage/landingpage.component.html
@ -45,21 +45,21 @@
 </section>
 <section class="showcase">
    <div class="container-fluid p-0">
-        <div class="row g-0">
+        <div class="row no-gutters">
            <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image:url('/images/bg-showcase-1.jpg');"><span></span></div>
            <div class="col-lg-6 my-auto order-lg-1 showcase-text">
                <h2>Fully Responsive Design</h2>
                <p class="lead mb-0">When you use a theme created with Bootstrap, you know that the theme will look great on any device, whether it's a phone, tablet, or desktop the page will behave responsively!</p>
            </div>
        </div>
-        <div class="row g-0">
+        <div class="row no-gutters">
            <div class="col-lg-6 text-white showcase-img" style="background-image:url('/images/bg-showcase-2.jpg');"><span></span></div>
            <div class="col-lg-6 my-auto order-lg-1 showcase-text">
                <h2>Updated For Bootstrap 4</h2>
                <p class="lead mb-0">Newly improved, and full of great utility classes, Bootstrap 4 is leading the way in mobile responsive web development! All of the themes are now using Bootstrap 4!</p>
            </div>
        </div>
-        <div class="row g-0">
+        <div class="row no-gutters">
            <div class="col-lg-6 order-lg-2 text-white showcase-img" style="background-image:url('/images/bg-showcase-3.jpg');"><span></span></div>
            <div class="col-lg-6 my-auto order-lg-1 showcase-text">
                <h2>Easy to Use &amp;&nbsp;Customize</h2>
--- a/src/app/menu/menu.component.scss
+++ b/src/app/menu/menu.component.scss
@ -1,5 +1,3 @@
-@import "~bootstrap/scss/bootstrap.scss";
-
 .menu-card {
    padding-left:7px;
    padding-right:7px;
@ -29,7 +27,7 @@
    width: 4rem;
    overflow: hidden;
    text-overflow: ellipsis;
-    color: $primary;
+    color: theme-color();
  }
  
  .shortcut-icon > .farm-icon {