BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

design(collectEmail): improve animations and layout

This commit is contained in:
Jason Dreyzehner 2016-10-04 22:21:43 -04:00
parent 3fbb626141
commit 0c0ccbd105
3 changed files with 51 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/views/onboarding/collectEmail.html
View File

@ -1,33 +1,25 @@
<ion-view ng-controller="collectEmailController" id="onboarding-collect-email" class="onboarding">
<ion-content>
<div class="row">
<div class="success-message">
<img src="img/onboarding-success.svg" class="col col-75" id="success-image" />
</div>
<div class="row text-center">
<h3 translate class="col">Wallet Created</h3>
<h3 translate>Wallet Created</h3>
</div>
<div id="collect-email">
<div ng-if="!confirmation">
<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="confirm(emailForm)" novalidate>
<label class="item item-input col col-75">
<span translate class="prompt">Where would you like to receive email notifications about payments?</span>
<form id="email-form" name="emailForm" ng-submit="confirm(emailForm)" novalidate>
<label class="item item-input">
<i class="icon ion-arrow-right-c"></i>
<input type="email" id="email" name="email" ng-model="email" placeholder="satoshi@example.com" required></input>
<input type="email" id="email-input" name="email" ng-model="email" placeholder="satoshi@example.com" required></input>
</label>
</form>
<ion-list id="news-updates" class="row">
<ion-checkbox ng-model="data.accept" class="col col-80"><span translate>Get news and updates from Bitpay</span></ion-checkbox>
<ion-list id="news-updates">
<ion-checkbox ng-model="data.accept"><span translate>Get news and updates from BitPay</span></ion-checkbox>
</ion-list>
</div>
<div ng-if="confirmation">
<div class="row text-center">
<p translate class="col col-75">Is this email address correct?</p>
</div>
<div class="row text-center">
<p class="col col-75">{{email}}</p>
</div>
<p translate class="confirm">Is this email address correct?</p>
<p class="user-email">{{email}}</p>
<div class="row">
<div class="col col-50">
<button class="button button-block button-stable" ng-click="cancel()">

3
src/sass/variables.scss
View File

@ -10,6 +10,7 @@ $mid-gray: #667;
$light-gray: #9b9bab;
$subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
$hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
$visible-radius: 6px;
/* Set ionic variables */
@ -20,7 +21,7 @@ $font-size-small: 12px;
$font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light;
$button-border-radius: 6px;
$button-border-radius: $visible-radius;
$button-height: 52px;
$button-padding: 16px;

54
src/sass/views/onboarding/onboard-collect-email.scss
View File

@ -1,3 +1,5 @@
$relish-success: 1.3s;
#onboarding-collect-email {
background: rgb(17, 209, 166);
.overlay {
@ -13,33 +15,46 @@
margin-top: 0;
height: 101%;
}
.scroll {
height: 100%;
.success-message {
top: 30vh;
position: relative;
animation-name: slideUp;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .5s;
animation-delay: $relish-success;
animation-fill-mode: forwards;
}
#success-image {
margin-top: 4rem;
height: 10rem;
}
.col {
margin-top: 1rem;
margin-bottom: 1rem;
width: 8rem;
margin: 0 auto;
}
.collect-overlay {
animation-name: opacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .2s;
animation-delay: .8s;
animation-delay: $relish-success;
animation-fill-mode: forwards;
opacity: 0;
button {
position: absolute;
right: 11px;
right: 0;
}
}
.collect-overlay{
top:-1px;
}
}
.collect-overlay {
top:-1px;
}
.prompt {
padding: 2rem 2rem 1rem;
display: block;
}
#email-form {
margin: 0 2rem 1rem;
}
#email-input {
border-radius: $visible-radius;
}
#collect-email {
opacity: 1;
background: #fff;
@ -49,7 +64,7 @@
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .4s;
animation-delay: 1s;
animation-delay: $relish-success + .2s;
position: absolute;
bottom: -14rem;
animation-fill-mode: forwards;
@ -176,3 +191,12 @@
opacity: 1;
}
}
@keyframes slideUp {
0% {
top: 30vh;
}
100% {
top: 10vh;
}
}