anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

updated and fixed issues with collect email view styling, moved skip button to top right

Browse source
This commit is contained in:
Jamal Jackson 2016-09-08 15:41:44 -04:00
commit d2b5a70d93
3 changed files with 50 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

30
public/views/onboarding/collectEmail.html
View file

@ -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">
<p translate class="col col-75">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 class="row text-center">
<p translate class="col col-75 center-block">Where would you like to receive email notifications about payments? </p>
</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>

4
src/sass/mixins/layout.scss
View file

@ -1,4 +1,8 @@
@mixin center-block($topBottom: 0) {
float:none;
margin: $topBottom auto;
}
.center-block{
@include center-block();
}

44
src/sass/views/onboarding/onboard-collect-email.scss
View file

@ -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-delay: 2s;
animation-duration: .4s;
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;
}
}