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

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

Browse source 
iPhone5 fixes for backup warning and request views
This commit is contained in:
Gustavo Maximiliano Cortez 2016-09-12 11:24:55 -03:00 • committed by GitHub
commit c6e459add3
8 changed files with 145 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

14
public/views/onboarding/backupRequest.html
View file

@ -16,12 +16,14 @@
<div class="row text-center">
<i class="ion-ios-arrow-thin-down light-blue col col-60" id="arrow-down"></i>
</div>
<div class="row">
<button class="button button-block button-positive col-75 col" href
ui-sref="onboarding.backupWarning({walletId: walletId})" translate>Backup wallet</button>
</div>
<div class="row">
<button class="button button-block button-transparent col-75 col" ng-click="openPopup()" translate>I'll backup my wallet later</button>
<div class="cta-buttons">
<div class="row">
<button class="button button-block button-positive col-75 col" href
ui-sref="onboarding.backupWarning({walletId: walletId})" translate>Backup wallet</button>
</div>
<div class="row">
<button class="button button-block button-transparent col-75 col" ng-click="openPopup()" translate>I'll backup my wallet later</button>
</div>
</div>
</ion-content>
</ion-view>

6
public/views/onboarding/backupWarning.html
View file

@ -8,7 +8,7 @@
</ion-nav-bar>
<ion-content>
<div class="row text-center">
<h3 translate class="col col-75">
<h3 translate class="col col-80">
Are you being watched?
</h3>
</div>
@ -18,14 +18,14 @@
</p>
</div>
<div class="row">
<img src="img/onboarding-backup-warning.svg" class="col col-60">
<img src="img/onboarding-backup-warning.svg" class="col col-60 warning-image">
</div>
<div class="row text-center">
<p class="col col-60">
Anyone with your backup phrase can access or spend your bitcoin.
</p>
</div>
<div class="row">
<div class="cta-buttons">
<button class="button button-block button-primary col col-75" ng-click="openPopup()" translate>All clear, let's do this</button>
</div>
</ion-content>

8
public/views/onboarding/tour.html
View file

@ -30,7 +30,7 @@
Just scan the code to pay
</p>
</div>
<div class="row">
<div class="row cta-button">
<button class="button button-positive col col-75 next-slide" ng-click="slideNext()">
Got it <i class="icon ion-ios-arrow-thin-right"></i>
</button>
@ -54,9 +54,9 @@
The exchange rate changes with the market
</p>
</div>
<div class="row">
<div class="row cta-button">
<button class="button button-positive col col-75 next-slide" ng-click="slideNext()">
Makes sense <i class="icon ion-arrow-right-c"></i>
Makes sense <i class="icon ion-ios-arrow-thin-right"></i>
</button>
</div>
</ion-content>
@ -78,7 +78,7 @@
Not even BitPay can access it
</p>
</div>
<div class="row">
<div class="row cta-button">
<button class="button button-positive col col-75 get-started" ng-click="createDefaultWallet()">
Create bitcoin wallet
</button>

46
src/sass/views/onboarding/onboard-backup-request.scss
View file

@ -8,4 +8,50 @@
#arrow-down{
font-size: 4.2rem;
}
.cta-buttons{
width:100%;
float:none;
position: absolute;
bottom: 0;
}
}
@media (max-width: 400px){
#onboarding-backup-request{
.warning{
margin: 2rem auto 1rem;
height: 8rem;
}
h3{
font-size:1.3rem;
}
p{
font-size:.9rem;
max-width: 80%;
flex: 0 0 80%;
}
.cta-buttons{
float:none;
bottom:0;
position: absolute;
button{
max-width: 400px;
}
}
}
}
@media (max-height: 540px){
#onboarding-backup-request{
.cta-buttons{
float:left;
position: relative;
}
}
}
@media (min-height: 980px){
#onboarding-backup-request{
#arrow-down{
margin-top: 15rem;
}
}
}

42
src/sass/views/onboarding/onboard-backup-warning.scss
View file

@ -8,4 +8,46 @@
#arrow-down{
font-size: 4.2rem;
}
.cta-buttons{
float:none;
bottom:46px;
position: absolute;
width:100%;
button{
max-width: 400px;
}
}
}
@media (max-width: 400px){
#onboarding-backup-warning{
.warning{
margin: 2rem auto 1rem;
height: 8rem;
}
h3{
font-size:1.3rem;
}
p{
font-size:.9rem;
max-width: 80%;
flex: 0 0 80%;
}
.warning-image{
height: 11rem;
}
.cta-buttons{
float:none;
bottom:46px;
position: absolute;
}
}
}
@media (max-height: 540px){
#onboarding-backup-warning{
.cta-buttons{
float:left;
position: relative;
}
}
}

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

@ -64,6 +64,19 @@
}
}
}
@media (min-width: 1000px){
#onboarding-collect-email{
#collect-email{
p, form{
max-width: 600px;
@include center-block();
}
form{
margin-top:.5rem;
}
}
}
}
@keyframes topBottom {
0% {

23
src/sass/views/onboarding/onboard-tour.scss
View file

@ -23,6 +23,10 @@
background-position: top;
}
}
.cta-button{
position: absolute;
bottom: 85px;
}
}
@media (max-width: 400px){
@ -34,3 +38,22 @@
}
}
}
@media (min-width: 1000px){
#onboard-tour{
p, h2, h3{
max-width: 600px;
}
button{
max-width: 400px;
}
#cta{
margin: 2rem 0 0;
}
&-control{
#cta{
margin-bottom: 2rem;
}
}
}
}

6
src/sass/views/onboarding/onboarding.scss
View file

@ -81,6 +81,12 @@
h2{
font-size: 1.2rem;
}
p,h2,h3{
max-width: 600px !important;
}
button{
max-width: 400px !important;
}
}
}
}