From 17c0a90807e6e115ea75fce390d160273949a9be Mon Sep 17 00:00:00 2001
From: Dawid Kubicki <dawid.kubicki@hotmail.com>
Date: Sun, 13 Jan 2019 12:17:16 +0100
Subject: [PATCH] full layout added

---
 src/app/admin/admin.component.html            |  85 +++++--
 src/app/admin/admin.component.less            | 202 +++++++++++++++++
 .../status-list/status-list.component.less    | 213 ++++++++----------
 3 files changed, 356 insertions(+), 144 deletions(-)

diff --git a/src/app/admin/admin.component.html b/src/app/admin/admin.component.html
index a36984a..44359ad 100644
--- a/src/app/admin/admin.component.html
+++ b/src/app/admin/admin.component.html
@@ -1,25 +1,68 @@
 <div class="container">
   <div class="row">
-    <h3>Dodawanie nowych urządzeń</h3>
-    <form class="admin-form">
-      <div class="input-wrapper">
-        <mat-form-field class="admin-full-width">
-          <input matInput #message maxlength="256" placeholder="Message" />
-          <mat-hint align="start"
-            ><strong>Don't disclose personal info</strong>
-          </mat-hint>
-          <mat-hint align="end">{{ message.value.length }} / 256</mat-hint>
-        </mat-form-field>
-      </div>
-      <div class="input-wrapper">
-        <mat-form-field class="admin-full-width">
-          <input matInput #message maxlength="256" placeholder="Message" />
-          <mat-hint align="start"
-            ><strong>Don't disclose personal info</strong>
-          </mat-hint>
-          <mat-hint align="end">{{ message.value.length }} / 256</mat-hint>
-        </mat-form-field>
-      </div>
-    </form>
+    <div class="col-md-6">
+      <h3>Dodawanie nowych urządzeń</h3>
+      <form class="admin-form">
+        <div class="input-wrapper">
+          <mat-form-field class="admin-full-width">
+            <input
+              matInput
+              #nameDevice
+              maxlength="256"
+              placeholder="Nazwa urządzenia"
+            />
+            <mat-hint align="start"
+              ><strong
+                >Podaj nazwę czujnika (w przypadku ESPEasy name device)</strong
+              >
+            </mat-hint>
+            <mat-hint align="end">{{ nameDevice.value.length }} / 100</mat-hint>
+          </mat-form-field>
+        </div>
+        <div class="input-wrapper">
+          <mat-form-field class="admin-full-width">
+            <input
+              matInput
+              #ipDevice
+              maxlength="256"
+              placeholder="Adres IP urządzenia"
+            />
+            <mat-hint align="start"
+              ><strong>Podaj przypisany do urządzenia stały adres IP</strong>
+            </mat-hint>
+            <mat-hint align="end">{{ ipDevice.value.length }} / 15</mat-hint>
+          </mat-form-field>
+        </div>
+        <div class="example-button-row">
+          <button mat-flat-button color="primary">Dodaj urządzenie</button>
+        </div>
+      </form>
+    </div>
+    <div class="col-md-6">
+      <h3>Usuwanie urządzeń</h3>
+      <form class="admin-form">
+        <div class="input-wrapper">
+          <mat-form-field class="admin-full-width">
+            <input
+              matInput
+              #nameDeleteDevice
+              maxlength="256"
+              placeholder="Nazwa urządzenia"
+            />
+            <mat-hint align="start"
+              ><strong
+                >Podaj nazwę czujnika (w przypadku ESPEasy name device)</strong
+              >
+            </mat-hint>
+            <mat-hint align="end"
+              >{{ nameDeleteDevice.value.length }} / 100</mat-hint
+            >
+          </mat-form-field>
+        </div>
+        <div class="example-button-row">
+          <button mat-flat-button color="accent">Usuń urządzenie</button>
+        </div>
+      </form>
+    </div>
   </div>
 </div>
diff --git a/src/app/admin/admin.component.less b/src/app/admin/admin.component.less
index 17537c3..99ab32f 100644
--- a/src/app/admin/admin.component.less
+++ b/src/app/admin/admin.component.less
@@ -16,4 +16,206 @@
       }
     }
   }
+  .example-button-row button,
+  .example-button-row a {
+    margin-right: 8px;
+  }
+}
+
+table {
+  width: 100%;
+}
+
+.machine-row {
+  margin-top: 60px;
+
+  .machine-text {
+    color: #000000;
+    font-size: 36px;
+    font-weight: 300;
+    letter-spacing: 2px;
+  }
+
+  .machine-status {
+    color: #000000;
+    font-size: 23px;
+    font-weight: 300;
+    margin-left: 30px;
+    margin-top: 50px;
+    letter-spacing: 0.5px;
+
+    img {
+      width: 15px;
+      margin-top: -3px;
+      margin-left: 10px;
+    }
+
+    span {
+      font-size: 24px;
+      margin-left: 15px;
+      top: -10px;
+    }
+  }
+  .machine-status2 {
+    color: #000000;
+    font-size: 23px;
+    font-weight: 300;
+    margin-left: 30px;
+    margin-top: 10px;
+    letter-spacing: 0.5px;
+
+    img {
+      width: 15px;
+      margin-top: -3px;
+      margin-left: 10px;
+    }
+
+    span {
+      font-size: 24px;
+      margin-left: 15px;
+      top: -10px;
+    }
+  }
+
+  .machine-image {
+    width: 230px;
+    margin-top: 0px;
+    margin-left: 50px;
+  }
+}
+
+.stat-wrapper {
+  margin-left: 30px;
+  color: #000000;
+  font-size: 23px;
+  font-weight: 300;
+
+  .stat-text {
+    color: #000000;
+    font-size: 36px;
+    font-weight: 300;
+    letter-spacing: 2px;
+    margin-bottom: 30px;
+  }
+}
+
+.button-use {
+  margin-left: 30px;
+  margin-top: 20px;
+}
+
+.boldMe {
+  font-weight: 400;
+}
+
+.lists {
+  text-align: center;
+  font-size: 20px;
+}
+
+.machine-list {
+  margin-right: 0px;
+  margin-top: 60px;
+  text-align: center;
+}
+
+.row-list {
+  width: 700px;
+  display: inline-block;
+}
+
+.room-button {
+  border-radius: 12px;
+  background-color: white;
+  border: solid 1px red;
+  color: red;
+  padding: 10px;
+  width: 120px;
+  margin-bottom: 20px;
+}
+
+.room-button:hover {
+  -webkit-box-shadow: inset 0 0 0 2px #24a1fc;
+  box-shadow: inset 0 0 0 2px #24a1fc;
+}
+.room-button:active {
+  -webkit-box-shadow: inset 0 0 0 2px #24a1fc;
+  box-shadow: inset 0 0 0 2px #24a1fc;
+}
+.room-button:focus {
+  -webkit-box-shadow: inset 0 0 0 2px #24a1fc;
+  box-shadow: inset 0 0 0 2px #24a1fc;
+}
+@media only screen and (max-width: 1000px) {
+  .machine-image {
+    margin-left: 50px;
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+  .machine-row {
+    .machine-text {
+      font-size: 30px;
+    }
+  }
+  .stat-wrapper {
+    .stat-text {
+      font-size: 30px;
+    }
+  }
+}
+
+.col-xs-3 {
+  margin-left: -5px;
+}
+
+@media only screen and (max-width: 700px) {
+  .row-list {
+    width: 100%;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .room-button {
+    width: 100px;
+    font-size: 12px;
+    padding: 3px;
+  }
+  .machine-list {
+    margin-top: 60px;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  table {
+    width: 50%;
+  }
+
+  .room-button {
+    width: 80px;
+    font-size: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .machine-row {
+    .machine-text {
+      font-size: 24px;
+    }
+  }
+  .stat-wrapper {
+    .stat-text {
+      font-size: 20px;
+      font-weight: 600;
+    }
+  }
+
+  .stat-wrapper {
+    .list-group {
+      span {
+        font-size: 18px;
+      }
+    }
+  }
 }
diff --git a/src/app/status-list/status-list.component.less b/src/app/status-list/status-list.component.less
index 74f3107..6c551ce 100644
--- a/src/app/status-list/status-list.component.less
+++ b/src/app/status-list/status-list.component.less
@@ -1,27 +1,18 @@
-table{
-  width:100%;
+table {
+  width: 100%;
 }
 
-
-
-
-
-.machine-row{
+.machine-row {
   margin-top: 60px;
 
-  .machine-text{
-
+  .machine-text {
     color: #000000;
     font-size: 36px;
     font-weight: 300;
     letter-spacing: 2px;
-
-    
   }
 
-
-
-  .machine-status{
+  .machine-status {
     color: #000000;
     font-size: 23px;
     font-weight: 300;
@@ -29,19 +20,19 @@ table{
     margin-top: 50px;
     letter-spacing: 0.5px;
 
-    img{
+    img {
       width: 15px;
       margin-top: -3px;
       margin-left: 10px;
     }
 
-    span{
+    span {
       font-size: 24px;
       margin-left: 15px;
       top: -10px;
     }
   }
-  .machine-status2{
+  .machine-status2 {
     color: #000000;
     font-size: 23px;
     font-weight: 300;
@@ -49,182 +40,158 @@ table{
     margin-top: 10px;
     letter-spacing: 0.5px;
 
-    img{
+    img {
       width: 15px;
       margin-top: -3px;
       margin-left: 10px;
     }
 
-    span{
+    span {
       font-size: 24px;
       margin-left: 15px;
       top: -10px;
     }
   }
 
-
-  .machine-image{
+  .machine-image {
     width: 230px;
     margin-top: 0px;
-    margin-left:50px;
-    
+    margin-left: 50px;
   }
 }
 
+.stat-wrapper {
+  margin-left: 30px;
+  color: #000000;
+  font-size: 23px;
+  font-weight: 300;
 
-
-  .stat-wrapper {
-
-    margin-left: 30px;
+  .stat-text {
     color: #000000;
-    font-size: 23px;
+    font-size: 36px;
     font-weight: 300;
-
-    .stat-text {
-      color: #000000;
-      font-size: 36px;
-      font-weight: 300;
-      letter-spacing: 2px;
-      margin-bottom: 30px;
-    }
-
-
-  
+    letter-spacing: 2px;
+    margin-bottom: 30px;
   }
+}
 
-
-
-.button-use{
+.button-use {
   margin-left: 30px;
   margin-top: 20px;
 }
 
-.boldMe{
+.boldMe {
   font-weight: 400;
 }
 
-.lists{
+.lists {
   text-align: center;
-  font-size:20px;
-  
+  font-size: 20px;
 }
 
-.machine-list{
-  margin-right:0px;
-  margin-top:60px;
+.machine-list {
+  margin-right: 0px;
+  margin-top: 60px;
   text-align: center;
 }
 
-.row-list{
-  width:700px;
+.row-list {
+  width: 700px;
   display: inline-block;
-  
 }
 
-
-.room-button{
+.room-button {
   border-radius: 12px;
   background-color: white;
   border: solid 1px red;
   color: red;
-  padding:10px;
-  width:120px;
-  margin-bottom:20px;
-  
+  padding: 10px;
+  width: 120px;
+  margin-bottom: 20px;
 }
 
-
-.room-button:hover{
-      -webkit-box-shadow:inset 0 0 0 2px #24a1fc;
-      box-shadow:inset 0 0 0 2px #24a1fc;
-    }
-    .room-button:active {
-      -webkit-box-shadow:inset 0 0 0 2px #24a1fc;
-      box-shadow:inset 0 0 0 2px #24a1fc;
-    }
-    .room-button:focus {
-      -webkit-box-shadow:inset 0 0 0 2px #24a1fc;
-      box-shadow:inset 0 0 0 2px #24a1fc;
-    }
+.room-button:hover {
+  -webkit-box-shadow: inset 0 0 0 2px #24a1fc;
+  box-shadow: inset 0 0 0 2px #24a1fc;
+}
+.room-button:active {
+  -webkit-box-shadow: inset 0 0 0 2px #24a1fc;
+  box-shadow: inset 0 0 0 2px #24a1fc;
+}
+.room-button:focus {
+  -webkit-box-shadow: inset 0 0 0 2px #24a1fc;
+  box-shadow: inset 0 0 0 2px #24a1fc;
+}
 @media only screen and (max-width: 1000px) {
-  .machine-image{
-  margin-left:50px;
-  display:none;
+  .machine-image {
+    margin-left: 50px;
+    display: none;
   }
-  
 }
 
 @media only screen and (max-width: 800px) {
-  .machine-row{
-  .machine-text{
-  font-size:30px;
+  .machine-row {
+    .machine-text {
+      font-size: 30px;
+    }
   }
+  .stat-wrapper {
+    .stat-text {
+      font-size: 30px;
+    }
   }
-  .stat-wrapper{
-  .stat-text{
-  font-size:30px;
-  }
-  }
-  
 }
 
-.col-xs-3{
-  margin-left:-5px;
+.col-xs-3 {
+  margin-left: -5px;
 }
 
-
 @media only screen and (max-width: 700px) {
-  .row-list{
-  width:100%;
+  .row-list {
+    width: 100%;
   }
- 
-  
 }
 
 @media only screen and (max-width: 600px) {
-  .room-button{
-  width:100px;
-  font-size:12px;
-  padding:3px;
- 
+  .room-button {
+    width: 100px;
+    font-size: 12px;
+    padding: 3px;
   }
-  .machine-list{
-  margin-top:60px;
+  .machine-list {
+    margin-top: 60px;
   }
 }
 
-
 @media only screen and (max-width: 500px) {
-  table{
-  width:50%;
+  table {
+    width: 50%;
   }
 
-  .room-button{
-  width:80px;
-  font-size:10px;
-  padding-top:10px;
-  padding-bottom:10px;
+  .room-button {
+    width: 80px;
+    font-size: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
   }
 
-    .machine-row{
-  .machine-text{
-  font-size:24px;
-  }
-  }
-  .stat-wrapper{
-  .stat-text{
-  font-size:20px;
-  font-weight:600;
+  .machine-row {
+    .machine-text {
+      font-size: 24px;
+    }
   }
+  .stat-wrapper {
+    .stat-text {
+      font-size: 20px;
+      font-weight: 600;
+    }
   }
 
-
-  .stat-wrapper{
-  .list-group{
-  span{
-  font-size:18px;
-  }
-  }
+  .stat-wrapper {
+    .list-group {
+      span {
+        font-size: 18px;
+      }
+    }
   }
 }
-