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

Dodawanie nowych urządzeń

-
-
- - - Don't disclose personal info - - {{ message.value.length }} / 256 - -
-
- - - Don't disclose personal info - - {{ message.value.length }} / 256 - -
-
+
+

Dodawanie nowych urządzeń

+
+
+ + + Podaj nazwę czujnika (w przypadku ESPEasy name device) + + {{ nameDevice.value.length }} / 100 + +
+
+ + + Podaj przypisany do urządzenia stały adres IP + + {{ ipDevice.value.length }} / 15 + +
+
+ +
+
+
+
+

Usuwanie urządzeń

+
+
+ + + Podaj nazwę czujnika (w przypadku ESPEasy name device) + + {{ nameDeleteDevice.value.length }} / 100 + +
+
+ +
+
+
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; + } + } } } -