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

polished responsiveness of welcome view

Browse source
This commit is contained in:
Jamal Jackson 2016-09-08 10:17:34 -04:00
commit b99bfd1cbd
3 changed files with 51 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

40
src/sass/views/onboarding/onboard-welcome.scss
View file

@ -17,7 +17,7 @@
@include center-block(); @include center-block();
} }
.logo { .logo {
margin-top: 13rem; margin-top: 20rem;
} }
button { button {
@include center-block(1rem); @include center-block(1rem);
@ -30,5 +30,43 @@
background: none; 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:608px) {
#onboard-welcome {
#cta-buttons {
position: relative !important;
float: left;
}
} }
} }

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

@ -7,6 +7,7 @@
background: -ms-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%); background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(17, 27, 73, 1) 100%);
color: #fff; color: #fff;
height: 100%;
.bar.bar-header { .bar.bar-header {
background: rgb(30, 49, 134); background: rgb(30, 49, 134);
color: #fff; color: #fff;
@ -20,6 +21,10 @@
} }
} }
ion-content { ion-content {
height: 100%;
.scroll{
height: 100%;
}
color: #fff; color: #fff;
h2, h3{color:#fff;} h2, h3{color:#fff;}
h2 { h2 {