Headline responsivity

src/app/dashboard/components/map/map.component.ts

@@ -69,7 +69,9 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
             new Tile({
               // extent: [-13884991, 2870341, -7455066, 6338219],
               source: new TileArcGISRest({
-                url: 'https://ags.cuzk.cz/arcgis/rest/services/ortofoto_wm/MapServer',
+                url: 'https://ags.cuzk.gov.cz/arcgis1/rest/services/ORTOFOTO_WM/MapServer',
+                // zkusit: https://ags.cuzk.gov.cz/arcgis1/rest/services/ORTOFOTO_WM/MapServer/WMTS
+                // nebo obyč: https://ags.cuzk.gov.cz/arcgis1/services/ORTOFOTO/MapServer/WMSServer
               }),
               visible: false,
               properties: {

src/app/sensor/components/sensor.component.scss

@@ -1,9 +1,3 @@
-::ng-deep .p-button {
-  background: #174B97 !important;
-  border-color: #174B97 !important;
-}
-
-
 ::ng-deep .top-button {
   width: 220px !important;
 }

src/app/shared/nav-bar/components/data-download/data-download-popup.component.html

@@ -62,8 +62,8 @@
   <p-footer>
     <div class="row">
       <div class="popup-buttons">
-        <button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>
-        <button pButton type="submit" label="Download" class="p-button-primary dark" icon="pi pi-download" (click)="processDownload()" [disabled]="inProgress"></button>
+        <button pButton type="button" label="Close" class="p-button-danger dark" icon="pi pi-times" (click)="close()"></button>
+        <button pButton type="submit" label="Download" class="p-button-success dark" icon="pi pi-download" (click)="processDownload()" [disabled]="inProgress"></button>
       </div>
     </div>
   </p-footer>

src/app/shared/nav-bar/components/nav-bar.component.html

@@ -1,42 +1,49 @@
-<div class="navbar-wrapper container-fluid">
+<div class="navbar-wrapper" id="navbar">
   <div class="container">
+
     <h1>SensLog</h1>
+
     <nav class="navbar navbar-expand-lg navbar-light">
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-        <span></span>
-        <span></span>
-        <span></span>
-      </button>
-      <a class="navbar-brand mobile" href="/">
-        <img src="/assets/images/senslog-logo.svg" alt="Logo SensLog">
-      </a>
-      <div class="collapse navbar-collapse" id="navbarNav">
-        <ul class="navbar-nav left">
-          <!--<li class="nav-item">
-            <a class="nav-link" [routerLink]="['/dashboard']"><h2>Dashboard</h2></a>
-          </li>-->
-          <li *ngIf="loggedUser?.userInfo?.rightsId == 0" class="nav-item">
-            <a class="nav-link" id="addUser" (click)="addUser()"><h2><i class="fas fa-user-plus"></i>&nbsp;Add user</h2></a>
-          </li>
-          <li *ngIf="loggedUser?.userInfo?.rightsId == 0 || loggedUser?.userInfo?.rightsId == 1" class="nav-item">
-            <a class="nav-link" id="addUnit" (click)="insertUnitPopup()"><h2><i class="fas fa-folder-plus"></i>&nbsp;Add unit</h2></a>
-          </li>
-          <li *ngIf="loggedUser?.userInfo?.rightsId == 0 || loggedUser?.userInfo?.rightsId == 1" class="nav-item">
-            <a class="nav-link" id="downloadData" (click)="downloadData()"><h2><i class="fas fa-download"></i>&nbsp;Data download</h2></a>
-          </li>
-        </ul>
-        <a class="navbar-brand desktop" href="/">
-          <img src="/assets/images/senslog-logo.svg" alt="Logo SensLog">
-        </a>
-        <ul class="navbar-nav right">
-          <li class="nav-item nav-link-user">
-            <h2 id="loggedUser"><i class="fas fa-user"></i>&nbsp;<strong>{{loggedUser?.userInfo?.userName.toUpperCase()}}</strong></h2>
-          </li>
-          <li class="nav-item">
-            <a class='nav-link' id="logOut" [routerLink]="['/login']" (click)="logOut()"><h2><i class="fas fa-sign-out-alt"></i>&nbsp;Logout</h2></a>
-          </li>
-        </ul>
-      </div>
+        <div>
+            <button class="navbar-toggler" type="button" (click)="toggleMenu()" [attr.aria-expanded]="isMenuOpen" aria-label="Toggle navigation">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+
+            <a class="navbar-brand logo" href="/">
+                <img src="/assets/images/senslog-logo.svg" alt="Logo SensLog">
+            </a>
+        </div>
+
+        <div class="collapse navbar-collapse" id="navbarNav" [class.show]="isMenuOpen">
+
+            <ul class="navbar-nav left">
+                <!--<li class="nav-item">
+                    <a class="nav-link" [routerLink]="['/dashboard']"><h2>Dashboard</h2></a>
+                </li>-->
+                <li *ngIf="loggedUser?.userInfo?.rightsId == 0" class="nav-item">
+                    <a class="nav-link" id="addUser" (click)="addUser()"><h2><i class="fas fa-user-plus"></i>&nbsp;Add user</h2></a>
+                </li>
+                <li *ngIf="loggedUser?.userInfo?.rightsId == 0 || loggedUser?.userInfo?.rightsId == 1" class="nav-item">
+                    <a class="nav-link" id="addUnit" (click)="insertUnitPopup()"><h2><i class="fas fa-folder-plus"></i>&nbsp;Add unit</h2></a>
+                </li>
+                <li *ngIf="loggedUser?.userInfo?.rightsId == 0 || loggedUser?.userInfo?.rightsId == 1" class="nav-item">
+                    <a class="nav-link" id="downloadData" (click)="downloadData()"><h2><i class="fas fa-download"></i>&nbsp;Data download</h2></a>
+                </li>
+            </ul>
+
+
+            <ul class="navbar-nav right">
+                <li class="nav-item nav-link-user">
+                    <h2 id="loggedUser"><i class="fas fa-user"></i>&nbsp;<strong>{{loggedUser?.userInfo?.userName.toUpperCase()}}</strong></h2>
+                </li>
+                <li class="nav-item">
+                    <a class='nav-link' id="logOut" [routerLink]="['/login']" (click)="logOut()"><h2><i class="fas fa-sign-out-alt"></i>&nbsp;Logout</h2></a>
+                </li>
+            </ul>
+
+        </div>
     </nav>
   </div>
 </div>

src/app/shared/nav-bar/components/nav-bar.component.scss

@@ -17,4 +17,16 @@
 ::ng-deep .input-group-prepend .input-group-text {
   width: 77px;
   min-height: 38px;
+}
+
+::ng-deep .navbar-wrapper {
+  height: auto !important;
+}
+
+::ng-deep .navbar-toggler {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: 30px;
+  right: 25px;
 }

src/app/shared/nav-bar/components/nav-bar.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
+import {Component, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, Renderer2} from '@angular/core';
 import {AuthService} from '../../../auth/services/auth.service';
 import {User} from '../../../auth/models/user';
 import {Subscription} from 'rxjs';
@@ -14,7 +14,7 @@ import { InsertSensor } from '../../api/endpoints/models/insert-sensor';
   styleUrls: ['./nav-bar.component.scss']
 })
 export class NavBarComponent implements OnInit, OnDestroy {
-
+  isMenuOpen = false;
   loggedUser: User;
   subscription: Subscription[] = [];
   showAddUserPopup = false;
@@ -28,7 +28,7 @@ export class NavBarComponent implements OnInit, OnDestroy {
 
   constructor(
     private authService: AuthService,
-    private sensorService: SensorsService
+    private sensorService: SensorsService,
   ) {
   }
 
@@ -37,6 +37,20 @@ export class NavBarComponent implements OnInit, OnDestroy {
   }
 
   /**
+   * Toggle menu visibility on mobile
+   */
+  toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
+    const el = document.getElementById('navbarNav');
+    const rect = el.getBoundingClientRect();
+
+    console.log(rect.width);   // Width including padding and borders
+    console.log(rect.height);  // Height including padding and borders
+    console.log(rect.top);     // Distance from top of viewport
+    console.log(rect.left);    // Distance from left of viewport
+  }
+
+  /**
    * Get user from state after logged
    */
   setUser(){

src/app/shared/nav-bar/components/unit-insert-popup/unit-insert-popup.component.html

@@ -125,12 +125,12 @@
   <p-footer>
     <div class="popup-buttons-wrapper">
       <div class="popup-buttons-group">
-        <button pButton type="button" label="Add sensor" class="p-button-success" (click)="addSensor()"></button>
+        <button pButton type="button" label="Close" class="p-button-danger dark" icon="pi pi-times" (click)="close()"></button>
         <button pButton type="button" *ngIf="sensors > 0"  label="Remove last sensor" class="p-button-danger" (click)="removeSensor()"></button>
       </div>
       <div class="popup-buttons-group">
-        <button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>
-        <button pButton type="submit" label="Save" class="p-button-primary dark" icon="pi pi-check" (click)="processInsertion()"></button>
+        <button pButton type="submit" label="Save" class="p-button-warning dark" icon="pi pi-check" (click)="processInsertion()"></button>
+        <button pButton type="button" label="Add sensor" class="p-button-success" (click)="addSensor()"></button>
       </div>
     </div>
   </p-footer>

src/app/shared/nav-bar/components/user-insert-popup/user-insert-popup.component.html

@@ -50,8 +50,8 @@
   <p-footer>
     <div class="row">
       <div class="popup-buttons">
-        <button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>
-        <button pButton type="submit" label="Save" class="p-button-primary dark" icon="pi pi-check" (click)="saveUser()"></button>
+        <button pButton type="button" label="Close" class="p-button-danger dark" icon="pi pi-times" (click)="close()"></button>
+        <button pButton type="submit" label="Save" class="p-button-success dark" icon="pi pi-check" (click)="saveUser()"></button>
       </div>
     </div>
   </p-footer>

src/app/unit/components/unit.component.scss

@@ -8,7 +8,7 @@
     color: black !important;    
 }
 
-::ng-deep .p-button {
+::ng-deep .p-button-primary {
     background: #174B97 !important;
     border-color: #174B97 !important;
 }
@@ -26,6 +26,8 @@
     border-top-right-radius: 6px;
     border-bottom-right-radius: 6px;
     border-left: none;
+    background: #174B97 !important;
+    border-color: #174B97 !important;
 }
 
 /* Add space to the right of every button except the last one */
@@ -35,4 +37,4 @@
 
 ::ng-deep .interval-alert {
     margin: 5px !important;
-}
+}

src/assets/scss/_navbar.scss

@@ -157,14 +157,14 @@
   @include media-breakpoint-down(md) {
     position: absolute;
     left: -(math.div($grid-gutter-width, 2));
-    top: 90px;
+    top: 60px;
     width: calc(100% + 20px);
-    background: $primary;
+    background: #F2F2F2;
     z-index: 2;
 
     .nav-link h2 {
       margin: 12px 0;
-      color: #F2F2F2;
+      color: #0B1226;
     }
   }
 }

src/assets/scss/_popup-form.scss

@@ -27,10 +27,14 @@
       width: 800px;
     }
 
-    .p-dialog-header, .p-dialog-content, .p-dialog-footer {
+    .p-dialog-header, .p-dialog-footer {
       background: $primary;
     }
 
+    .p-dialog-content {
+      background:   #F2F2F2;;
+    }
+
     .p-dialog-header {
       justify-content: center;
       border-color: #F2F2F2;
@@ -58,8 +62,14 @@
   }
 
   .form-control, select {
-    border-color: #F2F2F2;
+    border-color: $terciary;
+    border-width: 1px;
     background-color: #F2F2F2;
+
+    color: #6c757d;
+
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
   }
 
   .input-group-prepend span {
@@ -116,3 +126,10 @@
     justify-content: space-between;
   }
 }
+
+.input-group-text {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+  background: #174B97 !important;
+  border-color: #174B97 !important;
+}