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

design(tour): improve tour responsiveness, better scss organization

Browse source
This commit is contained in:
Jason Dreyzehner 2016-10-04 20:49:22 -04:00
commit 3fbb626141
10 changed files with 146 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<ion-view ng-controller="tourController" ng-init="init()" class="onboarding" id="onboard-tour">
<ion-nav-bar class="bar-stable">
<ion-view ng-controller="tourController" ng-init="init()" class="onboarding" id="onboarding-tour">
<ion-nav-bar>
<ion-nav-title></ion-nav-title>
<ion-nav-buttons side="primary">
<button class="button back-button button-clear" ng-click="goBack()">
@ -7,79 +7,48 @@
</button>
</ion-nav-buttons>
<ion-nav-buttons side="secondary">
<button class="button back-button button-clear" ng-show="data.index == 0" ng-click="createDefaultWallet()">
{{'Skip' | translate}}
</button>
<button class="button back-button button-clear" ng-show="data.index == 0" ng-click="createDefaultWallet()">{{'Skip' | translate}}</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-slides class="slides" options="options" slider="data.slider">
<ion-slide-page>
<ion-content id="onboard-tour-secure" scroll="false">
<div class="text-center row">
<h2 class="col col-60" translate>Bitcoin is secure, digital money</h2>
</div>
<div class="text-center row">
<p translate class="col col-75 tagline">
You can spend bitcoin at millions of websites and stores worldwide
</p>
</div>
<div id="cta">
</div>
<div class="row text-center">
<p translate class="col">
Just scan the code to pay
</p>
</div>
<div class="row cta-button">
<button class="button button-positive col col-75 next-slide button-translucent" ng-click="slideNext()">
Got it <i class="icon ion-ios-arrow-thin-right"></i>
<h2 class="onboarding-topic" translate>Bitcoin is secure,<br/>digital money.</h2>
<p class="onboarding-description" translate>You can spend bitcoin at millions of websites and stores worldwide.</p>
<div class="onboarding-illustration-secure"></div>
<div class="cta-buttons">
<p class="onboarding-tldr" translate>Just scan the code to pay.</p>
<button class="button button-block button-secondary" ng-click="slideNext()">
Got it
<i class="icon ion-ios-arrow-thin-right"></i>
</button>
</div>
</ion-content>
</ion-slide-page>
<ion-slide-page>
<ion-content id="onboard-tour-currency" scroll="false">
<div class="text-center row">
<h2 class="col col-75" translate>Bitcoin is a currency</h2>
<h2 class="onboarding-topic" translate>Bitcoin is a currency.</h2>
<p class="onboarding-description" translate>You can trade it for other currencies like US Dollars, Euros, or Pounds.</p>
<div class="onboarding-illustration-currency">
<div id="onboarding-illustration-currency-exchange-rate">1 BTC = $1,000</div>
</div>
<div class="text-center row">
<p translate class="col col-75 tagline">
You can trade it for other currencies like US Dollars, Euros, or Pounds
</p>
</div>
<div id="cta">
</div>
<div class="row text-center">
<p translate class="col">
The exchange rate changes with the market
</p>
</div>
<div class="row cta-button">
<button class="button button-positive col col-75 next-slide button-translucent" ng-click="slideNext()">
Makes sense <i class="icon ion-ios-arrow-thin-right"></i>
<div class="cta-buttons">
<p class="onboarding-tldr" translate>The exchange rate changes with the market.</p>
<button class="button button-block button-secondary" ng-click="slideNext()">
Makes sense
<i class="icon ion-ios-arrow-thin-right"></i>
</button>
</div>
</ion-content>
</ion-slide-page>
<ion-slide-page>
<ion-content id="onboard-tour-control" scroll="false">
<div class="text-center row">
<h2 translate class="col col-80">You control your bitcoin</h2>
</div>
<div class="text-center row">
<p translate class="col col-75 tagline">
The BitPay wallet stores your bitcoin with cutting-edge security
</p>
</div>
<div id="cta">
</div>
<div class="row text-center">
<p translate class="col">
Not even BitPay can access it
</p>
</div>
<div class="row cta-button">
<button class="button button-positive col col-75 get-started" ng-click="createDefaultWallet()">
<h2 translate class="onboarding-topic">You control your bitcoin.</h2>
<p translate class="onboarding-description">The BitPay wallet stores your bitcoin with cutting-edge security.</p>
<div class="onboarding-illustration-control"></div>
<div class="cta-buttons">
<p class="onboarding-tldr" translate>Not even BitPay can access it.</p>
<button class="button button-block button-primary" ng-click="createDefaultWallet()">
Create bitcoin wallet
</button>
</div>

4
public/views/onboarding/welcome.html
View file

@ -3,11 +3,11 @@
<!-- <qr-scanner id="qrcode" on-scan="goImport(data)"></qr-scanner> -->
<div id="logo-tagline">
<img src='img/bitpay-logo.svg' id="logo" />
<p translate class="lead">Take control of your money,<br /> get started with bitcoin.</p>
<p id="lead" translate>Take control of your money,<br />get started with bitcoin.</p>
</div>
<div id="cta-buttons">
<button class="button button-block button-primary" id="get-started" href ui-sref="onboarding.tour" translate>Get started</button>
<button class="button button-block button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore</button>
<button class="button button-block button-secondary button-clear" id="restore" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore from backup</button>
</div>
</ion-content>
</ion-view>