Merge pull request #89 from jamal-jackson/feature/onboarding_last_steps

Fixed issues with iPhone5 and collect email screen

public/views/onboarding/collectEmail.html

@@ -1,4 +1,11 @@
 <ion-view ng-controller="collectEmailController" id="onboarding-collect-email" class="onboarding">
+<ion-nav-bar class="bar-overlay">
+    <ion-nav-buttons side="right">
+      <button class="button button-block button-positive button-clear" ng-click="onboardingMailSkip()">
+        {{'Skip' | translate}}
+      </button>
+    </ion-nav-buttons>
+  </ion-nav-bar>
   <ion-content>
     <div class="row">
       <img src="img/onboarding-success.svg" class="col col-75" id="success-image" />
@@ -7,19 +14,16 @@
       <h3 translate class="col">Wallet Created</h3>
     </div>
     <div id="collect-email">
-      <div class="row text-center">
+    <div class="row text-center">
-        <p translate class="col col-75">Where would you like to receive email notifications about payments </p>
+      <p translate class="col col-75 center-block">Where would you like to receive email notifications about payments? </p>
-      </div>
-      <form name="emailForm" ng-submit="save(emailForm)" novalidate>
-        <label class="item item-input col col-75">
-          <i class="icon ion-arrow-right-c"></i>
-          <input type="email" id="email" name="email" ng-model="email" required></input>
-        </label>
-      </form>
-      <button class="button button-block button-positive button-clear" ng-click="onboardingMailSkip()">
-        {{'Skip' | translate}}
-      </button>
     </div>
-    <div class="overlay"></div>
+    <form name="emailForm" ng-submit="save(emailForm)" novalidate>
+      <label class="item item-input col col-75 center-block">
+        <i class="icon ion-arrow-right-c"></i>
+        <input type="email" id="email" name="email" ng-model="email" placeholder="satoshi@example.com" required></input>
+      </label>
+    </form>
+  </div>
+  <div class="overlay collect-overlay"></div>
   </ion-content>
 </ion-view>

src/sass/common.scss

@@ -67,6 +67,10 @@
   margin-right: auto;
 }
 
+.bar-green{
+  background: rgb(17, 209, 166) !important;
+}
+
 ion-header-bar{
   button{
     border:none;

src/sass/views/onboarding/onboard-collect-email.scss

@@ -1,5 +1,9 @@
 #onboarding-collect-email {
   background: rgb(17, 209, 166);
+  .scroll-content {
+    margin-top: 0;
+    height: 101%;
+  }
   .scroll {
     height: 100%;
   }
@@ -10,6 +14,25 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
+  .collect-overlay, .bar-overlay {
+    animation-name: opacity;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in;
+    animation-duration: .2s;
+    animation-delay: .8s;
+    animation-fill-mode: forwards;
+    opacity: 0;
+  }
+  .collect-overlay{
+    top:-1px;
+  }
+  .bar-overlay{
+    background: rgba(0, 0, 0, 0.23);
+    .button-clear{
+      color:#fff;
+      min-width: 100%;
+    }
+  }
   #collect-email {
     opacity: 1;
     background: #fff;
@@ -18,8 +41,8 @@
     animation-name: topBottom;
     animation-iteration-count: 1;
     animation-timing-function: ease-in;
-    animation-duration: 1s;
+    animation-duration: .4s;
-    animation-delay: 2s;
+    animation-delay: 1s;
     position: absolute;
     bottom: -14rem;
     animation-fill-mode: forwards;
@@ -29,7 +52,7 @@
     label {
       background: rgba(200, 200, 200, 0.20);
       height: 3rem;
-      margin-top:0;
+      margin-top: 0;
       input {
         position: absolute;
       }
@@ -40,15 +63,6 @@
       }
     }
   }
-  .overlay {
-    animation-name: bottomTop;
-    animation-iteration-count: 1;
-    animation-timing-function: ease-in;
-    animation-duration: 1s;
-    animation-delay: 2s;
-    animation-fill-mode: forwards;
-    top: 100%;
-  }
 }
 
 @keyframes topBottom {
@@ -60,11 +74,11 @@
   }
 }
 
-@keyframes bottomTop {
+@keyframes opacity {
   0% {
-    top: 100%;
+    opacity: 0;
   }
   100% {
-    top: 0;
+    opacity: 1;
   }
 }

src/sass/views/onboarding/onboard-tour.scss

@@ -24,3 +24,13 @@
     }
   }
 }
+
+@media (max-width: 400px){
+  #onboard-tour{
+    &-secure, &-currency, &-control{
+      #cta{
+        height: 14rem;
+      }
+    }
+  }
+}

src/sass/views/onboarding/onboard-welcome.scss

@@ -42,7 +42,8 @@
   }
 }
 
-@media (max-width:500px), (max-height:800px) {
+@media (max-width:500px),
+(max-height:800px) {
   #onboard-welcome {
     ion-content {
       .logo {
@@ -62,7 +63,7 @@
   }
 }
 
-@media (max-height:608px) {
+@media (max-height:550px) {
   #onboard-welcome {
     #cta-buttons {
       position: relative !important;

src/sass/views/onboarding/onboarding.scss

@@ -75,6 +75,16 @@
   }
 }
 
+@media (max-width: 400px){
+  .onboarding{
+    ion-content{
+      h2{
+        font-size: 1.2rem;
+      }
+    }
+  }
+}
+
 @import "terms-of-use";
 @import "onboard-welcome";
 @import "onboard-tour";