commit a28c9b6eb70ff33919ee1fb9fe78bf35239d5222
Author: lmoucka@students.zcu.cz <AccessGitLm21895.199521>
Date:   Sat May 22 01:34:23 2021 +0200

    Re #8972 - Ladění frontendu
    + Add styles for responsive charts
    * Improve charts layout

diff --git a/src/app/dashboard/components/dashboard.component.ts b/src/app/dashboard/components/dashboard.component.ts
index f0a260b..4a2121a 100644
--- a/src/app/dashboard/components/dashboard.component.ts
+++ b/src/app/dashboard/components/dashboard.component.ts
@@ -123,7 +123,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
   deleteUnit($event: any, unit: Unit) {
     this.confirmationService.confirm({
       message: 'Do you want to delete this unit?',
-      header: 'Delete Unit Confirmation',
+      header: 'Delete unit confirmation',
       icon: 'pi pi-info-circle',
       accept: () => {
         this.processUnitDeletion(unit);
diff --git a/src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html b/src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html
index 2c1f0be..e04f980 100644
--- a/src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html
+++ b/src/app/dashboard/components/sensor-insert-popup/sensor-insert-popup.component.html
@@ -1,6 +1,5 @@
 <p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Add sensor to unit&nbsp;&ndash;&nbsp;{{unit?.unitId}}"
           [baseZIndex]="10000" (onShow)="clearFormArray()" [className]="'popup-form'">
-
   <form [formGroup]="insertForm">
   <div class="input-group form-group popup-sensors-wrapper">
     <div formArrayName="sensors" *ngFor="let item of insertForm.get('sensors')['controls']; let i = index;">
diff --git a/src/app/dashboard/components/sensor-popup/sensor-popup.component.html b/src/app/dashboard/components/sensor-popup/sensor-popup.component.html
index a844140..cab012e 100644
--- a/src/app/dashboard/components/sensor-popup/sensor-popup.component.html
+++ b/src/app/dashboard/components/sensor-popup/sensor-popup.component.html
@@ -1,15 +1,15 @@
-<p-dialog [visible]="isVisible" [closable]="false" [modal]="true" [draggable]="false" header="Sensor {{sensor?.sensorId}} editation!" [style]="{width: '50vw'}" [baseZIndex]="10000">
+<p-dialog [visible]="isVisible" [closable]="false" [modal]="true" [draggable]="false" header="Sensor {{sensor?.sensorId}} editation" [baseZIndex]="10000" [className]="'popup-form'">
   <form [formGroup]="insertForm">
-      <div class="input-group form-group">
+      <div class="input-group form-group popup-sensors-wrapper">
         <div class="input-group-prepend">
-          <span class="input-group-text">Sensor name</span>
+          <span class="input-group-text"><i class="fas fa-file-signature"></i></span>
         </div>
         <input type="text" formControlName="sensorName" class="form-control" id="sensorName"
                placeholder="{{sensor.sensorName}}"/>
       </div>
       <div class="input-group form-group">
         <div class="input-group-prepend">
-          <span class="input-group-text">Sensor type</span>
+          <span class="input-group-text"><i class="fas fa-file-signature"></i></span>
         </div>
         <select formControlName="sensorType" id="sensorType">
           <option *ngFor="let sensorType of sensorTypes; let i = index" [value]="sensorTypes[i].sensorType">
@@ -19,7 +19,7 @@
       </div>
       <div class="input-group form-group">
         <div class="input-group-prepend">
-          <span class="input-group-text">Sensor phenomen</span>
+          <span class="input-group-text"><i class="fas fa-tint"></i></span>
         </div>
         <select formControlName="phenomenon" id="phenomenon">
           <ng-container *ngFor="let phenomenon of phenomenons; let i = index">
@@ -32,8 +32,8 @@
   </form>
   <p-footer>
       <div>
-        <p-button icon="pi pi-times" (click)="close()" label="Close" class="pr-2"></p-button>
-        <p-button icon="pi pi-check" (click)="processSensorEdition()" type="submit" label="Save" class="pr-2"></p-button>
+        <button pButton label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>
+        <button pButton label="Save" class="p-button-primary dark" icon="pi pi-check" (click)="processSensorEdition()" type="submit"></button>
       </div>
   </p-footer>
 </p-dialog>
diff --git a/src/app/dashboard/components/sensors/sensors.component.ts b/src/app/dashboard/components/sensors/sensors.component.ts
index cd5fa93..38fc425 100644
--- a/src/app/dashboard/components/sensors/sensors.component.ts
+++ b/src/app/dashboard/components/sensors/sensors.component.ts
@@ -71,7 +71,7 @@ export class SensorsComponent implements OnInit {
   deleteSensor($event: any, sensor: Sensor) {
     this.confirmationService.confirm({
       message: 'Do you want to delete this sensor?',
-      header: 'Delete Sensor Confirmation',
+      header: 'Delete sensor confirmation',
       icon: 'pi pi-info-circle',
       accept: () => {
         this.processSensorDeletion(sensor);
diff --git a/src/app/dashboard/components/unit-popup/unit-popup.component.html b/src/app/dashboard/components/unit-popup/unit-popup.component.html
index 7af541e..8deff39 100644
--- a/src/app/dashboard/components/unit-popup/unit-popup.component.html
+++ b/src/app/dashboard/components/unit-popup/unit-popup.component.html
@@ -1,5 +1,4 @@
 <p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Edit unit - {{ unit?.unitId}}" [baseZIndex]="10000" [className]="'popup-form'">
-
   <form [formGroup]="insertForm">
     <div class="input-group form-group">
       <div class="input-group-prepend">
@@ -8,7 +7,6 @@
       <input type="text" formControlName="unitDescription" class="form-control" id="unitDescription" placeholder="{{unit?.description}}"/>
     </div>
   </form>
-
   <p-footer>
     <div class="pupup-buttons">
       <button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>
diff --git a/src/app/sensor/components/sensor.component.html b/src/app/sensor/components/sensor.component.html
index a9e6bc3..dcf04cb 100644
--- a/src/app/sensor/components/sensor.component.html
+++ b/src/app/sensor/components/sensor.component.html
@@ -25,34 +25,28 @@
       </div>
     </div>
     <div class="graph-range-dates">
-      <div>
-        <div class="input-group form-group">
-          <div class="input-group-prepend">
-            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
-          </div>
-          <p-calendar id="from" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
         </div>
+        <p-calendar id="from" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
       </div>
-      <div class="graph-range-dates-separator"></div>
-      <div>
-        <div class="input-group form-group">
-          <div class="input-group-prepend">
-            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
-          </div>
-          <p-calendar id="to" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
-        </div>
+      <div class="graph-range-dates-separator">
+        <div></div>
       </div>
-      <div>
-        <div class="input-group form-group">
-          <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
         </div>
+        <p-calendar id="to" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
       </div>
+      <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
       <div>
-        <p-button *ngIf="dateChanged" label="Get data" icon="pi pi-chart-line" styleClass="p-button" (click)="showGraph()"></p-button>
+        <button pButton label="Load data" *ngIf="dateChanged" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
       </div>
     </div>
   </div>
-  <div class="row">
+  <div class="graph-view-wrapper">
     <div id="view"></div>
   </div>
 </div>
diff --git a/src/app/unit/components/unit.component.html b/src/app/unit/components/unit.component.html
index 7c947ac..f5d520c 100644
--- a/src/app/unit/components/unit.component.html
+++ b/src/app/unit/components/unit.component.html
@@ -1,7 +1,7 @@
 <app-nav-bar></app-nav-bar>
 
 <div class="container graph">
-  <div class="row graph-information">
+  <div class="graph-information">
     <div class="graph-desc">
       <div>
         <span class="graph-attr-heading">Unit description: </span>
@@ -9,53 +9,47 @@
       </div>
     </div>
     <div class="graph-range-dates">
-      <div class="col-xs-12">
-        <div class="input-group form-group">
-          <div class="input-group-prepend">
-            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
-          </div>
-          <p-calendar id="from" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
         </div>
+        <p-calendar id="from" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="from" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
       </div>
-      <div class="graph-range-dates-separator"></div>
-      <div class="col-xs-12">
-        <div class="input-group form-group">
-          <div class="input-group-prepend">
-            <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
-          </div>
-          <p-calendar id="to" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
-        </div>
+      <div class="graph-range-dates-separator">
+        <div></div>
       </div>
-      <div class="">
-        <div class="input-group form-group">
-          <div class="input-group form-group">
-            <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
-          </div>
+      <div class="input-group form-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text text-color-date background-date-color"><i class="fa fa-calendar-alt" aria-hidden="false"></i></span>
         </div>
+        <p-calendar id="to" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" [(ngModel)]="to" [showTime]="true" (onSelect)="aggregationShow()" [maxDate]="today" showButtonBar="true"></p-calendar>
       </div>
+      <p-listbox *ngIf="showAggregation" [options]="aggregationFunction" [(ngModel)]="selectedAggregationFunction" optionLabel="name" optionValue="code"></p-listbox>
       <div>
-        <button pButton type="button" *ngIf="dateChanged" label="Load data" class="p-button-primary" icon="pi pi-check" (click)="showGraph()"></button>
+        <button pButton type="button" *ngIf="dateChanged" label="Load data" class="p-button-primary" icon="pi pi-chart-line" (click)="showGraph()"></button>
       </div>
     </div>
   </div>
-  <ng-container *ngFor="let group of sensorGroups">
-    <div class="row">
-      <div class="graph-group-heading">
-        Group of
-        <ng-container *ngFor="let sensorType of sensorTypes">
-          <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">
-            {{sensorType.sensorType}}
+  <div class="graph-view-wrapper">
+    <ng-container *ngFor="let group of sensorGroups">
+      <div class="row">
+        <div class="graph-group-heading">
+          Group of
+          <ng-container *ngFor="let sensorType of sensorTypes">
+            <ng-container *ngIf="sensorType.sensorId.toString().slice(0, 5) === group">
+              {{sensorType.sensorType}}
+            </ng-container>
           </ng-container>
-        </ng-container>
-        sensors:
-      </div>
-      <ng-container *ngFor="let sensor of sensors">
+          sensors:
+        </div>
+        <ng-container *ngFor="let sensor of sensors">
           <div *ngIf="sensor.sensorId.toString().slice(0, 5) === group" class="p-field-checkbox">
             <p-checkbox [id]="sensor.sensorId" name="{{group}}" [value]="sensor.sensorId.toString()" [(ngModel)]="selectedSensors" [inputId]="sensor.sensorId.toString()" (onChange)="addSensorToGraph(sensor.sensorId.toString(), $event)"></p-checkbox>
             <label>{{sensor.sensorName}}</label>
           </div>
-      </ng-container>
-    </div>
-    <div id="vega_container_{{group}}"></div>
-  </ng-container>
+        </ng-container>
+      </div>
+      <div id="vega_container_{{group}}"></div>
+    </ng-container>
+  </div>
 </div>
diff --git a/src/assets/scss/_graph.scss b/src/assets/scss/_graph.scss
index 700a632..bcf4db1 100644
--- a/src/assets/scss/_graph.scss
+++ b/src/assets/scss/_graph.scss
@@ -10,6 +10,12 @@
 
   .input-group {
     margin: 0;
+    width: auto;
+
+    @include media-breakpoint-down(sm) {
+      justify-content: center;
+      width: 100%;
+    }
   }
 
   .input-group-text {
@@ -34,6 +40,10 @@
     border-color: $primary;
     background: $white;
 
+    @include media-breakpoint-down(md) {
+      margin-top: 10px;
+    }
+
     .p-listbox-item {
       color: #0B1226;
 
@@ -79,7 +89,11 @@
 .graph-desc {
   width: 100%;
   padding: 10px;
-  font-size: $h3-font-size;
+  font-size: 18px;
+
+  @include media-breakpoint-down(xs) {
+    font-size: 16px;
+  }
 }
 
 .graph-attr-heading {
@@ -91,18 +105,45 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  flex-wrap: wrap;
   margin-top: $grid-gutter-width;
   margin-bottom: $grid-gutter-width;
   padding: 10px $grid-gutter-width;
+
+  @include media-breakpoint-down(md) {
+    justify-content: center;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
 }
 
 .graph-range-dates-separator {
-  @include size(10px,2px);
-  margin: 0 10px;
-  background: #0B1226;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 42px;
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+  }
+
+  div {
+    @include size(15px,2px);
+    margin: 0 10px;
+    background: #0B1226;
+  }
 }
 
 .graph-group-heading {
   font-weight: $font-weight-bold;
   line-height: 2;
 }
+
+.graph-view-wrapper {
+  padding-left: $grid-gutter-width / 2;
+  padding-right: $grid-gutter-width / 2;
+
+  @include media-breakpoint-down(lg) {
+    overflow-x: scroll;
+  }
+}
diff --git a/src/assets/scss/_popup-form.scss b/src/assets/scss/_popup-form.scss
index 3ec7572..c4d1f9a 100644
--- a/src/assets/scss/_popup-form.scss
+++ b/src/assets/scss/_popup-form.scss
@@ -20,10 +20,10 @@
   }
 
   .p-dialog {
-    width: 100vw;
+    width: 100%;
 
     @include media-breakpoint-up(md) {
-      width: 50vw;
+      width: 800px;
     }
 
     .p-dialog-header, .p-dialog-content, .p-dialog-footer {
