Fix Layout Issue

src/app/display-layer-progress.service.ts

@@ -26,11 +26,12 @@ export class DisplayLayerProgressService {
           }
           this.httpRequest = this.http.get(this.configService.config.octoprint.url + 'plugin/DisplayLayerProgress', httpHeaders).subscribe(
             (data: JSON) => {
-              observer.next({
-                current: data['layer']['current'] === '-' ? 0 : data['layer']['current'],
-                total: data['layer']['total'] === '-' ? 0 : data['layer']['total'],
-                fanSpeed: data['fanSpeed'] === '-' ? 0 : data['fanSpeed']
-              })
+              let fanSpeed =
+                observer.next({
+                  current: data['layer']['current'] === '-' ? 0 : data['layer']['current'],
+                  total: data['layer']['total'] === '-' ? 0 : data['layer']['total'],
+                  fanSpeed: data['fanSpeed'] === '-' ? 0 : data['fanSpeed'] === 'Off' ? 0 : data['fanSpeed']
+                })
             }, (error: HttpErrorResponse) => {
               console.error('Can\'t retrieve layer progress! ' + error.message);
             });

src/app/job-status/job-status.component.scss

@@ -1,7 +1,12 @@
+.job-info {
+    height: 27vw;
+    display: block;
+}
+
 .job-info__no-job {
     width: 100%;
     font-size: 6vw;
-    height: 21.5vh;
+    height: 26vh;
     margin-top: 19vh;
     text-align: center;
 }

src/app/job-status/job-status.service.ts

@@ -27,6 +27,7 @@ export class JobStatusService {
           this.httpRequest = this.http.get(this.configService.config.octoprint.url + 'job', httpHeaders).subscribe(
             (data: JSON) => {
               let job: Job = null;
+              console.log(data);
               if (data['state'] === 'Printing') {
                 job = {
                   filename: data['job']['file']['display'].replace('.gcode', ''),

src/app/layer-progress/layer-progress.component.scss

@@ -1,7 +1,7 @@
 .layer-indication {
     width: 100%;
     display: block;
-    margin-top: 3vh;
+    margin-top: 1vh;
     text-align: center;
     font-size: 4vw;
 }

src/app/printer-status/printer-status.component.scss

@@ -1,14 +1,20 @@
 .printer-status {
     width: 100%;
-    margin-top: 10.4vh;
+    margin-top: 3vh;
+    height: 23vh;
     display: block;
     table-layout: fixed;
     overflow: visible;
+
+    & tr {
+        vertical-align: middle;
+    }
 }
 
 .printer-status__value {
     text-align: right;
-    height: 16.5vh;
+    height: 23vh;
+    vertical-align: middle;
 
     & img {
         width: 10vw;
@@ -28,7 +34,7 @@
         padding-right: 7.5vw;
 
         & img {
-            width: 9.2vw;
+            width: 9.6vw;
         }
     }
 
@@ -38,7 +44,7 @@
 
         & img {
             padding-top: 1vh;
-            width: 11.5vw;
+            width: 10vw;
         }
     }
 }