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

set independent pane element behind disclaimer view to hold background, refined transform size on shrink

Browse source
This commit is contained in:
Jamal Jackson 2016-11-16 13:28:59 -05:00
commit 98a4c9a501
3 changed files with 43 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/sass/views/onboarding/onboard-disclaimer.scss
View file

@ -1,9 +1,9 @@
#onboarding-disclaimer { #onboarding-disclaimer {
color: #fff; color: #fff;
height: 100%; height: 100%;
transition: transform 2s ease; transition: transform 1s ease;
&.shrink{ &.shrink{
transform: scale(.5); transform: scale(.98);
} }
&-container { &-container {
max-width: 450px; max-width: 450px;
@ -90,9 +90,6 @@
bottom: 0; bottom: 0;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
&.header-present{
bottom: 38px;
}
&-content{ &-content{
max-width: 450px; max-width: 450px;
@include center-block(); @include center-block();
@ -119,6 +116,11 @@
.checkbox input:before, .checkbox input:before,
.checkbox .checkbox-icon:before{ .checkbox .checkbox-icon:before{
border-color:$soft-blue; border-color:$soft-blue;
background:#fff;
}
.checkbox input:after,
.checkbox .checkbox-icon:after{
border-color:#13e5b6;
} }
.checkbox input:checked:before, .checkbox input:checked:before,
.checkbox input:checked + .checkbox-icon:before { .checkbox input:checked + .checkbox-icon:before {

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

@ -53,6 +53,10 @@
width: 100%; width: 100%;
} }
.pane-onboarding{
background: #0B1E4F;
}
@import "terms-of-use"; @import "terms-of-use";
@import "onboard-welcome"; @import "onboard-welcome";
@import "onboard-tour"; @import "onboard-tour";

62
www/views/onboarding/disclaimer.html
View file

@ -1,32 +1,34 @@
<ion-view id="onboarding-disclaimer" class="onboarding" ng-class="{'shrink': shrinkView}" ng-init=init()> <ion-pane class="pane-onboarding">
<ion-nav-bar class="bar-stable" ng-if="backedUp == 'false'"> <ion-view id="onboarding-disclaimer" class="onboarding" ng-class="{'shrink': shrinkView}" ng-init=init()>
<ion-nav-title></ion-nav-title> <ion-nav-bar class="bar-stable" ng-if="backedUp == 'false'">
<ion-nav-buttons side="primary"> <ion-nav-title></ion-nav-title>
<button class="button back-button button-clear" ng-click="goBack()"> <ion-nav-buttons side="primary">
<i class="icon ion-ios-arrow-thin-left"></i> <button class="button back-button button-clear" ng-click="goBack()">
</button> <i class="icon ion-ios-arrow-thin-left"></i>
</ion-nav-buttons> </button>
</ion-nav-bar> </ion-nav-buttons>
<ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}"> </ion-nav-bar>
<div id="onboarding-disclaimer-container"> <ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
<div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review! {{shrinkView}}</div> <div id="onboarding-disclaimer-container">
<div ng-show="!resume" class="onboarding-topic" id="disclaimer-topic" translate>Almost done! Let's review.</div> <div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review! {{shrinkView}}</div>
<div class="onboarding-description" id="disclaimer-description" translate>Bitcoin is different &ndash; it cannot be safely held with a bank or web service.</div> <div ng-show="!resume" class="onboarding-topic" id="disclaimer-topic" translate>Almost done! Let's review.</div>
<ion-list> <div class="onboarding-description" id="disclaimer-description" translate>Bitcoin is different &ndash; it cannot be safely held with a bank or web service.</div>
<ion-checkbox ng-model="accepted.first"> <ion-list>
<span translate>I understand that my funds are held securely on this device, not by a company.</span> <ion-checkbox ng-model="accepted.first">
</ion-checkbox> <span translate>I understand that my funds are held securely on this device, not by a company.</span>
<ion-checkbox ng-model="accepted.second"> </ion-checkbox>
<span translate>I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase.</span> <ion-checkbox ng-model="accepted.second">
</ion-checkbox> <span translate>I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase.</span>
</ion-list> </ion-checkbox>
</ion-list>
</div>
</ion-content>
</ion-view>
<div id="agree-to-terms" ng-if="accepted.first && accepted.second" ng-class="{'header-present': backedUp == 'false'}">
<div id="agree-to-terms-content" class="center-block">
<ion-checkbox ng-model="terms.accepted"></ion-checkbox>
<p translate>I have read, understood, and agree to the <a ng-click="openTerms()" translate>Terms of Use</a>.</p>
<button ng-disabled="!accepted.first || !accepted.second || !terms.accepted" class="button button-block button-positive" ng-click="confirm()" translate>Confirm &amp; Finish</button>
</div> </div>
</ion-content>
</ion-view>
<div id="agree-to-terms" ng-if="accepted.first && accepted.second" ng-class="{'header-present': backedUp == 'false'}">
<div id="agree-to-terms-content" class="center-block">
<ion-checkbox ng-model="terms.accepted.third"></ion-checkbox>
<p translate>I have read, understood, and agree to the <a ng-click="openTerms()" translate>Terms of Use</a>.</p>
<button ng-disabled="!accepted.first || !accepted.second || !terms.accept3" class="button button-block button-positive" ng-click="confirm()" translate>Confirm &amp; Finish</button>
</div> </div>
</div> </ion-pane>