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

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

This commit is contained in:
Jason Dreyzehner 2016-10-04 20:49:22 -04:00
parent bdbbc1808e
commit 3fbb626141
10 changed files with 148 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
public/img/onboarding-tour-currency-bg.svg
View File

@ -1,48 +1,46 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="utf-8"?>
<svg width="375px" height="257px" viewBox="0 0 375 257" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
<title>bitcoin-currency</title> viewBox="0 0 375 257" style="enable-background:new 0 0 375 257;" xml:space="preserve">
<desc>Created with Sketch.</desc> <style type="text/css">
<defs> .st0{opacity:6.325793e-02;fill:url(#Line-Copy_1_);enable-background:new ;}
<linearGradient x1="50%" y1="0%" x2="50%" y2="83.858817%" id="linearGradient-1"> .st1{fill:none;stroke:#13E5B6;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
<stop stop-color="#CDE7FF" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop> .st2{opacity:0.3335;fill:none;stroke:#FFFFFF;stroke-width:0.5;stroke-linecap:square;stroke-dasharray:4;enable-background:new ;}
</linearGradient> .st3{opacity:0.3;fill:url(#Oval-2_1_);enable-background:new ;}
<linearGradient x1="50%" y1="0%" x2="50%" y2="89.4673583%" id="linearGradient-2"> .st4{opacity:0.64;fill:none;stroke:#9012FE;stroke-width:2;stroke-linecap:square;enable-background:new ;}
<stop stop-color="#3950B5" offset="0%"></stop> .st5{fill:#1A2A71;stroke:#FFFFFF;stroke-width:3;}
<stop stop-color="#162360" offset="100%"></stop> </style>
</linearGradient> <g id="Onboarding">
<rect id="path-3" x="0" y="0" width="130" height="48" rx="4"></rect> <g id="_x30_.2.2---Tour-2" transform="translate(0.000000, -200.000000)">
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4"> <g id="bitcoin-currency" transform="translate(0.000000, 206.000000)">
<feOffset dx="0" dy="8" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <g id="bg-2" transform="translate(0.000000, 3.530453)">
<feGaussianBlur stdDeviation="7" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.128877944 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> <linearGradient id="Line-Copy_1_" gradientUnits="userSpaceOnUse" x1="-117.185" y1="513.6823" x2="-117.185" y2="512.8358" gradientTransform="matrix(374.5743 0 0 -148.6105 44082.1914 76374.0547)">
</filter> <stop offset="0" style="stop-color:#CDE7FF"/>
</defs> <stop offset="1" style="stop-color:#FFFFFF"/>
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> </linearGradient>
<g id="0.2.2---Tour-2" transform="translate(0.000000, -200.000000)"> <polygon id="Line-Copy" class="st0" points="54.3,126.6 98.8,99.6 139.1,120.4 185.5,82.4 222.9,82.4 246.7,49.3 278.8,65.2
<g id="bitcoin-currency" transform="translate(0.000000, 206.000000)"> 324.3,56.6 375,35.5 375,185.5 150.1,185.5 0.4,185.5 0.4,135.2 "/>
<g id="bg-2" transform="translate(0.000000, 3.530453)"> <polyline id="Line" class="st1" points="0,134 54.3,127.8 97.7,98.3 140.1,120.4 184.6,81.2 222.9,81.2 247.7,48 280.8,67.7
<polygon id="Line-Copy" fill="url(#linearGradient-1)" opacity="0.0632579291" points="54.267049 126.565292 98.7558134 99.5675085 139.106088 120.429432 185.506195 82.3871008 222.910505 82.3871008 246.706821 49.2534574 278.7801 65.2066927 324.303487 56.6164892 367.788457 36.8590204 374.999986 185.469547 150.148438 185.469547 0.425715204 185.469547 0.425715204 135.155496"></polygon> 321.2,56.6 375,35.5 "/>
<polyline id="Line" stroke="#13E5B6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="0 133.969547 54.2670471 127.792464 97.7211891 98.3403365 140.140716 120.429432 184.629481 81.1599288 222.910503 81.1599288 247.741449 48.0262854 280.849359 67.6610371 321.199634 56.6164892 375.000006 35.469547"></polyline> <path id="Line-Copy-2" class="st2" d="M137.2,120.5v63"/>
<path d="M137.25,120.469547 L137.25,183.486924" id="Line-Copy-2" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path> <path id="Line-Copy-3" class="st2" d="M77.2,110.5v73.8"/>
<path d="M77.25,110.469547 L77.25,184.266212" id="Line-Copy-3" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path> <path id="Line-Copy-4" class="st2" d="M264.2,64.5v119.4"/>
<path d="M264.25,64.469547 L264.25,183.870892" id="Line-Copy-4" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path> <path id="Line-Copy-5" class="st2" d="M330.2,57.5v126"/>
<path d="M330.25,57.469547 L330.25,183.5043" id="Line-Copy-5" stroke="#FFFFFF" stroke-width="0.5" stroke-linecap="square" stroke-dasharray="4" opacity="0.333547108"></path>
<path d="M187.5,247.469547 C255.707167,247.469547 311,192.176714 311,123.969547 C311,55.7623804 255.707167,0.469547015 187.5,0.469547015 C119.292833,0.469547015 64,55.7623804 64,123.969547 C64,192.176714 119.292833,247.469547 187.5,247.469547 Z" id="Oval-2" fill="url(#linearGradient-2)" opacity="0.300000012"></path> <linearGradient id="Oval-2_1_" gradientUnits="userSpaceOnUse" x1="-117.0223" y1="514.3885" x2="-117.0223" y2="513.4939" gradientTransform="matrix(247 0 0 -247 29092 127054.4453)">
</g> <stop offset="0" style="stop-color:#3950B5"/>
<g id="price-" transform="translate(122.000000, 0.000000)"> <stop offset="1" style="stop-color:#162360"/>
<path d="M67,42.5 L67,188.5" id="Line" stroke="#9012FE" stroke-width="2" stroke-linecap="square" opacity="0.639999986"></path> </linearGradient>
<g id="Rectangle-3" opacity="0.699999988"> <path id="Oval-2" class="st3" d="M187.5,247.5c68.2,0,123.5-55.3,123.5-123.5S255.7,0.5,187.5,0.5S64,55.8,64,124
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use> S119.3,247.5,187.5,247.5z"/>
<use fill="#647CE8" fill-rule="evenodd" xlink:href="#path-3"></use> </g>
</g> <g id="price-" transform="translate(122.000000, 0.000000)">
<text id="1-BTC-=-$650" font-family="Roboto-Regular, Roboto" font-size="16" font-weight="normal" fill="#FFFFFF"> <path id="Line_1_" class="st4" d="M67,42.5v146"/>
<tspan x="15.1328125" y="28.8046875">1 BTC = $650</tspan> <circle id="Oval-5" class="st5" cx="67.5" cy="83.5" r="4.5"/>
</text> </g>
<circle id="Oval-5" stroke="#FFFFFF" stroke-width="3" fill="#1A2A71" cx="67.5" cy="83.5" r="4.5"></circle> </g>
</g> </g>
</g> </g>
</g> </svg>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

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

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

@ -3,11 +3,11 @@
<!-- <qr-scanner id="qrcode" on-scan="goImport(data)"></qr-scanner> --> <!-- <qr-scanner id="qrcode" on-scan="goImport(data)"></qr-scanner> -->
<div id="logo-tagline"> <div id="logo-tagline">
<img src='img/bitpay-logo.svg' id="logo" /> <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>
<div id="cta-buttons"> <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-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> </div>
</ion-content> </ion-content>
</ion-view> </ion-view>

2
src/sass/icons.scss
View File

@ -20,7 +20,7 @@
border-radius: 50%; border-radius: 50%;
width: 40px; width: 40px;
height: 40px; height: 40px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3); box-shadow: $hovering-box-shadow;
background-repeat:no-repeat; background-repeat:no-repeat;
background-clip: padding-box; background-clip: padding-box;
background-size: 103%; background-size: 103%;

4
src/sass/variables.scss
View File

@ -8,6 +8,8 @@ $roboto-light: "Roboto-Light", sans-serif-light;
$dark-gray: #445; $dark-gray: #445;
$mid-gray: #667; $mid-gray: #667;
$light-gray: #9b9bab; $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);
/* Set ionic variables */ /* Set ionic variables */
@ -31,4 +33,4 @@ $tabs-icon-size: 22px;
$ios-transition-duration: 200ms; $ios-transition-duration: 200ms;
$card-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); $card-box-shadow: $subtle-box-shadow;

93
src/sass/views/onboarding/onboard-tour.scss
View File

@ -1,69 +1,40 @@
#onboard-tour { #onboarding-tour {
&-secure {
#cta {
background-image: url(../img/onboarding-tour-phone.svg);
height: 17rem;
margin-bottom:-1.5rem;
}
}
&-currency { &-currency {
#cta {
background-image: url(../img/onboarding-tour-currency-bg.svg);
height:18rem;
}
.next-slide { .next-slide {
margin-top: 3rem; margin-top: 3rem;
} }
} }
&-control { .cta-buttons {
#cta { @extend %cta-buttons;
background-image: url(../img/onboarding-tour-control.svg); padding-bottom: 100px;
margin-bottom: .05rem;
height: 15rem;
background-position: top;
}
} }
.cta-button{ .onboarding-topic,
position: absolute; .onboarding-description,
bottom: 85px; .onboarding-tldr {
} margin: 1rem 3rem .5rem;
} }
.onboarding-topic {
@media (max-width: 359px){ font-size: 24px;
#onboard-tour{ }
&-secure, &-currency, &-control{ .onboarding-description {
#cta{ font-size: 16px;
height: 14rem; color: rgba(255,255,255,0.5);
} }
} .onboarding-tldr {
} font-size: 18px;
} margin-bottom: 1em;
}
@media (min-width: 450px){ #onboarding-illustration-currency-exchange-rate {
#onboard-tour{ background-color: $soft-blue;
&-secure, &-currency, &-control{ border-radius: $button-border-radius;
#cta{ box-shadow: $subtle-box-shadow;
height: 26rem; font-size: 14px;
} font-weight: bold;
} height: 40px;
} line-height: 38px;
} margin: 10px auto 0;
position: relative;
@media (min-width: 1000px){ width: 120px;
#onboard-tour{ z-index: 1;
p, h2, h3{
max-width: 600px;
}
button{
max-width: 400px;
}
#cta{
margin: 2rem 0 0;
}
&-control{
#cta{
margin-bottom: 2rem;
}
}
} }
} }

11
src/sass/views/onboarding/onboard-welcome.scss
View File

@ -25,15 +25,12 @@
max-width: 200px; max-width: 200px;
margin: 5rem auto 0; margin: 5rem auto 0;
} }
.lead { #lead {
line-height: 1.6; line-height: 1.6;
font-size: 18px;
} }
#cta-buttons { #cta-buttons {
position: absolute; @extend %cta-buttons;
bottom: 0; padding-bottom: 1rem;
width: 100%;
button {
max-width: 400px;
}
} }
} }

1
src/sass/views/onboarding/onboarding-buttons.scss
View File

@ -25,6 +25,7 @@ $button-secondary-active-border: transparent;
&.button-secondary { &.button-secondary {
&.button-block { &.button-block {
width: 85%; width: 85%;
max-width: 300px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }

35
src/sass/views/onboarding/onboarding.scss
View File

@ -5,6 +5,7 @@
text-align: center; text-align: center;
.bar.bar-header { .bar.bar-header {
background: none; background: none;
border: 0 none transparent;
color: #fff; color: #fff;
button { button {
color: #fff; color: #fff;
@ -15,9 +16,6 @@
} }
} }
} }
.bar.bar-stable {
border: 0 none transparent;
}
ion-content { ion-content {
height: 100%; height: 100%;
.scroll{ .scroll{
@ -79,6 +77,12 @@
} }
} }
%cta-buttons {
position: absolute;
bottom: 0;
width: 100%;
}
@import "terms-of-use"; @import "terms-of-use";
@import "onboarding-buttons"; @import "onboarding-buttons";
@import "onboard-welcome"; @import "onboard-welcome";
@ -88,3 +92,28 @@
@import "../backup-warning"; @import "../backup-warning";
@import "onboard-disclaimer"; @import "onboard-disclaimer";
@import "onboard-push-notifications"; @import "onboard-push-notifications";
%onboarding-illustration {
position: absolute;
width: 100%;
height: 40%;
margin-top: 25vh;
top: 0;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.onboarding-illustration {
&-secure {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-tour-phone.svg);
}
&-currency {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-tour-currency-bg.svg);
}
&-control {
@extend %onboarding-illustration;
background-image: url(../img/onboarding-tour-control.svg);
}
}

2
src/sass/views/wallet-backup-phrase.scss
View File

@ -44,7 +44,7 @@
} }
.select-word { .select-word {
background: #fff; background: #fff;
box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.37); box-shadow: $hovering-box-shadow;
margin: .1rem 0; margin: .1rem 0;
display: inline-block; display: inline-block;
padding: 0 5px; padding: 0 5px;