commit 8ca45faf47b3e54ff7d223416d053ba9d3964576
Author: lmoucka@students.zcu.cz <AccessGitLm21895.199521>
Date:   Mon May 17 21:37:15 2021 +0200

    Re #8924 - Kódodování responzivního designu přihlášení a dashboardu
    + Add styles for responsive design

diff --git a/src/app/dashboard/components/dashboard.component.html b/src/app/dashboard/components/dashboard.component.html
index 3b1bcb6..921a0f0 100644
--- a/src/app/dashboard/components/dashboard.component.html
+++ b/src/app/dashboard/components/dashboard.component.html
@@ -5,8 +5,8 @@
       <p-accordionTab *ngFor="let unit of units">
         <p-header [className]="'dashboard-unit-wrapper'">
           <div [className]="'row dashboard-unit'">
-            <div class="col-md-6"><h3>{{ unit.unit.description}}</h3></div>
-            <div class="col-md-6 text-right">
+            <div class="col-sm-5 col-md-7 col-xl-9"><h3>{{ unit.unit.description}}</h3></div>
+            <div class="col-sm-7 col-md-5 col-xl-3 dashboard-unit-heading">
               <p-button label="Sensors graph" icon="pi pi-chart-line" [routerLink]="['/dashboard/unit', unit.unit.unitId]" [queryParams]="{unitDescription: unit.unit.description}"></p-button>
               <div class="dashboard-button-separator"></div>
               <p-button icon="pi pi-cog" styleClass="p-button-warning" (click)="showItems($event, unit.unit); menu.toggle($event)"></p-button>
diff --git a/src/app/dashboard/components/sensors/sensors.component.html b/src/app/dashboard/components/sensors/sensors.component.html
index 0b94d5b..2ffae2e 100644
--- a/src/app/dashboard/components/sensors/sensors.component.html
+++ b/src/app/dashboard/components/sensors/sensors.component.html
@@ -1,10 +1,10 @@
 <div class="row">
-  <div class="col-md-5">
+  <div class="col-sm-7 col-md-8 col-lg-9 col-xl-10">
     <div class="dashboard-sensor-heading-wrapper">
       <h4>{{ sensor.sensorName }}</h4>
     </div>
   </div>
-  <div class="col-md-7 text-right">
+  <div class="col-sm-5 col-md-4 col-lg-3 col-xl-2 dashboard-sensor-heading">
     <button pButton type="button" label="View graph" [routerLink]="['/dashboard/unit', unit.unitId, 'sensor', sensor.sensorId]" [queryParams]="{unitName: unit.description}" title="Sensor" icon="pi pi-chart-line"></button>
     <ng-container *ngIf="loggedUser?.userInfo?.rightsId == 0 || loggedUser?.userInfo?.rightsId == 1">
       <div class="dashboard-button-separator"></div>
diff --git a/src/app/shared/nav-bar/components/nav-bar.component.html b/src/app/shared/nav-bar/components/nav-bar.component.html
index 98e4fd1..23b6266 100644
--- a/src/app/shared/nav-bar/components/nav-bar.component.html
+++ b/src/app/shared/nav-bar/components/nav-bar.component.html
@@ -1,38 +1,39 @@
 <div class="navbar-wrapper container-fluid">
-  <div class="container">
-    <nav class="navbar navbar-expand-lg navbar-light">
+  <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 class="navbar-toggler-icon"></span>
+        <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">
-        <div class="navbar-collapse collapse">
-          <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" (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" (click)="insertUnitPopup()"><h2><i class="fas fa-folder-plus"></i>&nbsp;Add unit</h2></a>
-            </li>
-          </ul>
-          <a class="navbar-brand" href="/">
-            <h1>SensLog</h1>
-            <img class="navbar-logo" src="/assets/images/senslog-logo.svg" alt="Logo SensLog">
-          </a>
-          <ul class="navbar-nav right">
-            <li class="nav-item">
-              <h2 class="nav-link"><i class="fas fa-user"></i>&nbsp;<strong>{{loggedUser?.userInfo?.userName.toUpperCase()}}</strong></h2>
-            </li>
-            <li class="nav-item">
-              <a class='nav-link' [routerLink]="['/login']" (click)="logOut()"><h2><i class="fas fa-sign-out-alt"></i>&nbsp;Logout</h2></a>
-            </li>
-          </ul>
-        </div>
+        <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" (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" (click)="insertUnitPopup()"><h2><i class="fas fa-folder-plus"></i>&nbsp;Add unit</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><i class="fas fa-user"></i>&nbsp;<strong>{{loggedUser?.userInfo?.userName.toUpperCase()}}</strong></h2>
+          </li>
+          <li class="nav-item">
+            <a class='nav-link' [routerLink]="['/login']" (click)="logOut()"><h2><i class="fas fa-sign-out-alt"></i>&nbsp;Logout</h2></a>
+          </li>
+        </ul>
       </div>
     </nav>
-  </div>
 </div>
 
 <app-user-insert-popup *ngIf="showAddUserPopup" [(isVisible)]="showAddUserPopup"></app-user-insert-popup>
diff --git a/src/assets/scss/_dashboard.scss b/src/assets/scss/_dashboard.scss
index 2da4c19..27a4415 100644
--- a/src/assets/scss/_dashboard.scss
+++ b/src/assets/scss/_dashboard.scss
@@ -6,16 +6,40 @@
   align-items: center;
 }
 
+.dashboard-unit-heading {
+  text-align: right;
+
+  @include media-breakpoint-down(xs) {
+    text-align: center;
+  }
+}
+
 .dashboard {
   padding: $grid-gutter-width 0;
 
   h3 {
     margin: 0;
     font-weight: $font-weight-bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    @include media-breakpoint-down(sm) {
+      max-width: 260px;
+      font-size: 16px;
+    }
+
+    @include media-breakpoint-down(xs) {
+      margin-bottom: 10px;
+    }
   }
 
   h4 {
     margin: 0;
+
+    @include media-breakpoint-down(xs) {
+      margin-bottom: 10px;
+    }
   }
 
   .p-accordion {
@@ -80,6 +104,14 @@
   height: 100%
 }
 
+.dashboard-sensor-heading {
+  text-align: right;
+
+  @include media-breakpoint-down(xs) {
+    text-align: center;
+  }
+}
+
 .dashboard-button-separator {
   display: inline-flex;
   align-items: center;
diff --git a/src/assets/scss/_login.scss b/src/assets/scss/_login.scss
index fcc5c95..e71c23c 100644
--- a/src/assets/scss/_login.scss
+++ b/src/assets/scss/_login.scss
@@ -24,6 +24,10 @@
     background: $primary;
     border: 2px solid $primary;
 
+    @include media-breakpoint-down(xs) {
+      @include size(auto,350px);
+    }
+
     .form-control {
       border-color: #F2F2F2;
       background-color: #F2F2F2;
@@ -58,6 +62,10 @@
 
   img {
     width: 300px;
+
+    @include media-breakpoint-down(xs) {
+      width: 280px;
+    }
   }
 }
 
@@ -72,6 +80,7 @@
   position: absolute;
   bottom: 0;
   width: 100%;
+  margin-top: 50px;
   text-align: center;
   color: $white;
   background: $primary;
diff --git a/src/assets/scss/_navbar.scss b/src/assets/scss/_navbar.scss
index 713130d..2eb8a00 100644
--- a/src/assets/scss/_navbar.scss
+++ b/src/assets/scss/_navbar.scss
@@ -1,8 +1,10 @@
 .navbar-wrapper {
   height: 90px;
+  border-bottom: 1px solid $primary;
   background: #F2F2F2;
 
   h1 {
+    margin: 0;
     font-size: 0;
   }
 
@@ -11,16 +13,37 @@
     color: #0B1226;
     text-transform: uppercase;
     font-size: 18px;
+
+    @include media-breakpoint-down(lg) {
+      margin: 0 3px;
+      font-size: 15px;
+    }
+
+    @include media-breakpoint-down(md) {
+      font-size: 18px;
+    }
   }
+}
+
+.navbar {
+  position: relative;
+  height: 100%;
+  background: #F2F2F2;
 
-  .navbar {
-    background: #F2F2F2;
+  button {
+    outline: none;
+    border: 0;
   }
 }
 
 .navbar-nav {
   width: 40%;
 
+  @include media-breakpoint-down(md) {
+    width: 100%;
+    text-align: center;
+  }
+
   &.right {
     justify-content: flex-end;
   }
@@ -30,14 +53,129 @@
   }
 }
 
+.nav-link {
+  cursor: pointer;
+}
+
 .navbar-brand {
-  margin-right: 0;
+  margin: 0;
+
+  img {
+    width: 200px;
+
+    @include media-breakpoint-down(xs) {
+      width: 150px;
+    }
+  }
+
+  &.mobile {
+    @include media-breakpoint-up(lg) {
+      display: none;
+    }
+
+    @include media-breakpoint-down(md) {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%,-50%);
+    }
+  }
+  &.desktop {
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+  }
 }
 
-.navbar-logo {
-  width: 200px;
+.navbar-toggler {
+  position: absolute;
+  top: 50%;
+  right: $grid-gutter-width / 2;
+  width: 60px;
+  height: 45px;
+  z-index: 1;
+  transform: translateY(-50%);
+
+  span {
+    display: block;
+    position: absolute;
+    height: 5px;
+    width: 100%;
+    background: $primary;
+    border-radius: 9px;
+    opacity: 1;
+    left: 0;
+    transition: .25s ease-in-out;
+    z-index: 2;
+
+    &:nth-child(1) {
+      top: 0;
+    }
+    &:nth-child(2) {
+      top: 18px;
+    }
+    &:nth-child(3) {
+      top: 36px;
+    }
+  }
 }
 
-.nav-link {
-  cursor: pointer;
+.navbar-toggler.open {
+  span {
+    &:nth-child(1) {
+      top: 18px;
+      transform: rotate(135deg);
+    }
+    &:nth-child(2) {
+      opacity: 0;
+      left: -60px;
+    }
+    &:nth-child(3) {
+      top: 18px;
+      transform: rotate(-135deg);
+    }
+  }
+}
+
+.navbar-collapse {
+  padding-bottom: 1px;
+  justify-content: space-between;
+  transition-duration: 0.2s;
+
+  @include media-breakpoint-down(md) {
+    position: absolute;
+    left: -($grid-gutter-width / 2);
+    top: 90px;
+    width: calc(100% + 20px);
+    background: $primary;
+    z-index: 2;
+
+    .nav-link h2 {
+      margin: 12px 0;
+      color: #F2F2F2;
+    }
+  }
+}
+
+.nav-link-user {
+  display: flex;
+  align-items: center;
+  cursor: default;
+
+  @include media-breakpoint-down(md) {
+    justify-content: center;
+  }
+
+  h2 {
+    color: $secondary;
+
+    @include media-breakpoint-down(md) {
+      margin: 12px 0;
+      color: #F2F2F2;
+    }
+  }
+
+  @include hover_focus() {
+    color: $secondary;
+  }
 }
diff --git a/src/index.html b/src/index.html
index 3a46cfe..b5d6ec0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,5 +11,6 @@
 </head>
 <body>
   <app-root></app-root>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
 </body>
 </html>
