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

improved slider card design

This commit is contained in:
Jamal Jackson 2016-10-12 13:54:02 -04:00
parent a64294f0d9
commit 337b56258e
2 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/sass/views/includes/wallets.scss
View File

@ -1,15 +1,12 @@
.wallets { .wallets {
.slides { .slides {
.swiper-container { .swiper-container {
width: 75% !important; width: 85% !important;
overflow: visible; overflow: visible;
} }
.card { .card {
padding: .7rem;
padding-left: .25rem;
padding-right: .25rem;
border-radius: .25rem;
max-width: 350px; max-width: 350px;
box-shadow:$subtle-box-shadow;
@media (min-width: 500px) { @media (min-width: 500px) {
& { & {
width: 350px; width: 350px;
@ -17,6 +14,22 @@
margin: 1.5rem auto 0; margin: 1.5rem auto 0;
} }
} }
.item{
padding:.7rem 1.5rem;
span{
clear:both;
width: 100%;
display: inline-block;
&.wallet-name{
margin-top:10px;
margin-bottom:5px;
font-size:14px;
}
}
.big-icon-svg{
& > .bg{padding:.3rem;width: 50px;height:50px;}
}
}
} }
.swiper-slide { .swiper-slide {
width: 100% !important; width: 100% !important;

7
www/views/includes/wallets.html
View File

@ -1,12 +1,15 @@
<div class="wallets" ng-show="wallets[0]"> <div class="wallets" ng-show="wallets[0]">
<ion-slides class="slides" slider="data.slider"> <ion-slides class="slides" slider="data.slider" options="sliderOptions">
<ion-slide-page ng-repeat="wallet in wallets track by $index"> <ion-slide-page ng-repeat="wallet in wallets track by $index">
<div class="card" ng-click="slider.slideTo($index)"> <div class="card" ng-click="slider.slideTo($index)">
<div class="item item-icon-left text-right"> <div class="item item-icon-left text-right">
<i class="icon big-icon-svg"> <i class="icon big-icon-svg">
<img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/> <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
</i> </i>
<span>{{wallet.name || wallet.id}}</span> <span class="wallet-name">{{wallet.name || wallet.id}}</span>
<span class="item-note m10l">
{{wallet.status.availableBalanceStr}}
</span>
<span class="item-note m10l" ng-show="wallet.n > 1 && wallet.isComplete()"> <span class="item-note m10l" ng-show="wallet.n > 1 && wallet.isComplete()">
{{wallet.m}}-of-{{wallet.n}} {{wallet.m}}-of-{{wallet.n}}
</span> </span>