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

added styling and needed improvements to html organization on disclaimer view to create animation for terms display

Browse source
This commit is contained in:
Jamal Jackson 2016-11-21 10:39:38 -05:00
commit 795f816fbd
3 changed files with 54 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/js/controllers/onboarding/disclaimer.js
View file

@ -34,7 +34,7 @@ angular.module('copayApp.controllers').controller('disclaimerController', functi
};
$scope.openTerms = function() {
$scope.shrinkView = true;
$scope.shrinkView = !$scope.shrinkView;
}
$scope.goBack = function() {

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

@ -1,9 +1,9 @@
#onboarding-disclaimer {
color: #fff;
height: 100%;
transition: transform 1s ease;
transition: transform 2.5s ease;
&.shrink{
transform: scale(.98);
transform: scale(.8);
}
&-container {
max-width: 450px;
@ -83,6 +83,41 @@
left:0;
}
}
#terms-of-use{
position: absolute;
top: 100%;
left: 0;
z-index: 10;
transition: top 1s ease;
transition-delay: .25s;
width: 100%;
overflow: scroll;
background: #fff;
height: 100%;
ion-nav-bar{
position: fixed;
background: #fff;
width: 100%;
z-index: 15;
}
.has-header{
width:100%;
background:#fff;
overflow-y:scroll;
position:relative;
#terms{
max-width:400px;
padding-top:.5rem;
position: relative;
margin: 0 auto;
padding-bottom: 165px;
width:90%;
}
}
&.slideUp{
top:0;
}
}
#agree-to-terms {
background: #fff;
padding:1rem;
@ -90,6 +125,7 @@
bottom: 0;
width: 100%;
z-index: 10;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
&-content{
max-width: 450px;
@include center-block();

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

@ -10,7 +10,7 @@
</ion-nav-bar>
<ion-content scroll="false" ng-class="{'has-header': backedUp == 'false'}">
<div id="onboarding-disclaimer-container">
<div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review! {{shrinkView}}</div>
<div ng-show="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review!</div>
<div ng-show="!resume" class="onboarding-topic" id="disclaimer-topic" translate>Almost done! Let's review.</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>
<ion-list>
@ -24,6 +24,20 @@
</div>
</ion-content>
</ion-view>
<div id="terms-of-use" ng-class="{'slideUp': shrinkView}">
<ion-nav-bar class="bar-ligt">
<ion-nav-title>{{'Terms of Use' | translate}}</ion-nav-title>
<ion-nav-buttons side="primary">
<button class="button no-border" ng-click="openTerms()">
<i class="ion-ios-arrow-down"></i>
</button>
</ion-nav-buttons>
</ion-nav-bar>
<div class="has-header">
<div ng-include="'views/includes/terms.html'" direction="y"></div>
</div>
</div>
</div>
<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>