commit 47c41706a483907baa1b9f5dad3739fcbdfe5dd3
Author: lmoucka@students.zcu.cz <AccessGitLm21895.199521>
Date:   Fri May 21 15:27:23 2021 +0200

    Re #8970 - Kódování responzivity Popup formulářů
    + Add styles for responsive
    * Modify HTML DOM

diff --git a/src/app/login/components/login.component.html b/src/app/login/components/login.component.html
index f79281b..389d053 100644
--- a/src/app/login/components/login.component.html
+++ b/src/app/login/components/login.component.html
@@ -1,6 +1,6 @@
 <div class="login">
   <div class="container">
-    <div class="d-flex justify-content-center h-100">
+    <div class="login-form-wrapper">
       <div class="card">
         <div class="card-header">
           <div>
@@ -26,7 +26,7 @@
               <input type="password" formControlName="password" class="form-control" id="password" placeholder="Password"/>
             </div>
             <div class="form-group text-center mt-4">
-              <p-button id="loginButton" type="submit" label="Login"><i class="fas fa-sign-in-alt"></i></p-button>
+              <button pButton ttype="submit" label="Login" class="p-button-primary dark" id="loginButton"><i class="fas fa-sign-in-alt"></i></button>
             </div>
           </form>
         </div>
@@ -34,6 +34,3 @@
     </div>
   </div>
 </div>
-<div class="login-copyright">
-  <p>Copyright&nbsp;&copy;&nbsp;2021 <a href="https://www.senslog.org/" target="_blank">SensLog</a></p>
-</div>
diff --git a/src/assets/scss/_dashboard.scss b/src/assets/scss/_dashboard.scss
index 27a4415..a71107b 100644
--- a/src/assets/scss/_dashboard.scss
+++ b/src/assets/scss/_dashboard.scss
@@ -42,6 +42,11 @@
     }
   }
 
+  hr {
+    margin: 0;
+    border: 1px solid #619CE2;
+  }
+
   .p-accordion {
     .p-accordion-header {
       .p-accordion-header-link {
@@ -84,7 +89,7 @@
 
           @include hover-focus() {
             cursor: pointer;
-            color: #0B1226;
+            color: $white;
             background: #619CE2;
           }
         }
diff --git a/src/assets/scss/_login.scss b/src/assets/scss/_login.scss
index e71c23c..d66aa0c 100644
--- a/src/assets/scss/_login.scss
+++ b/src/assets/scss/_login.scss
@@ -1,5 +1,5 @@
 .login {
-  height: 100%;
+  height: calc(100% - 45px);
   color: $white;
 
   .container {
@@ -41,17 +41,13 @@
     color: #F2F2F2;
     background: $terciary;
   }
+}
 
-  .p-button {
-    border-color: #F2F2F2;
-    background: $terciary;
-
-    @include hover-focus() {
-      color: $terciary;
-      border-color: #F2F2F2;
-      background: #F2F2F2;
-    }
-  }
+.login-form-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
 }
 
 .login-logo {
diff --git a/src/assets/scss/_navbar.scss b/src/assets/scss/_navbar.scss
index 1fbabd8..85b0847 100644
--- a/src/assets/scss/_navbar.scss
+++ b/src/assets/scss/_navbar.scss
@@ -27,6 +27,10 @@
   .container {
     padding: 0;
     height: 100%;
+
+    @include media-breakpoint-down(md) {
+      max-width: 100%;
+    }
   }
 }
 
@@ -143,6 +147,7 @@
 }
 
 .navbar-collapse {
+  width: calc(100% + 20px);
   padding-bottom: 1px;
   justify-content: space-between;
   transition-duration: 0.2s;
diff --git a/src/assets/scss/_popup-form.scss b/src/assets/scss/_popup-form.scss
index c4e1566..3ec7572 100644
--- a/src/assets/scss/_popup-form.scss
+++ b/src/assets/scss/_popup-form.scss
@@ -1,4 +1,13 @@
 .popup-form {
+  &.confirm {
+    .p-dialog .p-dialog-footer .p-button {
+      @extend .p-button-primary;
+      @extend .dark;
+      @include media-breakpoint-down(sm) {
+        margin: 5px 10px;
+      }
+    }
+  }
 
   h3 {
     margin-top: $grid-gutter-width / 2;
@@ -11,6 +20,12 @@
   }
 
   .p-dialog {
+    width: 100vw;
+
+    @include media-breakpoint-up(md) {
+      width: 50vw;
+    }
+
     .p-dialog-header, .p-dialog-content, .p-dialog-footer {
       background: $primary;
     }
@@ -23,10 +38,21 @@
     .p-dialog-title {
       color: #F2F2F2;
       font-size: 28px;
+
+      @include media-breakpoint-down(xs) {
+        font-size: 24px;
+      }
     }
 
     .p-dialog-footer {
       border-color: #F2F2F2;
+      text-align: center;
+
+      @include media-breakpoint-down(xs) {
+        .p-button {
+          margin: 5px 0;
+        }
+      }
     }
   }
 
@@ -41,29 +67,51 @@
     border-color: $terciary;
     color: #F2F2F2;
     background: $terciary;
-  }
-
-  .p-button {
-    border-color: #F2F2F2;
-    background: $terciary;
 
-    @include hover-focus() {
-      color: $terciary;
-      border-color: #F2F2F2;
-      background: #F2F2F2;
+    @include media-breakpoint-down(xs) {
+      padding-left: 10px;
+      padding-right: 10px;
     }
   }
+}
 
-  .popup-sensors-wrapper {
-    justify-content: center;
-  }
+.popup-sensors-wrapper {
+  justify-content: center;
+}
+
+.popup-sensor {
+  margin: 0 10px;
+}
+
+.popup-buttons-wrapper {
+  display: flex;
+  justify-content: space-between;
 
-  .popup-sensor {
-    margin: 0 10px;
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
   }
 
-  .popup-buttons-wrapper {
+}
+
+.popup-buttons-group {
+  @include media-breakpoint-down(md) {
     display: flex;
     justify-content: space-between;
+    width: 100%;
+
+    &:first-child {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.popup-buttons {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  width: 100%;
+
+  @include media-breakpoint-down(xs) {
+    justify-content: space-between;
   }
 }
diff --git a/src/assets/scss/_themes.scss b/src/assets/scss/_themes.scss
index 6b06a84..9b8ac84 100644
--- a/src/assets/scss/_themes.scss
+++ b/src/assets/scss/_themes.scss
@@ -4,7 +4,7 @@ html,body{
   background: $white;
 }
 
-.p-button {
+.p-button-primary {
   padding-right: $grid-gutter-width;
   padding-left: $grid-gutter-width;
   color: #F2F2F2;
@@ -17,9 +17,46 @@ html,body{
       border-color: #2067BC;
       background: #2067BC;
     }
+
+    @include media-breakpoint-down(xs) {
+      padding-right: $grid-gutter-width / 2;
+      padding-left: $grid-gutter-width / 2;
+    }
   }
 
   i {
     margin-right: 5px;
   }
+
+  &.dark {
+    border-color: #F2F2F2;
+    background: $terciary;
+
+    &:enabled {
+      @include hover-focus() {
+        color: $terciary;
+        border-color: #F2F2F2;
+        background: #F2F2F2;
+      }
+    }
+  }
+}
+
+footer {
+  padding: 10px 0;
+  border-top: 1px solid $primary;
+  text-align: center;
+  background: #F2F2F2;
+
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: $primary;
+
+    @include hover-focus() {
+      color: $primary;
+    }
+  }
 }
diff --git a/src/index.html b/src/index.html
index b5d6ec0..38dd35f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,4 +13,5 @@
   <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>
+<footer><p>Copyright&nbsp;&copy;&nbsp;2021 <a href="https://www.senslog.org/" target="_blank">SensLog</a></p></footer>
 </html>
