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

feat(share): add brief entry animation for the sharing view

Browse source
This commit is contained in:
Jason Dreyzehner 2016-11-17 11:13:41 -05:00
commit d53f19bbbf
4 changed files with 19 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/sass/ionic.scss
View file

@ -6,10 +6,6 @@
/* Ionic Overrides and Workarounds */ /* Ionic Overrides and Workarounds */
// Please include a description of the problem solved by the workaround. // Please include a description of the problem solved by the workaround.
// class to dynamically hide the ion-nav-bar for v1 Amazon flow
// Fix hide-nav-bar (true|false)
//ion-nav-bar.hide { display: block !important; }
// the ion tabs element never needs it's own background (backgrounds are // the ion tabs element never needs it's own background (backgrounds are
// rendered by the tabs), and the default background would cover the scanner // rendered by the tabs), and the default background would cover the scanner
ion-tabs.ion-tabs-transparent { ion-tabs.ion-tabs-transparent {

21
src/sass/views/feedback/complete.scss
View file

@ -64,13 +64,13 @@
padding: 50px 10px 30px; padding: 50px 10px 30px;
background-color: $subtle-gray; background-color: $subtle-gray;
text-align: center; text-align: center;
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1) .2s, opacity .5s ease-in .2s;
transform: translateY(100%); transform: translateY(100%);
opacity: 0; opacity: 0;
&.slide-up { animation-name: slideUpFadeIn;
transform: translateY(0); animation-duration: .3s;
opacity: 1; animation-fill-mode: forwards;
} animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
animation-delay: .2s;
} }
.share-buttons__action { .share-buttons__action {
display: inline-block; display: inline-block;
@ -81,3 +81,14 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
} }
@keyframes slideUpFadeIn {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

4
src/sass/views/feedback/rateApp.scss
View file

@ -28,11 +28,11 @@
padding: 10px 30px 20px 40px; padding: 10px 30px 20px 40px;
color: #667; color: #667;
} }
.buttons { .rate-buttons {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
position: absolute; position: absolute;
background-color: $subtle-gray; background-color: $subtle-gray;
padding: 50px 0; padding: 30px 0 15px;
} }
} }

2
www/views/feedback/rateApp.html
View file

@ -9,7 +9,7 @@
<div class="subtitle"> <div class="subtitle">
<span class="text-bold" translate>Would you be willing to rate BitPay in the app store?</span> <span class="text-bold" translate>Would you be willing to rate BitPay in the app store?</span>
</div> </div>
<div class="buttons"> <div class="rate-buttons">
<button type="submit" class="button button-standard button-primary" ng-click="goAppStore()"> <button type="submit" class="button button-standard button-primary" ng-click="goAppStore()">
<span translate>Rate on the app store</span> <span translate>Rate on the app store</span>
</button> </button>