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

View file

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