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

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

This commit is contained in:
Jason Dreyzehner 2016-10-04 19:36:55 -04:00
parent c54ac99b1c
commit bdbbc1808e
8 changed files with 89 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
public/img/onboarding-welcome-shopping24.png → public/img/onboarding-welcome-qrcode.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 713 B

After

Width:  |  Height:  |  Size: 713 B

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

@ -1,23 +1,13 @@
<ion-view id="onboard-welcome" class="onboarding">
<ion-content ng-controller="welcomeController" ng-init="createProfile()" scroll="false">
<!-- <qr-scanner id="shopping-24" on-scan="goImport(data)"></qr-scanner> -->
<article id="logo-tagline">
<div class="row text-center">
<img src='img/bitpay-logo.svg' class="logo col col-50" />
</div>
<div class="row text-center">
<p translate class="text-center col col-60">
Take control of your money, <br /> get started with bitcoin.
</p>
</div>
</article>
<article id="cta-buttons">
<div class="row">
<button class="button button-block get-started col col-75" href ui-sref="onboarding.tour" translate>Get started</button>
</div>
<div class="row">
<button class="button button-block restore col col-75" translate href ui-sref="onboarding.import({'fromOnboarding':true})">Restore</button>
</div>
</article>
<!-- <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>
</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>
</div>
</ion-content>
</ion-view>

2
src/sass/main.scss
View File

@ -1,7 +1,7 @@
@import "fonts";
@import "variables";
@import "icons";
@import "ionic";
@import "icons";
@import "forms";
@import "mixins/mixins";
@import "views/views";

6
src/sass/shame.scss
View File

@ -92,12 +92,6 @@ input[type=number] {
}
}
.button-block {
width: 90% !important;
margin-left: auto;
margin-right: auto;
}
.name-wallet {
font-size: 14px;
font-weight: 400;

6
src/sass/variables.scss
View File

@ -13,9 +13,15 @@ $light-gray: #9b9bab;
$positive: $soft-blue;
$font-size-base: 16px;
$font-size-small: 12px;
$font-family-sans-serif: $roboto;
$font-family-light-sans-serif: $roboto-light;
$button-border-radius: 6px;
$button-height: 52px;
$button-padding: 16px;
$base-background-color: $subtle-gray;
$item-default-active-bg: $subtle-gray;

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

@ -1,73 +1,39 @@
#onboard-welcome {
ion-content {
& > ion-content {
background: url(../img/onboarding-welcome-bg.png);
background-position: top center;
background-size: contain;
background-repeat: repeat-x;
#shopping-24 {
content: url("../img/onboarding-welcome-shopping24.png");
position: absolute;
top: 5%;
right: 5%;
width: 35px;
height: auto;
}
.logo,
p {
@include center-block();
}
.logo {
margin-top: 20rem;
}
}
#qrcode {
content: url("../img/onboarding-welcome-qrcode.png");
position: absolute;
top: 5%;
right: 5%;
width: 20px;
height: auto;
}
#logo-tagline {
width: 100%;
height: 70%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
#logo {
width: 40%;
max-width: 200px;
margin: 5rem auto 0;
}
.lead {
line-height: 1.6;
}
#cta-buttons {
position: absolute;
bottom: 0;
width: 100%;
button {
@include center-block(1rem);
color: #fff;
&.get-started {
background: rgb(100, 124, 232);
margin-top: 4rem;
}
&.restore {
background: none;
}
}
#cta-buttons {
position: absolute;
bottom: 0;
width: 100%;
button {
max-width: 400px;
min-width: 300px;
}
}
}
}
@media (max-width:500px),
(max-height:800px) {
#onboard-welcome {
ion-content {
.logo {
margin-top: 12rem;
}
}
}
}
@media (max-width:420px) {
#onboard-welcome {
ion-content {
.logo {
margin-top: 8rem;
}
}
}
}
@media (max-height:550px) {
#onboard-welcome {
#cta-buttons {
position: relative !important;
float: left;
max-width: 400px;
}
}
}

32
src/sass/views/onboarding/onboarding-buttons.scss Normal file
View File

@ -0,0 +1,32 @@
$button-primary-bg: $positive;
$button-primary-text: #fff;
$button-primary-border: transparent;
$button-primary-active-bg: darken($positive, 5%);
$button-primary-active-border: transparent;
$button-secondary-bg: rgba(215, 215, 215, 0.1);
$button-secondary-text: #fff;
$button-secondary-border: transparent;
$button-secondary-active-bg: rgba(215, 215, 215, 0.2);
$button-secondary-active-border: transparent;
.onboarding .button {
&.button-primary {
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $button-primary-text);
@include button-clear($button-primary-bg);
@include button-outline($button-primary-bg);
}
&.button-secondary {
@include button-style($button-secondary-bg, $button-secondary-border, $button-secondary-active-bg, $button-secondary-active-border, $button-secondary-text);
@include button-clear($button-secondary-text);
@include button-outline($button-secondary-text);
}
&.button-primary,
&.button-secondary {
&.button-block {
width: 85%;
margin-left: auto;
margin-right: auto;
}
}
}

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

@ -1,15 +1,10 @@
.onboarding {
background: rgba(30, 49, 134, 1);
background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(100%, rgba(17, 27, 73, 1)));
background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
color: #fff;
background: #1e3186;
background-image: linear-gradient(to bottom, #1e3186 0%, #111b49 100%);
height: 100%;
text-align: center;
.bar.bar-header {
background: rgb(30, 49, 134);
background: none;
color: #fff;
button {
color: #fff;
@ -20,9 +15,8 @@
}
}
}
.bar.bar-stable{
border-color: transparent;
border:none;
.bar.bar-stable {
border: 0 none transparent;
}
ion-content {
height: 100%;
@ -57,34 +51,18 @@
@media (min-width: 450px){
p{
font-size: 1.1rem;
line-height: 1.5rem;
line-height: 1.6;
}
}
}
.col {
@include center-block(.5rem);
}
.swiper-pagination {
&-bullet {
background: rgb(100, 124, 232);
background: $soft-blue;
&-active {
background: rgb(100, 124, 232);
background: $soft-blue;
}
}
}
.button-transparent{
background: none !important;
}
.button-translucent{
background: rgba(215, 215, 215, 0.1)
}
.button-primary{
background: rgb(100, 124, 232) !important;
color:#fff;
}
.light-blue{
color:rgb(100, 124, 232);
}
}
@media (min-width: 415px){
@ -95,19 +73,14 @@
}
p{
font-size: 1.4rem;
line-height: 1.9rem;
}
p,h2,h3{
max-width: 600px !important;
}
button{
max-width: 400px !important;
line-height: 1.6;
}
}
}
}
@import "terms-of-use";
@import "onboarding-buttons";
@import "onboard-welcome";
@import "onboard-tour";
@import "onboard-collect-email";