scrollable contact view + better quality contact icons

This commit is contained in:
Sebastiaan Pasma 2018-07-11 14:36:22 +02:00
commit 41a2a3c971
No known key found for this signature in database
GPG key ID: 9A2B0C8B95A1D26F
2 changed files with 22 additions and 10 deletions

View file

@ -1,5 +1,18 @@
#tab-send {
@extend .deflash-blue;
&-header{
position: absolute;
height: 300px;
width: 100%;
}
&-contacts {
position: absolute;
top: 300px;
height: calc(100vh - 300px - 50px - 44px);
overflow: scroll;
}
.input {
width: 100%;
input {
@ -31,10 +44,9 @@
background: #DEDEDE;
bottom: 0;
content: '';
margin: 20px 6px 0px;
margin: 10px 6px 0px;
}
margin: 18px 0 0;
padding: 9px;
padding: 18px 9px 9px 9px;
background-color: #f2f2f2;
border-radius: 3px;
border: none;
@ -171,8 +183,6 @@
.list {
.item {
font-weight: 600;
padding-top: 12px;
padding-bottom: 12px;
p {
font-weight: normal;
}
@ -181,8 +191,8 @@
}
color: #444;
//border-top: none;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-top: 0.6rem;
padding-bottom: 0.6rem;;
.big-icon-svg {
left: 5px;
& > .bg {
@ -230,6 +240,8 @@
box-shadow: 0px 2px 1px 0 #C1C1C1;
.gravatar {
border-radius: 30px;
height: 40px;
width: 40px;
}
}

View file

@ -3,7 +3,7 @@
<ion-nav-title>{{'Send' | translate}}</ion-nav-title>
</ion-nav-bar>
<ion-content>
<div ng-if="hasFunds">
<div id="tab-send-header" ng-if="hasFunds">
<div class="send-wrapper item">
<div class="row">
<div class="input" ng-class="{'focus': searchFocus}">
@ -86,7 +86,7 @@
</div>
</div>
</div>
<div class="row">
<div id="tab-send-contacts" class="row">
<div class="col">
<div class="card contacts" ng-if="hasContacts && hasWallets && hasFunds">
@ -101,7 +101,7 @@
<a class="item item-icon-left item-icon-right" ng-repeat="item in list"
ng-if="!item.isWallet && item.recipientType != 'wallet'" ng-click="goToAmount(item)">
<i class="icon big-icon-svg">
<gravatar class="send-gravatar" name="{{item.name}}" width="40" email="{{item.email}}"></gravatar>
<gravatar class="send-gravatar" name="{{item.name}}" width="120" email="{{item.email}}"></gravatar>
</i>
{{item.name}}
<p>