mirror of https://github.com/BTCPrivate/copay.git
design(collectEmail): improve animations and layout
This commit is contained in:
parent
3fbb626141
commit
0c0ccbd105
|
@ -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()">
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue