From 91118f1766aaaebcd50b573387227e615c50251d Mon Sep 17 00:00:00 2001
From: Norwin Roosen <github@nroo.de>
Date: Mon, 18 Feb 2019 15:59:36 +0100
Subject: [PATCH] optimize OtaWizard for screen space

---
 src/app/app.scss                     | 19 +++++++++++++++++++
 src/pages/ota-wizard/ota-wizard.html |  2 +-
 src/pages/ota-wizard/ota-wizard.scss |  8 ++++----
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/app/app.scss b/src/app/app.scss
index 425efc2..62699ea 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -33,3 +33,22 @@
 ion-content {
   contain: size style;
 }
+
+// adds classes hidden-* for each responsive size that hides elements for this screen size only.
+$breakpoints-keys: map-keys($grid-breakpoints);
+$breakpoints-values: map-values($grid-breakpoints);
+@for $i from 1 to length($breakpoints-keys)+1 {
+  @if $i < length($breakpoints-keys) {
+    .hidden-#{nth($breakpoints-keys, $i)} {
+      @media (min-width: nth($breakpoints-values, $i)) and (max-width: #{nth($breakpoints-values, $i+1) - 1}) {
+        display: none !important;
+      }
+    }
+  } @else {
+    .hidden-#{nth($breakpoints-keys, $i)} {
+      @media (min-width: nth($breakpoints-values, $i)) {
+        display: none !important;
+      }
+    }
+  }
+}
diff --git a/src/pages/ota-wizard/ota-wizard.html b/src/pages/ota-wizard/ota-wizard.html
index 0720c0e..c0e6ede 100644
--- a/src/pages/ota-wizard/ota-wizard.html
+++ b/src/pages/ota-wizard/ota-wizard.html
@@ -103,7 +103,7 @@
 
         <ion-row id="wifi-automatic" *ngIf="state.wifiSelection != 'manual'">
           <ion-col col-12 col-md-6>
-            <ion-icon name="wifi" style="font-size: 160px"></ion-icon>
+            <ion-icon class="hidden-xs hidden-sm" name="wifi" style="font-size: 160px"></ion-icon>
             <h2 translate>OTAWIZ.WIFI.AUTO.TITLE</h2>
             <ul style="text-align: left">
               <li translate>OTAWIZ.WIFI.AUTO.TEXT1</li>
diff --git a/src/pages/ota-wizard/ota-wizard.scss b/src/pages/ota-wizard/ota-wizard.scss
index 3dbdd0b..2b24f85 100644
--- a/src/pages/ota-wizard/ota-wizard.scss
+++ b/src/pages/ota-wizard/ota-wizard.scss
@@ -21,9 +21,9 @@ page-ota-wizard {
     }
 
     p, ul, ol {
-      padding: 0 20px;
-      font-size: 16px;
-      line-height: 1.5;
+      padding: 0 16px;
+      font-size: 15px;
+      line-height: 1.4;
       color: #60646B;
 
       b {
@@ -35,7 +35,7 @@ page-ota-wizard {
     ul, ol {
       margin-left: 4%;
       li {
-        padding-bottom: 8px;
+        padding-bottom: 6px;
       }
     }
     ul {