Revize 47c41706

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

• Modify HTML DOM

src/app/login/components/login.component.html

@@ -1 +1 @@
 <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 +26 @@
               <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 +34 @@
     </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>

src/assets/scss/_dashboard.scss

@@ -42 +42 @@
     }
   }
 
+  hr {
+    margin: 0;
+    border: 1px solid #619CE2;
+  }
+
   .p-accordion {
     .p-accordion-header {
       .p-accordion-header-link {
@@ -84 +89 @@
 
           @include hover-focus() {
             cursor: pointer;
-            color: #0B1226;
+            color: $white;
             background: #619CE2;
           }
         }

src/assets/scss/_login.scss

@@ -1 +1 @@
 .login {
-  height: 100%;
+  height: calc(100% - 45px);
   color: $white;
 
   .container {
@@ -41 +41 @@
     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 {

src/assets/scss/_navbar.scss

@@ -27 +27 @@
   .container {
     padding: 0;
     height: 100%;
+
+    @include media-breakpoint-down(md) {
+      max-width: 100%;
+    }
   }
 }
 
@@ -143 +147 @@
 }
 
 .navbar-collapse {
+  width: calc(100% + 20px);
   padding-bottom: 1px;
   justify-content: space-between;
   transition-duration: 0.2s;

src/assets/scss/_popup-form.scss

@@ -1 +1 @@
 .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 +20 @@
   }
 
   .p-dialog {
+    width: 100vw;
+
+    @include media-breakpoint-up(md) {
+      width: 50vw;
+    }
+
     .p-dialog-header, .p-dialog-content, .p-dialog-footer {
       background: $primary;
     }
@@ -23 +38 @@
     .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 +67 @@
     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;
   }
 }

src/assets/scss/_themes.scss

@@ -4 +4 @@
   background: $white;
 }
 
-.p-button {
+.p-button-primary {
   padding-right: $grid-gutter-width;
   padding-left: $grid-gutter-width;
   color: #F2F2F2;
@@ -17 +17 @@
       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;
+    }
+  }
 }

src/index.html

@@ -13 +13 @@
   <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>