mirror of https://github.com/BTCPrivate/copay.git
improved slider card design
This commit is contained in:
parent
a64294f0d9
commit
337b56258e
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue