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

fix(share): correct layout and design of share view

This commit is contained in:
Jason Dreyzehner 2016-11-16 13:54:38 -05:00
parent 7a597bf8e2
commit 2a30ab0fee
2 changed files with 34 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/sass/views/feedback/complete.scss
View File

@ -1,13 +1,21 @@
#complete {
background-color: #ffffff;
.item-heading {
border-style: none;
margin-top: 10px;
a {
color: $dark-gray;
}
i {
font-size: 40px;
.close-button {
color: $dark-gray;
position: absolute;
top: 10px;
right: 15px;
font-size: 36px;
}
.complete-layout {
display: flex;
flex-direction: column;
height: 100%;
&__expand {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
}
}
.title {
@ -18,7 +26,7 @@
text-align: center;
}
.subtitle {
padding: 10px 30px 20px 40px;
padding: 10px 30px 20px;
text-align: center;
color: $mid-gray;
}
@ -29,9 +37,7 @@
}
.socialsharing-icon {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
width: 60px;
}
.addressbook-icon-svg {
display: inline-block;
@ -39,21 +45,14 @@
height: 50px;
}
.share-buttons {
bottom: 0;
width: 100%;
position: absolute;
padding: 20px;
padding: 50px 10px;
background-color: $subtle-gray;
.row {
margin: 20px 0px 20px;
span {
margin-top: 15px;
display: block;
}
div {
text-align: center;
width: 100%;
}
}
text-align: center;
}
.share-buttons__action {
display: inline-block;
color: #667;
font-size: .9rem;
width: 90px;
}
}

18
www/views/feedback/complete.html
View File

@ -1,8 +1,6 @@
<ion-view id="complete" hide-tabs>
<ion-content scroll="false">
<div class="padding oh">
<a class="right size-36" ng-click="close()"><i class="icon ion-ios-close-empty close-home-tip"></i></a>
</div>
<a class="close-button" ng-click="close()"><i class="icon ion-ios-close-empty close-home-tip"></i></a>
<div ng-show="skipped && isCordova">
<div ng-show="score > 3">
<div class="title" translate>Invite friends to BitPay!</div>
@ -11,7 +9,7 @@
<img src="img/address-book-add.svg"/>
</i>
</div>
<div class="text-center">
<div class="subtitle">
<span translate>Share the love by inviting your friends.</span>
</div>
</div>
@ -53,37 +51,37 @@
</div>
<div class="share-buttons" ng-if="isCordova && score > 3">
<div class="ng-hide" ng-show="socialsharing" ng-if="score >= 4">
<div class="left text-center m10r ng-hide" ng-show="facebook" ng-click="shareFacebook()">
<div class="share-buttons__action ng-hide" ng-show="facebook" ng-click="shareFacebook()">
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-facebook.svg"/>
</i>
<div>Facebook</div>
</div>
<div class="left text-center m10r ng-hide" ng-show="twitter" ng-click="shareTwitter()">
<div class="share-buttons__action ng-hide" ng-show="twitter" ng-click="shareTwitter()">
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-twitter.svg"/>
</i>
<div>Twitter</div>
</div>
<div class="left text-center m10r ng-hide" ng-show="googleplus" ng-click="shareGooglePlus()">
<div class="share-buttons__action ng-hide" ng-show="googleplus" ng-click="shareGooglePlus()">
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-googleplus.svg"/>
</i>
<div>Google+</div>
</div>
<div class="left text-center m10r ng-hide" ng-show="email" ng-click="shareEmail()">
<div class="share-buttons__action ng-hide" ng-show="email" ng-click="shareEmail()">
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-email.svg"/>
</i>
<div>Email</div>
</div>
<div class="left text-center m10r ng-hide" ng-show="whatsapp" ng-click="shareWhatsapp()">
<div class="share-buttons__action ng-hide" ng-show="whatsapp" ng-click="shareWhatsapp()">
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-whatsapp.svg"/>
</i>
<div>Whatsapp</div>
</div>
<div class="left text-center m10r" ng-click="shareMessage()">
<div class="share-buttons__action" ng-click="shareMessage()">
<i class="icon socialsharing-icon">
<img src="img/social-icons/ico-social-message.svg"/>
</i>